@extends("layout")
@section("content")

@php
$arr=Session::get('data'); $plan= $arr[0]; $price= $arr[1]; $quantity = $arr[2];
@endphp

<!-- breadcrumb start  -->

<section class="common-inner-header green-blue-gradient">
      <div class="container">
          <div class="row">
              <div class="col-sm-12 text-center">
                  <nav aria-label="breadcrumb" class="white-breadcrumbs">
                      <ol class="breadcrumb p-2 mb-0">
                          <li class="breadcrumb-item"><a href="{{url('/iptv-usa')}}"
                                  class="text-white text-decoration-none fw-bold">Home</a></li>
                          <li class="breadcrumb-item active text-white" aria-current="page">Payment</li>
                      </ol>
                  </nav>
              </div>
          </div>
      </div>
  </section>
  
<!-- breadcrumb end -->

<section class="banner-sec">
    <div class="banner-img text-center">
      
        <picture>
            <source media="(max-width:767px)" type="image/webp" srcset="{{ asset('images/payment-banner-mobile.webp') }}">
            <source media="(max-width:767px)" type="image/jpeg" srcset="{{ asset('images/payment-banner-mobile.jpg') }}">

            <source type="image/webp" srcset="{{ asset('images/payment-banner.webp') }}">
            <source type="image/jpeg" srcset="{{ asset('images/payment-banner.jpg') }}">
            <img src="{{ asset('images/payment-banner.jpg') }}"  width="1920" height="445" alt="" title="" loading="lazy" class="img-fluid">
        </picture>
    </div>
   
</section>

