@extends('Front.PatientLayout.mainLayout')
@section('title', 'Education')
@section('css')
    <style>
        .scrollmenu {
            /* background-color: #333; */
            overflow: auto;
            white-space: nowrap;
        }

        .scrollmenu a {
            display: inline-block;
            /* color: white; */
            text-align: center;
            padding: 14px;
            text-decoration: none;
        }
    </style>
@endsection
@section('content')
    {{-- {{ pre($eduData) }} --}}
    {{-- {{pre($dataTriggereng)}} --}}
    {{-- {{ pre($eduData['educationfuture']) }} --}}

    <div class="container-fluid ">
        <div class="col-12 m-0 p-0 overflow-hidden">
            <nav class="navbar text-white ">
                <div class="col-12 m-2 p-4 ">
                    <img src="{{ s3Url('uploads') . '/' . 'logo.png' }}" style="width: 15rem; height: 4rem; aspect-ratio:16/9"
                        class=" img-fluid position-absolute top-50 start-50 translate-middle " alt="Logo">
                </div>
            </nav>
            <hr class="text-muted border ">
            <div class="d-flex justify-content-center  rounded">
                {{-- educationfuture --}}
                <div class="col-6">
                    <div class="card card-plain card-blog mt-4">
                        <div class="card-image border-radius-lg position-relative">

                            <div class="rounded text-center p-1 blur-shadow-image thumbnail">
                                <img class="w-50  img  img-fluid"
                                src="{{ $eduData['educationfuture']['image_url'] }}"> 
                            </div>
                        </div>
                        <div class="card-body px-0">
                            <h5>
                                {{ __('education.featured') }}
                            </h5>
                            <h4>
                                {{ $eduData['educationfuture']['title'] }}
                            </h4>
                            <div class="text-center">
                                <a class="my-4 btn btn-dark bgDarkBlue "
                                    href="{{ route('front.patient.readArticle.view') }}">Read Full Article</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-2   rounded mt-4 mb-4">
            <h4 class="mx-4"> {{ __('education.content') }}</h4>
            <div class="mt-4 row row-cols-1 row-cols-md-2 p-2 ">
                @foreach ($eduData['educationData'] as $edu)
                    <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($edu['id']), 'catId' => encrypt($edu['category_id'])]) }}">
                                    <div class="rounded p-1 blur-shadow-image thumbnail">
                                        <i class="fa fa-play-circle fa-4x playBtn"></i>

                                        <img class="w-100  img  img-fluid border-radius-lg " src="{{ $edu['video_thumb'] }}"
                                            style="object-fit: fill; height: auto; aspect-ratio:4/2;">
                                    </div>
                                </a>
                            </div>
                            <div class="card-body text-start p-0 p-2">
                                <h4 class="mx-2">{{ $edu['name'] }} </h4>
                                <div class="card-footer text-start d-flex  p-0 p-2">
                                    <i class="fa fa-play-circle fa-2x playBtn mx-2"></i>
                                    <small class="text-muted my-1 mx-3">{{ sprintf('%02d', $edu['minute']) }}
                                        {{ __('dashboard.minutes') }} {{ sprintf('%02d', $edu['second']) }}
                                        {{ __('dashboard.second') }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="d-flex justify-content-center mt-3">
                <a href="{{ route('front.patient.education.educationExAll') }}"
                    class="text-white btn btn-dark bgDarkBlue fw-bold">
                    {{ __('education.explore') }}</a>
            </div>
        </div>
        <div class="p-2 mx-4  bg-white rounded mt-4 mb-4">
            <h4> {{ __('education.exploreResource') }}</h4>
            <p> {{ __('education.helpful') }}</p>
            <div class="d-flex justify-content-center mt-3">
                <a href="{{ route('front.patient.all-resources.view') }}"
                    class="text-white btn btn-dark bgDarkBlue fw-bold">
                    {{ __('education.exploreResource') }}</a>
            </div>
        </div>

    @endsection