@extends('site.layouts.main')

@section('content')

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="left">
                    <div class="flag"><img src="{{ asset('main_site/img/flag.svg') }}" alt=""> <span>Mobile & TV
                            App</span></div>
                    <div class="spider">Spider<span>TV</span></div>
                    <p>{{@$setting->intro}}</p>
                    <div class="links">
                        <a href="#pricing" class="primary">@lang('home.buy_now')</a>
                        <a href="{{ route('checkout.trial') }}" class="secondary">@lang('home.trial')</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <img class="devices" src="{{ asset('main_site/img/devices.png')}}" alt="">
            </div>
        </div>
    </div>
    <div class="custom-shape-divider-bottom-1591466416">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path
                d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"
                class="shape-fill"></path>
        </svg>
    </div>
</header>

<!-- About -->
<section class="about scrolling">
    <div class="container">
        <div class="title">
            @lang('home.about') <b>Spider<span>TV</span></b>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-7">
                @if(@$setting->about != null)
                <p>
                    {{ @$setting->about }}
                </p>
                @endif
                @if(@$setting->video != null)
                <video controls>
                    <source src="{{ asset(@$setting->video) }}" type="video/mp4">
                </video>
                @endif
            </div>
        </div>

        <hr>
    </div>
</section>

<!-- Why -->
<section class="why scrolling">
    <div class="container">
        <div class="title">
            @lang('home.why') <b>Spider<span>TV</span></b>
        </div>
        {{-- start of left why spider --}}
        <div class="row mt-5">
            <div class="col-md-4">
                @foreach ($why_left as $wl)

                <div class="item">

                    <div class="text">
                        <div class="title">{{ $wl->head }}</div>
                        <p>{{ $wl->body }}</p>
                    </div>

                    <div class="icon">
                        <img src="{{ asset($wl->icon)}}" alt="">
                    </div>
                </div>



            </div>
            @endforeach


            {{-- end of left --}}
            {{-- {{ dd(($why_right)->count()) }} --}}
            @if(($why_right)->count() > 0 || ($why_left)->count() > 0) <div class="col-md-4 align-items-center">
                <img class="logo" src="{{ asset('main_site/img/1.png') }}" alt="">
            </div>
            @endif
            <div class="col-md-4">
                @foreach ($why_right as $wr)

                <div class="item">
                    <div class="icon left">
                        <img src="{{asset($wr->icon)}}" alt="">
                    </div>
                    <div class="text">
                        <div class="title">{{ $wr->head }}</div>
                        <p>{{ $wr->body }}</p>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
        <hr>
    </div>
</section>

<section class="apps scrolling" id="apps">
    <div class="container">
        <div class="title">
            <b>@lang('head.apps')</b>
            <div class="hr"></div>
        </div>

        <div class="row mt-5 justify-content-center">
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-4">
                        <a href="https://play.google.com/store/apps/details?id=com.thespidertv.app">
                            <div class="app">
                                <img src="{{ asset('main_site/img/android.png') }}" alt="">
                                <img src="{{ asset('main_site/img/1.svg') }}" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="https://apps.apple.com/us/app/the-spider-hd/id1458565575">
                            <div class="app">
                                <img src="{{ asset('main_site/img/apple.png') }}" alt="">
                                <img src="{{ asset('main_site/img/3.svg') }}" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="https://www.samsung.com/us/appstore/app.do?appId=G21131016992">
                            <div class="app">
                                <img src="{{ asset('main_site/img/smartsamsung.png') }}" alt="">
                                <img src="{{ asset('main_site/img/275372.svg') }}" alt="">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>

<section class="pricing scrolling" id="pricing">
    <div class="container">
        <div class="title">
            <b>@lang('home.pricing')</b>
            <div class="hr"></div>
        </div>

        <div class="row mt-5">
            @foreach ($prices as $price)

            <div class="col-md">
                <div class="price">
                    <div class="money">
                        <span></span>
                        {{ $price->price }}$
                        <div class="per">@lang('home.per') <b>{{ $price->period }} @lang('home.month')</b></div>
                        {{-- <input type="hidden" name="price_id" value="{{ $price->id }}"> --}}
                    </div>
                    <ul>
                        @php
                        $features = explode('<br />',$price->description);
                        @endphp
                        @foreach ($features as $feature)

                        <li>{{ $feature }}</li>
                        @endforeach
                    </ul>

                    <div class="pay">
                        <a href="{{ $price->checkoutPath() }}">@lang('home.pay_by') <b>VISA</b></a>

                        <a href="{{ $price->checkoutPath() }}">@lang('home.pay_by') <b>KINET</b></a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
        <hr>
    </div>
</section>

<section class="channels-list scrolling" id="channels">
    <div class="container">
        <div class="title">
            <b>@lang('head.channel_list')</b>
            <div class="hr"></div>
        </div>
        {{-- {{ dd($channels) }} --}}
        <div class="row mt-5">
            <div class="col-md-4">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    @php
                    $count = 0;

                    @endphp
                    @foreach ($categories as $category_name => $category)

                    <a class="nav-link @if($count == 0) active @endif" id="v-pills-{{ $category_name }}-tab"
                        data-toggle="pill" href="#v-pills-{{ $category_name }}" role="tab"
                        aria-controls="v-pills-{{ $category_name }}" aria-selected="true">
                        {{ $category_name }}</a>

                    @php
                    $count++;
                    @endphp
                    @endforeach


                </div>
            </div>
            <div class="col-md-8">
                <div class="tab-content" id="v-pills-tabContent">

                    @php
                    $count = 0;

                    @endphp
                    @foreach ($channels as $category_name => $channel)

                    <div class="tab-pane fade show @if($count ==0) active @endif" id="v-pills-{{ $category_name }}"
                        role="tabpanel" aria-labelledby="v-pills-{{ $category_name }}-tab">
                        @foreach ($channel as $index => $ch)

                        <div class="item">
                            <span>{{ $index+1 }}</span>
                            <h3>{{$ch->name }}</h3>
                        </div>
                        @endforeach
                    </div>
                    @php
                    $count++;

                    @endphp
                    @endforeach

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

@endsection