@extends('layouts.base')
@section('content')
    <link rel="stylesheet" href="{{ url('css/fontawesome.css') }}">
    <style>
        body {
            background-color: #F7FAFC;
            font-family: 'Source Sans Pro';
        }

        .cart-obal {
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 6px 6px rgb(0 0 0 / 4%), 0 0 42px rgb(0 0 0 / 4%);
            padding: 50px;
        }

        .cart-obal h2 {
            text-align: left;
            font-weight: 700;
            font-size: 38px;
            color: #322f3b;
            margin-bottom: 0;
        }

        .cart-obal h3 {
            font-weight: 600;
            font-size: 20px;
            margin-bottom: 20px;
            color: #000;
        }


        hr {
            outline: 0;
            height: 1px;
            background: #eaeaea;
            border-top: 0px solid #eaeaea;
            opacity: 1 !important;
            margin: 30px 0;
        }

        .progress {
            background-color: #efefef;
            height: 6px;
        }

        .bar {
            background: #efefef;
        }

        .value {
            height: 6px;
            background: #fc591e;
        }

        .form-control {
            font-family: 'Source Sans Pro', sans-serif;
            display: block;
            height: 56px;
            width: 100%;
            padding: 15px 16px 16px 16px;
            line-height: 24px;
            outline: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            font-size: 18px !important;
            text-align: left;
            font-weight: 500;
            color: #000 !important;
            box-sizing: border-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }

        .navbar-nav {
            font-family: 'Euclid Circular A';
        }

        .menu-item {
            font-family: 'Euclid Circular A';
        }

        .form-control.active,
        .form-control:focus {
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .input-icon {
            z-index: 100;
            pointer-events: none;
            margin: 0;
            position: absolute;
            top: 18px;
            left: 17px;
            width: 20px;
        }

        .form-group {
            position: relative;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        ::placeholder {
            color: #757575 !important;
            font-size: 18px !important;
            opacity: 1 !important;
        }

        .selector {
            position: relative;
            font-size: 18px;
            color: #000;
            font-weight: 500;
        }

        .selector strong {
            font-weight: 600;
        }

        .selector>button.form-control {
            position: relative;
            margin-bottom: 6px;
            padding-right: 56px;
            background-color: white;
        }


        .selector .alt:last-child {
            margin-left: 0;
        }

        .selector .alt {
            margin-left: 10px;
            float: right;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            text-align: right;
        }

        .selector>button.form-control:after {
            content: "";
            position: absolute;
            top: 25px;
            right: 18px;
            width: 0;
            height: 0;
            border-color: #464b4d transparent transparent;
            border-style: solid;
            border-width: 6px 5px 0;
        }

        .selector .dropdown-stylized {
            position: absolute;
            margin: 0;
            top: 5px !important;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 100%;
            left: 0;
            right: 0;
        }

        .dropdown-stylized a:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .dropdown-stylized a {
            position: relative;
            padding: 12px 22px;
            box-sizing: border-box;
            display: block;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            background-color: #fff;
            transition: background-color .15s ease-in-out;
        }

        .dropdown-stylized a:hover {
            background-color: #e9e9e9;
        }

        .dropdown-stylized a:after {
            content: "";
            display: block;
            position: absolute;
            height: 1px;
            background: #dfdfdf;
            bottom: 0;
            left: 0;
            right: 0;
        }

        @media (min-width: 768px) {
            .animate {
                animation-duration: 0.3s;
                -webkit-animation-duration: 0.3s;
                animation-fill-mode: both;
                -webkit-animation-fill-mode: both;
            }
        }

        @keyframes slideIn {
            0% {
                transform: translateY(1rem);
                opacity: 0;
            }

            100% {
                transform: translateY(0rem);
                opacity: 1;
            }

            0% {
                transform: translateY(1rem);
                opacity: 0;
            }
        }

        @-webkit-keyframes slideIn {
            0% {
                -webkit-transform: transform;
                -webkit-opacity: 0;
            }

            100% {
                -webkit-transform: translateY(0);
                -webkit-opacity: 1;
            }

            0% {
                -webkit-transform: translateY(1rem);
                -webkit-opacity: 0;
            }
        }

        .slideIn {
            -webkit-animation-name: slideIn;
            animation-name: slideIn;
        }

        .checkbox label:before {
            border-radius: 6px;
            border: 1px solid #c4c4c4 !important;
            font-size: 15px;
            line-height: 6px;
            padding-left: 6px;
            color: white;
            margin-right: 8px;
            transition:0.1s !important
        }

        .checkbox input:checked+label:before {
            background: #ff603c;
        }

        .checkbox input:checked+label:before,
        .radio input:checked+label:before {
            text-align: center;
            border-color: #ff603c !important;
        }

        .cart-block {
            padding-right: 30px;
        }

        @media (max-width: 768px) {


            .continue {
                font-size: 15px !important;
            }

            .mob-pad {
                padding-top: 40px !important;
            }

            .cart-obal {
                padding: 50px 35px;
            }

            .cart-obal h2 {
                font-size: 30px;
            }

            .cart-block {
                padding-right: calc(var(--bs-gutter-x) / 2);
            }
        }


        .checkout-image {
            height: 56px;
            width: 56px;
            border-radius: 28px;
            margin-right: 20px;
        }

        @media (max-width: 998px) {
            .order-1 {
                margin-bottom: 25px;
            }

            .cart-block {
                padding-right: calc(var(--bs-gutter-x) / 2);
            }

            .cart-resp {
                padding: 7px 30px 1px 30px !important;
                position: relative;
            }

            .upsell-btn {
                font-size: 15px !important;
            }

            .checkout-image {
                width: 48px;
                height: 48px;
            }

            .mob-icon {
                margin-left: 12px;
                margin-top: 3px;
            }

            .total-price {
                margin-bottom: 0px;
            }

            .coupon-section {
                margin-bottom: 40px;
            }


        }

        .discount-section {
            margin-top: 10px;
            margin-bottom: 0px;
            display: none;
        }

        .agree {
            text-align: center;
            font-size: 15px;
            line-height: 18px;
            font-weight: 500 !important;
            color: #535353;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }

        .checkout-name {
            font-weight: 600;
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 7px;
            margin-top: 2px;
            color: #322f3b;
        }

        .checkout-change {
            font-weight: 600;
            font-size: 17px;
            margin-left: 2px;
            line-height: 17px;

        }

        .checkout-change a {
            color: #656565;
        }

        .r-item {
            line-height: 24px;
            margin-bottom: 27px;
        }

        .checkout-icon {
            color: #fc591e;
            margin-right: 8px;
            line-height: 24px;
            height: 24px;
            width: 24px;
            font-size: 18px;
            text-align: center;
            font-weight: 500;
        }

        .checkout-amount {
            flex-grow: 1;
            color: #322f3b;
            font-size: 18px;
            font-weight: 500;
        }

        .checkout-amount strong {
            font-weight: 500;
        }

        .checkout-price {
            font-weight: 600;
            color: #322f3b;
            font-size: 18px;
            margin-top: 2px;
        }

        .upsell {
            background-color: #F0FCF5;
            padding: 24px 25px;
            border-radius: 15px;
            margin: 0 -25px 27px;
        }

        .btn-green {
            background-color: rgb(0, 201, 90);
            color: white;
            font-weight: 600;
            font-size: 17px;
            padding: 9px 35px;
        }

        .btn-green:hover {
            color: white;
            box-shadow: -1px 3px 10px 0 rgb(0 201 90 / 40%) !important;
        }

        .strike {
            display: inline-block;
            text-decoration: line-through;
            opacity: .6;
            margin-left: 6px;
        }

        .total-price {
            font-size: 22px;
            font-weight: 600;
            color: #322f3b;
        }

        .upsell-added {
            display: none;
            margin-top: -10px;
        }

        .mobile-down {
            font-size: 20px;
            height: 48px;
            width: 48px;
            background: #fff;
            border-radius: 24px;
            text-align: center;
            bottom: -6px;
            left: 50%;
            margin-left: -24px;
            z-index: 80;
            position: absolute;
            color: #5e5e5e;
        }

        .mobile-down .icon {
            text-align: center;
            vertical-align: top;
            display: inline-block;
            position: relative;
            left: 5px;
            top: 16px;
        }

        .rotate {
            transform: rotate(180deg);
            transition: .2s;
        }

        .rotate-reset {
            transform: rotate(0deg);
            transition: .2s;
        }

        .show-coupon {
            cursor: pointer;
        }

        .show-coupon:hover {
            text-decoration: underline;
        }
    </style>
    <div class="progress">
        <div class="bar"></div>
        <div class="value" style="width:75%"></div>
    </div>
    <div class="container mob-pad" style="padding-top:90px; padding-bottom:180px;">
        <div class="row">
            <div class="col-lg-7 cart-block order-2 order-lg-1">
                <form action="/tiktok/checkout" method="POST">
                    @csrf
                    <div class="cart-obal">

                        <input type="hidden" id="coupon_text" name="coupon_text" value="">
                        <input type="hidden" id="pack_id" value="{{ session()->get('pack')->id }}">
                        <input type="hidden" id="oid" value="{{ session()->get('order_id') }}">
                        <input type="hidden" id="cid" value="{{ session()->get('customer_id') }}">
                        <h2>{{__('Checkout')}}</h2>
                        <hr>
                        <h3>
                            {{ __('Billing details') }}
                        </h3>
                        <div class="row" style="">
                            <div class="col-md-12 mb-3">
                                <input type="text" class="form-control" id="username" name="name" required
                                    placeholder="{{ __('Full Name') }}" aria-label="Full Name" value=""
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <input type="hidden" id="upsell_status" name="upsell_status" value="0">
                        <div class="col-12 mb-3">
                            <input type="email" class="form-control" id="emailiko" name="email" required
                                aria-label="Email" value="{{ session()->get('email') }}" aria-describedby="basic-addon1">
                        </div>
                        <div class="col-12 mb-3 relative">
                        <select class="form-control" style="background-color:white;" name="country">
                        <option value="AF">Afghanistan</option>
    <option value="AX">Åland Islands</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
    <option value="BS">Bahamas</option>
    <option value="BH">Bahrain</option>
    <option value="BD">Bangladesh</option>
    <option value="BB">Barbados</option>
    <option value="BY">Belarus</option>
    <option value="BE">Belgium</option>
    <option value="BZ">Belize</option>
    <option value="BJ">Benin</option>
    <option value="BM">Bermuda</option>
    <option value="BT">Bhutan</option>
    <option value="BO">Bolivia, Plurinational State of</option>
    <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
    <option value="BA">Bosnia and Herzegovina</option>
    <option value="BW">Botswana</option>
    <option value="BV">Bouvet Island</option>
    <option value="BR">Brazil</option>
    <option value="IO">British Indian Ocean Territory</option>
    <option value="BN">Brunei Darussalam</option>
    <option value="BG">Bulgaria</option>
    <option value="BF">Burkina Faso</option>
    <option value="BI">Burundi</option>
    <option value="KH">Cambodia</option>
    <option value="CM">Cameroon</option>
    <option value="CA">Canada</option>
    <option value="CV">Cape Verde</option>
    <option value="KY">Cayman Islands</option>
    <option value="CF">Central African Republic</option>
    <option value="TD">Chad</option>
    <option value="CL">Chile</option>
    <option value="CN">China</option>
    <option value="CX">Christmas Island</option>
    <option value="CC">Cocos (Keeling) Islands</option>
    <option value="CO">Colombia</option>
    <option value="KM">Comoros</option>
    <option value="CG">Congo</option>
    <option value="CD">Congo, the Democratic Republic of the</option>
    <option value="CK">Cook Islands</option>
    <option value="CR">Costa Rica</option>
    <option value="CI">Côte d'Ivoire</option>
    <option value="HR">Croatia</option>
    <option value="CU">Cuba</option>
    <option value="CW">Curaçao</option>
    <option value="CY">Cyprus</option>
    <option value="CZ">Czech Republic</option>
    <option value="DK">Denmark</option>
    <option value="DJ">Djibouti</option>
    <option value="DM">Dominica</option>
    <option value="DO">Dominican Republic</option>
    <option value="EC">Ecuador</option>
    <option value="EG">Egypt</option>
    <option value="SV">El Salvador</option>
    <option value="GQ">Equatorial Guinea</option>
    <option value="ER">Eritrea</option>
    <option value="EE">Estonia</option>
    <option value="ET">Ethiopia</option>
    <option value="FK">Falkland Islands (Malvinas)</option>
    <option value="FO">Faroe Islands</option>
    <option value="FJ">Fiji</option>
    <option value="FI">Finland</option>
    <option value="FR">France</option>
    <option value="GF">French Guiana</option>
    <option value="PF">French Polynesia</option>
    <option value="TF">French Southern Territories</option>
    <option value="GA">Gabon</option>
    <option value="GM">Gambia</option>
    <option value="GE">Georgia</option>
    <option value="DE">Germany</option>
    <option value="GH">Ghana</option>
    <option value="GI">Gibraltar</option>
    <option value="GR">Greece</option>
    <option value="GL">Greenland</option>
    <option value="GD">Grenada</option>
    <option value="GP">Guadeloupe</option>
    <option value="GU">Guam</option>
    <option value="GT">Guatemala</option>
    <option value="GG">Guernsey</option>
    <option value="GN">Guinea</option>
    <option value="GW">Guinea-Bissau</option>
    <option value="GY">Guyana</option>
    <option value="HT">Haiti</option>
    <option value="HM">Heard Island and McDonald Islands</option>
    <option value="VA">Holy See (Vatican City State)</option>
    <option value="HN">Honduras</option>
    <option value="HK">Hong Kong</option>
    <option value="HU">Hungary</option>
    <option value="IS">Iceland</option>
    <option value="IN">India</option>
    <option value="ID">Indonesia</option>
    <option value="IR">Iran, Islamic Republic of</option>
    <option value="IQ">Iraq</option>
    <option value="IE">Ireland</option>
    <option value="IM">Isle of Man</option>
    <option value="IL">Israel</option>
    <option value="IT">Italy</option>
    <option value="JM">Jamaica</option>
    <option value="JP">Japan</option>
    <option value="JE">Jersey</option>
    <option value="JO">Jordan</option>
    <option value="KZ">Kazakhstan</option>
    <option value="KE">Kenya</option>
    <option value="KI">Kiribati</option>
    <option value="KP">Korea, Democratic People's Republic of</option>
    <option value="KR">Korea, Republic of</option>
    <option value="KW">Kuwait</option>
    <option value="KG">Kyrgyzstan</option>
    <option value="LA">Lao People's Democratic Republic</option>
    <option value="LV">Latvia</option>
    <option value="LB">Lebanon</option>
    <option value="LS">Lesotho</option>
    <option value="LR">Liberia</option>
    <option value="LY">Libya</option>
    <option value="LI">Liechtenstein</option>
    <option value="LT">Lithuania</option>
    <option value="LU">Luxembourg</option>
    <option value="MO">Macao</option>
    <option value="MK">Macedonia, the former Yugoslav Republic of</option>
    <option value="MG">Madagascar</option>
    <option value="MW">Malawi</option>
    <option value="MY">Malaysia</option>
    <option value="MV">Maldives</option>
    <option value="ML">Mali</option>
    <option value="MT">Malta</option>
    <option value="MH">Marshall Islands</option>
    <option value="MQ">Martinique</option>
    <option value="MR">Mauritania</option>
    <option value="MU">Mauritius</option>
    <option value="YT">Mayotte</option>
    <option value="MX">Mexico</option>
    <option value="FM">Micronesia, Federated States of</option>
    <option value="MD">Moldova, Republic of</option>
    <option value="MC">Monaco</option>
    <option value="MN">Mongolia</option>
    <option value="ME">Montenegro</option>
    <option value="MS">Montserrat</option>
    <option value="MA">Morocco</option>
    <option value="MZ">Mozambique</option>
    <option value="MM">Myanmar</option>
    <option value="NA">Namibia</option>
    <option value="NR">Nauru</option>
    <option value="NP">Nepal</option>
    <option value="NL">Netherlands</option>
    <option value="NC">New Caledonia</option>
    <option value="NZ">New Zealand</option>
    <option value="NI">Nicaragua</option>
    <option value="NE">Niger</option>
    <option value="NG">Nigeria</option>
    <option value="NU">Niue</option>
    <option value="NF">Norfolk Island</option>
    <option value="MP">Northern Mariana Islands</option>
    <option value="NO">Norway</option>
    <option value="OM">Oman</option>
    <option value="PK">Pakistan</option>
    <option value="PW">Palau</option>
    <option value="PS">Palestinian Territory, Occupied</option>
    <option value="PA">Panama</option>
    <option value="PG">Papua New Guinea</option>
    <option value="PY">Paraguay</option>
    <option value="PE">Peru</option>
    <option value="PH">Philippines</option>
    <option value="PN">Pitcairn</option>
    <option value="PL" selected>Polska</option>
    <option value="PT">Portugal</option>
    <option value="PR">Puerto Rico</option>
    <option value="QA">Qatar</option>
    <option value="RE">Réunion</option>
    <option value="RO">Romania</option>
    <option value="RU">Russian Federation</option>
    <option value="RW">Rwanda</option>
    <option value="BL">Saint Barthélemy</option>
    <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
    <option value="KN">Saint Kitts and Nevis</option>
    <option value="LC">Saint Lucia</option>
    <option value="MF">Saint Martin (French part)</option>
    <option value="PM">Saint Pierre and Miquelon</option>
    <option value="VC">Saint Vincent and the Grenadines</option>
    <option value="WS">Samoa</option>
    <option value="SM">San Marino</option>
    <option value="ST">Sao Tome and Principe</option>
    <option value="SA">Saudi Arabia</option>
    <option value="SN">Senegal</option>
    <option value="RS">Serbia</option>
    <option value="SC">Seychelles</option>
    <option value="SL">Sierra Leone</option>
    <option value="SG">Singapore</option>
    <option value="SX">Sint Maarten (Dutch part)</option>
    <option value="SK">Slovakia</option>
    <option value="SI">Slovenia</option>
    <option value="SB">Solomon Islands</option>
    <option value="SO">Somalia</option>
    <option value="ZA">South Africa</option>
    <option value="GS">South Georgia and the South Sandwich Islands</option>
    <option value="SS">South Sudan</option>
    <option value="ES">Spain</option>
    <option value="LK">Sri Lanka</option>
    <option value="SD">Sudan</option>
    <option value="SR">Suriname</option>
    <option value="SJ">Svalbard and Jan Mayen</option>
    <option value="SZ">Swaziland</option>
    <option value="SE">Sweden</option>
    <option value="CH">Switzerland</option>
    <option value="SY">Syrian Arab Republic</option>
    <option value="TW">Taiwan, Province of China</option>
    <option value="TJ">Tajikistan</option>
    <option value="TZ">Tanzania, United Republic of</option>
    <option value="TH">Thailand</option>
    <option value="TL">Timor-Leste</option>
    <option value="TG">Togo</option>
    <option value="TK">Tokelau</option>
    <option value="TO">Tonga</option>
    <option value="TT">Trinidad and Tobago</option>
    <option value="TN">Tunisia</option>
    <option value="TR">Turkey</option>
    <option value="TM">Turkmenistan</option>
    <option value="TC">Turks and Caicos Islands</option>
    <option value="TV">Tuvalu</option>
    <option value="UG">Uganda</option>
    <option value="UA">Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
    <option value="UM">United States Minor Outlying Islands</option>
    <option value="UY">Uruguay</option>
    <option value="UZ">Uzbekistan</option>
    <option value="VU">Vanuatu</option>
    <option value="VE">Venezuela, Bolivarian Republic of</option>
    <option value="VN">Viet Nam</option>
    <option value="VG">Virgin Islands, British</option>
    <option value="VI">Virgin Islands, U.S.</option>
    <option value="WF">Wallis and Futuna</option>
    <option value="EH">Western Sahara</option>
    <option value="YE">Yemen</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
                        </select>
                        <i class="fa-solid fa-chevron-down" style="position:absolute; top:19px; right:20px;"></i>
    </div>
                        <div style="margin-top:1px; width:fit-content; margin-left:5px;">
                            <div class="mar-opt checkbox">
                                <input id="marCheck" type="checkbox" class="vat-check" name="mailopt">
                                <label for="marCheck" class="justify-content-center"
                                    style="font-weight:500 !important; color: #656565; font-size:15px !important; line-height:22px;"><span>Potrzebuję fakturę na NIP</span></label>
                            </div>
                        </div>
                        <div>
                            <div class="vat-input" style="margin-top:15px !important; display:none;">
                        <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="company" name="company"
                                    placeholder="{{ __('Nazwa firmy') }}" aria-label="Nazwa firmy"
                                    aria-describedby="basic-addon1">
                            </div>
                            <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="adresa" name="adresa"
                                    placeholder="Ulica" aria-label="adresa"
                                    aria-describedby="basic-addon1">
                            </div>
                            <div class="row">
                            <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="city" name="city"
                                    placeholder="Miasto" aria-label="Město"
                                    aria-describedby="basic-addon1">
                            </div>
                            <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="psc" name="psc"
                                    placeholder="Kod pocztowy" aria-label="PSČ"
                                    aria-describedby="basic-addon1">
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="ico" name="ico"
                                    placeholder="{{ __('NIP') }}" aria-label="IČO"
                                    aria-describedby="basic-addon1">
                            </div>
                            <div class="col-md-12" style="margin-bottom:5px;">
                                <input type="text" class="form-control" id="dic" name="dic"
                                    placeholder="{{ __('NIP UE (z przedrostkiem PL)') }}" aria-label="IČO"
                                    aria-describedby="basic-addon1">
                            </div>
                            </div>
                            <div style="margin-top:-2px; font-size:13px;">Jeśli w danych do faktury nie zostanie uwzględniony Państwa NIP UE (z przedrostkiem PL), będą Państwo traktowani jako osoby nieprowadzące działalności gospodarczej i nie będą mogli korzystać z korzyści wynikających z rejestracji dla celów VAT w Unii Europejskiej.</div>
                            
                            </div>
                        </div>
                        <div style="">
                            <hr><h3 style="mar">Metody płatności </h3>
                        </div>
                        <div style="text-align:center !important; width:100%; margin-top:25px; display:none;">
                            <div class="mar-opt checkbox">
                                <input id="marCheck" type="checkbox" name="mailopt">
                                <label for="marCheck" class="justify-content-center"
                                    style="font-weight:500 !important; color: #656565; font-size:17px !important; line-height:22px;"><span>Potřebuji
                                        fakturu na IČO</span></label>
                            </div>
                        </div>
                        <style>
                            .payment-methods {
                                list-style-type: none;
                                padding-left: 0px !important;
                            }

                            .payment-methods li {
                                margin-left: 0px !important;
                                margin-bottom: 10px;
                            }

                            .specific-payment {
                                padding: 17px 10px;
                                margin-bottom: 10px;
                                color: #322f3b;
                                border-radius: 10px;
                                border: 1px solid #EDEDED;
                                box-shadow: 0px 0px 10px 0px #f1f1f1;
                                cursor: pointer;
                                transition: 0.2s;
                            }

                            .activated {
                                box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
                                border-color: #fc654b !important;
                            }

                            input[type="radio"] {
                                appearance: none;
                                background-color: #fff;
                                margin: 0;
                                font: inherit;
                                color: #ff603c;
                                width: 1.25em;
                                height: 1.25em;
                                border: 0.15em solid #ff603c;
                                border-radius: 50%;
                                display: grid;
                                place-content: center;
                            }

                            input[type="radio"]::before {
                                content: "";
                                width: 0.75em;
                                height: 0.75em;
                                border-radius: 50%;
                                transform: scale(0);
                                transition: 120ms transform ease-in-out;
                                box-shadow: inset 1em 1em #ff603c;
                            }

                            input[type="radio"]:checked::before {
                                transform: scale(1);
                            }
                        </style>
                        <div style="">
                            <ul class="payment-methods">
                                <li class="clickable-payment">
                                    <label class="d-flex specific-payment activated"
                                        style="z-index:1000; position:relative; background-color:white;">
                                        <div
                                            style="padding-left:8px; padding-right:32px; vertical-align: middle; position:relative;">
                                            <input type="radio" name="radio" value="blik" class="form-check-input"
                                                checked
                                                style="position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" />
                                        </div>
                                        <div style="flex-grow:1;">
                                            <div style="font-size:17px; margin-bottom:4px;">Płatność BLIK
                                            </div>
                                            <div>
                                                <nav class="nav justify-content-start justify-content-md-start">
                                                    <div class="payments__inner">
                                                        <img src="/blik1.png" style="height:20px; border-radius:5px;" alt="">
                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </label>
                                    <div class="pay-info"
                                        style="position:relative; display:none; background-color:#F2F3F5; padding:12px 20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:16px; color:#535353; margin-top:-30px; padding-top:30px;z-index:1;">
                                        After clicking “Pay Now”, you will be redirected to Stripe to complete your purchase
                                        100% securely. </div>

                                </li>
                                <li class="clickable-payment" style="display:none;">
                                    <label class="d-flex specific-payment"
                                        style="z-index:1000; position:relative; background-color:white;">
                                        <div
                                            style="padding-left:8px; padding-right:32px; vertical-align: middle; position:relative;">
                                            <input type="radio" name="radio" value="przelewy" class="form-check-input"
                                                style="position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" />
                                        </div>
                                        <div style="flex-grow:1;">
                                            <div style="font-size:17px; margin-bottom:4px;">Płatności on-line
                                            </div>
                                            <div>
                                                <nav class="nav justify-content-start justify-content-md-start">
                                                    <div class="payments__inner">
                                                        <img src="/prcej.png" style="height:25px;" alt="">


                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </label>
                                    <div class="pay-info"
                                        style="position:relative; display:none; background-color:#F2F3F5; padding:12px 20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:16px; color:#535353; margin-top:-30px; padding-top:30px;z-index:1;">
                                        After clicking “Pay Now”, you will be redirected to Stripe to complete your purchase
                                        100% securely. </div>

                                </li>
                                <li class="clickable-payment">
                                    <label class="d-flex specific-payment"
                                        style="z-index:1000; position:relative; background-color:white;">
                                        <div
                                            style="padding-left:8px; padding-right:32px; vertical-align: middle; position:relative;">
                                            <input type="radio" name="radio" value="card" class="form-check-input"
                                                style="position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" />
                                        </div>
                                        <div style="flex-grow:1;">
                                            <div style="font-size:17px; margin-bottom:4px;">Płatność kartą
                                            </div>
                                            <div>
                                                <nav class="nav justify-content-start justify-content-md-start">
                                                    <div class="payments__inner">
                                                        <img src="/payments/visa2.svg" style="height:25px;" alt="">
                                                        <img src="/payments/master.svg" style="height:25px;" alt="">
                                                        <img src="/payments/apple.svg" style="height:25px;" alt="">
                                                        <img src="/payments/google.svg" style="height:25px;" alt="">


                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </label>
                                    <div class="pay-info"
                                        style="position:relative; display:none; background-color:#F2F3F5; padding:12px 20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:16px; color:#535353; margin-top:-30px; padding-top:30px;z-index:1;">
                                        After clicking “Pay Now”, you will be redirected to Stripe to complete your purchase
                                        100% securely. </div>

                                </li>

                                <li class="clickable-payment" style="">
                                    <label class="d-flex specific-payment"
                                        style="z-index:1000; position:relative; background-color:white;">
                                        <div
                                            style="padding-left:8px; padding-right:32px; vertical-align: middle; position:relative;">
                                            <input type="radio" name="radio" value="paypal" class="form-check-input"
                                                style="position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" />
                                        </div>
                                        <div style="flex-grow:1;">
                                            <div style="font-size:17px; margin-bottom:4px;">Płatność PayPal
                                            </div>
                                            <div>
                                                <nav class="nav justify-content-start justify-content-md-start">
                                                    <div class="payments__inner">
                                                        <img src="/paypal-logo.png" style="height:25px;"
                                                            alt="">

                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </label>
                                    <div class="pay-info"
                                        style="position:relative; display:none; background-color:#F2F3F5; padding:12px 20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:16px; color:#535353; margin-top:-30px; padding-top:30px;z-index:1;">
                                        After clicking “Pay Now”, you will be redirected to PayPal to complete your purchase
                                        100% securely. </div>

                                </li>

                                <li class="clickable-payment" style="display:none;">
                                    <label class="d-flex specific-payment"
                                        style="z-index:1000; position:relative; background-color:white;">
                                        <div
                                            style="padding-left:8px; padding-right:32px; vertical-align: middle; position:relative;">
                                            <input type="radio" name="radio" value="coinbase" class="form-check-input"
                                                style="position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" />
                                        </div>
                                        <div style="flex-grow:1;">
                                            <div style="font-size:17px; margin-bottom:4px;">Cryptocurrencies (Coinbase)
                                            </div>
                                            <div>
                                                <nav class="nav justify-content-start justify-content-md-start">
                                                    <div class="payments__inner">
                                                        <img src="/payments/bitcoin.webp" style="height:25px;"
                                                            alt="">
                                                        <img src="/payments/ethereum.webp" style="height:25px;"
                                                            alt="">
                                                        <img src="/payments/doge.png" style="height:25px;" alt="">
                                                        <img src="/payments/usdt.png"
                                                            style="height:25px; margin-left:1px;" alt="">

                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </label>
                                    <div class="pay-info"
                                        style="position:relative; display:none; background-color:#F2F3F5; padding:12px 20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:16px; color:#535353; margin-top:-30px; padding-top:30px;z-index:1;">
                                        You will get redirected to Coinbase for secure payment and when the process is
                                        completed you will be redirected back here to see your order confirmation. </div>

                                </li>
                            </ul>
                        </div>

                        <div style="text-align:center; margin-top:40px;">
                            <button class="btn btn-alternate btn-rounded continue" type="submit"
                                style="color:white; font-weight:600; font-size:17px; width:100%; padding-top:15px; padding-bottom:15px; text-transform: uppercase;">
                                <span class="spinner-border spinner-border-sm" style="display: none;" role="status"
                                    aria-hidden="true"></span>
                                Zapłać
                                <span class="final_price_col">{{ $pack->price }} zł</span>
                            </button>
                        </div>
                        <div class="agree" style="font-size:16px;">
                            <p style="margin-top:-5px;">{!!__("By clicking to Pay button, you're agreeing to our <a href='/terms' style='color:black;' target='_blank'>Terms of Service</a> and <a href='/gdpr' style='color:black;' target='_blank'>Privacy Policy.</a>")!!}</p>
                            <p>
                                Twoje dane osobowe będą użyte do przetworzenia twojego zamówienia, obsługi twojej wizyty na naszej stronie oraz dla innych celów o których mówi nasza <a href="/gdpr">polityka prywatności</a>.
                            </p>
                        </div>


                    </div>
                </form>
            </div>
            <div class="col-lg-4 order-1 order-lg-2">
                <div class="cart-obal cart-resp" style="padding:40px;">
                    <div class="mobile-down hide-block d-lg-none" style="display: none;">
                        <div class="icon">
                            <i class="fas fa-angle-down"></i>
                        </div>
                    </div>
                    <div class="mobile-summary d-lg-none">
                        <div class="r-item d-flex justify-content-start" style="margin-bottom:15px; margin-top:10px;">
                            <div class="checkout-icon " style="font-size:22px; margin-top:2px;"><i
                                    class="fas fa-bars"></i>
                            </div>
                            <div class="checkout-amount" style="margin-top:2px;"><strong
                                    style="font-weight:600 !important;">{{__('Order summary')}}</strong></div>
                            <div class="checkout-price final_price_col" style="font-weight:500;">{{ number_format($pack->price, 2, ",") }}zł
                            </div>
                            <div class="mob-icon mb-down rotate" style="font-size:20px;"><i
                                    class="fas fa-angle-down"></i>
                            </div>
                        </div>
                        <hr style="margin-top:0px;" class="hide-block">
                    </div>
                    <div class="hide-block">
                        <div class="d-flex">
                            <img class="checkout-image" src="{{ $cf . '/' . session()->get('photo') }}" alt="">
                            <div style="flex-grow:1;">
                                <div class="checkout-name">
                                    {{ '@' . session()->get('username') }}
                                </div>
                                <div class="checkout-change">
                                    <a href="/tiktok-followers/cart">{{__('Change username')}}</a>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="r-item d-flex justify-content-start">
                            <div class="checkout-icon"><img src="{{ url('img/user3.svg') }}"
                                    style="width:20px; height:20px;" alt="">
                            </div>
                            <div class="checkout-amount" style="margin-top:2px;"><strong>{{ $pack->amount }}</strong>
                                followers</div>
                            <div class="checkout-price">{{ number_format($pack->price, 2, ",") }}zł</div>
                        </div>
                        <div class="r-item justify-content-start upsell-added">
                            <div class="checkout-icon"><img src="{{ url('img/user4.svg') }}"
                                    style="width:20px; height:20px;" alt="">
                            </div>
                            <div class="checkout-amount" style="margin-top:2px;">
                                <strong>{{ $pack->upsell_amount }}</strong>
                                followers <span style="cursor:pointer;" class="upsell-cancel"><i
                                        class="fas fa-times"></i></span>
                            </div>
                            <div class="checkout-price">{{ number_format($pack->upsell_price, 2, ",") }}zł</div>
                        </div>
                        <div class="upsell">
                            <div class="r-item d-flex justify-content-start">
                                <div class="checkout-icon"><img src="{{ url('img/user4.svg') }}"
                                        style="width:20px; height:20px;" alt="">
                                </div>
                                <div class="checkout-amount" style="margin-top:2px;">{{__('Add')}}
                                    <strong>{{ $pack->upsell_amount }}</strong> followers {!!__('and <strong>save 40%')!!}</strong>
                                </div>
                            </div>
                            <button class="btn btn-rounded btn-green upsell-btn"><img src="{{ url('img/plus.svg') }}"
                                    style="width:18px; height:18px; margin-right:8px; margin-top:-3px;" alt="">{{__('Add for')}}
                                {{ number_format($pack->upsell_price, 2, ",") }}zł<span
                                    class="strike">{{ number_format(($pack->upsell_price * 100) / 60, 2, ",") }}zł</span></button>
                        </div>
                        <div class="discount-section">
                            <div class="d-flex justify-content-start ">
                                <div style="font-size:16px; color:#094020; font-weight:600;">{{__('Your discount')}}</div>
                                <div style="flex-grow:1; text-align:right; color:#333; font-size:16px; font-weight:600;">
                                    -<span class="discount-amount">38</span>zł
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-start total-price">
                            <div>{{__('Total to pay')}}</div>
                            <div style="flex-grow:1; text-align:right;" class="final_price_col" style="display:none;">
                                {{ number_format($pack->price, 2, ",") }}zł
                            </div>
                        </div>
                        <div style="margin-top:10px;" class="coupon-section">
                            <div class="show-coupon" style="color:#322f3b;">{{__('Add a coupon code')}} <i
                                    class="fas fa-angle-down"></i>
                            </div>
                            <div style="margin-top:10px; display:none;" class="coupon-input"><input type="text"
                                    class="form-control coupon"
                                    style="width:auto; display:inline-block; height:auto; line-height:auto; padding:7px 10px; font-size:16px !important;">
                                <button class="btn btn-secondary apply-coupon"
                                    style="background-color:#F2F2F2; margin-top: -3px !important; color:#333; font-weight:500; padding:8px 12px; font-size:14px;">{{__('Apply')}}</button>
                            </div>
                            <div style="display:none; color:#c0392b;" class="coupon-error">{{__('This coupon is not valid.')}}</div>
                            <div style="display:none; color:#27ae60;" class="coupon-success">{{__('Coupon applied.')}}</div>

                        </div>
                    </div>
                    <hr class="d-none d-lg-block">
                    <div class="d-none d-lg-block">
                        <div class="d-flex mb-3">
                            <div><img src="{{ url('img/user5.svg') }}"
                                    style="width:23px; height:23px; margin-right:8px; margin-top:-3px;" alt="">
                            </div>
                            <div style="flex-grow:1; color: #322f3b; font-size: 18px; font-weight:500;">{{__('Top quality')}}</div>
                        </div>
                        <div class="d-flex mb-3">
                            <div><i class="fas fa-chart-line"
                                    style="font-size:18px; margin-right:12px; color:#979797;"></i>
                            </div>
                            <div style="flex-grow:1; color: #322f3b; font-size: 18px; font-weight: 500;">{{__("Followers won't disappear")}}
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <div><img src="{{ url('img/fast.svg') }}"
                                    style="width:23px; height:23px; margin-right:8px; margin-top:-3px;" alt="">
                            </div>
                            <div style="flex-grow:1; color: #322f3b; font-size: 18px; font-weight:500;"><strong
                                    style="font-weight:500 !important;">{{__('100% Instant Delivery')}}</strong></div>
                        </div>

                        <div class="d-flex mb-3">
                            <div><img src="{{ url('img/unlock.svg') }}"
                                    style="width:23px; height:23px; margin-right:8px; margin-top:-3px;" alt="">
                            </div>
                            <div style="flex-grow:1; color: #322f3b; font-size: 18px; font-weight:500;">{{__('No password required')}}</div>
                        </div>
                        <div class="d-flex mb-3">
                            <div><img src="{{ url('img/star-shape.svg') }}"
                                    style="width:23px; height:23px; margin-right:8px; margin-top:-3px;" alt="">
                            </div>
                            <div style="flex-grow:1; color: #322f3b; font-size: 18px; font-weight:500;">{{__('We are a trusted shop')}}</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    @if (Session::has('coupon'))
        <script>
            $(document).ready(function() {
                $(".coupon").val('{{ Session::get('coupon') }}');
                $(".coupon-widget").html("{{__('Discount 20% is applied.')}}");
                setTimeout(function() {
                    $(".apply-coupon").click();
                }, 200)

            });
        </script>
    @endif
    <script>
        $(document).ready(function() {
            $(".spinner-border").hide();
            $('.continue').attr('disabled', false);
            $(".specific-payment").click(function() {
                $(".specific-payment").not(this).removeClass("activated");
                $(this).addClass("activated");
                $(".specific-payment").not(this).next().hide();
                //$(this).next().show();
            });

            $(".vat-check").click(function() {
                if ($(this).is(":checked")) {
                    $(".vat-input").show();
                } else {
                    $(".vat-input").hide();
                }
            });

            $(".show-coupon").click(function() {
                $(".coupon-input").toggle();
            });

            $(".apply-coupon").click(function() {
                var coup = $(".coupon").val();
                $.ajax({
                    url: '/check-coupon',
                    data: {
                        _token: "{{ csrf_token() }}",
                        coupon: coup
                    },
                    type: "POST",
                    success: function(data) {
                        if (data.success) {
                            $(".discount-section").show();
                            $(".coupon-success").show();
                            $("#coupon_text").val(coup);
                            if ($("#upsell_status").val() == 1) {
                                var price = {{ $pack->price + $pack->upsell_price }};
                                var discount = (data.discount).toFixed(2);
                                var discountAmount = (price / 100 * discount).toFixed(2);
                                var final = (price - discountAmount).toFixed(2);
                                $(".discount-amount").html(discountAmount.replace(".", ","));
                                $(".final_price_col").html((final.replace(".", ","))+"zł");

                            } else {
                                var price = {{ $pack->price }};
                                var discount = (data.discount).toFixed(2);
                                var discountAmount = (price / 100 * discount).toFixed(2);
                                var final = (price - discountAmount).toFixed(2);
                                $(".discount-amount").html(discountAmount.replace(".", ","));
                                $(".final_price_col").html((final.replace(".", ","))+"zł");
                            }
                            //initialize();
                            setTimeout(() => {
                                $(".coupon-success").hide();
                            }, 3000);
                        } else {
                            $(".coupon-error").show();
                            setTimeout(() => {
                                $(".coupon-error").hide();
                            }, 3000);
                        }
                    }
                });
            });


            $("form").submit(function() {
                $(".spinner-border").show();
                $('.continue').attr('disabled', true);
            });

            $(".upsell-btn").click(function() {
                $(".upsell").hide();
                $(".upsell-added").css("display", "flex");
                $(".final_price_col").html({{ $pack->price + $pack->upsell_price }}.toFixed(2).replace(".", ",")+"zł");
                $("#upsell_status").val(1);
                //initialize();
            });

            $(".upsell-cancel").click(function() {
                $(".upsell").show();
                $(".upsell-added").css("display", "none");
                $(".final_price_col").html({{ $pack->price }}.toFixed(2).replace(".", ",")+"zł");
                $("#upsell_status").val(0);
                //initialize();
            });

            $(".mobile-summary").click(function() {
                $(".hide-block").toggle();
                $(".mb-down").toggleClass("rotate");
                $(".mb-down").toggleClass("rotate-reset");
            });

            $(".package-selector").click(function() {
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html('zł' + $(this).data("price"));
                $(".amount").html($(this).data("amount"));
            });
        });
    </script>
@endsection