<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Checkout')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Ecommerce', 'title' => 'Checkout')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Ecommerce', 'title' => 'Checkout')) ?>

                    <div class="container">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-base">
<div class="lg:col-span-2">
<div class="card">
<div class="card-body">
<div data-hs-stepper="">
<!-- Navigation Tabs -->
<ul class="relative grid grid-cols-1 gap-1.5 md:grid-cols-4">
<li class="active" data-hs-stepper-nav-item='{"index": 1}'>
<a class="hs-stepper-active:bg-light/50 hs-stepper-success:bg-success/10 hs-stepper-success:border-success hs-stepper-success:text-success px-4 py-2.5 flex items-center justify-center gap-2.5 rounded border border-dashed border-default-300" href="#">
<i class="iconify tabler--user-circle text-2xl"></i>
<span class="text-md block font-semibold">Billing Info</span>
</a>
</li>
<li data-hs-stepper-nav-item='{"index": 2}'>
<a class="hs-stepper-active:bg-light/50 hs-stepper-success:bg-success/10 hs-stepper-success:border-success hs-stepper-success:text-success px-4 py-2.5 flex items-center justify-center gap-2.5 rounded border border-dashed border-default-300" href="#">
<i class="iconify tabler--truck text-2xl"></i>
<span class="text-md block font-semibold">Shipping Info</span>
</a>
</li>
<li data-hs-stepper-nav-item='{"index": 3}'>
<a class="hs-stepper-active:bg-light/50 hs-stepper-success:bg-success/10 hs-stepper-success:border-success hs-stepper-success:text-success px-4 py-2.5 flex items-center justify-center gap-2.5 rounded border border-dashed border-default-300" href="#">
<i class="iconify tabler--credit-card text-2xl"></i>
<span class="text-md block font-semibold">Payment Info</span>
</a>
</li>
<li data-hs-stepper-nav-item='{"index": 4}'>
<a class="hs-stepper-active:bg-light/50 hs-stepper-success:bg-success/10 hs-stepper-success:border-success hs-stepper-success:text-success px-4 py-2.5 flex items-center justify-center gap-2.5 rounded border border-dashed border-default-300" href="#">
<i class="iconify tabler--checks text-2xl"></i>
<span class="text-md block font-semibold">Finish</span>
</a>
</li>
</ul>
<!-- Content -->
<div class="pt-base">
<!-- Step 1: Billing Info -->
<div data-hs-stepper-content-item='{"index": 1}' style="display: none">
<h5 class="my-1.25 text-md">Billing Information</h5>
<p class="text-default-400 mb-7.5">Fill the form below in order to send you the order's invoice.</p>
<div class="grid md:grid-cols-6 gap-x-base gap-y-5 pb-base">
<div class="md:col-span-3">
<label class="form-label" for="billing-first-name">First Name</label>
<input class="form-input" id="billing-first-name" placeholder="Enter your first name" type="text"/>
</div>
<div class="md:col-span-3">
<label class="form-label" for="billing-last-name">Last Name</label>
<input class="form-input" id="billing-last-name" placeholder="Enter your last name" type="text"/>
</div>
<div class="md:col-span-3">
<label class="form-label" for="billing-email-address">
                                                                Email
                                                                <span class="text-danger">*</span>
</label>
<input class="form-input" id="billing-email-address" placeholder="Enter your email" type="email"/>
</div>
<div class="md:col-span-3">
<label class="form-label" for="billing-phone">
                                                                Phone
                                                                <span class="text-danger">*</span>
</label>
<input class="form-input" id="billing-phone" placeholder="(xx) xxx xxxx xxx" type="text"/>
</div>
<div class="md:col-span-6">
<label class="form-label" for="billing-address">Address
                                                                <span class="text-danger">*</span>