<section class="paymentform-sec py-5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <div class="card custom-bg-payemnt shadow rounded border-0">
                    <div class="card-body">
                        <form id="payment-form" name="payment-form" class="w-text-placeholder" method="post"
                            autocomplete="on">
                            {{-- <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="ip" value="{{request()->ip()}}" />
                            <input type="hidden" name="domain" value="{{url('/')}}" />
                            <input type="hidden" name="currency" value="USD - US Dollar" /> --}}
                            <div class="clearfix"></div>
                            <div class="row">
                                <div class="col-md-6">
                                <div class="signup-bnr payment-box-sec">

                                        <h5
                                            class="bn-from-title p-2 rounded-3 mb-3 orange-bg text-white text-center h5">
                                            <strong>Shipping/Billing Details </strong>
                                        </h5>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">First Name <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_fname" id="iptv_fname"
                                                        placeholder="Please enter first name" type="text" required=""
                                                        title="Please enter first name">

                                                        <small class="text-warning lh-1 iptv_fname_err error-text" id="iptv_fname_err"></small>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Last Name <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_lname" id="iptv_lname"
                                                        placeholder="Please enter last name" type="text" required=""
                                                        title="Please enter last name">

                                                        <small class="text-warning lh-1 iptv_lname_err error-text" id="iptv_lname_err"></small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label class="text-white">Billing Address <span class="color-red fw-bold">*</span></label>
                                            <input class="form-control" name="iptv_street" id="iptv_street"
                                                placeholder="Please enter billing address" type="text" required=""
                                                title="Please enter billing address">

                                                <small class="text-warning lh-1 iptv_street_err error-text" id="iptv_street_err"></small>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Country <span class="color-red fw-bold">*</span></label>
                                                    <div class="form-item w-100">
                                                        <input id="country_selector" type="text"
                                                            class="form-control w-100" name="iptv_country">
                                                        <label for="country_selector" style="display:none;">Select a
                                                            country here...</label>
                                                    </div>
                                                    <div class="form-item" style="display:none;">
                                                        <input type="text" id="country_selector_code"
                                                            class="form-control" name="iptv_country"
                                                            data-countrycodeinput="1" readonly
                                                            placeholder="Selected country code will appear here" />
                                                        <label for="country_selector_code">...and the selected country
                                                            code will be updated here</label>

                                                            <small class="text-warning lh-1 iptv_country_err error-text" id="iptv_country_err"></small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">State <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_state" id="iptv_state"
                                                        placeholder="Please enter state" type="text" minlength="3"
                                                        title="Please enter state">

                                                        <small class="text-warning lh-1 iptv_state_err error-text" id="iptv_state_err"></small>
                                                </div>
                                            </div>


                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">City <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_city" id="iptv_city"
                                                        placeholder="Please enter city" type="text" minlength="3"
                                                        title="Please enter city">
                                                        
                                                        <small class="text-warning lh-1 iptv_city_err error-text" id="iptv_city_err"></small>
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Zip Code <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" placeholder="Please enter zip code"
                                                        id="iptv_zip" name="iptv_zip" type="text" maxlength="8"
                                                        required="" title="Please enter zip code" />
                                                        <small class="text-warning lh-1 iptv_zip_err error-text" id="iptv_zip_err"></small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Phone Number <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" placeholder="Please enter phone number"
                                                        name="iptv_phone" id="phone" title="Please enter phone number"
                                                        required="" type="text" />

                                                        <small class="text-warning lh-1 iptv_phone_err error-text" id="iptv_phone_err"></small>
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Email for receipt <span
                                                            class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="email"
                                                        placeholder="Please enter email for receipt" type="text"
                                                        required="" title="Please enter email for receipt" />

                                                        <small class="text-warning lh-1 email_err error-text" id="email_err"></small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label class="text-white" for="sameadr">
                                                <input value="Yes" name="sameadr" onclick="updateShippingAddress(this);" id="sameadr" type="checkbox"
                                                    checked>&nbsp; Shipping address same as Billing
                                            </label>
                                        </div>
                                        

                                   
                                        <div id="shippingBillingAddress" class="row" style="display:none">

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Shipping Address <span
                                                            class="color-red fw-bold">*</span></label>
                                                    <input type="text" class="form-control" name="iptv_street_shipping"
                                                        id="iptv_street_shipping" value=""
                                                        placeholder="Please enter shipping address" required=""
                                                        title="Please enter shipping address">

                                                        <small
                                                        class="text-warning lh-1 iptv_street_shipping_err error-text" id="iptv_street_shipping_err"></small>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Country <span class="color-red fw-bold">*</span></label>
                                                    <div class="form-item w-100">
                                                        <input id="shipping" type="text" class="form-control"
                                                            name="shipping">
                                                        <label for="country_selector" style="display:none;">Select a
                                                            country here...</label>
                                                    </div>
                                                    <div class="form-item" style="display:none;">
                                                        <input type="text" id="shipping_code" class="form-control"
                                                            name="shipping_country" data-countrycodeinput="1" readonly
                                                            placeholder="Selected country code will appear here" />
                                                        <label for="shipping_code">...and the selected country code will
                                                            be updated here</label>

                                                            <small
                                                            class="text-warning lh-1 shipping_code_err error-text" id="shipping_code_err"></small>
                                                    </div>
                                                </div>
                                            </div>
                                          
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">State <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_state_shipping" 
                                                        id="iptv_state_shipping" placeholder="Please enter state"
                                                        type="text" minlength="3"
                                                        title="Please enter state">

                                                        <small class="text-warning lh-1 iptv_state_shipping_err error-text" id="iptv_state_shipping_err"></small>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">City <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_city_shipping"
                                                        id="iptv_city_shipping" placeholder="Please enter city"
                                                        type="text" minlength="3" required="" title="Please enter city">

                                                         <small
                                                               class="text-warning lh-1 iptv_city_shipping_err error-text" id="iptv_city_shipping_err"></small>
                                                     
                                                </div>
                                            </div>

                                            

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Zip Code<span class="color-red fw-bold">*</span></label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Please enter Zip code" value=""
                                                        name="iptv_zip_shipping" id="iptv_zip_shipping" maxlength="8"
                                                        required="" title="Please enter Zip code" />

                                                        <small class="text-warning lh-1 iptv_zip_shipping_err error-text" id="iptv_zip_shipping_err"></small>
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Alternate Phone Number</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Please enter alternate phone number"
                                                        name="iptv_phone_two" id="iptv_phone_two" value=""
                                                        title="Please enter alternate phone number" />

                                                        <small class="text-warning lh-1 iptv_phone_two_err error-text" id="iptv_phone_two_err"></small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>

                                </div>
                                <!-- Payment Info Block -->

                                <div class="col-md-6">
                                    <div class="signup-bnr payment-box-sec">

                                        <h5
                                            class="bn-from-title p-2 rounded-3 mb-3 orange-bg text-white text-center h5">
                                            <strong>Payment Details</strong>
                                        </h5>
                                        <div class="form-group mb-3">
                                            <label class="text-white">Selected Plan</label>
                                            <input name="plan" class="form-control" value="{{ $plan }}" placeholder="Selected Plan"
                                                type="text" readonly>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Amount</label>
                                                    <!--<div class="d-flex">-->
                                                    <!--    <span class="currency-prepend rounded-left">US$</span>-->
                                                    <input name="iptv_currency" id="iptv_currency"
                                                        class="form-control rounded-right" value="CAD" type="hidden">
                                                    <!--</div>-->
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text read-cad">USD $</span>
                                                        <input name="iptv_amount" id="iptv_amount"
                                                            class="form-control rounded-right" placeholder="Amount"
                                                            type="text" value="{{ $price }}" readonly >


                                                    </div>

                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Quantity</label>
                                                    <input id="price" class="form-control" value=""
                                                        placeholder="Quantity" type="hidden" required=""
                                                        title="Please select quantity" readonly="">
                                                        <select class="form-control d-block s-bg-style" name="quantity" id="leave">
                                                            <option value="">--Select quantity--</option>
                                                            <option value="1" @if($quantity == 1) selected @endif>1</option>
                                                            <option value="2" @if($quantity == 2) selected @endif>2</option>
                                                            <option value="3" @if($quantity == 3) selected @endif>3</option>
                                                            <option value="4" @if($quantity == 4) selected @endif>4</option>
                                                            <option value="5" @if($quantity == 5) selected @endif>5</option>
                                                        </select>
                                                        <span class="text-warning mt-2 quantity_err" id="quantity_err"></span>
                                                     </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Cardholder name <span
                                                            class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_cardholder_name"
                                                        placeholder="Enter cardholder name" type="text"
                                                        id="iptv_cardholder_name" minlength="3"
                                                        title="Enter cardholder name" required="">

                                                        <small class="text-warning lh-1 iptv_cardholder_name_err error-text" id="iptv_cardholder_name_err"></small>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label for="cc-number" class="control-label text-white">Card details <span
                                                            class="color-red fw-bold">*</span> </label>
                                                    <input class="form-control cc-number" name="ipti_card_details"
                                                        id="ipti_card_details" placeholder="XXXX XXXX XXXX XXXX XXXX"
                                                        type="text" inputmode="numeric" autocomplete="cc-number"
                                                        minLength="18" maxLength="24" required="" title="Please enter card details">
                                                        
                                                        <small class="text-warning lh-1 ipti_card_details_err error-text" id="ipti_card_details_err"></small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">Expiration Date <span
                                                            class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_expiry" id="iptv_expiry"
                                                        inputmode="numeric" placeholder="MM / YYYY" required=""
                                                        title="Please enter expiry date">
                                                    <!-- <div class="err" id="dateerror"></div> -->
                                                    <small class="text-warning lh-1 iptv_expiry_err error-text" id="iptv_expiry_err"></small>
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group mb-3">
                                                    <label class="text-white">CVC <span class="color-red fw-bold">*</span></label>
                                                    <input class="form-control" name="iptv_cvc" placeholder="CVC"
                                                        maxlength="4" id="iptv_cvc" type="password" required=""
                                                        title="Please enter cvc">
                                                     <small class="text-warning lh-1 iptv_cvc_err error-text" id="iptv_cvc_err"></small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <label class="text-white">Fill Capcha <span
                                                        class="color-red fw-bold">*</span></label>
                                                <div id="captchaBackground2" class="custom-cpacha cpacusrefer d-flex justify-content-between">
                                                    <input id="textBox" type="text"
                                                        class="form-control float-start p-2 me-2" name="captcha10"
                                                        placeholder="Code">

                                                    <div id="captcha"
                                                        class="captcha-wrapper bg-white border-light px-2 pt-2 ps-3 rounded-2">
                                                        <img src="{{ URL::to('/captcha')}}"
                                                            class="img-fluid p-0 captchaImage"
                                                            alt="CAPTCHA" id="imgcaptcha3">
                                                    </div>
                                                    <div class="cpacha-ref-white mt-1">
                                                    <input type="button" class="refresh_captcha_4" id="3">
                                                    <!-- <button id="3" type="button"
                                                        class="btn btn-primary border-0 p-1 rounded refresh_captcha_4">
                                                    </button> -->
                                                    <!-- <span id="output2" class="text-danger fs-small"></span> -->
                                                    <!-- <span id="output" class="error"></span> -->

                                                </div>

                                            </div>
                                            <small
                                            class="text-warning lh-1 captcha10_err error-text" id="captcha10_err"></small>
                                        </div>

                                        <div class="form-group mb-0 mt-3">
                                            <button type="submit" id="buynow"
                                                class="btn btn-primary rounded-3 border-0 text-white py-2 px-3 fs-5 w-100"
                                                name="submit-button"> Pay Now </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- / Payment Info Block -->
                            </div>


                           
                        </form>
                    </div>
                </div>




            </div> <!-- col.// -->
        </div> <!-- row.// -->
    </div>
