@extends('layout')
@section('content')
@php
    $arr = Session::get('data');
    $plan = $arr[0];
    $qty = $arr[2] ?? 1;
    $price = $arr[1] * $qty;
@endphp
<!-- main-desktop-slider -->
        <section class="main-desktop-slider d-none d-sm-block">
            <div class="slider single-item">
                <div>
                    <img class="img-fluid" width="1920" height="620" src="images/vois-payment.png" alt="">
                </div>
            </div>
        </section>
        <!-- / main-desktop-slider -->

        <!-- main-desktop-slider -->
        <section class="main-mobile-slider d-block d-sm-none">
            <div class="slider single-item">
                <div>
                    <img src="images/vois-payment-mobile.jpg" alt="" class="img-fluid" width="700" height="824">
                </div>
            </div>
        </section>
        <!-- / main-desktop-slider -->


    <!-- faqs-wrapper -->
    <section class="payment-form-wrapper py-5">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card payment-card rounded-3 vois-accent-bg">
                     <div class="card-body px-0">
                         <form id="payment-form" name="payment-form" class="container"
                              method="post" autocomplete="on">
                             <div class="clearfix"></div>
                             <div class="col-12 text center">
                                 <div class="validation payment-errors"></div>
                             </div>
                             <div class="row">
                                 <div class="col-sm-6">
                                     <div class="p-3">
                                         <h4 class="payment-form-heading bg-dark py-3 px-3 rounded-2 text-white mb-4">
                                             Shipping/Billing Details </h4>

                                         <div class="row">
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">First Name <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_fname" id="iptv_fname"
                                                         placeholder="Please enter first name" type="text" required=""
                                                         title="Please enter first name">
                                                    <span class="text-danger mt-2 iptv_fname_err" id="iptv_fname_err"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Last Name <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_lname" id="iptv_lname"
                                                         placeholder="Please enter last name" type="text" required=""
                                                         title="Please enter last name">
                                                        <span class="text-danger mt-2 iptv_lname_err" id="iptv_lname_err"></span>
                                                 </div>
                                             </div>
                                         </div>

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

                                         <div class="row">
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Country <span class="color-red fw-bold">*</span></label>
                                                     <div class="form-item w-100">
                                                         <input id="country_selector" type="text" class="form-control py-2 shadow"
                                                         name="iptv_country_code" style="width: 100%">
                                                         <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 py-2 shadow" 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>
                                                     </div>
                                                     <span class="text-danger mt-2 iptv_country_err" id="iptv_country_err"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">State <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_state" id="iptv_state"
                                                         placeholder="Please enter state" type="text" minlength="3"
                                                         required="" title="Please enter state">
                                                    <span class="text-danger mt-2 iptv_state_err" id="iptv_state_err"></span>
                                                 </div>
                                             </div>


                                         </div>

                                         <div class="row">
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">City <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_city" id="iptv_city"
                                                         placeholder="Please enter city" type="text" minlength="3"
                                                         required="" title="Please enter city">
                                                    <span class="text-danger mt-2 iptv_city_err" id="iptv_city_err"></span>
                                                 </div>
                                             </div>

                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Zip Code <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" placeholder="Please enter zip code"
                                                         id="iptv_zip" name="iptv_zip" type="text" maxlength="8"
                                                         required="" title="Please enter zip code" />
                                                    <span class="text-danger mt-2 iptv_zip_err" id="iptv_zip_err"></span>
                                                 </div>
                                             </div>
                                         </div>

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

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

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

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

                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Shipping Address <span
                                                             class="color-red fw-bold">*</span></label>
                                                     <input type="text" class="form-control py-2 shadow" name="iptv_street_shipping"
                                                         id="iptv_street_shipping"
                                                         placeholder="Please enter shipping address"
                                                         title="Please enter shipping address">
                                                    <span class="text-danger mt-2 iptv_street_shipping_err" id="iptv_street_shipping_err"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Country <span class="color-red fw-bold">*</span></label>
                                                     <div class="form-item w-100">
                                                         <input id="shipping" type="text" class="form-control py-2 shadow"
                                                             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 py-2 shadow"
                                                             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>
                                                     </div>
                                                    <span class="text-danger mt-2 shipping_err" id="shipping_err"></span>
                                                 </div>
                                             </div>
                                             <div class="clearfix"></div>
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">State <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_state_shipping" value=""
                                                         id="iptv_state_shipping" placeholder="Please enter state"
                                                         type="text" minlength="3" required=""
                                                         title="Please enter state">
                                                    <span class="text-danger mt-2 iptv_state_shipping_err" id="iptv_state_shipping_err"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">City <span class="color-red fw-bold">*</span></label>
                                                     <input class="form-control py-2 shadow" name="iptv_city_shipping"
                                                         id="iptv_city_shipping" value=""
                                                         placeholder="Please enter city" type="text" minlength="3"
                                                         required="" title="Please enter city">
                                                    <span class="text-danger mt-2 iptv_city_shipping_err" id="iptv_city_shipping_err"></span>
                                                 </div>
                                             </div>

                                             <div class="clearfix"></div>

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

                                             <div class="col-sm-6">
                                                 <div class="form-group mb-3">
                                                     <label class="mb-2">Alternate Phone Number</label>
                                                     <input type="text" class="form-control py-2 shadow"
                                                         placeholder="Please enter alternate phone number"
                                                         name="iptv_phone_two" id="iptv_phone_two" minlength="10" maxlength="10"
                                                         title="Please enter alternate phone number" />
                                                    <span class="text-danger mt-2 iptv_phone_two_err" id="iptv_phone_two_err"></span>
                                                 </div>
                                             </div>
                                             <div class="clearfix"></div>
                                         </div>
                                     </div>

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

                                 <div class="col-sm-6">
                                    <div class="p-3">
                                     <h4 class="payment-form-heading2 bg-dark py-3 px-3 rounded-2 text-white mb-4"><i
                                             class="bi bi-credit-card-2-front"></i> Payment Details</h4>

                                     <div class="form-group mb-3">
                                         <label class="mb-2">Selected Plan</label>
                                         <input name="plan" class="form-control py-2 shadow" 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="mb-2">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 py-2 shadow" value="CAD" type="hidden">
                                                 <!--</div>-->
                                                 <div class="input-group mb-3">
                                                     <span class="input-group-text shadow">CAD $</span>
                                                     <input name="iptv_amount" id="iptv_amount"
                                                         class="form-control rounded-right py-2 shadow" placeholder="Amount"
                                                         type="text" value="{{$price}}" readonly>


                                                 </div>

                                             </div>
                                         </div>
                                         <div class="col-sm-6">
                                             <div class="form-group mb-3">
                                                 <label class="mb-2">Quantity</label>
                                                 <input id="price" class="form-control"
                                                    placeholder="Quantity"
                                                     type="hidden" required="" title="Please select quntity"
                                                     readonly="">
                                                 <select class="form-select d-block py-2 shadow" onchange="amountHanlder(this, '{{ $arr[1] }}')" name="quantity" id="leave">
                                                     <option value="">--Select quantity--</option>
                                                     <option value="1" {{ $qty == 1 ? "selected":""}}>1</option>
                                                     <option value="2" {{ $qty == 2 ? "selected":""}}>2</option>
                                                     <option value="3" {{ $qty == 3 ? "selected":""}}>3</option>
                                                     <option value="4" {{ $qty == 4 ? "selected":""}}>4</option>
                                                     <option value="5" {{ $qty == 5 ? "selected":""}}>5</option>
                                                 </select>
                                                 <span class="text-danger 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="mb-2">Cardholder name <span class="color-red fw-bold">*</span></label>
                                                 <input class="form-control py-2 shadow" name="iptv_cardholder_name"
                                                     placeholder="Enter cardholder name" type="text"
                                                     id="iptv_cardholder_name" minlength="3"
                                                     title="Enter cardholder name" required="">
                                                <span class="text-danger mt-2 iptv_cardholder_name_err" id="iptv_cardholder_name_err"></span>
                                             </div>
                                         </div>
                                         <div class="col-sm-6">
                                             <div class="form-group mb-3">
                                                 <label for="cc-number" class="control-label mb-2">Card details <span
                                                         class="color-red fw-bold">*</span> <small
                                                         class="text-muted">[<span
                                                             class="cc-brand"></span>]</small></label>
                                                 <input class="form-control cc-number py-2 shadow" name="ipti_card_details"
                                                     id="ipti_card_details" placeholder="XXXX XXXX XXXX XXXX"
                                                     type="text" inputmode="numeric" autocomplete="cc-number"
                                                     minlength="18" maxlength="24" title="Please enter card details">
                                                <span class="text-danger mt-2 ipti_card_details_err" id="ipti_card_details_err"></span>
                                             </div>
                                         </div>
                                     </div>

                                     <div class="row">
                                         <div class="col-sm-6">
                                             <div class="form-group mb-3">
                                                 <label class="mb-2">Expiration Date <span class="color-red fw-bold">*</span></label>
                                                 <input class="form-control py-2 shadow" name="iptv_expiry" id="iptv_expiry"
                                                     inputmode="numeric" placeholder="MM / YYYY" required=""
                                                     title="Please enter expiry date">
                                                <span class="text-danger mt-2 iptv_expiry_err" id="iptv_expiry_err"></span>
                                             </div>
                                         </div>

                                         <div class="col-sm-6">
                                             <div class="form-group mb-3">
                                                 <label class="mb-2">CVC <span class="color-red fw-bold">*</span></label>
                                                 <input class="form-control py-2 shadow" name="iptv_cvc" placeholder="CVC"
                                                     maxlength="4" id="iptv_cvc" type="password" autocomplete
                                                     title="Please enter cvc">
                                                <span class="text-danger mt-2 iptv_cvc_err" id="iptv_cvc_err"></span>
                                             </div>
                                         </div>
                                     </div>

                                     <div class="row">
                                         <div class="col-sm-12">
                                             <div class="form-group mb-3">
                                                 <label class="mb-2">Fill Capcha <span
                                                         class="color-red fw-bold">*</span></label>
                                                 <div class="custom-cpacha ustm-cp d-flex justify-content-between mb-4">
                                                <input type="text" name="payment_captcha_input"
                                                    class="form-control py-2 px-3 shadow rounded" id="payment_captcha_input"
                                                    placeholder="Enter Code" style="height:42px;">

                                                <div class="captcha-wrapper bg-white border pt-1 pb-2 px-3 shadow rounded" style="height:42px;">
                                                    <img src="{{route('captcha')}}" id="payment_captcha"
                                                        class="img-fluid p-0 captchaImage" alt="CAPTCHA">
                                                </div>
                                                <div class="cpacha-ref-white rounded">
                                                    <input type="button" onclick="changeCaptcha('payment_captcha')" id="07"
                                                        class="refresh_captcha_3 vois-accent-bg" />
                                                </div>

                                            </div>
                                            <span class="text-danger mt-2 captcha10_err" id="captcha10_err"></span>
                                             </div>
                                         </div>
                                     </div>

                                     <div class="form-group mb-0">
                                         <button type="button" id="submit"
                                             class="btn btn-dark d-block btn-lg fw-bold w-100 cls-one"
                                             name="submit-button" onclick="paymentHandler(this)"> Pay Now </button>
                                     </div>

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


                             <!--           </div>  -->
                         </form>
                     </div>
                 </div>
                </div>
            </div>
        </div>
    </section>
    <!-- / payment-form-wrapper -->

    <section class="payment-banner-desktop mb-5">
         <div class="container">
             <div class="col-sm-12 text-center">
                 <img src="images/vois-payments-icons.png" class="img-fluid">
             </div>
         </div>
     </section>
