@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();
    @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 ">
                        <video width="100%" autoplay controls controlsList="nodownload" oncontextmenu="return false;"
                            style=" aspect-ratio: 16/9;">
                            <source src="{{ $videoData['video_url'] }}" type="video/mp4" />
                        </video>
                        <h6 class="text-center text-secondary py-2">
                        </h6>
                        <p class="fs-2">{{ $videoData['title'] }}</p>
                        {!! html_entity_decode($videoData['des']) !!}
                        <br />
                        @isset($abc[0]['is_watch'])
                            @if ($abc[0]['is_watch'] == '1')
                                <div align="center" class="mb-5 mt-5">
                                    {{-- <p>{{ __('education.watched') }}</p> --}}
                                    <i class="fa fa-check-circle fs-3 text-success"></i>
                                </div>
                            @else
                                <div align="center" class="mb-5 mt-5">
                                    {{-- <p>{{ __('education.once') }} --}}
                                    {{-- </p> --}}
                                    <form id="form1" method="post"
                                        action="{{ route('front.patient.store-asthma-test-video', ['video_id' =>  Crypt::encrypt($videoData['id']), 'question_id' =>  Crypt::encrypt($QuestionId)]) }}">
                                        {{ 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 ($videoDataAll as $vData)
                        {{-- {{ pre($vData) }} --}}
                        <a href="{{ route('front.patient.get-asthma-test-video', ['question_id' => ($_GET['question_id']), 'video_id' =>  Crypt::encrypt($vData['id'])]) }}"
                            class="videoSlot text-black">
                            <div
                                class="{{ isset($_GET['video_id']) &&  Crypt::decrypt($_GET['video_id']) == $vData['id'] ? 'selected' : '' }} videoBox  p-3 rounded-4 mb-2">
                                <div class="d-flex justify-content-between">
                                    <i class="fa fa-play-circle d-flex  fs-4 text-secondary">
                                        <p class="mx-3">{{ $vData->min . ':' . $vData->sec }} minutes</p>
                                    </i>
                                    @isset($WatchVideo->video_id)
                                        @if ($vData['id'] == $WatchVideo->video_id)
                                            <i class="fa fa-check-circle fs-5  text-success"></i>
                                        @endif
                                    @endisset
                                </div>
                                <div class="thumBox d-flex flex-column flex-sm-row flex-lg-row">
                                    <img src="{{ $vData['thmub_url'] }}" class="rounded-3 otherThum" alt="" />
                                    <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['des'] !!}
                                        </p>
                                    </div>
                                </div>
                            </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