</section>
<section class="payment-banner-desktop py-3">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <picture class="lazyLoad">
                    <source type="image/webp" data-srcset="{{ asset('images/tashan-payments-icons.webp') }}">
                    <source type="image/jpeg" data-srcset="{{ asset('images/tashan-payments-icons.png') }}">
                    <img data-srcset="{{ asset('images/tashan-payments-icons.png') }}"  width="1000" height="150" alt="tashan payment" title="tashan payment" loading="lazy" class="img-fluid">
                </picture>
            </div>
        </div>
	</div>
</section>


@endsection
@section("meta")
<title></title>
<meta name="description" content="">
<link rel="canonical" href="{{url('/payment')}}">
<link rel="stylesheet" href="{{ asset('css/countrySelect.min.css?v=0.7') }}">
<link rel="stylesheet" href="{{ asset('css/intlTelInput.css?v=0.7') }}">
@endsection

@section('scripts')
<script src="{{ asset('js/countrySelect.js?v=0.7') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.js"></script>
<script src="{{ asset('js/intlTelInput-jquery.min.js?v=0.7') }}"></script>
   <!-- <script src="{!! asset('js/countrySelect.js') !!}"></script> -->

   <script>
      
      function printErrorMsg(msg) {
        $('[class*="_err"]').text('');
        $.each(msg, function(key, value) {
            $('.' + key + '_err').text(value);
        });
    }