</label>
<textarea class="form-textarea" id="billing-address" placeholder="Enter your address" rows="2"></textarea>
</div>
<div class="md:col-span-2">
<label class="form-label" for="billing-town-city">Town / City</label>
<input class="form-input" id="billing-town-city" placeholder="Enter your city name" type="text"/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="billing-state">State</label>
<input class="form-input" id="billing-state" placeholder="Enter your state" type="text"/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="billing-zip-postal">Zip / Postal Code</label>
<input class="form-input" id="billing-zip-postal" placeholder="Enter your zip code" type="text"/>
</div>
<div class="md:col-span-6">
<label class="form-label">Country</label>
<select class="form-select">
<option value="0">Select Country</option>
<option value="AF">Afghanistan</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="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</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</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="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote d'Ivoire</option>
<option value="HR">Croatia (Hrvatska)</option>
<option value="CU">Cuba</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="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="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</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="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</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="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</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="AN">Netherlands Antilles</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="PW">Palau</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">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint LUCIA</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="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia (Slovak Republic)</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="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St. Helena</option>
<option value="PM">St. Pierre and Miquelon</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</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="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="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</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 Islands</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<div class="flex items-center gap-2 md:col-span-6">
<input class="form-checkbox size-4.25" id="customCheck2" type="checkbox" value="option"/>
<label class="form-check-label" for="customCheck2">Ship to different address ?</label>
</div>
<div class="md:col-span-6">
<label class="form-label" for="example-textarea">Order Notes:</label>
<textarea class="form-textarea" id="example-textarea" placeholder="Write some note.." rows="3"></textarea>
</div>
</div>
</div>
<!-- Step 2: Address Info -->
<div data-hs-stepper-content-item='{"index": 2}' style="display: none">
<h5 class="my-1.5 text-md">Saved Address</h5>
<p class="text-default-400 mb-7.5">Provide your address details to receive the order invoice.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-base mb-base">
<div class="border-default-300 peer-checked:border-primary relative rounded-md border p-5">
<input checked="" class="form-radio peer absolute end-2 bottom-2 rounded-full!" id="add-home" name="deli-address" type="radio"/>
<label class="form-check-label w-full" for="add-home">
<span class="text-default-400 mb-1.25 block font-bold uppercase">Home</span>
<span class="block font-semibold">Evelyn Carter</span>
                                                                2418 Maple Street, Apt 12B
                                                                <br/>
                                                                Brooklyn, NY 11215
                                                                <br/>
<abbr title="Phone">P:</abbr>
                                                                (917) 432-7784
                                                                <br/>
</label>
</div>
<div>
<div class="border-default-300 peer-checked:border-primary relative rounded-md border p-5">
<input class="form-radio peer absolute end-2 bottom-2 rounded-full!" id="add-office" name="deli-address" type="radio"/>
<label class="form-check-label w-full" for="add-office">
<span class="text-default-400 mb-1.25 block font-bold uppercase">Office</span>
<span class="block font-semibold">Marcus Reynolds</span>
                                                                    500 Howard Street, Floor 8
                                                                    <br/>
                                                                    San Francisco, CA 94105
                                                                    <br/>
<abbr title="Phone">P:</abbr>
                                                                    (415) 392-6400
                                                                    <br/>
</label>
</div>
</div>
</div>
<h5 class="my-1.25 text-md">Add New Address</h5>
<p class="text-default-400 mb-7.5">Provide your address details to receive the order invoice.</p>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-base mb-base">
<div>
<label class="form-label" for="shipping-add-first-name">First Name</label>
<input class="form-input" id="shipping-add-first-name" placeholder="Enter your first name" type="text"/>
</div>
<div>
<label class="form-label" for="shipping-add-last-name">Last Name</label>
<input class="form-input" id="shipping-add-last-name" placeholder="Enter your last name" type="text"/>
</div>
<div>
<label class="form-label" for="shipping-add-email-address">
                                                                    Email
                                                                    <span class="text-danger">*</span>
</label>
<input class="form-input" id="shipping-add-email-address" placeholder="Enter your email" type="email"/>
</div>
<div>
<label class="form-label" for="shipping-add-phone">
                                                                    Phone
                                                                    <span class="text-danger">*</span>
</label>
<input class="form-input" id="shipping-add-phone" placeholder="(xx) xxx xxxx xxx" type="text"/>
</div>
<div class="col-span-1 md:col-span-2">
<label class="form-label" for="shipping-add-address">
                                                                    Address
                                                                    <span class="text-danger">*</span>