@endsection


@section('meta-tags')
<title>IPTV Service Providers in Canada | 15000+ IPTV Indian Channels - Boss IPTV</title>

     <meta name="description"
            content="Looking for reliable IPTV service providers in Canada? Vois IPTV offers 15,000+ Indian channels and 500,000+ movies with 4K streaming. Experience the best in entertainment!" />
     <meta name="keywords"
            content="Indian IPTV Providers, Best Indian IPTV Canada, iptv, iptv provider, iptv service, iptv service provider, indian iptv canada, best indian iptv canada">

     <meta http-equiv="Cache-Control" content="public, max-age=31536000"> <!-- 1 year -->
     
     <link rel="canonical" href="{{url('/payment')}}" />
     <meta property="og:locale" content="en" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="IPTV Service Providers in Canada |15000+ IPTV Indian Channels - Boss IPTV" />
     <meta property="og:description"
        content="Looking for reliable IPTV service providers in Canada? Vois IPTV offers 15,000+ Indian channels and 500,000+ movies with 4K streaming. Experience the best in entertainment!" />
     <meta property="og:url" content="https://www.voisiptv.com/" />
     <meta property="og:site_name" content="voisiptv.com/" />
     <meta property="og:image" content="https://www.voisiptv.com/images/request-bc.jpg" />
     <meta property="og:image:secure_url" content="https://www.voisiptv.com/images/request-bc.jpg" />
     <meta property="og:image:width" content="500">
     <meta property="og:image:height" content="400">
     <meta property="og:image:alt" content="IPTV Service Providers in Canada |15000+ IPTV Indian Channels - Boss IPTV" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:description"
        content="Looking for reliable IPTV service providers in Canada? Vois IPTV offers 15,000+ Indian channels and 500,000+ movies with 4K streaming. Experience the best in entertainment!" />
     <meta name="twitter:title" content="IPTV Service Providers in Canada |15000+ IPTV Indian Channels - Boss IPTV" />
     <meta property="article:author" content="https://www.voisiptv.com/" />
     <meta property="article:publisher" content="https://www.voisiptv.com/" />

     <link rel="stylesheet" href="{!! asset('css/countrySelect.min.css?v=0.1') !!}">
     
    <script type="application/ld+json" class="yoast-schema-graph">
    {
        "@context": "https://schema.org",
        "@graph": [{
            "@type": "WebPage",
            "@id": "https://www.voisiptv.com/",
            "url": "https://www.voisiptv.com/",
            "name": "IPTV Canada - #1 IPTV Service Provider 2024 | VOIS IPTV",
            "isPartOf": {
                "@id": "https://www.voisiptv.com/#website"
            },
            "about": {
                "@id": "https://www.voisiptv.com/#organization"
            },
            "primaryImageOfPage": {
                "@id": "https://www.voisiptv.com/#primaryimage"
            },
            "image": {
                "@id": "https://www.voisiptv.com/#primaryimage"
            },
            "thumbnailUrl": "https://www.voisiptv.com/images/voisiptv-worldcuptheme.webp",
            "datePublished": "2024-01-23T06:31:06+00:00",
            "dateModified": "2024-04-30T19:53:25+00:00",
            "breadcrumb": {
                "@id": "https://www.voisiptv.com/#breadcrumb"
            },
            "inLanguage": "en-us",
            "potentialAction": [{
                "@type": "ReadAction",
                "target": ["https://www.voisiptv.com/"]
            }]
        }, {
            "@type": "ImageObject",
            "inLanguage": "en-us",
            "@id": "https://www.voisiptv.com/#primaryimage",
            "url": "https://www.voisiptv.com/images/buypage/tv-withouthardware.webp",
            "contentUrl": "https://www.voisiptv.com/images/buypage/tv-withouthardware.webp",
            "width": 300,
            "height": 60
        }, {
            "@type": "BreadcrumbList",
            "@id": "https://www.voisiptv.com/#breadcrumb",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "name": "IPTV Service Provider in Canada",
                "item": "https://www.voisiptv.com/"
            }]
        }, {
            "@type": "WebSite",
            "@id": "https://www.voisiptv.com/#website",
            "url": "https://www.voisiptv.com/",
            "name": "IPTV Canada - #1 IPTV Service Provider 2024 | VOIS IPTV",
            "description": "VOIS IPTV is one of the leading IPTV service providers in Canada that offers a wide assortment of IPTV channels in almost all regional languages spoken in and around the world. Take your viewing experience to another level with our high-definition (HD) channels with 4K resolution that provides unmatched clarity and depth.",
            "publisher": {
                "@id": "https://www.voisiptv.com/#organization"
            },
            "potentialAction": [{
                "@type": "SearchAction",
                "target": {
                    "@type": "EntryPoint",
                    "urlTemplate": "https://www.voisiptv.com/?s={search_term_string}"
                },
                "query-input": "required name=search_term_string"
            }],
            "inLanguage": "en-us"
        }, {
            "@type": "Organization",
            "@id": "https://www.voisiptv.com/#organization",
            "name": "VOIS IPTV",
            "url": "https://www.voisiptv.com/",
            "contactPoint": {
                "@type": "ContactPoint",
                "telephone": "403-775-2000",
                "contactType": "customer service",
                "areaServed": "CA"
            },
            "logo": {
                "@type": "ImageObject",
                "inLanguage": "en-us",
                "@id": "https://www.voisiptv.com/#/schema/logo/image/",
                "url": "https://www.voisiptv.com/images/logo.png",
                "contentUrl": "https://www.voisiptv.com/images/logo.png",
                "caption": "VOIS IPTV"
            },
            "image": {
                "@id": "https://www.voisiptv.com/#/schema/logo/image/"
            }
        }]
    }
    </script>


    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [{
            "@type": "Question",
            "name": "What is IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "IPTV refers to Internet Protocol Television. It is the process in which television content is delivered over the internet instead of the conventional method of satellite or cable TV formats. IPTV streaming allows subscribers to watch live TV, movies, TV programs, and video-on-demand content on devices connected via internet."
            }
        }, {
            "@type": "Question",
            "name": "How does IPTV work?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "IPTV simply works by transmitting the TV content via Internet Protocol. In other words, IPTV streaming delivers TV content through internet connection unlike the age-old TV broadcasting method that utilizes satellite signals or radio frequencies. Television content is encoded into a digital format that is then transmitted through internet. And users receive the TV content through their devices."
            }
        }, {
            "@type": "Question",
            "name": "What are the Benefits of IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "There are several benefits of taking an IPTV subscription plan. Let’s have a look at some of the benefits of IPTV services:
                Extensive Channels Line - up: As one of the leading IPTV service providers,
                VOIS IPTV offers more than 15,
                000 channels.
                On - Demand Viewing: Users get access to a vast and ever growing library of movies,
                TV shows,
                and other content whenever you want.
                Superior Quality Streaming: IPTV services support high - definition(HD) and 4 K content.
                Interactive Features: IPTV services include special features such as the ability to pause and rewind live TV
                    .
                Multi - Device Access: Watch on different devices such as smart TVs,
                laptops,
                tablets,
                and smartphones.
                Cost - Effective: IPTV services are way much more affordable than traditional cable services.
                "
            }
        }, {
            "@type": "Question",
            "name": "How much does IPTV Service Cost?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "VOIS IPTV offers various IPTV subscription plans to suit different budgets and preferences. The basic IPTV subscription package starts from $133.99 CAD. The five years subscription plan is available for $399CAD. There is also a lifetime subscription available at $400CAD. Kindly go to the page: https://www.voisiptv.com/buy-iptv-subscription and check out the various IPTV plans in detail that best suits your budget and needs."
            }
        }, {
            "@type": "Question",
            "name": "What is included in an IPTV subscription?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "VOIS IPTV subscription includes:
                Channels Line - up: Access to more than 15,
                000 TV channels.Users can watch Indian channels,
                Pakistani channels,
                Bangladeshi channels,
                and lots more.
                On - Demand Content: Huge library of Bollywood movies,
                TV shows,
                and lots more in Hindi and other regional languages.
                Interactive Features: Ability to watch previously aired content as well as pause and rewind TV shows
                    .
                Multiple Device Access: View on different devices with an internet connection.
                "
            }
        }, {
            "@type": "Question",
            "name": "What devices are compatible with IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "IPTV is compatible with various devices, including smart TVs, computers, laptops, smartphones, and tablets. VOIS IPTV also offers highly advanced set-top boxes that use state-of-the-art technology such as MAG540w3, MAG544w3, and UNIPRO."
            }
        }, {
            "@type": "Question",
            "name": "How do I set up IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "After buying an IPTV subscription plan from VOIS IPTV, you need to download and install the IPTV app or software on your preferred device (smart TVs, computers, laptops, smartphones, or tablets). Thereafter, you need to log in with the credentials provided by us. Just ensure that your device has a stable, high speed internet connection."
            }
        }, {
            "@type": "Question",
            "name": "Do I need special equipment for IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "You do not need any special equipment at all to enjoy IPTV services. All you need is a compatible device and a stable internet connection. VOIS IPTV also offers advanced set-top boxes that may enhance your viewing experience."
            }
        }, {
            "@type": "Question",
            "name": "What types of content can I watch on IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "VOIS IPTV offers a diverse range of content, including Live TV channels that cover all kinds of genres such as news, movies, TV shows, sports, entertainment, documentaries, religious content, and lots more."
            }
        }, {
            "@type": "Question",
            "name": "Can I watch International channels with IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes, VOIS IPTV services allow you to access TV content from different countries. Users can watch Indian channels, Pakistani channels, Bangladeshi channels, and lots more. The availability of these channels depends upon the IPTV package as well."
            }
        }, {
            "@type": "Question",
            "name": "What is the phone number of VOIS IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "You can contact us by calling us at 403-775-2000. For any queries or technical assistance, kindly get in touch with our customer care representatives."
            }
        }, {
            "@type": "Question",
            "name": "What is the real website of VOIS IPTV?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Our official website is https://www.voisiptv.com/. Kindly get in touch with our customer care representatives at 403-775-2000."
            }
        }]
    }
    </script>