// $(document).ready(function() {

//     $("#leave option[value^='" + $('.qty').val() + "']").attr("selected", "true");

//     document.getElementById("iptv_amount").value = $('#price').val();
//     var amt = $('#price').val();
//         var qt = $('#leave').val();
//         var msg = qt * amt;
//         document.getElementById("iptv_amount").value = msg;
//     $("#leave").on('change', function() {
//         var amt = $('#price').val();
//         var qt = $('#leave').val();
//         var msg = qt * amt;
//         document.getElementById("iptv_amount").value = msg;
//     });
// });
   </script>


   <script>
$(document).ready(function() {
    $("input, textarea").keypress(function(e) {
        if (e.which === 32 && !this.value.length) {
            e.preventDefault();
        }
        var inputValue = e.charCode;
    });

    $("#country_selector").countrySelect({
        defaultCountry: "us",
        //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        preferredCountries: ['us']
    });
});
   </script>
   <script>
$(document).ready(function() {
    $("#shipping").countrySelect({
        defaultCountry: "us",
        //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        preferredCountries: ['us', 'gb', 'ca']
    });

});
   </script>
   <script>
$(document).ready(function() {
    $.fn.jQuerySimpleCounter = function(options) {
        var settings = $.extend({
            start: 0,
            end: 100,
            easing: 'swing',
            duration: 400,
            complete: ''
        }, options);
        var thisElement = $(this);
        $({
            count: settings.start
        }).animate({
            count: settings.end
        }, {
            duration: settings.duration,
            easing: settings.easing,
            step: function() {
                var mathCount = Math.ceil(this.count);
                thisElement.text(mathCount);
            },
            complete: settings.complete
        });
    };

    $('#count1').jQuerySimpleCounter({
        end: 50000,
        duration: 14000
    });
    $('#count2').jQuerySimpleCounter({
        end: 500,
        duration: 14000
    });
    $('#count3').jQuerySimpleCounter({
        end: 140,
        duration: 14000
    });
    $('#count4').jQuerySimpleCounter({
        end: 250,
        duration: 14000
    });
    $('#count5').jQuerySimpleCounter({
        end: 100000,
        duration: 14000
    });
});
   </script>
   <script>
