@extends('layouts.master')

@section('title'){{ __('message.download').' | ITVJP.COM' }}@stop

@section('style-libraries')
    <link rel="stylesheet" href="{{ url('css/video-js.css')}}">
    <link rel="stylesheet" href="{{ url('css/select2.min.css')}}">
@stop

@section('styles')
    
@stop

@section('content')

<div id="content" style="min-height: calc(100vh - 320px);" class="mb-50">
    <section id="main-slider" class="mb-30" >
        <div class="w3-container">
            <div class="w3-row">
                <div class="w3-col m12 text-center">
                    <img src="{{ asset('images/dowload/banner.jpg') }}" alt="" width="100%">
                </div>
            </div>
        </div>
    </section>
    <section id="main-slider" class="mb-30" style="margin-bottom: 100px" >
        <div class="w3-container">
            <div class="w3-row">
                <div class="w3-col m12 text-center">
                    <h1 class="text-watch-title">
                        <span>{{__('message.watch_anywhere')}}</span>
                    </h1>
                    <div class="container-price">
                        <div class="price-right">
                            <div>
                                <a href="https://itvjp.com/itvjp.apk" class="btn btn-primary" style="font-size: 20px;font-weight: 800;margin-top: 20px;padding: 10px 20px;" type="button">{{__('message.download')}} .apk</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="main-slider" class="" style="margin-bottom: 100px" >
        <div class="w3-container">
            <div class="w3-row">
                <div class="w3-col m12">
                    <div style="display: flex;justify-content: center;flex-wrap: wrap;">
                        <div class="container-every-left">
                            <h3 class="text-title-sz-58">
                                <span>{{__('message.watch_every')}}</span>
                            </h3>
                            <h1 class="text-des-sz-22">{{__('message.stream_unlimited')}}</h1>
                        </div>
                        <div class="" style="">
                            <img src="{{ asset('images/dowload/mutiple.jpg') }}" alt="" style="width: 551px;height: 344px;object-fit: cover;object-position: 50% 50%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="main-slider" class="mb-30" >
        <div class="w3-container">
            <div class="w3-row">
                <div class="w3-col m12 text-center">
                    <h1 class="text-watch-title" style="margin-bottom: 80px">
                        <span style="font-size:50px;" class="wixui-rich-text__text">
                            <span style="letter-spacing:normal;" class="wixui-rich-text__text">
                                <span class="color_45 wixui-rich-text__text">{{__('message.available_on')}}</span>
                            </span>
                        </span>
                    </h1>
                    <div class="container-device">
                        <div>
                            <img src="{{ asset('images/dowload/tv.webp') }}" alt="">
                            <h3 class="text-device-title" style="padding-top: 27px">
                                <span>{{__('message.tv')}}</span>
                            </h3>
                            <h1 class="text-device-des">
                                <span>
                                    {{__('message.Smart_android')}}<br>
                                    {{__('message.android_tv')}}<br>
                                    {{__('message.amazon_fire')}}<br>
                                    {{__('message.chromecast_with')}}
                                </span>
                            </h1>
                        </div>
                        <div>
                            <img src="{{ asset('images/dowload/computer.webp') }}" alt="">
                            <h3 class="text-device-title" style="padding-top: 71px;">
                                <span>{{__('message.computer')}}</span>
                            </h3>
                            <h1 class="text-device-des">
                                <span>
                                    {{__('message.windows')}}<br>
                                    {{__('message.macos')}}<br>
                                </span>
                            </h1>
                        </div>
                        <div>
                            <img src="{{ asset('images/dowload/mobile.webp') }}" alt="">
                            <h3 class="text-device-title" style="padding-top: 77px">
                                <span>{{__('message.mobile_tablet')}}</span>
                            </h3>
                            <h1 class="text-device-des">
                                <span>
                                    {{__('message.android_phones')}}<br>
                                </span>
                            </h1>
                        </div>
                    </div>

                    <div class="container-price">
                        <div class="price-right">
                            <div>
                                <a href="https://itvjp.com/itvjp.apk" class="btn btn-primary" style="font-size: 20px;font-weight: 800;margin-top: 20px; padding: 10px 20px;" type="button">{{__('message.download')}} .apk</a>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
</div>

@stop

@section('scripts')
    <script>
      $(function () {
        $(document).ready(function(){
          var swiper = new Swiper('.swiper-main', {
            speed: 500,
            loop: true,
            effect: 'fade', 
            grabCursor: true,
            slidesPerView: 1,
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 10,
            autoplay: {
              delay: 2000, 
              disableOnInteraction: false, 
            },
            pagination: {
              el: '.swiper-pagination',
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          });

          var swiperChanel = new Swiper('.swiper-chanel', {
            slidesPerView: 2,
            spaceBetween: 5,
            speed: 500,
            // loop: true,
            slidesPerGroup: 3,
            slidesOffsetBefore: 5,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
              breakpoints: {
                  "@0.00": {
                      slidesPerView: 2.5,
                      spaceBetween: 10,
                  },
                  "@0.75": {
                      slidesPerView: 3.5,
                      spaceBetween: 20,
                  },
                  "@1.00": {
                      slidesPerView: 4,
                      spaceBetween: 20,
                  },
                  "@1.50": {
                      slidesPerView: 5.5,
                      spaceBetween: 20,
                  },
              },
          });

           
        });
      });
   </script>
@stop