@php use Modules\Core\Helpers\Helper; @endphp
@extends('front::layouts.master')

@section('title','Checkout page')

@section('content')

    <!-- Breadcrumbs -->
    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bread-inner">
                        <ul class="bread-list">
                            <li><a href="{{route('front.index')}}">Home<i class="ti-arrow-right"></i></a></li>
                            <li class="active"><a href="javascript:void(0)">Checkout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumbs -->

    <!-- Start Checkout -->
    <section class="shop checkout section">
        <div class="container">
            @if($errors->any())
                <div class="alert alert-danger">
                    <strong>Please fix the following errors:</strong>
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            

            <form class="form" method="POST" action="{{route('front.cart.order')}}" novalidate>
                @csrf
                <div class="row">
                    <div class="col-lg-8 col-12">
                        <div class="checkout-form">
                            <h2>Make Your Checkout Here</h2>
                            <p>Please register in order to checkout more quickly</p>
                            <!-- Form -->
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>First Name<span>*</span></label>
                                        <input type="text" name="first_name" placeholder=""
                                               value="{{ old('first_name', '') }}" 
                                               class="form-control @error('first_name') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('first_name')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Last Name<span>*</span></label>
                                        <input type="text" name="last_name" placeholder="" 
                                               value="{{ old('last_name', '') }}"
                                               class="form-control @error('last_name') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('last_name')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Email Address<span>*</span></label>
                                        <input type="email" name="email" placeholder="" 
                                               value="{{ old('email', '') }}"
                                               class="form-control @error('email') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('email')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Phone Number <span>*</span></label>
                                        <input type="tel" name="phone" placeholder="" 
                                               value="{{ old('phone', '') }}"
                                               class="form-control @error('phone') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('phone')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Country<span>*</span></label>
                                        <select name="country" id="country" 
                                                class="form-control @error('country') is-invalid @enderror">
                                            <option value="">Select Country</option>
                                            <option value="AF" {{old('country') == 'AF' ? 'selected' : ''}}>Afghanistan</option>
                                            <option value="AX" {{old('country') == 'AX' ? 'selected' : ''}}>Åland Islands</option>
                                            <option value="AL" {{old('country') == 'AL' ? 'selected' : ''}}>Albania</option>
                                            <option value="DZ" {{old('country') == 'DZ' ? 'selected' : ''}}>Algeria</option>
                                            <option value="AS" {{old('country') == 'AS' ? 'selected' : ''}}>American Samoa</option>
                                            <option value="AD" {{old('country') == 'AD' ? 'selected' : ''}}>Andorra</option>
                                            <option value="AO" {{old('country') == 'AO' ? 'selected' : ''}}>Angola</option>
                                            <option value="AI" {{old('country') == 'AI' ? 'selected' : ''}}>Anguilla</option>
                                            <option value="AQ" {{old('country') == 'AQ' ? 'selected' : ''}}>Antarctica</option>
                                            <option value="AG" {{old('country') == 'AG' ? 'selected' : ''}}>Antigua and Barbuda</option>
                                            <option value="AR" {{old('country') == 'AR' ? 'selected' : ''}}>Argentina</option>
                                            <option value="AM" {{old('country') == 'AM' ? 'selected' : ''}}>Armenia</option>
                                            <option value="AW" {{old('country') == 'AW' ? 'selected' : ''}}>Aruba</option>
                                            <option value="AU" {{old('country') == 'AU' ? 'selected' : ''}}>Australia</option>
                                            <option value="AT" {{old('country') == 'AT' ? 'selected' : ''}}>Austria</option>
                                            <option value="AZ" {{old('country') == 'AZ' ? 'selected' : ''}}>Azerbaijan</option>
                                            <option value="BS" {{old('country') == 'BS' ? 'selected' : ''}}>Bahamas</option>
                                            <option value="BH" {{old('country') == 'BH' ? 'selected' : ''}}>Bahrain</option>
                                            <option value="BD" {{old('country') == 'BD' ? 'selected' : ''}}>Bangladesh</option>
                                            <option value="BB" {{old('country') == 'BB' ? 'selected' : ''}}>Barbados</option>
                                            <option value="BY" {{old('country') == 'BY' ? 'selected' : ''}}>Belarus</option>
                                            <option value="BE" {{old('country') == 'BE' ? 'selected' : ''}}>Belgium</option>
                                            <option value="BZ" {{old('country') == 'BZ' ? 'selected' : ''}}>Belize</option>
                                            <option value="BJ" {{old('country') == 'BJ' ? 'selected' : ''}}>Benin</option>
                                            <option value="BM" {{old('country') == 'BM' ? 'selected' : ''}}>Bermuda</option>
                                            <option value="BT" {{old('country') == 'BT' ? 'selected' : ''}}>Bhutan</option>
                                            <option value="BO" {{old('country') == 'BO' ? 'selected' : ''}}>Bolivia</option>
                                            <option value="BA" {{old('country') == 'BA' ? 'selected' : ''}}>Bosnia and Herzegovina</option>
                                            <option value="BW" {{old('country') == 'BW' ? 'selected' : ''}}>Botswana</option>
                                            <option value="BV" {{old('country') == 'BV' ? 'selected' : ''}}>Bouvet Island</option>
                                            <option value="BR" {{old('country') == 'BR' ? 'selected' : ''}}>Brazil</option>
                                            <option value="IO" {{old('country') == 'IO' ? 'selected' : ''}}>British Indian Ocean Territory</option>
                                            <option value="VG" {{old('country') == 'VG' ? 'selected' : ''}}>British Virgin Islands</option>
                                            <option value="BN" {{old('country') == 'BN' ? 'selected' : ''}}>Brunei</option>
                                            <option value="BG" {{old('country') == 'BG' ? 'selected' : ''}}>Bulgaria</option>
                                            <option value="BF" {{old('country') == 'BF' ? 'selected' : ''}}>Burkina Faso</option>
                                            <option value="BI" {{old('country') == 'BI' ? 'selected' : ''}}>Burundi</option>
                                            <option value="KH" {{old('country') == 'KH' ? 'selected' : ''}}>Cambodia</option>
                                            <option value="CM" {{old('country') == 'CM' ? 'selected' : ''}}>Cameroon</option>
                                            <option value="CA" {{old('country') == 'CA' ? 'selected' : ''}}>Canada</option>
                                            <option value="CV" {{old('country') == 'CV' ? 'selected' : ''}}>Cape Verde</option>
                                            <option value="KY" {{old('country') == 'KY' ? 'selected' : ''}}>Cayman Islands</option>
                                            <option value="CF" {{old('country') == 'CF' ? 'selected' : ''}}>Central African Republic</option>
                                            <option value="TD" {{old('country') == 'TD' ? 'selected' : ''}}>Chad</option>
                                            <option value="CL" {{old('country') == 'CL' ? 'selected' : ''}}>Chile</option>
                                            <option value="CN" {{old('country') == 'CN' ? 'selected' : ''}}>China</option>
                                            <option value="CX" {{old('country') == 'CX' ? 'selected' : ''}}>Christmas Island</option>
                                            <option value="CC" {{old('country') == 'CC' ? 'selected' : ''}}>Cocos [Keeling] Islands</option>
                                            <option value="CO" {{old('country') == 'CO' ? 'selected' : ''}}>Colombia</option>
                                            <option value="KM" {{old('country') == 'KM' ? 'selected' : ''}}>Comoros</option>
                                            <option value="CG" {{old('country') == 'CG' ? 'selected' : ''}}>Congo - Brazzaville</option>
                                            <option value="CD" {{old('country') == 'CD' ? 'selected' : ''}}>Congo - Kinshasa</option>
                                            <option value="CK" {{old('country') == 'CK' ? 'selected' : ''}}>Cook Islands</option>
                                            <option value="CR" {{old('country') == 'CR' ? 'selected' : ''}}>Costa Rica</option>
                                            <option value="CI" {{old('country') == 'CI' ? 'selected' : ''}}>Côte d’Ivoire</option>
                                            <option value="HR" {{old('country') == 'HR' ? 'selected' : ''}}>Croatia</option>
                                            <option value="CU" {{old('country') == 'CU' ? 'selected' : ''}}>Cuba</option>
                                            <option value="CY" {{old('country') == 'CY' ? 'selected' : ''}}>Cyprus</option>
                                            <option value="CZ" {{old('country') == 'CZ' ? 'selected' : ''}}>Czech Republic</option>
                                            <option value="DK" {{old('country') == 'DK' ? 'selected' : ''}}>Denmark</option>
                                            <option value="DJ" {{old('country') == 'DJ' ? 'selected' : ''}}>Djibouti</option>
                                            <option value="DM" {{old('country') == 'DM' ? 'selected' : ''}}>Dominica</option>
                                            <option value="DO" {{old('country') == 'DO' ? 'selected' : ''}}>Dominican Republic</option>
                                            <option value="EC" {{old('country') == 'EC' ? 'selected' : ''}}>Ecuador</option>
                                            <option value="EG" {{old('country') == 'EG' ? 'selected' : ''}}>Egypt</option>
                                            <option value="SV" {{old('country') == 'SV' ? 'selected' : ''}}>El Salvador</option>
                                            <option value="GQ" {{old('country') == 'GQ' ? 'selected' : ''}}>Equatorial Guinea</option>
                                            <option value="ER" {{old('country') == 'ER' ? 'selected' : ''}}>Eritrea</option>
                                            <option value="EE" {{old('country') == 'EE' ? 'selected' : ''}}>Estonia</option>
                                            <option value="ET" {{old('country') == 'ET' ? 'selected' : ''}}>Ethiopia</option>
                                            <option value="FK" {{old('country') == 'FK' ? 'selected' : ''}}>Falkland Islands</option>
                                            <option value="FO" {{old('country') == 'FO' ? 'selected' : ''}}>Faroe Islands</option>
                                            <option value="FJ" {{old('country') == 'FJ' ? 'selected' : ''}}>Fiji</option>
                                            <option value="FI" {{old('country') == 'FI' ? 'selected' : ''}}>Finland</option>
                                            <option value="FR" {{old('country') == 'FR' ? 'selected' : ''}}>France</option>
                                            <option value="GF" {{old('country') == 'GF' ? 'selected' : ''}}>French Guiana</option>
                                            <option value="PF" {{old('country') == 'PF' ? 'selected' : ''}}>French Polynesia</option>
                                            <option value="TF" {{old('country') == 'TF' ? 'selected' : ''}}>French Southern Territories</option>
                                            <option value="GA" {{old('country') == 'GA' ? 'selected' : ''}}>Gabon</option>
                                            <option value="GM" {{old('country') == 'GM' ? 'selected' : ''}}>Gambia</option>
                                            <option value="GE" {{old('country') == 'GE' ? 'selected' : ''}}>Georgia</option>
                                            <option value="DE" {{old('country') == 'DE' ? 'selected' : ''}}>Germany</option>
                                            <option value="GH" {{old('country') == 'GH' ? 'selected' : ''}}>Ghana</option>
                                            <option value="GI" {{old('country') == 'GI' ? 'selected' : ''}}>Gibraltar</option>
                                            <option value="GR" {{old('country') == 'GR' ? 'selected' : ''}}>Greece</option>
                                            <option value="GL" {{old('country') == 'GL' ? 'selected' : ''}}>Greenland</option>
                                            <option value="GD" {{old('country') == 'GD' ? 'selected' : ''}}>Grenada</option>
                                            <option value="GP" {{old('country') == 'GP' ? 'selected' : ''}}>Guadeloupe</option>
                                            <option value="GU" {{old('country') == 'GU' ? 'selected' : ''}}>Guam</option>
                                            <option value="GT" {{old('country') == 'GT' ? 'selected' : ''}}>Guatemala</option>
                                            <option value="GG" {{old('country') == 'GG' ? 'selected' : ''}}>Guernsey</option>
                                            <option value="GN" {{old('country') == 'GN' ? 'selected' : ''}}>Guinea</option>
                                            <option value="GW" {{old('country') == 'GW' ? 'selected' : ''}}>Guinea-Bissau</option>
                                            <option value="GY" {{old('country') == 'GY' ? 'selected' : ''}}>Guyana</option>
                                            <option value="HT" {{old('country') == 'HT' ? 'selected' : ''}}>Haiti</option>
                                            <option value="HM" {{old('country') == 'HM' ? 'selected' : ''}}>Heard Island and McDonald Islands</option>
                                            <option value="HN" {{old('country') == 'HN' ? 'selected' : ''}}>Honduras</option>
                                            <option value="HK" {{old('country') == 'HK' ? 'selected' : ''}}>Hong Kong SAR China</option>
                                            <option value="HU" {{old('country') == 'HU' ? 'selected' : ''}}>Hungary</option>
                                            <option value="IS" {{old('country') == 'IS' ? 'selected' : ''}}>Iceland</option>
                                            <option value="IN" {{old('country') == 'IN' ? 'selected' : ''}}>India</option>
                                            <option value="ID" {{old('country') == 'ID' ? 'selected' : ''}}>Indonesia</option>
                                            <option value="IR" {{old('country') == 'IR' ? 'selected' : ''}}>Iran</option>
                                            <option value="IQ" {{old('country') == 'IQ' ? 'selected' : ''}}>Iraq</option>
                                            <option value="IE" {{old('country') == 'IE' ? 'selected' : ''}}>Ireland</option>
                                            <option value="IM" {{old('country') == 'IM' ? 'selected' : ''}}>Isle of Man</option>
                                            <option value="IL" {{old('country') == 'IL' ? 'selected' : ''}}>Israel</option>
                                            <option value="IT" {{old('country') == 'IT' ? 'selected' : ''}}>Italy</option>
                                            <option value="JM" {{old('country') == 'JM' ? 'selected' : ''}}>Jamaica</option>
                                            <option value="JP" {{old('country') == 'JP' ? 'selected' : ''}}>Japan</option>
                                            <option value="JE" {{old('country') == 'JE' ? 'selected' : ''}}>Jersey</option>
                                            <option value="JO" {{old('country') == 'JO' ? 'selected' : ''}}>Jordan</option>
                                            <option value="KZ" {{old('country') == 'KZ' ? 'selected' : ''}}>Kazakhstan</option>
                                            <option value="KE" {{old('country') == 'KE' ? 'selected' : ''}}>Kenya</option>
                                            <option value="KI" {{old('country') == 'KI' ? 'selected' : ''}}>Kiribati</option>
                                            <option value="KW" {{old('country') == 'KW' ? 'selected' : ''}}>Kuwait</option>
                                            <option value="KG" {{old('country') == 'KG' ? 'selected' : ''}}>Kyrgyzstan</option>
                                            <option value="LA" {{old('country') == 'LA' ? 'selected' : ''}}>Laos</option>
                                            <option value="LV" {{old('country') == 'LV' ? 'selected' : ''}}>Latvia</option>
                                            <option value="LB" {{old('country') == 'LB' ? 'selected' : ''}}>Lebanon</option>
                                            <option value="LS" {{old('country') == 'LS' ? 'selected' : ''}}>Lesotho</option>
                                            <option value="LR" {{old('country') == 'LR' ? 'selected' : ''}}>Liberia</option>
                                            <option value="LY" {{old('country') == 'LY' ? 'selected' : ''}}>Libya</option>
                                            <option value="LI" {{old('country') == 'LI' ? 'selected' : ''}}>Liechtenstein</option>
                                            <option value="LT" {{old('country') == 'LT' ? 'selected' : ''}}>Lithuania</option>
                                            <option value="LU" {{old('country') == 'LU' ? 'selected' : ''}}>Luxembourg</option>
                                            <option value="MO" {{old('country') == 'MO' ? 'selected' : ''}}>Macau SAR China</option>
                                            <option value="MK" {{old('country') == 'MK' ? 'selected' : ''}}>Macedonia</option>
                                            <option value="MG" {{old('country') == 'MG' ? 'selected' : ''}}>Madagascar</option>
                                            <option value="MW" {{old('country') == 'MW' ? 'selected' : ''}}>Malawi</option>
                                            <option value="MY" {{old('country') == 'MY' ? 'selected' : ''}}>Malaysia</option>
                                            <option value="MV" {{old('country') == 'MV' ? 'selected' : ''}}>Maldives</option>
                                            <option value="ML" {{old('country') == 'ML' ? 'selected' : ''}}>Mali</option>
                                            <option value="MT" {{old('country') == 'MT' ? 'selected' : ''}}>Malta</option>
                                            <option value="MH" {{old('country') == 'MH' ? 'selected' : ''}}>Marshall Islands</option>
                                            <option value="MQ" {{old('country') == 'MQ' ? 'selected' : ''}}>Martinique</option>
                                            <option value="MR" {{old('country') == 'MR' ? 'selected' : ''}}>Mauritania</option>
                                            <option value="MU" {{old('country') == 'MU' ? 'selected' : ''}}>Mauritius</option>
                                            <option value="YT" {{old('country') == 'YT' ? 'selected' : ''}}>Mayotte</option>
                                            <option value="MX" {{old('country') == 'MX' ? 'selected' : ''}}>Mexico</option>
                                            <option value="FM" {{old('country') == 'FM' ? 'selected' : ''}}>Micronesia</option>
                                            <option value="MD" {{old('country') == 'MD' ? 'selected' : ''}}>Moldova</option>
                                            <option value="MC" {{old('country') == 'MC' ? 'selected' : ''}}>Monaco</option>
                                            <option value="MN" {{old('country') == 'MN' ? 'selected' : ''}}>Mongolia</option>
                                            <option value="ME" {{old('country') == 'ME' ? 'selected' : ''}}>Montenegro</option>
                                            <option value="MS" {{old('country') == 'MS' ? 'selected' : ''}}>Montserrat</option>
                                            <option value="MA" {{old('country') == 'MA' ? 'selected' : ''}}>Morocco</option>
                                            <option value="MZ" {{old('country') == 'MZ' ? 'selected' : ''}}>Mozambique</option>
                                            <option value="MM" {{old('country') == 'MM' ? 'selected' : ''}}>Myanmar [Burma]</option>
                                            <option value="NA" {{old('country') == 'NA' ? 'selected' : ''}}>Namibia</option>
                                            <option value="NR" {{old('country') == 'NR' ? 'selected' : ''}}>Nauru</option>
                                            <option value="NP" {{old('country') == 'NP' ? 'selected' : ''}} {{!old('country') ? 'selected' : ''}}>Nepal</option>
                                            <option value="NL" {{old('country') == 'NL' ? 'selected' : ''}}>Netherlands</option>
                                            <option value="AN" {{old('country') == 'AN' ? 'selected' : ''}}>Netherlands Antilles</option>
                                            <option value="NC" {{old('country') == 'NC' ? 'selected' : ''}}>New Caledonia</option>
                                            <option value="NZ" {{old('country') == 'NZ' ? 'selected' : ''}}>New Zealand</option>
                                            <option value="NI" {{old('country') == 'NI' ? 'selected' : ''}}>Nicaragua</option>
                                            <option value="NE" {{old('country') == 'NE' ? 'selected' : ''}}>Niger</option>
                                            <option value="NG" {{old('country') == 'NG' ? 'selected' : ''}}>Nigeria</option>
                                            <option value="NU" {{old('country') == 'NU' ? 'selected' : ''}}>Niue</option>
                                            <option value="NF" {{old('country') == 'NF' ? 'selected' : ''}}>Norfolk Island</option>
                                            <option value="MP" {{old('country') == 'MP' ? 'selected' : ''}}>Northern Mariana Islands</option>
                                            <option value="KP" {{old('country') == 'KP' ? 'selected' : ''}}>North Korea</option>
                                            <option value="NO" {{old('country') == 'NO' ? 'selected' : ''}}>Norway</option>
                                            <option value="OM" {{old('country') == 'OM' ? 'selected' : ''}}>Oman</option>
                                            <option value="PK" {{old('country') == 'PK' ? 'selected' : ''}}>Pakistan</option>
                                            <option value="PW" {{old('country') == 'PW' ? 'selected' : ''}}>Palau</option>
                                            <option value="PS" {{old('country') == 'PS' ? 'selected' : ''}}>Palestinian Territories</option>
                                            <option value="PA" {{old('country') == 'PA' ? 'selected' : ''}}>Panama</option>
                                            <option value="PG" {{old('country') == 'PG' ? 'selected' : ''}}>Papua New Guinea</option>
                                            <option value="PY" {{old('country') == 'PY' ? 'selected' : ''}}>Paraguay</option>
                                            <option value="PE" {{old('country') == 'PE' ? 'selected' : ''}}>Peru</option>
                                            <option value="PH" {{old('country') == 'PH' ? 'selected' : ''}}>Philippines</option>
                                            <option value="PN" {{old('country') == 'PN' ? 'selected' : ''}}>Pitcairn Islands</option>
                                            <option value="PL" {{old('country') == 'PL' ? 'selected' : ''}}>Poland</option>
                                            <option value="PT" {{old('country') == 'PT' ? 'selected' : ''}}>Portugal</option>
                                            <option value="PR" {{old('country') == 'PR' ? 'selected' : ''}}>Puerto Rico</option>
                                            <option value="QA" {{old('country') == 'QA' ? 'selected' : ''}}>Qatar</option>
                                            <option value="RE" {{old('country') == 'RE' ? 'selected' : ''}}>Réunion</option>
                                            <option value="RO" {{old('country') == 'RO' ? 'selected' : ''}}>Romania</option>
                                            <option value="RU" {{old('country') == 'RU' ? 'selected' : ''}}>Russia</option>
                                            <option value="RW" {{old('country') == 'RW' ? 'selected' : ''}}>Rwanda</option>
                                            <option value="BL" {{old('country') == 'BL' ? 'selected' : ''}}>Saint Barthélemy</option>
                                            <option value="SH" {{old('country') == 'SH' ? 'selected' : ''}}>Saint Helena</option>
                                            <option value="KN" {{old('country') == 'KN' ? 'selected' : ''}}>Saint Kitts and Nevis</option>
                                            <option value="LC" {{old('country') == 'LC' ? 'selected' : ''}}>Saint Lucia</option>
                                            <option value="MF" {{old('country') == 'MF' ? 'selected' : ''}}>Saint Martin</option>
                                            <option value="PM" {{old('country') == 'PM' ? 'selected' : ''}}>Saint Pierre and Miquelon</option>
                                            <option value="VC" {{old('country') == 'VC' ? 'selected' : ''}}>Saint Vincent and the Grenadines</option>
                                            <option value="WS" {{old('country') == 'WS' ? 'selected' : ''}}>Samoa</option>
                                            <option value="SM" {{old('country') == 'SM' ? 'selected' : ''}}>San Marino</option>
                                            <option value="ST" {{old('country') == 'ST' ? 'selected' : ''}}>São Tomé and Príncipe</option>
                                            <option value="SA" {{old('country') == 'SA' ? 'selected' : ''}}>Saudi Arabia</option>
                                            <option value="SN" {{old('country') == 'SN' ? 'selected' : ''}}>Senegal</option>
                                            <option value="RS" {{old('country') == 'RS' ? 'selected' : ''}}>Serbia</option>
                                            <option value="SC" {{old('country') == 'SC' ? 'selected' : ''}}>Seychelles</option>
                                            <option value="SL" {{old('country') == 'SL' ? 'selected' : ''}}>Sierra Leone</option>
                                            <option value="SG" {{old('country') == 'SG' ? 'selected' : ''}}>Singapore</option>
                                            <option value="SK" {{old('country') == 'SK' ? 'selected' : ''}}>Slovakia</option>
                                            <option value="SI" {{old('country') == 'SI' ? 'selected' : ''}}>Slovenia</option>
                                            <option value="SB" {{old('country') == 'SB' ? 'selected' : ''}}>Solomon Islands</option>
                                            <option value="SO" {{old('country') == 'SO' ? 'selected' : ''}}>Somalia</option>
                                            <option value="ZA" {{old('country') == 'ZA' ? 'selected' : ''}}>South Africa</option>
                                            <option value="GS" {{old('country') == 'GS' ? 'selected' : ''}}>South Georgia</option>
                                            <option value="KR" {{old('country') == 'KR' ? 'selected' : ''}}>South Korea</option>
                                            <option value="ES" {{old('country') == 'ES' ? 'selected' : ''}}>Spain</option>
                                            <option value="LK" {{old('country') == 'LK' ? 'selected' : ''}}>Sri Lanka</option>
                                            <option value="SD" {{old('country') == 'SD' ? 'selected' : ''}}>Sudan</option>
                                            <option value="SR" {{old('country') == 'SR' ? 'selected' : ''}}>Suriname</option>
                                            <option value="SJ" {{old('country') == 'SJ' ? 'selected' : ''}}>Svalbard and Jan Mayen</option>
                                            <option value="SZ" {{old('country') == 'SZ' ? 'selected' : ''}}>Swaziland</option>
                                            <option value="SE" {{old('country') == 'SE' ? 'selected' : ''}}>Sweden</option>
                                            <option value="CH" {{old('country') == 'CH' ? 'selected' : ''}}>Switzerland</option>
                                            <option value="SY" {{old('country') == 'SY' ? 'selected' : ''}}>Syria</option>
                                            <option value="TW" {{old('country') == 'TW' ? 'selected' : ''}}>Taiwan</option>
                                            <option value="TJ" {{old('country') == 'TJ' ? 'selected' : ''}}>Tajikistan</option>
                                            <option value="TZ" {{old('country') == 'TZ' ? 'selected' : ''}}>Tanzania</option>
                                            <option value="TH" {{old('country') == 'TH' ? 'selected' : ''}}>Thailand</option>
                                            <option value="TL" {{old('country') == 'TL' ? 'selected' : ''}}>Timor-Leste</option>
                                            <option value="TG" {{old('country') == 'TG' ? 'selected' : ''}}>Togo</option>
                                            <option value="TK" {{old('country') == 'TK' ? 'selected' : ''}}>Tokelau</option>
                                            <option value="TO" {{old('country') == 'TO' ? 'selected' : ''}}>Tonga</option>
                                            <option value="TT" {{old('country') == 'TT' ? 'selected' : ''}}>Trinidad and Tobago</option>
                                            <option value="TN" {{old('country') == 'TN' ? 'selected' : ''}}>Tunisia</option>
                                            <option value="TR" {{old('country') == 'TR' ? 'selected' : ''}}>Turkey</option>
                                            <option value="TM" {{old('country') == 'TM' ? 'selected' : ''}}>Turkmenistan</option>
                                            <option value="TC" {{old('country') == 'TC' ? 'selected' : ''}}>Turks and Caicos Islands</option>
                                            <option value="TV" {{old('country') == 'TV' ? 'selected' : ''}}>Tuvalu</option>
                                            <option value="UG" {{old('country') == 'UG' ? 'selected' : ''}}>Uganda</option>
                                            <option value="UA" {{old('country') == 'UA' ? 'selected' : ''}}>Ukraine</option>
                                            <option value="AE" {{old('country') == 'AE' ? 'selected' : ''}}>United Arab Emirates</option>
                                            <option value="GB" {{old('country') == 'GB' ? 'selected' : ''}}>United Kingdom</option>
                                            <option value="US" {{old('country') == 'US' ? 'selected' : ''}}>United States</option>
                                            <option value="UY" {{old('country') == 'UY' ? 'selected' : ''}}>Uruguay</option>
                                            <option value="UM" {{old('country') == 'UM' ? 'selected' : ''}}>U.S. Minor Outlying Islands</option>
                                            <option value="VI" {{old('country') == 'VI' ? 'selected' : ''}}>U.S. Virgin Islands</option>
                                            <option value="UZ" {{old('country') == 'UZ' ? 'selected' : ''}}>Uzbekistan</option>
                                            <option value="VU" {{old('country') == 'VU' ? 'selected' : ''}}>Vanuatu</option>
                                            <option value="VA" {{old('country') == 'VA' ? 'selected' : ''}}>Vatican City</option>
                                            <option value="VE" {{old('country') == 'VE' ? 'selected' : ''}}>Venezuela</option>
                                            <option value="VN" {{old('country') == 'VN' ? 'selected' : ''}}>Vietnam</option>
                                            <option value="WF" {{old('country') == 'WF' ? 'selected' : ''}}>Wallis and Futuna</option>
                                            <option value="EH" {{old('country') == 'EH' ? 'selected' : ''}}>Western Sahara</option>
                                            <option value="YE" {{old('country') == 'YE' ? 'selected' : ''}}>Yemen</option>
                                            <option value="ZM" {{old('country') == 'ZM' ? 'selected' : ''}}>Zambia</option>
                                            <option value="ZW" {{old('country') == 'ZW' ? 'selected' : ''}}>Zimbabwe</option>
                                        </select>
                                        @error('country')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Address Line 1<span>*</span></label>
                                        <input type="text" name="address1" placeholder="" 
                                               value="{{ old('address1', '') }}"
                                               class="form-control @error('address1') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('address1')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Address Line 2</label>
                                        <input type="text" name="address2" placeholder="" 
                                               value="{{ old('address2', '') }}"
                                               class="form-control @error('address2') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('address2')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <label>Postal Code</label>
                                        <input type="text" name="post_code" placeholder="" 
                                               value="{{ old('post_code', '') }}"
                                               class="form-control @error('post_code') is-invalid @enderror"
                                               autocomplete="off">
                                        @error('post_code')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12" style="display: none;">
                                    {{-- Hidden field to clear session data on form load --}}
                                    <input type="hidden" name="clear_checkout_session" value="1">
                                </div>
                            </div>
                            <!--/ End Form -->
                        </div>
                    </div>
                    <div class="col-lg-4 col-12">
                        <div class="order-details">
                            <!-- Order Widget -->
                            <div class="single-widget">
                                <h2>CART TOTALS</h2>
                                <div class="content">
                                    <ul>
                                        <li class="order_subtotal"
                                            data-price="{{Helper::totalCartPrice()}}">Cart
                                            Subtotal<span>${{number_format(Helper::totalCartPrice(),2)}}</span>
                                        </li>
                                        <li class="shipping">
                                            Shipping Cost
                                            @if(count(Helper::shipping())>0 && Helper::cartCount()>0)
                                                <select name="shipping" class="nice-select @error('shipping') is-invalid @enderror">
                                                    <option value="">Select your address</option>
                                                    @foreach(Helper::shipping() as $shipping)
                                                        <option value="{{$shipping->id}}" class="shippingOption"
                                                                data-price="{{$shipping->price}}"
                                                                {{ old('shipping') == $shipping->id ? 'selected' : '' }}>
                                                            {{$shipping->type}}: ${{$shipping->price}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('shipping')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            @else
                                                <span>Free</span>
                                            @endif
                                        </li>

                                        @if(session('coupon'))
                                            <li class="coupon_price" data-price="{{session('coupon')['value']}}">You
                                                Save<span>${{number_format(session('coupon')['value'],2)}}</span></li>
                                        @endif
                                        @php
                                            $total_amount = Helper::totalCartPrice();
                                            $shipping_cost = 0;
                                            
                                            // Get selected shipping from old input or default
                                            if(old('shipping')) {
                                                $shipping = \Modules\Shipping\Models\Shipping::find(old('shipping'));
                                                $shipping_cost = $shipping ? $shipping->price : 0;
                                            }
                                            
                                            if(session('coupon')){
                                                $total_amount = $total_amount - session('coupon')['value'];
                                            }
                                            $total_amount = $total_amount + $shipping_cost;
                                        @endphp
                                        <li class="last" id="order_total_price">
                                            Total<span>${{number_format($total_amount,2)}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!--/ End Order Widget -->
                            <!-- Order Widget -->
                            <div class="single-widget">
                                <h2>Payments</h2>
                                <div class="content">
                                    <div class="checkbox">
                                        <form-group>
                                            <input name="payment_method" type="radio" value="cod" 
                                                   id="payment_cod"
                                                   {{ old('payment_method') == 'cod' ? 'checked' : '' }}> 
                                            <label for="payment_cod"> Cash On Delivery</label><br>
                                            <input name="payment_method" type="radio" value="stripe"
                                                   id="payment_stripe"
                                                   {{ old('payment_method') == 'stripe' ? 'checked' : '' }}> 
                                            <label for="payment_stripe"> Stripe</label>
                                        </form-group>
                                        @error('payment_method')
                                            <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <!--/ End Order Widget -->
                            <!-- Payment Method Widget -->
                            <div class="single-widget payement">
                                <div class="content">
                                    <img src="{{ asset('backend/img/payment-method.png') }}" alt="#">
                                </div>
                            </div>
                            <!--/ End Payment Method Widget -->
                            <!-- Button Widget -->
                            <div class="single-widget get-button">
                                <div class="content">
                                    <div class="button">
                                        <button type="submit" class="btn">proceed to checkout</button>
                                    </div>
                                </div>
                            </div>
                            <!--/ End Button Widget -->
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!--/ End Checkout -->

@endsection

@push('styles')
    <style>
        li.shipping {
            display: inline-flex;
            width: 100%;
            font-size: 14px;
            flex-wrap: wrap;
        }

        li.shipping .input-group-icon {
            width: 100%;
            margin-left: 10px;
        }

        .input-group-icon .icon {
            position: absolute;
            left: 20px;
            top: 0;
            line-height: 40px;
            z-index: 3;
        }

        .form-select {
            height: 30px;
            width: 100%;
        }

        .form-select .nice-select {
            border: none;
            border-radius: 0px;
            height: 40px;
            background: #f6f6f6 !important;
            padding-left: 45px;
            padding-right: 40px;
            width: 100%;
        }

        .list li {
            margin-bottom: 0 !important;
        }

        .list li:hover {
            background: #F7941D !important;
            color: white !important;
        }

        .form-select .nice-select::after {
            top: 14px;
        }

        /* Validation Styles */
        .is-invalid {
            border-color: #dc3545 !important;
        }
        
        .text-danger {
            color: #dc3545;
            font-size: 14px;
            margin-top: 5px;
            display: block;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            padding: 15px 20px;
            border-radius: 5px;
            margin-bottom: 25px;
        }
        
        .alert-danger strong {
            display: block;
            margin-bottom: 8px;
        }
        
        .alert-danger ul {
            margin: 0;
            padding-left: 20px;
            margin-bottom: 0;
        }
        
        .alert-danger ul li {
            margin-bottom: 3px;
        }
        
        .alert-danger ul li:last-child {
            margin-bottom: 0;
        }

        /* Error highlighting for nice-select */
        .nice-select.is-invalid {
            border: 2px solid #dc3545 !important;
            border-radius: 5px !important;
        }
        
        .error-highlight {
            border: 2px solid #dc3545 !important;
            border-radius: 5px !important;
        }
        
        .checkbox.error-highlight {
            padding: 10px;
            border: 2px solid #dc3545;
            border-radius: 5px;
            background-color: #fff8f8;
        }
    </style>
@endpush

@push('scripts')
    <script src="{{asset('frontend/js/nice-select/js/jquery.nice-select.min.js')}}"></script>
    <script src="{{ asset('frontend/js/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("select.select2").select2();
            
            // Initialize nice-select
            if ($('.nice-select').length) {
                $('select.nice-select').niceSelect();
            }
        });

        $(document).ready(function () {
            $('.shipping select[name=shipping]').change(function () {
                let cost = parseFloat($(this).find('option:selected').data('price')) || 0;
                let subtotal = parseFloat($('.order_subtotal').data('price'));
                let coupon = parseFloat($('.coupon_price').data('price')) || 0;
                $('#order_total_price span').text('$' + (subtotal + cost - coupon).toFixed(2));
            });

            // Trigger change event if there's an old shipping value
            let oldShipping = "{{ old('shipping') }}";
            if (oldShipping) {
                setTimeout(function() {
                    $('.shipping select[name=shipping]').val(oldShipping).trigger('change');
                }, 100);
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('form.form');

            // Clear any lingering session or localStorage data on page load
            if (sessionStorage.getItem('checkout_data')) {
                sessionStorage.removeItem('checkout_data');
                console.log('Cleared checkout data from sessionStorage');
            }
            
            if (localStorage.getItem('checkout_temp')) {
                localStorage.removeItem('checkout_temp');
                console.log('Cleared checkout data from localStorage');
            }

            form.addEventListener('submit', function (e) {
                // Get form elements
                const firstName = document.querySelector('input[name="first_name"]');
                const lastName = document.querySelector('input[name="last_name"]');
                const email = document.querySelector('input[name="email"]');
                const phone = document.querySelector('input[name="phone"]');
                const country = document.querySelector('select[name="country"]');
                const address1 = document.querySelector('input[name="address1"]');
                const shippingSelect = document.querySelector('select[name="shipping"]');
                const selectedPayment = document.querySelector('input[name="payment_method"]:checked');
                
                let errorMessages = [];
                let hasError = false;
                
                // Remove previous error highlights
                document.querySelectorAll('.error-highlight').forEach(el => {
                    el.classList.remove('error-highlight');
                });
                
                // Validate First Name
                if (!firstName.value.trim()) {
                    errorMessages.push('First name is required');
                    firstName.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Last Name
                if (!lastName.value.trim()) {
                    errorMessages.push('Last name is required');
                    lastName.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Email
                if (!email.value.trim()) {
                    errorMessages.push('Email address is required');
                    email.classList.add('error-highlight');
                    hasError = true;
                } else if (!isValidEmail(email.value)) {
                    errorMessages.push('Please enter a valid email address');
                    email.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Phone
                if (!phone.value.trim()) {
                    errorMessages.push('Phone number is required');
                    phone.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Country
                if (!country.value) {
                    errorMessages.push('Please select your country');
                    country.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Address
                if (!address1.value.trim()) {
                    errorMessages.push('Please enter your address');
                    address1.classList.add('error-highlight');
                    hasError = true;
                }
                
                // Validate Shipping
                if (shippingSelect && !shippingSelect.value) {
                    errorMessages.push('Please select a shipping method');
                    // Highlight the nice-select container
                    const niceSelect = shippingSelect.nextElementSibling;
                    if (niceSelect && niceSelect.classList.contains('nice-select')) {
                        niceSelect.classList.add('error-highlight');
                    }
                    hasError = true;
                }
                
                // Validate Payment Method
                if (!selectedPayment) {
                    errorMessages.push('Please select a payment method');
                    // Highlight payment radio container
                    const paymentContainer = document.querySelector('.single-widget .checkbox');
                    if (paymentContainer) {
                        paymentContainer.classList.add('error-highlight');
                    }
                    hasError = true;
                }

                if (hasError) {
                    // Show error messages
                    const errorHtml = 'Please fix the following errors:\n\n• ' + errorMessages.join('\n• ');
                    alert(errorHtml);
                    
                    // Prevent form submission
                    e.preventDefault();
                    return false;
                }
                
                // Clear any stored data on successful submission attempt
                if (sessionStorage.getItem('checkout_data')) {
                    sessionStorage.removeItem('checkout_data');
                }
                
                return true;
            });
            
            function isValidEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }
        });
    </script>
@endpush