@extends('frontView.layout')

@section('title_area')

    home

@endsection



@section('content')

    @include('frontView.inc.homepage_slider')

    <!--Modal Info-->


    <!--/Modal Info-->

    <!--Main content-->

    <main>
        <style>
            @media only screen and (max-device-width: 480px) {
                .curve-down:before, .curve-down-app:before {
                    border-radius: 0 0 10% 60%/ 0 0 40% 30% !important;
                }
            }


            .curve-down {
                position: relative;
                width: 100%;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

            .curve-down:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-bottom: 10px solid #FFF;
                border-radius: 0 0 10% 70%/ 0 0 70% 70%;
                transform: scaleX(1.5);
                background: url( {{asset('images/983290.webp')}} );
            }


            .curve-up-app {
                position: relative;
                width: 100%;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

            .curve-up-app:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url( {{asset('images/10969106.jpg')}} );
                background-color: #000000;
                border-bottom: 10px solid #FFF;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;

            }

            .curve-down-app {
                position: relative;
                width: 100%;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

            .curve-down-app:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-bottom: 10px solid #FFF;
                border-radius: 0 0 10% 70%/ 0 0 70% 70%;
                transform: scaleX(1.5);
                background: url( {{asset('images/bg6.jpg')}} );
                background-position: bottom;
                background-repeat: no-repeat;
                background-size: cover;

            }

            .strreamingbg {
                /* fallback for old browsers */
            'background: #2b0f59; background-color: #1F212E;
                /* Chrome 10-25, Safari 5.1-6 */
            'background: -webkit-linear-gradient(to right, rgba(43, 15, 89, 0.95), rgba(69, 90, 147, 0.95));

                /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            'background: linear-gradient(to right, rgba(43, 15, 89, 0.95), rgba(69, 90, 147, 0.95))
            }
        </style>

        <div id="features" class="curve-down" style="">
            <div class="container my-5 pb-5">

                <!--Section: Features v.1-->

                <section class="py-md-5 row text-white">

                    <div class="col-md-6 my-md-5">
                        <div class="media   wow fadeIn" data-wow-delay="0.2s">
                            <div class="media-left">
                                <i class="fab fa-blackberry fa-5x"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">WE’RE #1</h4>
                                <p>SMARTFLIX is the #1 Live TV Streaming Service in the country.</p>
                            </div>
                        </div>

                        <div class="media   wow fadeIn" data-wow-delay="0.2s">
                            <div class="media-left">
                                <i class="fab fa-blackberry fa-5x"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading"> Affordable <i class="fas fa-dollar-sign "></i></h4>
                                <p>SMARTFLIX costs less than most cable TV providers. Save hundreds of dollars a year
                                    when you switch from cable.</p>
                            </div>
                        </div>


                        <div class="media   wow fadeIn" data-wow-delay="0.2s">
                            <div class="media-left">
                                <i class="fab fa-blackberry fa-5x"></i>

                            </div>
                            <div class="media-body">
                                <h4 class="media-heading"> Simple <i class="fa  fa-smile "></i></h4>
                                <p>TV when you want, where you want. Stream all your channels at home or on the go from
                                    any Streaming device.</p>
                            </div>
                        </div>


                        <div class="media   wow fadeIn" data-wow-delay="0.2s">
                            <div class="media-left">
                                <i class="fab fa-blackberry fa-5x"></i>

                            </div>
                            <div class="media-body">
                                <h4 class="media-heading"> Flexible <i class="fa  fa-fax "></i></h4>
                                <p>No long-term contracts. Pause, adjust your plan, or cancel anytime. </p>
                            </div>
                        </div>

                        <div class="media   wow fadeIn" data-wow-delay="0.2s">
                            <div class="media-left">
                                <i class="fab fa-blackberry fa-5x"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">99% SIGNAL RELIABILITY</h4>
                                <p>Enjoy your favorite entertainment without interruption.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6  wow fadeIn mb-6" data-wow-delay="0.2s">
                        <img src="{{asset('images/jumping-people.png')}}" class="img img-fluid">
                        <p class="mb-6"></p>
                    </div>

                </section>

            </div>
        </div>


        <!--Streak-->
        <section id="sports" class="wow fadeIn curve-up-app " style="  visibility: visible; animation-name: fadeIn;">

            <div class="container   white-text ">
                <div class="my-5">

                    <div class="flex-center mask rgba-blue-strongX">
                        <!--First row-->

                        <div class="     ">
                            <div class="row">
                                <div class=" text-left    col-md-6">
                                    <div class="section-header text-left text-white mt-5">


                                        <h3 class="text-left h1 h1-responsive text-white text-uppercase font-weight-bold mt-5 mb-5 pt-3 wow fadeIn"
                                            data-wow-delay="0.2s">SPORTS ARE ALWAYS IN SEASON ON SMARTFLIX</h3>
                                    </div>

                                    <div class="media   wow fadeIn mb-3" data-wow-delay="0.2s">

                                        <div class="media-body">
                                            <h4 class="media-heading h3  text-yellow">TOP SPORTS NETWORKS</h4>
                                            <p>
                                                Including national, regional, and local sports channels like ESPN, FS1,
                                                Golf Channel, NBA TV, NFL REDZONE, MLB STRIKE ZONE and more.</p>
                                        </div>
                                    </div>


                                    <div class="media mb-3  wow fadeIn" data-wow-delay="0.2s">

                                        <div class="media-body">
                                            <h4 class="media-heading h3 text-yellow">FOOTBALL MADNESS</h4>
                                            <p> SMARTFLIX has every English Premier League, Spanish La Liga, UEFA
                                                Champions League, Bundesliga, League 1, Serie A, CONMEBOL Copa América,
                                                AFCON,
                                                CAF Champions League matches.</p>
                                        </div>
                                    </div>


                                    <div class="media mb-5  wow fadeIn" data-wow-delay="0.2s">

                                        <div class="media-body">
                                            <h4 class="media-heading h3 text-yellow">ALL MAJOR SPORTS</h4>
                                            <p> Get access to all major sports event including Cricket, Rugby, Formula
                                                1, NBA, NFL, Golf, UFC, Tennis and more with SMARTFLIX.</p>
                                        </div>
                                    </div>


                                </div>
                                <div class=" text-center my-5 text-white col-md-6  wow fadeIn" data-wow-delay="0.2s">
                                    <img src="{{asset('images/sports.png')}}" class="img img-fluid">
                                    <br><br>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>

            </div>

        </section>

        @if(@!in_array($geoLocation, $notAllowAppslove))
            <div id="featureXs" class=" strreamingbg  curve-up-app z-depth-5X curve-down-app" style="background:  #1F212E;
             visibility: visible; animation-name: fadeIn;">
                <div class="container">

                    <!--not for US, CA, AU  zone-->

                    <section class="pt-md-4 pb-5 row mt-5 text-white">

                        <div class="col-md-6 my-5">

                            <header class="section-header text-left  ">

                                <h3 class="text-left h1 h1-responsive text-yellow  text-uppercase font-weight-bold mt-5 mb-5 pt-3 wow fadeIn"
                                    data-wow-delay="0.2s"> Streaming APPS YOU LOVE</h3>
                            </header>

                            <div class="media text-left  wow fadeIn" data-wow-delay="0.2s">
                                <p>
                                <ul>
                                    <li> Get access to 3,000+ TV Shows and 75,000+ Episodes.</li>
                                    <li>20,000+ Latest and Classic Movies.</li>
                                    <li>Video
                                        on Demand title from your favorite Streaming Apps like Netflix, Disney Plus,
                                        HBO Max, Hulu, Amazone Prime Video, Apple TV+, Hotstar, ZEE5 and many more.
                                    </li>
                                </ul>
                                </p>
                            </div>
                        </div>

                        <div class=" text-center  my-5 text-white col-md-6">
                            <img src="{{asset('images/streaming_app.png')}}" class="img img-fluid">
                            <br><br>
                        </div>


                    </section>
                </div>
            </div>
        @endif

        <div id="featureXs" class="  z-depth-5" style="background: #202230">
            <div class="container">

                <!--Section: Features v.1-->

                <section class="pt-4 pb-5 row text-white">

                    <div class="col-md-12">

                        <div class="section-header text-center my-3 text-white">
                            <img src="{{asset('images/smartflix-supported-devices.svg')}}" class="img img-fluid">
                        </div>
                        <h3 class="  h1 h1-responsive text-center text-white text-uppercase font-weight-bold mt-5 mb-5 pt-3 wow fadeIn"
                            data-wow-delay="0.2s">Watch on all your favorite devices</h3>
                        <div class="section-header text-center my-3 text-white">
                            <img src="{{asset('images/devies.png')}}" class="img img-fluid">
                        </div>

                        <div class="media text-left  wow fadeIn" data-wow-delay="0.2s">

                            <p>
                            <ul>
                                <li>Upon registration and payment of subscription for your chosen package a pdf will be
                                    mailed to you, containing your log in credentials &amp; which app you need to
                                    download for the supported device type mentioned above.
                                </li>
                                <li>Smartflix.net (our website and payment portal).Smartflix is not an app.</li>
                                <li>
                                    For details of the app required for your smart tv or mobile device see FAQ17
                                </li>
                            </ul>
                            </p>

                        </div>


                    </div>


                </section>

            </div>
        </div>
        <!--Streak-->
        {{--        <section id="why-us" class="wow fadeIn " style="visibility: visible; animation-name: fadeIn;">
                    <div class="streak streak-photo streak-long-2"
                         style="background-image: url('{{asset('images/bg.jpg')}}'); margin-top: -20px">

                        <div class="flex-center mask rgba-blue-strong">

                            <div class="container text-center white-text my-5"  >
                                <div class="  my-5  ">
                                    <div class="container">
                                        <header class="section-header text-center my-3 text-white">
                                            <h3 class="text-center h1 h1-responsive text-white text-uppercase font-weight-bold mt-5 mb-5 pt-3 wow fadeIn"
                                                data-wow-delay="0.2s">THEY’RE CALLED ‘ESSENTIALS’ FOR A REASON</h3>
                                            <p>Each SMARTFLIX package includes the channels you can’t live without. Access the most popular networks and local channels you see here or explore our channel lineup for a more in-depth comparison.</p>
                                        </header>
                                        <div class="section-header text-center my-3 text-white">
                                          <img src="{{asset('images/channels.png')}}" class="img img-fluid">
                                        </div>

                                    </div>

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

                    </div>
                </section>--}}


        <div class="container-fluid  container">
            <section class="text-center my-5">
                <div class="card">
                    <div class="card-body h2 h2-responsive">
                        One time activation fee of $20 USD is payable for each Smart TV / Device.
                    </div>
                </div>
            </section>
        </div>


        @if(isset($result))

            <div class="container-fluid  container">

                <!--Section: Features v.1-->

                <!--Section: Content-->
                <section class="text-center mt-5">
                    <h4><strong> {{sizeof($result)}} SMARTFLIX PACKAGES TO CHOOSE FROM</strong></h4>

                    <p>With SMARTFLIX, it’s premium TV no matter which package you pick.</p>
                    <div class="row">
                        @foreach($result as $item)
                            <div class="col-lg-4 col-md-12 mb-4">
                                <div class="card">
                                    <div class="bg-light hover-overlay ripple pt-3" data-mdb-ripple-color="light">
                                        <h5 class="card-title bg-warning text-white">{{$item->product_title ?? ''}}</h5>
                                        <div class="h2 h3-responsive">
                                            ${{sprintf('%.2f', $item->price +  $item->zone->price )}}</div>
                                        @if( isset($currency))
                                            <div class="h5 h5-responsive">Local
                                                currency {{$currency_symbol ?? ''}}{{ sprintf('%.2f', ($item->price +  $item->zone->price) * $currency->rate) }}</div>
                                        @endif
                                        <div class="price-info">{!!  $item->product_details ?? '' !!}</div>
                                    </div>
                                    <div class="card-body">
                                        <a href="{{url('shopping', $item->slug)}}"
                                           class="btn btn-primary add-to-cart">Continue</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach


                    </div>
                    @endif




    </main>

@endsection