@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($videoIdArray->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">
                                    <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' => 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>

                <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 as $vData)
                        @php
                            $totalWord = str_word_count($vData['des']);
                            $min = getReadCount($totalWord);
                        @endphp
                        {{-- {{ pre($vData) }} --}}
                        <a href="{{ route('front.patient.myplan-play-video.view', ['videoId' =>  Crypt::encrypt($vData['id']), 'slug' => $_GET['slug'], 'spacer_id' => $_GET['spacer_id']]) }}"
                            class="videoSlot text-black">
                            <div
                                class="{{ isset($_GET['videoId']) &&  Crypt::decrypt($_GET['videoId']) == $vData['id'] ? 'selected' : '' }} videoBox  p-3 rounded-4 mb-2">
                                {{-- type --}}
                                <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   mb-2" style="width:  24px; height: 24px;">
                                            <p class="mx-3 ">{{ $min }}:00 {{ __('education.minute') }}</p>
                                        </span>
                                    @else
                                        <div class=" d-flex">
                                            <i class="py-1 mx-2 fa fa-play-circle text-secondary">
                                                {{ sprintf('%02d', $vData->min) . ':' . sprintf('%02d', $vData->sec) }}
                                            </i>
                                            <p class="text-secondary "> {{ __('education.minute') }}</p>
                                        </div>
                                    @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 (!empty($vData['video_url']))
                                        <img src="{{ $vData['thmub_url'] }}" class="rounded-3 otherThum" alt="" />
                                    @else
                                        @if (!empty($vData['thmub_url']))
                                            <img src="{{s3Url('uploads/Education/thumb/' . $vData['thmub_url']) }}"
                                                class="rounded-3 otherThum" alt="" />
                                        @endif
                                    @endif
                                    <div class="otherText mt-2 mt-sm-0 ps-sm-3">
                                        <p class="m-0 fw-bold">{{ $vData['title'] }}</p>
                                        <p class="des m-0">
                                            {{ $vData['sub_title'] }}
                                        </p>
                                    </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