@extends('front.layouts.app')
@section('title')
    Home
@endsection
@section('CSS')
    <link href="{{ asset(CSS) }}/home.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset(CSS) }}/swipe.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset(CSS) }}/HomeSwipe.css" rel="stylesheet" type="text/css" />
@endsection
@php
    $route = route('front.home');
@endphp
@section('searchRoute', $route)
@section('searchMethod', 'get')
@section('content')
    <div class="home-page">
        @if (sizeOf($data))
            <div class="bannerVideoData ">
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
                    {{-- <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                    </div> --}}
                    <div class="carousel-inner ">
                        @foreach ($data as $edu)
                            <div class="carousel-item active ">
                                <img src="{{ $edu->video_thumb }}" class="bannerImage vidFrame w-100 ">
                                <div class="carousel-caption ">
                                    <a href="{{ route('front.category.videoPage.view', ['id' => encryptValue($edu['id']), 'category' => $edu['category_id']]) }}"
                                        class="btn bg-white text-dark rounded-pill bi bi-play-circle fs-2 px-3  ">
                                        <i class="text-decoration-none  " style="font-family:-apple-system; "></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        @endif
        @if (empty($mainArray) && empty($resent_added) && empty($data))
            <div class="mt-5 d-flex justify-content-center mx-auto msgBG w-100">
                <h3 class="my-5 ">{{ trans('app.search_data_not_found') }}</h3>
            </div>
        @endif
        @if (empty($resent_added))
            <div></div>
        @else
            <hr class="bg-dark">
            <div class="container-fluid">
                <div class="continue-watching col-12">
                    <h3 class="my-3 mx-5">Recently Added</h3>
                    <div class="row  row-cols-1 row-cols-lg-4 row-cols-md-3 g-4 mx-lg-5">
                        @foreach ($resent_added as $edu)
                            <a href="{{ route('front.videoPage.view', ['id' => encryptValue($edu['id'])]) }} "
                                class="text-decoration-none">
                                <div class="col">
                                    <div class="card">
                                        <img src="{{ $edu['video_thumb'] }}" height="200" class="card-img-top vidFrame">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between w-100 flex-wrap mb-2">
                                                <p class="card-text videoSubTitle first-color-text "
                                                    style="--showWords:180px;">
                                                    {{ $edu['sub_title'] }}
                                                </p>
                                                {{ date('j F y', strtotime($edu['created_at'])) }}
                                            </div>
                                            <h5 class="card-title ">{{ $edu['title'] }}</h5>
                                            <p class="card-text">
                                                @php
                                                    if ($edu['hour'] != 0) {
                                                        $hmi = 'hour';
                                                    } elseif ($edu['min'] != 0) {
                                                        $hmi = 'minutes';
                                                    } elseif ($edu['sec'] != 0) {
                                                        $hmi = 'seconds';
                                                    }
                                                @endphp
                                                <small
                                                    class="text-muted">{{ $data['hour'] = 0 ? $data['hour'] . ':' : '' }}{{ $edu['min'] }}:{{ $edu['sec'] }}
                                                    {{ $hmi }}</small>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif


        @foreach ($mainArray as $value)
            {{-- {{pre($mainArray)}} --}}
            <hr class="bg-dark">
            <div class="container-fluid">
                <div class="continue-watching col-12">
                    <div class="container-fluid swipeAreaOne">
                        <h3 class="my-3 col-12">{{ $value['category_name'] }}</h3>
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                @foreach ($value['category_data'] as $data)
                                    <div class=" swiper-slide">
                                        <a href="{{ route('front.category.videoPage.view', ['id' => encryptValue($data['id']), 'category' => $data['category_id']]) }} "
                                            class="text-decoration-none">
                                            <div class="card">
                                                <img src="{{ $data['video_thumb'] }}" height="200"
                                                    class=" vidFrame card-img-top">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between w-100 flex-wrap mb-2">
                                                        <p class="card-text videoSubTitle first-color-text "
                                                            style="--showWords:90px;">
                                                            {{ $data['sub_title'] }}
                                                        </p>
                                                        {{ date('j F y', strtotime($data['created_at'])) }}
                                                    </div>
                                                    <h5 class="card-title text-start">{{ $data['title'] }}</h5>
                                                    <p class="card-text text-start">
                                                        @php
                                                        $hmi =' ';
                                                            if ($data['hour'] != 0) {
                                                                $hmi = 'hour';
                                                            } elseif ($data['min'] != 0) {
                                                                $hmi = 'minuntes';
                                                            } elseif ($data['sec'] != 0) {
                                                                $hmi = 'seconds';
                                                            } 
                                                        @endphp
                                                        <small  class="text-muted">{{ $data['hour'] = 0 ? $data['hour'] . ':' : '' }}{{ $data['min'] }}:{{ $data['sec'] }}
                                                            {{ $hmi }}</small>
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>


                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            {{-- <div class="swiper-pagination"></div> --}}
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>


@endsection
@section('js')
    <script nonce="{{ $cspNonce }}">
        let slidesPerView = [1, 2, 3, 4, 5];
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: slidesPerView[0],
            spaceBetween: 30,
            slidesPerGroup: slidesPerView[0],
            loop: false,
            loopFillGroupWithBlank: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                0: {
                    slidesPerView: slidesPerView[0]
                },
                576: {
                    slidesPerView: slidesPerView[1]
                },
                769: {
                    slidesPerView: slidesPerView[2]
                },
                1200: {
                    slidesPerView: slidesPerView[3]
                }
            }
        });
    </script>
@endsection