</label>
<textarea class="form-textarea" id="shipping-add-address" placeholder="Enter your address" rows="2"></textarea>
</div>
</div>
<!-- end row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-base mb-base">
<div>
<label class="form-label" for="shipping-add-town-city">Town / City</label>
<input class="form-input" id="shipping-add-town-city" placeholder="Enter your city name" type="text"/>
</div>
<div>
<label class="form-label" for="shipping-add-state">State</label>
<input class="form-input" id="shipping-add-state" placeholder="Enter your state" type="text"/>
</div>
<div>
<label class="form-label" for="shipping-add-zip-postal">Zip / Postal Code</label>
<input class="form-input" id="shipping-add-zip-postal" placeholder="Enter your zip code" type="text"/>
</div>
</div>
<!-- end row -->
<div class="grid grid-cols-1 mb-base">
<div>
<label class="form-label">Country</label>
<select class="form-select">
<option value="0">Select Country</option>
<option value="AF">Afghanistan</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="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</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</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="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote d'Ivoire</option>
<option value="HR">Croatia (Hrvatska)</option>
<option value="CU">Cuba</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="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="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</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="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</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="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</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="AN">Netherlands Antilles</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="PW">Palau</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">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint LUCIA</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="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia (Slovak Republic)</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="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St. Helena</option>
<option value="PM">St. Pierre and Miquelon</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</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="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="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</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 Islands</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
<!-- end row -->
<div class="flex justify-end">
<button class="btn btn-sm bg-success text-white hover:bg-success-hover" type="button">Save</button>
</div>
</form>
<h5 class="my-1.5 text-md">Shipping Method</h5>
<p class="text-default-400 mb-5">Choose your preferred shipping method to receive your order on time.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-base mb-base">
<div class="border-default-300 rounded border p-5">
<div class="flex gap-2">
<input checked="" class="form-radio rounded-full!" id="shippingMethodRadio1" name="shippingOptions" type="radio"/>
<label class="form-check-label font-bold" for="shippingMethodRadio1">Standard Delivery - FREE</label>
</div>
<p class="text-default-400 ps-base pt-1.25">Estimated 5-7 days shipping (Duties and tax may be due upon delivery)</p>
</div>
<div class="border-default-300 rounded border p-5">
<div class="flex gap-2">
<input class="form-radio rounded-full!" id="shippingMethodRadio2" name="shippingOptions" type="radio"/>
<label class="form-check-label font-bold" for="shippingMethodRadio2">Fast Delivery - $25</label>
</div>
<p class="text-default-400 ps-base pt-1.25">Estimated 1-2 days shipping (Duties and tax may be due upon delivery)</p>
</div>
</div>
</div>
<!-- Step 3: Course Info -->
<div data-hs-stepper-content-item='{"index": 3}' style="display: none">
<h5 class="my-1.25 text-md">Payment Method</h5>
<p class="text-default-400 mb-5">Select your preferred payment method to complete your purchase securely.</p>
<!-- Pay with Paypal box-->
<div class="border-default-300 mb-5 rounded border p-5">
<div class="grid grid-cols-3 items-center">
<div class="col-span-2">
<div class="flex gap-1.5">
<input class="form-radio rounded-full!" id="BillingOptRadio2" name="billingOptions" type="radio"/>
<label class="form-check-label font-bold" for="BillingOptRadio2">Pay with Paypal</label>
</div>
<p class="text-default-400 ps-base pt-1.25">You will be redirected to PayPal website to complete your purchase securely.</p>
</div>
<div class="ms-auto mt-5">
<img alt="paypal-img" class="size-8" height="32" src="/images/cards/paypal.svg"/>
</div>
</div>
</div>
<!-- end Pay with Paypal box-->
<!-- Credit/Debit Card box-->
<div class="border-default-300 mb-5 rounded border p-5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-base">
<div class="md:col-span-2">
<div class="flex gap-1.5">
<input checked="" class="form-radio rounded-full!" id="BillingOptRadio1" name="billingOptions" type="radio"/>
<label class="form-check-label font-bold" for="BillingOptRadio1">Credit / Debit Card</label>
</div>
<p class="text-default-400 ps-base pt-1.25">Safe money transfer using your bank account. We support Mastercard, Visa, Discover and Stripe.</p>
</div>
<div class="flex md:col-span-1 md:ms-auto">
<img alt="master-card-img" class="size-8" src="/images/cards/mastercard.svg"/>
<img alt="discover-card-img" class="size-8" src="/images/cards/discover-card.svg"/>
<img alt="visa-card-img" class="size-8" src="/images/cards/visa.svg"/>
<img alt="stripe-card-img" class="size-8" src="/images/cards/stripe.svg"/>
</div>
</div>
<!-- end row -->
<div class="mt-5 grid grid-cols-1">
<div class="col-span-1">
<div class="rounded bg-warning/10 text-warning text-xs py-2.5 px-4 mb-4">
                                                                    Enjoy an extra
                                                                    <span class="font-bold">10% discount</span>
                                                                    when you pay with your
                                                                    <span class="font-bold">Credit Card</span>
                                                                    .
                                                                </div>
