@extends('Front.PatientLayout.mainLayout')
@section('title', 'Education')
@section('css')
    <style>
        .otherThum {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 16/9;
            max-width: 150px;
        }

        .otherText {}

        .videoSlot {
            text-decoration: none;
        }

        .videoBox {
            /* background-color: rgb(238, 238, 238); */
            border: 1px solid rgb(238, 238, 238);
        }

        .selected {
            background-color: #0d3675;
            color: #fff;
        }
    </style>
@endsection
@section('content')
    @php
        $lang = app()->getLocale();
        $is_wacthed_video = $videoIdArray->toArray();
    @endphp
    <div class="container-fluid">
        <a href="{{ route('front.patient.education.view') }}">
            <i class="bi bi-chevron-left mt-2 fs-4 float-start ms-2">
            </i></a>
        <div class="container">
            <div class="row">
                {{-- {{pre($playNow->toArray(),1)}} --}}
                {{-- {{ pre($records->Education->toArray()) }} --}}
                <!-- video row -->
                <div class="col-12 col-md-12 col-lg-6">
                    <div class="pt-4 ">
                        @if ($lang == 'en')
                            @if (!empty($playNow->video_url))
                                <video width="100%" controls controlsList="nodownload" oncontextmenu="return false;" autoplay
                                    style=" aspect-ratio: 16/9;">
                                    <source src="{{ $playNow->video_url }}" type="video/mp4" />
                                </video>
                            @else
                                <img src="{{ s3Url('uploads/Education/thumb/' . $playNow->video_thumb) }}"
                                    class="rounded-3 " alt="" width="100%" style=" aspect-ratio: 16/9;" />
                            @endif
                            <h6 class="text-center text-secondary py-2">
                            </h6>

                            <p class="fs-2">{{ $playNow->name }}</p>
                            {{-- <p>
                                {{ $playNow->sub_title }} <br>
                            </p> --}}
                            {!! html_entity_decode($playNow->description) !!}
                        @else
                            @if (!empty($playNow->video_url_welsh))
                                <video width="100%" controls controlsList="nodownload" oncontextmenu="return false;"
                                    autoplay style=" aspect-ratio: 16/9;">
                                    <source src="{{ $playNow->video_url_welsh }}" type="video/mp4" />
                                </video>
                            @else
                                @if (!empty($playNow->video_thumb_welsh))
                                    <img src="{{ s3Url('uploads/Education/thumb/' . $playNow->video_thumb_welsh) }}"
                                        class="rounded-3 " alt="" width="100%" style=" aspect-ratio: 16/9;" />
                                @else
                                    <img src="{{ s3Url('uploads/Education/thumb/' . $playNow->video_thumb) }}"
                                        class="rounded-3 " alt="" width="100%" style=" aspect-ratio: 16/9;" />
                                @endif

                            @endif
                            <h6 class="text-center text-secondary py-2">
                            </h6>

                            <p class="fs-2">{{ $playNow->name_welsh }}</p>
                            {{-- <p>
                                {{ $playNow->sub_title_welsh }} <br>
                            </p> --}}
                            {!! html_entity_decode($playNow->description_welsh) !!}
                        @endif
                        <br />
                        @isset($is_wacthed_video)
                            @if (in_array($playNow->id, $is_wacthed_video))
                                <div align="center" class="mb-5 mt-5">
                                    @if ($playNow->type == 'video')
                                        {{-- <p>{{ __('education.watched') }}</p> --}}
                                    @else
                                        <p>{{ __('education.finishReading') }}</p>
                                    @endif
                                    <i class="fa fa-check-circle fs-3 text-green"></i>
                                </div>
                            @else
                                <div align="center" class="mb-5 mt-5">
                                    @if ($playNow->type == 'video')
                                        {{-- <p>{{ __('education.once') }} --}}
                                        </p>
                                    @else
                                        <p>{{ __('education.readingQuestion') }}</p>
                                    @endif
                                    <form id="form1" method="post"
                                        action="{{ route('front.patient.storeVideoCount.store', ['video_id' => Crypt::encrypt($playNow->id)]) }}">
                                        {{ csrf_field() }}
                                        <div class="checked">
                                            <input id="check-box-store" type="checkbox" style=" border-radius:50%; "
                                                class="form-check-input d-none  fs-3 ">
                                            <label role="button" for="check-box-store"><i
                                                    class="fa fa-check-circle-o  fs-3"></i></label>
                                        </div>
                                    </form>
                                </div>
                            @endif
                        @endisset

                        <hr>
                    </div>
                </div>
                <!-- artical -->
                <div class="col-12 col-lg-6 mt-lg-5 ps-lg-5">

                    <p class="fs-4 text-black">{{ __('education.videos') }}</p>
                    {{-- other video --}}
                    @foreach ($records->Education as $vData)
                        @php
                            if ($lang == 'en') {
                                $totalWord = str_word_count($vData->description);
                            } else {
                                $totalWord = str_word_count($vData->description_welsh);
                            }
                            $min = getReadCount($totalWord);
                        @endphp
                        {{-- {{ pre($vData) }} --}}

                        <a href="{{ route('front.patient.videoPlay.view', ['catId' => encrypt($vData->education_category_id), 'videoId' => encrypt($vData->id)]) }}"
                            class="videoSlot text-black">
                            <div
                                class="{{ isset($_GET['videoId']) && decrypt($_GET['videoId']) == $vData->id ? 'selected' : '' }} videoBox  p-3 rounded-4 mb-2">
                                <div class="d-flex justify-content-between">
                                    @if ($vData->type == 'content')
                                        <span class="d-flex"> <img
                                                src="{{ asset('patientAssets') }}/img/ic_note_hamburger.png" alt=""
                                                class="img-fluid  object-fit-cover mb-2"
                                                style="width:  24px; height: 24px;">
                                            <p class="mx-3 ">{{ sprintf('%02d', $min) }}:00 minutes</p>
                                        </span>
                                    @else
                                        <i class="fa fa-play-circle d-flex  fs-4 text-secondary">
                                            <p class="mx-3 ">
                                                {{ sprintf('%02d', $vData->min) . ':' . sprintf('%02d', $vData->sec) }}
                                                {{ __('education.minute') }}
                                            </p>
                                        </i>
                                    @endif
                                    @if (in_array($vData['id'], $is_wacthed_video))
                                        <i class="fa fa-check-circle fs-5  text-green"></i>
                                    @endif
                                </div>

                                <div class="thumBox d-flex flex-column flex-sm-row flex-lg-row">
                                    @if ($lang == 'en')
                                        @if (!empty($vData->video_url))
                                            <img src="{{ $vData->video_thumb }}" class="rounded-3 otherThum"
                                                alt="" />
                                        @else
                                            <img src="{{ s3Url('uploads/Education/thumb/' . $vData->video_thumb) }}"
                                                class="rounded-3 otherThum " alt="" />
                                        @endif
                                        <div class="otherText mt-2 mt-sm-0 ps-sm-3">
                                            <p class="m-0 fw-bold">{{ $vData->name }}</p>
                                            @if ($vData->type == 'content')
                                                <p class="des m-0">
                                                    {!! html_entity_decode(substr($vData->description, 0, 200)) !!}....
                                                </p>
                                            @else
                                                {{ $vData->sub_title }}
                                            @endif
                                        @else
                                            @if (!empty($vData->video_url))
                                                <img src="{{ $vData->video_thumb }}" class="rounded-3 otherThum"
                                                    alt="" />
                                            @else
                                                <img src="{{ s3Url('uploads/Education/thumb/' . $vData->video_thumb) }}"
                                                    class="rounded-3 otherThum " alt="" />
                                            @endif
                                            <div class="otherText mt-2 mt-sm-0 ps-sm-3">
                                                <p class="m-0 fw-bold">{{ $vData->name_welsh }}</p>
                                                @if ($vData->type == 'content')
                                                    <p class="des m-0">
                                                        {!! html_entity_decode(substr($vData->description_welsh, 0, 200)) !!}
                                                    </p>
                                                @else
                                                    {{ $vData->sub_title_welsh }}
                                                @endif
                                    @endif
                                </div>
                            </div>
                </div>
                </a>
                @endforeach
            </div>
        </div>
    @section('js')
        <script nonce="{{ $cspNonce }}">
            $(document).ready(function() {
                $(function() {
                    $('#check-box-store').on('change', function() {
                        $('#form1').submit();
                    });
                });
            });
        </script>
    @endsection
@endsection