@extends('Front.PatientLayout.mainLayout')
@section('title', 'Education')
@section('content')

    {{-- {{ pre($arr) }} --}}
    <div class="container-fluid p-0">
        <nav class="sticky-top bgDarkBlue">
            <div class="">
                <a href="{{ route('front.patient.education.view') }}">

                    <i class=" mt-4 p-2 fa fa-arrow-left text-white fs-4 float-start ms-2 ">
                    </i></a>
            </div>
            <div class="d-flex justify-content-center align-items-center">
                <form action="{{ route('front.patient.education.educationExAll') }}"
                    class="bg-white rounded-pill overflow-hidden py-1 px-1 my-4">
                    <i class="fa fa-search fs-5 mx-2 p-1"></i>
                    <input type="search" name="search" placeholder="{{ __('education.search') }}"
                        class="searchBox border-0"
                        @isset($_GET['search']) value="{{ $_GET['search'] }}" @endisset value="" />
                    <input type="submit" value="{{ __('education.go') }}"
                        class="bgDarkBlue text-white rounded-pill border-0 py-2 px-3" />
                </form>
            </div>

            <div class="col-12 categories p-3 mt-4 mb-4 bg-white">
                <a href="{{ route('front.patient.education.educationExAll') }}"
                    class="btn btn-custom-dark   {{ !isset($_GET['cate_id']) ? 'bgDarkBlue text-white ' : 'text-dark bg-white rounded-4 ' }}   ">{{ __('dashboard.All_videos') }}</a>
                @foreach ($cateall as $cats)
                    <a href=" {{ route('front.patient.education.educationExAll', ['cate_id' => encrypt($cats['id'])]) }}"
                        class="btn btn-custom-dark {{ isset($_GET['cate_id']) && $cats['id'] == decrypt($_GET['cate_id']) ? 'bgDarkBlue text-white' : 'text-dark bg-white rounded-4' }} ">
                        {{ app()->getLocale() == 'en' ? $cats['name'] : $cats['name_welsh'] }}
                    </a>
                @endforeach
            </div>
        </nav>

        @forelse($arr as $cats)
            <div class=" row row-cols-1 row-cols-md-2 p-2 ">
                @foreach ($cats['category_video'] as $key => $videos)
                    {{-- {{ pre($videos) }} --}}
                    <div align="center" class="col mb-4">
                        <div class="card col-10" style="margin: auto; width: 95%;">
                            <div class="card-image border-radius-lg position-relative">
                                <a
                                    href="{{ route('front.patient.videoPlay.view', ['videoId' => encrypt($videos['id']), 'catId' => encrypt($videos['category_id'])]) }}">
                                    <div class="rounded p-1 blur-shadow-image thumbnail">
                                        @if ($videos['type'] == 'video')
                                            <i class="fa fa-play-circle fa-4x playBtn"></i>
                                        @endif
                                        <img class="w-100  img  img-fluid border-radius-lg "
                                            src="{{ $videos['video_thumb'] }}" style="aspect-ratio:16/9;object-fit: fill;">
                                    </div>
                                </a>
                            </div>
                            <div class="card-body text-start p-0 p-2">
                                <h4 class="mx-2">{{ $videos['name'] }} </h4>
                            </div>
                            <div class="card-footer text-start d-flex  p-0 p-2">
                                @if ($videos['type'] == 'video')
                                    <i class="fa fa-play-circle fa-2x playBtn mx-2"></i>
                                @else
                                    <img src="{{ asset('patientAssets') }}/img/ic_note_hamburger.png" alt=""
                                        class="img-fluid  object-fit-cover   mb-2" style="width: 32px">
                                @endif

                                <small class="text-muted my-1 mx-3">{{ sprintf('%02d', $videos['minute']) }}
                                    {{ __('dashboard.minutes') }}
                                    {{ sprintf('%02d', $videos['second']) }}
                                    {{ __('dashboard.second') }}</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @empty
            <div class="d-flex justify-content-center m-2">
                <p class="text-muted fs-3">
                    {{ __('dashboard.No_data_available') }}</p>
            </div>
        @endforelse

    </div>
@endsection