@extends('web.layouts.container')
@section('css')
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
@endsection
@section('content')
    <header class="header">
        <div class="swiper header-swiper top-header-swiper">
            <div class="swiper-wrapper">
                @if(count($filmsSliders))
                    @foreach($filmsSliders as $filmsSlider)
                        <div class="swiper-slide">
                            <img src="{{asset(array_random($filmsSlider->images))}}" alt="" class="bg-header"/>
                            <div class="container">
                                <div class="item-inner">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="text-box">
                                                <h1 class="title">{{$filmsSlider->name}}</h1>
                                                <p class="p">{{stripText($filmsSlider->description, 200)}}</p>
                                                <p class="p"><b>{{$filmsSlider->production_year}} ‧ {{filmSeriesCategory($filmsSlider->id)}} ‧ {{$filmsSlider->duration}} {{__('filmSeries.hours')}}</b></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </header>
    <!--Start films-sec -->
    <section class="items-sec">
        <div class="container-fluid">
            <div class="sec-heading in-flex">
                <h2 class="title">{{__('filmSeries.films')}}</h2>
            </div>
            <div class="swiper-container items-swiper mt-5">
                <div class="swiper-wrapper">
                    @if(count($films))
                        @foreach($films as $film)
                            <div class="swiper-slide">
                                <a href="{{route('films.show', $film->id)}}">
                                    <div class="item_card">
                                        <div class="img-box">
                                            <img src="{{asset(array_random($filmsSlider->images))}}" alt="" class="card_img"/>
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="title mb-0"><b>{{$filmsSlider->name}}</b></h5>
                                            <!-- <a href="#" class="butn border-butn m-auto"><span>مشاهدة</span></a> -->
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

        </div>
    </section>
    <!--Start series-sec -->
    <section class="items-sec">
        <div class="container-fluid">
            <div class="sec-heading in-flex">
                <h2 class="title">{{__('filmSeries.serieses')}}</h2>
            </div>
            <div class="swiper-container items-swiper mt-5">
                <div class="swiper-wrapper">
                    @if(count($series))
                        @foreach($series as $item)
                            <div class="swiper-slide">
                                <a href="{{route('series.show', $item->id)}}">
                                    <div class="item_card">
                                        <div class="img-box">
                                            <img src="{{asset(array_random($item->images))}}" alt="" class="card_img"/>
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="title mb-0"><b>{{$item->name}}</b></h5>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>
    <!--Start news-sec -->
    <section class="news-sec items-sec pb-5" id="news-sec">
        <div class="container-fluid">
            <div class="sec-heading in-flex">
                <h2 class="title">{{__('articles.head')}}</h2>
            </div>
            <div class="swiper-container news-swiper">
                <div class="swiper-wrapper mt-5">
                    @if(count($articles))
                        @foreach($articles as $article)
                            <div class="swiper-slide">
                                <a href="{{route('article.show', $article->id)}}">
                                    <div class="item_card news_card">
                                        <div class="img-box">
                                            <img src="{{asset($article->image)}}" alt="" class="card_img"/>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="title"><b>{{$article->title_1}}</b></h5>
                                            <p class="p">{{$article->title_2}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

        </div>
    </section>
    <!--Start Header -->
    <header class="header header2">
        <div class="swiper header-swiper top-header-swiper">
            <div class="swiper-wrapper">
                @if(count($seriesSliders))
                    @foreach($seriesSliders as $seriesSlider)
                        <div class="swiper-slide">
                            <img src="{{asset(array_random($seriesSlider->images))}}" alt="" class="bg-header"/>
                            <div class="container">
                                <div class="item-inner">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="text-box">
                                                <h1 class="title">{{$seriesSlider->name}}</h1>
                                                <p class="p">{{stripText($seriesSlider->description, 200)}}</p>
                                                <p class="p"><b>{{$seriesSlider->production_year}} ‧ {{filmSeriesCategory($filmsSlider->id)}} ‧ {{$filmsSlider->season_count}} {{__('filmSeries.seasons')}}</b></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </header>

@endsection

@section('inner_js')

@endsection