@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.js"></script>
<script src="/js/countrySelect.js"></script>
    <script>

        jQuery("#country_selector").countrySelect({
            defaultCountry: "CAD",
            //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            preferredCountries: ['ca', 'gb', 'us']
        });
        jQuery("#shipping").countrySelect({
            defaultCountry: "CAD",
            //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            preferredCountries: ['ca', 'gb', 'us']
        });

        $("#sameadr").click(function() {
            // Check if the checkbox is checked
            if ($(this).is(":checked")) {
                // Hide the shipping billing address if checked
                $('#shippingBillingAddress').fadeOut('medium');
            } else {
                // Show the shipping billing address if not checked
                $('#shippingBillingAddress').fadeIn('medium');
            }
        });

        $(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);
            });
        });



        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('ca');
                iptv_street_shipping.value = "";
                shipping.value = "Canada";
                iptv_state_shipping.value = "";
                iptv_city_shipping.value = "";
                iptv_zip_shipping.value = "";
                iptv_phone_two.value = "";
            }
        }

        const paymentHandler = async(evt) => {
            const iptv_fname = $("input[name='iptv_fname']").val();
            const iptv_lname = $("input[name='iptv_lname']").val();
            const iptv_street = $("input[name='iptv_street']").val();

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

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

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

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

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

            const sameadr = $("input[name='sameadr']").is(':checked') ? 'Yes' : 0;
            const paymentForm = document.querySelector("#payment-form");
            const data = {
                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: payment_captcha_input
            }

            try {
                $('[class*="_err"]').text('');
                evt.setAttribute('disabled', true);
                const response = await ajaxHandlerPost('{{ route("payment.store") }}', data);
                if (response.success) {
                    paymentForm.reset();
                    window.location.href = '/thank-you'
                }

                if (response.errors) {
                    if (evt.disabled) {
                        evt.removeAttribute('disabled')
                    }
                    changeCaptcha('payment_captcha');
                    printErrorMsg(response.errors);
                }
            } catch (error) {
                console.log(error);
            }
        }

        $("#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_code']").val();
           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}
                if (errorDiv) {
                    errorDiv.textContent = 'Please wait, fetching zipcode details ....';
                }
                const res= await ajaxHandlerPost('{{ route("getZipCode") }}', data);
                errorDiv.textContent = '';
                if(res.data){
                    $("input[name='iptv_city']").val(res.data.city);
                    $("input[name='iptv_state']").val(res.data.state);
                }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();
            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}
                if (errorDiv) {
                    errorDiv.textContent = 'Please wait, fetching zipcode details ....';
                }
                const res= await ajaxHandlerPost('{{ route("getZipCode") }}', data);
                errorDiv.textContent = '';
                if(res.data){
                    $("input[name='iptv_city_shipping']").val(res.data.city);
                    $("input[name='iptv_state_shipping']").val(res.data.state);
                }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_code']").on('change', function () {
            $("#iptv_zip").trigger('keyup');
        });

        $("input[name='shipping']").on('change', function () {
            $("#iptv_zip_shipping").trigger('keyup');
        });
    </script>
@endsection