$(document).ready(function() {

    // $("#sameadr").click(function() {
    //     if ($(this).is(":checked") == true) {
    //         if ($('#iptv_street').val() != '') {
    //             $('#iptv_street_shipping').val($('#iptv_street').val());
    //         }
    //         if ($('#iptv_city').val() != '') {
    //             $('#iptv_city_shipping').val($('#iptv_city').val());
    //         }
    //         if ($('#iptv_state').val() != '') {
    //             $('#iptv_state_shipping').val($('#iptv_state').val());
    //         }
    //         if ($('#iptv_zip').val() != '') {
    //             $('#iptv_zip_shipping').val($('#iptv_zip').val());
    //         }
    //         if ($('#phone').val() != '') {
    //             $('#iptv_phone_two').val($('#phone').val());
    //         }
    //         if ($('#country_selector').val() != '') {
    //             $('#shipping').val($('#country_selector').val());
    //             $('#shipping_code').val($('#country_selector_code').val());
    //             $('#shippingBillingAddress ').fadeOut('medium');
    //         }
    //         //alert($('#country_selector_code').val())
    //     } else {
          
    //         $('#iptv_street_shipping').val('');
    //         $('#iptv_city_shipping').val('');
    //         $('#iptv_state_shipping').val('');
    //         $('#iptv_zip_shipping').val('');
    //         $('#iptv_phone_two').val('');
    //         $('#shipping').val($('#shipping').val());
    //         //$('#shipping').attr('value',$('#shipping').val());                
    //         //$('#shipping').val($('#shipping_code').val());
    //         $('#shippingBillingAddress').fadeIn('medium');
    //     }
    // });
});
   </script>
   <script>
    const updateShippingAddress = (evt) => {
            const iptv_street_shipping = document.querySelector("#iptv_street_shipping");
            const shipping = document.querySelector("#shipping");
            const flag  = document.querySelector("#shippingBillingAddress .flag");
            const iptv_state_shipping = document.querySelector("#iptv_state_shipping");
            const iptv_city_shipping = document.querySelector("#iptv_city_shipping");
            const iptv_zip_shipping = document.querySelector("#iptv_zip_shipping");
            const iptv_phone_two = document.querySelector("#iptv_phone_two");
            if(!evt.checked){
                flag.className = flag.className.split(' ').filter(className => className === 'flag').join(' ');
                flag.classList.add('us');
                iptv_street_shipping.value = "";
                shipping.value = "United States";
                iptv_state_shipping.value = "";
                iptv_city_shipping.value = "";
                iptv_zip_shipping.value = "";
                iptv_phone_two.value = "";
            }
        }
        $(function() {
            $('[data-numeric]').payment('restrictNumeric');
            $('#iptv_expiry').payment('formatCardExpiry');
            $('#iptv_cvc').payment('formatCardCVC');
            $('.text-muted').hide();
            $('.cc-number').on('keyup', function() {
                var cardBrand = $.payment.cardType($('.cc-number').val());
                if ($('.cc-number').val().length > 1 && cardBrand != null) {
                    $('.text-muted').show();
                    $('.cc-brand').text(cardBrand).css('color', '#ff4e50').css('text-transform', 'capitalize');
                } else {
                    $('.text-muted').hide();
                }
            });
            $('.cc-number').on('input', function() {
                let cardNumber = $(this).val().replace(/\D/g, '');
                let formattedCardNumber = '';
                for (let i = 0; i < cardNumber.length; i += 4) {
                    formattedCardNumber += cardNumber.substr(i, 4) + ' ';
                }
                formattedCardNumber = formattedCardNumber.trim();
                $(this).val(formattedCardNumber);
            });
        });
   </script>
   <script type="text/javascript">
  $(document).ready(function() {
        var price = {{$price}};
        var quantity = {{$quantity}};
        var baseAmount = price / quantity;
        $("#iptv_amount").val(price); 
        $("select[name='quantity']").change(function() {
            var newQuantity = $(this).val();  
            if (!newQuantity || newQuantity < 1) {
                newQuantity = 1;
            }
            var updatedAmount = baseAmount * newQuantity;
            $("#iptv_amount").val(updatedAmount);
        });

        $("#buynow").click(function(e) {
            e.preventDefault();

            var submitButton = $("#buynow");
            submitButton.prop("disabled", true).text("Processing...");
            if ($("#sameadr").is(":checked") == true) {
                if ($('#iptv_street').val() != '') {
                    $('#iptv_street_shipping').val($('#iptv_street').val());
                }
                if ($('#iptv_city').val() != '') {
                    $('#iptv_city_shipping').val($('#iptv_city').val());
                }
                if ($('#iptv_state').val() != '') {
                    $('#iptv_state_shipping').val($('#iptv_state').val());
                }
                if ($('#iptv_zip').val() != '') {
                    $('#iptv_zip_shipping').val($('#iptv_zip').val());
                }
                if ($('#phone').val() != '') {
                    $('#iptv_phone_two').val($('#phone').val());
                }
                if ($('#country_selector').val() != '') {
                    $('#shipping').val($('#country_selector').val());
                    $('#shipping_code').val($('#country_selector_code').val());
                    $('#shippingBillingAddress ').fadeOut('medium');
                }
            }
            var _token = $("input[name='_token']").val();

            var iptv_fname = $("input[name='iptv_fname']").val();
            var iptv_lname = $("input[name='iptv_lname']").val();
            var iptv_street = $("input[name='iptv_street']").val();

            var iptv_country = $("input[name='iptv_country']").val();
            var iptv_state = $("input[name='iptv_state']").val();
            var iptv_city = $("input[name='iptv_city']").val();
            var iptv_zip = $("input[name='iptv_zip']").val();

            var iptv_phone = $("input[name='iptv_phone']").val();
            var email = $("input[name='email']").val();
            var iptv_street_shipping = $("input[name='iptv_street_shipping']").val();
            var shipping = $("input[name='shipping']").val();

            var iptv_state_shipping = $("input[name='iptv_state_shipping']").val(); 
            var iptv_city_shipping = $("input[name='iptv_city_shipping']").val();
            var iptv_zip_shipping = $("input[name='iptv_zip_shipping']").val();
            var iptv_phone_two = $("input[name='iptv_phone_two']").val();

            var plan = $("input[name='plan']").val();
            var iptv_amount = $("input[name='iptv_amount']").val();
            var quantity = $("select[name='quantity']").val();
            var iptv_cardholder_name = $("input[name='iptv_cardholder_name']").val();

            var ipti_card_details = $("input[name='ipti_card_details']").val();
            var iptv_expiry = $("input[name='iptv_expiry']").val();
            var iptv_cvc = $("input[name='iptv_cvc']").val();
            var captcha10 = $("input[name='captcha10']").val();

            var sameadr = $("input[name='sameadr']").is(':checked') ? 'Yes' : 0;

            if ($("#sameadr").is(":checked") == true) {
                if ($('#iptv_street').val() != '') {
                    $('#iptv_street_shipping').val($('#iptv_street').val());
                }
                if ($('#iptv_city').val() != '') {
                    $('#iptv_city_shipping').val($('#iptv_city').val());
                }
                if ($('#iptv_state').val() != '') {
                    $('#iptv_state_shipping').val($('#iptv_state').val());
                }
                if ($('#iptv_zip').val() != '') {
                    $('#iptv_zip_shipping').val($('#iptv_zip').val());
                }
                if ($('#phone').val() != '') {
                    $('#iptv_phone_two').val($('#phone').val());
                }
                if ($('#country_selector').val() != '') {
                    $('#shipping').val($('#country_selector').val());
                    $('#shipping_code').val($('#country_selector_code').val());
                    $('#shippingBillingAddress ').fadeOut('medium');
                }
            }

            $.ajax({
                url: "/buy-now-form",
                type: 'POST',
                data: {
                    _token: _token,
                    iptv_fname: iptv_fname,
                    iptv_lname: iptv_lname,
                    iptv_street: iptv_street,
                    iptv_country: iptv_country,
                    iptv_state: iptv_state,
                    iptv_city: iptv_city,
                    iptv_zip: iptv_zip,
                    iptv_phone: iptv_phone,
                    email: email,
                    sameadr: sameadr,
                    iptv_street_shipping: iptv_street_shipping,
                    shipping: shipping,
                    iptv_state_shipping: iptv_state_shipping,
                    iptv_city_shipping: iptv_city_shipping,
                    iptv_zip_shipping: iptv_zip_shipping,
                    iptv_phone_two: iptv_phone_two,
                    plan: plan,
                    iptv_amount: iptv_amount,
                    quantity: quantity,
                    iptv_cardholder_name: iptv_cardholder_name,
                    ipti_card_details: ipti_card_details,
                    iptv_expiry: iptv_expiry,
                    iptv_cvc: iptv_cvc,
                    captcha10: captcha10
                },
                success: function(data) {
                    var currentForm = $(e.target).closest('form'); 
                    currentForm.find('.refresh_captcha_4').trigger("click"); 
                
                    if ($.isEmptyObject(data.error)) {
                        $("#payment-form")[0].reset();
                        $(".error-text").html(""); 
                        window.location.href = '/thankyou';
                    } else {
                    
                        printErrorMsg(data.error);
                        setTimeout(function() {
                        submitButton.prop("disabled", false).text("Submit");
                        }, 1000); 
                    }
                },
                fail: function() {
                    setTimeout(function() {
                        submitButton.prop("disabled", false).text("Submit");
                    }, 1000); 
                },
                always: function() {
                    setTimeout(function() {
                        submitButton.prop("disabled", false).text("Submit");
                    }, 1000);
                }
            });

        });
        $("#iptv_zip").keyup(async function () {
            var inputValue = $(this).val();
            var zipcode = inputValue.replace(/\s+/g, '');
            let errorDiv = document.getElementById(`iptv_zip_err`);
            errorDiv.textContent = '';

            //$("input[name='iptv_city']").val('');
            //$("input[name='iptv_state']").val('');
            let country_code = $("input[name='iptv_country']").val().trim();
            const allowed_country = ['United States','Canada'];
            if(!allowed_country.includes(country_code)){
                return false;
            } 
            if (zipcode.length >= 5) {
                if(country_code=='United States' && zipcode.length>5){
                    errorDiv.textContent = 'Please enter valid USA zipcode.';
                    return false
                }
                if(country_code=='Canada' && zipcode.length>6){
                    errorDiv.textContent = 'Please enter valid Canada zipcode.';
                    return false
                }
                let data = {zipcode:zipcode,country_code:country_code}
                errorDiv.textContent = 'Please wait, fetching zipcode details ....';
                const res= await ajaxHandlerPost('{{ route("getZipCode") }}', data);
                if(res.data){
                    $("input[name='iptv_city']").val(res.data.city);
                    $("input[name='iptv_state']").val(res.data.state);
                    errorDiv.textContent = '';
                }else{
                    errorDiv.textContent = 'No record found for this zipcode.';
                }

            }
        });

        $("#iptv_zip_shipping").keyup(async function () {
            var inputValue = $(this).val();
            var zipcode = inputValue.replace(/\s+/g, '');
            let errorDiv = document.getElementById(`iptv_zip_shipping_err`);
            errorDiv.textContent = '';
            //$("input[name='iptv_city_shipping']").val('');
            //$("input[name='iptv_state_shipping']").val('');
            let country_code = $("input[name='shipping']").val().trim();
            const allowed_country = ['United States','Canada'];
            if(!allowed_country.includes(country_code)){
                return false;
            }             
            if (zipcode.length >= 5) {
                let data = {zipcode:zipcode,country_code:country_code}
                if(country_code=='United States' && zipcode.length>5){
                    errorDiv.textContent = 'Please enter valid USA zipcode.';
                    return false
                }
                if(country_code=='Canada' && zipcode.length>6){
                    errorDiv.textContent = 'Please enter valid Canada zipcode.';
                    return false
                }                
                
                errorDiv.textContent = 'Please wait, fetching zipcode details ....';
                const res= await ajaxHandlerPost('{{ route("getZipCode") }}', data);
                if(res.data){
                    $("input[name='iptv_city_shipping']").val(res.data.city);
                    $("input[name='iptv_state_shipping']").val(res.data.state);
                    errorDiv.textContent = '';
                }else{
                    errorDiv.textContent = 'No record found for this zipcode.';
                }

            }
        });
        $('#iptv_zip').on('input', function () {
            this.value = this.value.replace(/\s/g, '');
        });
        $('#iptv_zip_shipping').on('input', function () {
            this.value = this.value.replace(/\s/g, '');
        });

        $("input[name='iptv_country']").on('change', function () {
            $("#iptv_zip").trigger('keyup');
        });

        $("input[name='shipping']").on('change', function () {
            $("#iptv_zip_shipping").trigger('keyup');
        });

    });
   </script>
@endsection