@extends('layout.master')

@section('header')
    <div class="container">
        <div class="row align-items-center terms_condition_banner">

        </div><!-- /.row -->
    </div>
@endsection

@section('content')
    @php
        $price = 0;
    @endphp
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="checkout-title">Checkout</h3>
                <p class="pt-0">Quick delivery of the domain once payment is approved.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="rt-box-style-3">
                    <div class="rt-p-30">
                        @if(isset($domain))

                                @php
                                    $price = $total;
                                @endphp
                                <div class="row">
                                    <div class="col-md-6 col-5">
                           <span class="domain-name">
                            <a href="#">{{$domain->domain_name}}</a>
                            </span>
                                    </div>
                                    <div class="col-md-2 col"></div>
                                    <div class="col-md-3 col-3 text-right">
                                        <span class="domain-price">${{$price}}</span>
                                    </div>



                                </div>

                        @endif
                    </div><!-- /.rt-p-30 -->
                </div><!-- /.rt-box-style-3 -->
            </div>
        </div>
        <form action="{{asset('payment/subscription/done/')}}" method="post" class="require-validation" data-cc-on-file="false"  data-stripe-publishable-key="{{env("STRIPE_KEY" )}}">
            <div class="row">
                <div class="col-lg-8">
                    @csrf

                    <div class="rt-box-style-3 mt-55">
                        <div class="rt-p-30">
                            <div class="row">
                                <div class="col-md-6 col-7">
                                    <h3>My Information</h3>
                                </div>
                                <div class="col-md-6 col-5 text-right">
                                    <small>Please fill out all fields</small>
                                </div>
                            </div>
                            <div>


                            </div>
                            <div class="container">
                                <div class="row mt-5">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">First Name:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" class="form-control input-fields" name="first_name" value="{{old('first_name')}}">
                                    <input type="hidden" name="id" value="{{base64_encode($domain->id)}}">
                                        <input type="hidden" name="month_plan" value="{{$month}}">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Last Name:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" class="form-control input-fields" name="last_name" value="{{old('last_name')}}">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Email:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" class="form-control input-fields" name="email" value="{{old('email')}}">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Phone Number:</label>
                                    </div>
                                    <div class="col-md-2 col-3">
                                        <select name="phoneCode" name="phone_code"  value="92" class="form-control phone-number">
                                            <option value=""></option>
                                            <option value="1" selected="">+1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(United States, Canada)</option>
                                            <option value="7">+7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Russian Federation, Kazakhstan)</option>
                                            <option value="20">+20&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Egypt)</option>
                                            <option value="27">+27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(South Africa)</option>
                                            <option value="30">+30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Greece)</option>
                                            <option value="31">+31&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Netherlands)</option>
                                            <option value="32">+32&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Belgium)</option>
                                            <option value="33">+33&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(France)</option>
                                            <option value="34">+34&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Spain)</option>
                                            <option value="36">+36&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Hungary)</option>
                                            <option value="39">+39&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Italy)</option>
                                            <option value="40">+40&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Romania)</option>
                                            <option value="41">+41&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Switzerland)</option>
                                            <option value="43">+43&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Austria)</option>
                                            <option value="44">+44&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(United Kingdom, Guernsey, Isle of Man, Jersey)</option>
                                            <option value="45">+45&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Denmark)</option>
                                            <option value="46">+46&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Sweden)</option>
                                            <option value="47">+47&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Norway, Bouvet Island, Svalbard and Jan Mayen)</option>
                                            <option value="48">+48&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Poland)</option>
                                            <option value="49">+49&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Germany)</option>
                                            <option value="51">+51&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Peru)</option>
                                            <option value="52">+52&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mexico)</option>
                                            <option value="53">+53&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cuba)</option>
                                            <option value="54">+54&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Argentina)</option>
                                            <option value="55">+55&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Brazil)</option>
                                            <option value="56">+56&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Chile)</option>
                                            <option value="57">+57&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Colombia)</option>
                                            <option value="58">+58&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Venezuela)</option>
                                            <option value="60">+60&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Malaysia)</option>
                                            <option value="61">+61&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Australia, Christmas Island)</option>
                                            <option value="62">+62&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Indonesia)</option>
                                            <option value="63">+63&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Philippines)</option>
                                            <option value="64">+64&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(New Zealand, Pitcairn)</option>
                                            <option value="65">+65&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Singapore)</option>
                                            <option value="66">+66&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Thailand)</option>
                                            <option value="81">+81&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Japan)</option>
                                            <option value="82">+82&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(South Korea)</option>
                                            <option value="84">+84&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Vietnam)</option>
                                            <option value="86">+86&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(China)</option>
                                            <option value="90">+90&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Turkey)</option>
                                            <option value="91">+91&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(India)</option>
                                            <option value="92">+92&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Pakistan)</option>
                                            <option value="93">+93&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Afghanistan)</option>
                                            <option value="94">+94&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Sri Lanka)</option>
                                            <option value="95">+95&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Myanmar)</option>
                                            <option value="98">+98&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Iran)</option>
                                            <option value="211">+211&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(South Sudan)</option>
                                            <option value="212">+212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Morocco, Western Sahara)</option>
                                            <option value="213">+213&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Algeria)</option>
                                            <option value="216">+216&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tunisia)</option>
                                            <option value="218">+218&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Libya)</option>
                                            <option value="220">+220&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Gambia)</option>
                                            <option value="221">+221&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Senegal)</option>
                                            <option value="222">+222&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mauritania)</option>
                                            <option value="223">+223&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mali)</option>
                                            <option value="224">+224&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Guinea)</option>
                                            <option value="225">+225&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ivory Coast)</option>
                                            <option value="226">+226&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Burkina Faso)</option>
                                            <option value="227">+227&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Niger)</option>
                                            <option value="228">+228&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Togo)</option>
                                            <option value="229">+229&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Benin)</option>
                                            <option value="230">+230&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mauritius)</option>
                                            <option value="231">+231&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Liberia)</option>
                                            <option value="232">+232&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Sierra Leone)</option>
                                            <option value="233">+233&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ghana)</option>
                                            <option value="234">+234&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Nigeria)</option>
                                            <option value="235">+235&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Chad)</option>
                                            <option value="236">+236&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Central African Republic)</option>
                                            <option value="237">+237&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cameroon)</option>
                                            <option value="238">+238&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cape Verde)</option>
                                            <option value="239">+239&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Sao Tome and Principe)</option>
                                            <option value="240">+240&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Equatorial Guinea)</option>
                                            <option value="241">+241&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Gabon)</option>
                                            <option value="242">+242&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Republic of the Congo)</option>
                                            <option value="243">+243&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Democratic Republic of the Congo)</option>
                                            <option value="244">+244&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Angola)</option>
                                            <option value="245">+245&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Guinea-Bissau)</option>
                                            <option value="246">+246&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(British Indian Ocean Territory)</option>
                                            <option value="248">+248&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Seychelles)</option>
                                            <option value="249">+249&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Sudan)</option>
                                            <option value="250">+250&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Rwanda)</option>
                                            <option value="251">+251&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ethiopia)</option>
                                            <option value="252">+252&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Somalia)</option>
                                            <option value="253">+253&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Djibouti)</option>
                                            <option value="254">+254&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Kenya)</option>
                                            <option value="255">+255&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tanzania)</option>
                                            <option value="256">+256&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Uganda)</option>
                                            <option value="257">+257&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Burundi)</option>
                                            <option value="258">+258&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mozambique)</option>
                                            <option value="260">+260&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Zambia)</option>
                                            <option value="261">+261&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Madagascar)</option>
                                            <option value="262">+262&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mayotte, Reunion, French Southern Territories)</option>
                                            <option value="263">+263&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Zimbabwe)</option>
                                            <option value="264">+264&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Namibia)</option>
                                            <option value="265">+265&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Malawi)</option>
                                            <option value="266">+266&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Lesotho)</option>
                                            <option value="267">+267&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Botswana)</option>
                                            <option value="268">+268&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Swaziland)</option>
                                            <option value="269">+269&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Comoros)</option>
                                            <option value="290">+290&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Saint Helena)</option>
                                            <option value="291">+291&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Eritrea)</option>
                                            <option value="297">+297&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Aruba)</option>
                                            <option value="298">+298&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Faroe Islands)</option>
                                            <option value="299">+299&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Greenland)</option>
                                            <option value="350">+350&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Gibraltar)</option>
                                            <option value="351">+351&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Portugal)</option>
                                            <option value="352">+352&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Luxembourg)</option>
                                            <option value="353">+353&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ireland)</option>
                                            <option value="354">+354&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Iceland)</option>
                                            <option value="355">+355&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Albania)</option>
                                            <option value="356">+356&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Malta)</option>
                                            <option value="357">+357&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cyprus)</option>
                                            <option value="358">+358&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Aland Islands, Finland)</option>
                                            <option value="359">+359&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bulgaria)</option>
                                            <option value="370">+370&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Lithuania)</option>
                                            <option value="371">+371&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Latvia)</option>
                                            <option value="372">+372&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Estonia)</option>
                                            <option value="373">+373&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Moldova)</option>
                                            <option value="374">+374&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Armenia)</option>
                                            <option value="375">+375&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Belarus)</option>
                                            <option value="376">+376&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Andorra)</option>
                                            <option value="377">+377&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Monaco)</option>
                                            <option value="378">+378&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(San Marino)</option>
                                            <option value="379">+379&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Vatican)</option>
                                            <option value="380">+380&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ukraine)</option>
                                            <option value="381">+381&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Serbia)</option>
                                            <option value="382">+382&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Montenegro)</option>
                                            <option value="385">+385&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Croatia)</option>
                                            <option value="386">+386&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Slovenia)</option>
                                            <option value="387">+387&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bosnia and Herzegovina)</option>
                                            <option value="389">+389&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Macedonia)</option>
                                            <option value="420">+420&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Czech Republic)</option>
                                            <option value="421">+421&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Slovakia)</option>
                                            <option value="423">+423&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Liechtenstein)</option>
                                            <option value="500">+500&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Falkland Islands, South Georgia and the South Sandwich Islands)</option>
                                            <option value="501">+501&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Belize)</option>
                                            <option value="502">+502&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Guatemala)</option>
                                            <option value="503">+503&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(El Salvador)</option>
                                            <option value="504">+504&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Honduras)</option>
                                            <option value="505">+505&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Nicaragua)</option>
                                            <option value="506">+506&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Costa Rica)</option>
                                            <option value="507">+507&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Panama)</option>
                                            <option value="508">+508&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Saint Pierre and Miquelon)</option>
                                            <option value="509">+509&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Haiti)</option>
                                            <option value="590">+590&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Guadeloupe, Saint Barthelemy, Saint Martin)</option>
                                            <option value="591">+591&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bolivia)</option>
                                            <option value="592">+592&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Guyana)</option>
                                            <option value="593">+593&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Ecuador)</option>
                                            <option value="594">+594&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(French Guiana)</option>
                                            <option value="595">+595&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Paraguay)</option>
                                            <option value="596">+596&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Martinique)</option>
                                            <option value="597">+597&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Suriname)</option>
                                            <option value="598">+598&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Uruguay)</option>
                                            <option value="599">+599&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Curacao, Bonaire, Saint Eustatius and Saba )</option>
                                            <option value="670">+670&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Timor-Leste)</option>
                                            <option value="672">+672&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Antarctica, Heard Island and McDonald Islands, Norfolk Island)</option>
                                            <option value="673">+673&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Brunei)</option>
                                            <option value="674">+674&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Nauru)</option>
                                            <option value="675">+675&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Papua New Guinea)</option>
                                            <option value="676">+676&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tonga)</option>
                                            <option value="677">+677&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Solomon Islands)</option>
                                            <option value="678">+678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Vanuatu)</option>
                                            <option value="679">+679&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Fiji)</option>
                                            <option value="680">+680&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Palau)</option>
                                            <option value="681">+681&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Wallis and Futuna)</option>
                                            <option value="682">+682&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cook Islands)</option>
                                            <option value="683">+683&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Niue)</option>
                                            <option value="685">+685&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Samoa)</option>
                                            <option value="686">+686&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Kiribati)</option>
                                            <option value="687">+687&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(New Caledonia)</option>
                                            <option value="688">+688&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tuvalu)</option>
                                            <option value="689">+689&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(French Polynesia)</option>
                                            <option value="690">+690&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tokelau)</option>
                                            <option value="691">+691&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Micronesia)</option>
                                            <option value="692">+692&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Marshall Islands)</option>
                                            <option value="850">+850&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(North Korea)</option>
                                            <option value="852">+852&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Hong Kong)</option>
                                            <option value="853">+853&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Macao)</option>
                                            <option value="855">+855&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cambodia)</option>
                                            <option value="856">+856&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Laos)</option>
                                            <option value="880">+880&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bangladesh)</option>
                                            <option value="886">+886&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Taiwan)</option>
                                            <option value="891">+891&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Cocos Islands)</option>
                                            <option value="960">+960&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Maldives)</option>
                                            <option value="961">+961&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Lebanon)</option>
                                            <option value="962">+962&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Jordan)</option>
                                            <option value="963">+963&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Syria)</option>
                                            <option value="964">+964&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Iraq)</option>
                                            <option value="965">+965&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Kuwait)</option>
                                            <option value="966">+966&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Saudi Arabia)</option>
                                            <option value="967">+967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Yemen)</option>
                                            <option value="968">+968&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Oman)</option>
                                            <option value="970">+970&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Palestinian Territory)</option>
                                            <option value="971">+971&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(United Arab Emirates)</option>
                                            <option value="972">+972&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Israel)</option>
                                            <option value="973">+973&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bahrain)</option>
                                            <option value="974">+974&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Qatar)</option>
                                            <option value="975">+975&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Bhutan)</option>
                                            <option value="976">+976&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Mongolia)</option>
                                            <option value="977">+977&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Nepal)</option>
                                            <option value="992">+992&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Tajikistan)</option>
                                            <option value="993">+993&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Turkmenistan)</option>
                                            <option value="994">+994&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Azerbaijan)</option>
                                            <option value="995">+995&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Georgia)</option>
                                            <option value="996">+996&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Kyrgyzstan)</option>
                                            <option value="998">+998&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Uzbekistan)</option>
                                        </select>

                                    </div>
                                    <div class="col-md-6 col-6">
                                        <input type="text" name="phone" value="{{old('phone')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-7">
                                        <h3>Payment information</h3>
                                    </div>
                                    <div class="col-md-6 col-5 text-right">
                                        <img src="{{asset('assets')}}/images/all-img/cc-img.png" alt="">
                                    </div>
                                </div>
                                <div class="row mt-5">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Card Number:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" name="card" value="{{old('card')}}" class="form-control input-fields card-number">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Name on Card:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" name="card_name" value="{{old('card_name')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Expiration Date:</label>
                                    </div>
                                    <div class="col-md-4 col-4">
                                        <div class="select select-month">
                                            <select name="month"  class="form-control card-expiry-month">
                                                <option value="">Month ...</option>
                                                <option value="01">1</option>
                                                <option value="02">2</option>
                                                <option value="03">3</option>
                                                <option value="04">4</option>
                                                <option value="05">5</option>
                                                <option value="06">6</option>
                                                <option value="07">7</option>
                                                <option value="08">8</option>
                                                <option value="09">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-4">
                                        <div class="select select-month">
                                            <select name="year" class="form-control card-expiry-year">
                                                <option value="">Year ...</option>
                                                <option value="2021">2021</option>
                                                <option value="2022">2022</option>
                                                <option value="2023">2023</option>
                                                <option value="2024">2024</option>
                                                <option value="2025">2025</option>
                                                <option value="2026">2026</option>
                                                <option value="2027">2027</option>
                                                <option value="2028">2028</option>
                                                <option value="2029">2029</option>
                                                <option value="2030">2030</option>
                                                <option value="2031">2031</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">CVV:</label>
                                    </div>
                                    <div class="col-md-5 col-5">
                                        <input type="text" name="cvc" class="form-control input-fields card-cvc">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h3>Billing address</h3>
                                    </div>
                                    <div class="col-md-6 text-right">
                                    </div>
                                </div>
                                <div class="row mt-5">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Address 1:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text" name="address_1" value="{{old('address_1')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Address 2:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text"  name="address_2" value="{{old('address_2')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">City :</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <input type="text"  name="city" value="{{old('city')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Province:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <select name="state"  class="form-control state-dropdown" id="state_div">

                                        </select>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Zip/Postal Code:</label>
                                    </div>
                                    <div class="col-md-6 col-6">
                                        <input type="text"  name="zip_postal_code" value="{{old('zip_postal_code')}}" class="form-control input-fields">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3 col-3 text-right">
                                        <label for="" class="info-form-label">Country:</label>
                                    </div>
                                    <div class="col-md-9 col-9">
                                        <select name="country" class="form-control state-dropdown" id="country">
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.rt-p-30 -->
                    </div><!-- /.rt-box-style-3 -->
                    {{--                    <div class="row mt-5">--}}
                    {{--                        <div class="col-md-12">--}}
                    {{--                            <span><input type="checkbox" name="personal_info"></span>--}}
                    {{--                            <span>Keep my personal information private with Whois Privacy Protection. <span><a href="" class="underline" data-toggle="modal" data-target="#whats-this-modal">What's this?</a></span> </span>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="col-md-4">--}}
                    {{--                            <button type="submit" class="rt-btn rt-gradient  text-uppercase  rt-Bshadow-2 wow fade-in-left pill mt-5 btn-block" data-wow-duration="1s" data-wow-delay="0.6s">Place order</button>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="col-md-4 mt-5 placeorder-total">--}}
                    {{--                            <div class="row">--}}
                    {{--                                <div class="col-md-7">--}}
                    {{--                                    <span class="title-heading">Order total:</span>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-md-5">--}}
                    {{--                                    <span class="total-sum">${{$price}}</span>--}}
                    {{--                                </div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                </div>
                <div class="col-lg-4 mt-55">

                    <div class="rt-box-style-3">
                        <div class="rt-p-30">

                            <div class="row">
                                <div class="col-md-6 col-6">
                                    <span class="title-heading">Order total:</span>
                                </div>
                                <div class="col-md-6 col-6">
                                    <span class="total-sum">${{$price}}</span>
                                </div>
                                <div class="col-md-12">
                                    <hr>
                                </div>
                                <div class="col-md-12">
                                    <span><input type="checkbox"></span>
                                    <span>Keep my personal information private with Whois Privacy <br>Protection. <span><a
                                                href="" class="underline" data-toggle="modal" data-target="#whats-this-modal">What's this?</a></span> </span>
                                    <button type="submit" class="rt-btn rt-gradient  text-uppercase  rt-Bshadow-2 wow fade-in-left pill mt-5 btn-block" data-wow-duration="1s" data-wow-delay="0.6s">Place order</button>
                                </div>
                            </div><!-- /.rt-p-30 -->

                        </div><!-- /.rt-box-style-3 -->
                    </div>
                    <p class="text-center mb-30 mt-5 font-size-17">We guarantee 100% privacy.<br>Your information will not be shared.</p>
                    <div class="row mt-5">
                        <div class="col-md-12">
                            <img src="{{asset('assets')}}/images/all-img/garantee.png"  class="img-fluid badge-icon mx-auto d-block" alt="">
                            <h3 class="checkout-bonus-title">30-day money <br> back guarantee</h3>
                            <p class="text-center"><a href="#" class="modal-trigger learn-more-link"  data-toggle="modal" data-target="#money-back-gurantee-modal">Learn more</a></p>

                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <!-- Button trigger modal -->


    <!-- Modal -->
    <div class="modal fade" id="whats-this-modal" tabindex="-1" aria-labelledby="delivery-domain" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header delivery-domain-header pt-5 text-white">
                    <h5 class="modal-title" id="delivery-domain-title">Whois</h5>
                    <button type="button" class="close cross-btn" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
    </div>



    <!--30-day money back guarantee Modal -->
    <div class="modal fade" id="money-back-gurantee-modal" tabindex="-1" aria-labelledby="money-back-gurantee-modal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header delivery-domain-header pt-5 text-white">
                    <h5 class="modal-title" id="delivery-domain-title">30-day money back guarantee</h5>
                    <button type="button" class="close cross-btn" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('script')
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

    <script type="text/javascript">

        $(function() {
            var $form         = $(".require-validation");
            $('form.require-validation').bind('submit', function(e) {
                var $form         = $(".require-validation"),
                    inputSelector = ['input[type=email]', 'input[type=password]',
                        'input[type=text]', 'input[type=file]',
                        'textarea'].join(', '),
                    $inputs       = $form.find('.required').find(inputSelector),
                    $errorMessage = $form.find('div.error'),
                    valid         = true;
                $errorMessage.addClass('hide');

                $('.has-error').removeClass('has-error');
                $inputs.each(function(i, el) {
                    var $input = $(el);
                    if ($input.val() === '') {
                        $input.parent().addClass('has-error');
                        $errorMessage.removeClass('hide');
                        e.preventDefault();
                    }
                });

                if (!$form.data('cc-on-file')) {
                    e.preventDefault();
                    Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                    Stripe.createToken({
                        number: $('.card-number').val(),
                        cvc: $('.card-cvc').val(),
                        exp_month: $('.card-expiry-month').val(),
                        exp_year: $('.card-expiry-year').val()
                    }, stripeResponseHandler);
                }

            });

            function stripeResponseHandler(status, response) {
                if (response.error) {
                    alert(response.error.message)
                    $('.error')
                        .removeClass('hide')
                        .find('.alert')
                        .text(response.error.message);
                } else {
                    // token contains id, last4, and card type
                    $('#btn-pay').attr("disabled", true);
                    var token = response['id'];
                    // insert the token into the form so it gets submitted to the server
                    $form.find('input[type=text]').empty();
                    $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                    $form.get(0).submit();
                }
            }

        });

        $(".input-mask").inputmask();
    </script>

    <script>
        var e = document.getElementById("country");
        var strUser = e.options[e.selectedIndex].value;
        $.ajax({
            type: 'get',
            url: '{{url('/get/states')}}'+"/"+strUser,
            data:{
                id:strUser,
                '_token': '{{csrf_token()}}'
            },

            success: function (data) {
                $('#state_div').html(data);
            }
        });
        $("#country").change(function () {
            var strUser = $(this).val();
            $.ajax({
                type: 'get',
                url: '{{url('/get/states')}}'+"/"+strUser,
                data:{
                    id:strUser,
                    '_token': '{{csrf_token()}}'
                },

                success: function (data) {
                    $('#state_div').html(data);
                }
            });
        });
    </script>
    <script>
        @if(Session::has('message'))
        display_success("{{ Session::get('message')}}")
        @endif
        @if(count($errors->all()))
        @php
            $message = '';
        @endphp
        @foreach ($errors->all() as $error)
        @php
            $message = '<p>'.$message.'</p>'.'<p>'.$error.'</p>'
        @endphp
        @endforeach

        display_error('{!! $message !!}')
        @endif


    </script>
@endsection