@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')
    <div class="container-fluid">
        <nav class="row"> <a href="{{ route('front.patient.gamification.view') }}">
                <i class="fa fa-arrow-left mt-2 fs-4 float-start ms-2">
                </i></a></nav>
        <div class="row">

            <!-- video row -->
            <div class="col-12 col-md-12 col-lg-6">
                <div class="pt-4 ">
                    @if (!empty($playNow->video_url))
                        <video width="100%" controls controlsList="nodownload" autoplay class="nodownload"
                            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) !!}
                    <br />
                    @isset($videoIdArray)
                        @if (in_array($playNow->id, $videoIdArray))
                            <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.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>
            <!-- 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 as $vData)
                    @php
                        $totalWord = str_word_count($vData->description);
                        $min = getReadCount($totalWord);
                    @endphp
                    <a href="{{ route('front.patient.gamification.educationVideo', [$id, 'videoId' => encrypt($vData->id)]) }}"
                        class="videoSlot text-black">
                        <div class="{{ $playNow->id == $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->minute) . ':' . sprintf('%02d', $vData->second) }}
                                            {{ __('education.minute') }}
                                        </p>
                                    </i>
                                @endif
                                @if (in_array($vData['id'], $videoIdArray))
                                    <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->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, 150)) !!}....
                                        </p>
                                    @else
                                        {{ $vData->sub_title }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
@section('js')
    <script nonce="{{ $cspNonce }}">
        $(document).ready(function() {
            $(function() {
                $('#check-box-store').on('change', function() {
                    $('#form1').submit();
                });
            });
        });
        $(document).on('contextmenu', ".nodownload", function() {
            return false;
        })
    </script>
@endsection
@endsection