<div class="mb-5">
<label class="form-label" for="card-number">Card Number</label>
<input class="form-input" data-mask-format="0000 0000 0000 0000" data-toggle="input-mask" id="card-number" placeholder="4242 4242 4242 4242" type="text"/>
</div>
</div>
</div>
<!-- end row -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-base">
<div class="md:col-span-2">
<label class="form-label" for="card-name-on">Name on card</label>
<input class="form-input" id="card-name-on" placeholder="Master Dhanu" type="text"/>
</div>
<div>
<label class="form-label" for="card-expiry-date">Expiry date</label>
<input class="form-input" data-mask-format="00/00" data-toggle="input-mask" id="card-expiry-date" placeholder="MM/YY" type="text"/>
</div>
<div>
<label class="form-label" for="card-cvv">CVV code</label>
<input class="form-input" data-mask-format="000" data-toggle="input-mask" id="card-cvv" placeholder="012" type="text"/>
</div>
</div>
<!-- end row -->
</div>
<!-- end Credit/Debit Card box-->
<!-- Pay with Payoneer box-->
<div class="border-default-300 mb-5 rounded border p-5">
<div class="grid grid-cols-3">
<div class="col-span-2">
<div class="flex gap-2">
<input class="form-radio rounded-full!" id="BillingOptRadio3" name="billingOptions" type="radio"/>
<label class="form-check-label font-bold" for="BillingOptRadio3">Pay with Payoneer</label>
</div>
<p class="text-default-400 ps-base pt-1.25">You will be redirected to Payoneer website to complete your purchase securely.</p>
</div>
<div class="ms-auto">
<img alt="payoneer" class="size-8" src="/images/cards/payoneer.svg"/>
</div>
</div>
</div>
<!-- end Pay with Payoneer box-->
<!-- Cash on Delivery box-->
<div class="border-default-300 mb-5 rounded border p-5">
<div class="grid grid-cols-3">
<div class="col-span-2">
<div class="flex gap-2">
<input class="form-radio rounded-full!" id="BillingOptRadio4" name="billingOptions" type="radio"/>
<label class="form-check-label font-bold" for="BillingOptRadio4">Cash on Delivery</label>
</div>
<p class="text-default-400 ps-base pt-1.25">Pay with cash when your order is delivered.</p>
</div>
<div class="ms-auto">
<img alt="COD-img" class="h-6" src="/images/cards/cod.png"/>
</div>
</div>
</div>
<!-- end Cash on Delivery box-->
</div>
<!-- Step 4: Parent Info -->
<div data-hs-stepper-content-item='{"index": 4}' style="display: none">
<div class="md:p-7.5">
<div class="mb-5 flex flex-wrap items-center gap-base">
<div>
<div class="bg-success flex size-9 items-center justify-center rounded-full text-white">
<i class="iconify tabler--check size-5.5"></i>
</div>
</div>
<div>
<p class="text-default-400">Order #234000</p>
<h4 class="text-lg">Thank you for your order!</h4>
</div>
<a class="hover:text-primary link-offset-2 ms-auto font-semibold underline" href="#">Track Order</a>
</div>
<hr class="border-default-300 my-4 border-t border-dashed"/>
<div class="mt-9">
<h6 class="text-default-400 text-xs mb-2 font-bold uppercase">Delivery Address</h6>
<span class="mb-1.25 block font-semibold">Marcus Reynolds</span>
                                                            500 Howard Street, Floor 8
                                                            <br/>
                                                            San Francisco, CA 94105
                                                            <br/>
<abbr title="Phone">P:</abbr>
                                                            (415) 392-6400
                                                            <br/>
</div>
<div class="mt-9">
<h6 class="text-default-400 text-xs mb-2 font-bold uppercase">Payment Info</h6>
<p>Credit card: xxxx xxxx xxxx 8521</p>
</div>
<div class="mt-9">
<a class="btn bg-success text-white hover:bg-success-hover" href="#!">
<i class="iconify tabler--download me-1"></i>
                                                                Download Invoice
                                                            </a>
<a class="btn text-default-400 font-semibold" href="/apps-ecommerce-products-grid">
<i class="iconify tabler--arrow-left me-1"></i>
                                                                Continue Shopping
                                                            </a>
</div>
<div class="rounded bg-info/15 text-info mt-9 p-7.5">
<h4 class="text-dark mb-1.25 pb-3 text-center text-lg">🎁 Great News! You’ve unlocked 25% off your next order!</h4>
<p class="mb-7.5 text-center italic">Apply the code below at checkout or find it anytime in your account.</p>
<div class="mx-auto flex gap-3">
<input class="form-input" readonly="" type="text" value="SAVE25NOW"/>
<button class="btn text-nowrap bg-dark text-white hover:bg-dark-hover" type="button">Copy Code</button>
</div>
</div>
</div>
</div>
<!-- Button Group -->
<div class="mt-5 flex flex-wrap items-center justify-between">
<button class="btn bg-secondary text-white hover:bg-secondary-hover" data-hs-stepper-back-btn="" type="button">
<i class="iconify tabler--arrow-left"></i>
                                                        Back
                                                    </button>
<button class="btn bg-primary text-white hover:bg-primary-hover" data-hs-stepper-next-btn="" type="button">
                                                        Next
                                                        <i class="iconify tabler--arrow-right"></i>
</button>
</div>
<!-- End Button Group -->
</div>
</div>
</div>
</div>
</div>
<!-- Order Summary -->
<div class="flex flex-col gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Order Summary</h4>
<span class="badge bg-success/15 text-success font-semibold ms-auto">03 Items</span>
</div>
<div class="card-body">
<div class="mb-5 flex items-center gap-base">
<img alt="MacBook Air" class="me-1.25 rounded" src="/images/products/2.png" width="42"/>
<div>
<p class="mb-1.25 font-semibold">
<a class="hover:text-primary" href="/apps-ecommerce-product-details">Apple MacBook Air M3 13”</a>
</p>
<p class="text-default-400 block">1 x $1,199</p>
</div>
<h5 class="ms-auto">$1,199</h5>
</div>
<div class="mb-5 flex items-center gap-base">
<img alt="" class="me-1.25 rounded" src="/images/products/5.png" width="42"/>
<div>
<p class="mb-1.25 font-semibold">
<a class="hover:text-primary" href="/apps-ecommerce-product-details">Sony WH-1000XM5 Wireless Headphones</a>
</p>
<p class="text-default-400 block">1 x $349</p>
</div>
<h5 class="ms-auto">$349</h5>
</div>
<div class="flex items-center gap-base">
<img alt="" class="me-1.25 rounded" src="/images/products/7.png" width="42"/>
<div>
<p class="mb-1.25 font-semibold">
<a class="hover:text-primary" href="/apps-ecommerce-product-details">Apple Watch Series 9 GPS</a>
</p>
<p class="text-default-400 block">1 x $399</p>
</div>
<h5 class="ms-auto">$399</h5>
</div>
<hr class="border-default-300 my-3.25"/>
<ul class="list-unstyled">
<li class="mb-2.5 flex justify-between">
<span class="text-default-400">Subtotal:</span>
<span>$1,947.00</span>
</li>
<li class="mb-2.5 flex justify-between">
<span class="text-default-400">Discount:</span>
<span class="text-danger">- $120.00</span>
</li>
<li class="mb-2.5 flex justify-between">
<span class="text-default-400">Tax collected:</span>
<span>$65.85</span>
</li>
<li class="border-default-300 mb-5 flex justify-between border-b pb-5">
<span class="text-default-400">Shipping:</span>
<span>Free</span>
</li>
<li class="flex items-center justify-between">
<h6 class="text-default-400 text-xs uppercase">Estimated total:</h6>
<h5 class="text-lg font-bold">$1,892.85</h5>
</li>
</ul>
</div>
</div>
<!-- Promo -->
<div class="card">
<div class="card-body">
<p class="text-default-400">
                                            🎉 Congratulations! You’ve earned
                                            <span class="text-success font-bold">239 bonus points</span>
                                            !
                                        </p>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- InputMask Plugin js -->
<script src="/plugins/inputmask/inputmask.min.js"></script>
<!-- Inputmask Demo js -->
<script src="/js/pages/form-inputmask.js"></script>
</body>
</html>