@extends('Front.PatientLayout.mainLayout')
@section('title', 'Education')
@section('content')

    {{-- {{ $tips->id }} --}}

    <div class="container-fluid ">

        <nav class="navbar  ">
            <div class="d-flex ">
                <a href="{{ route('front.patient.education.view') }}">
                    <i class="mt-3 fa fa-arrow-left   fs-4 float-start ms-2">
                    </i></a>
                <h5 class="m-2 p-2 text-center ">
                    {{ __('education.topTip') }}
                </h5>
            </div>
        </nav>

        {{-- {{ pre($tips->toArray()) }} --}}

        <div class="mt-5 ">
            <div class="row">
                <div class="col-md-12  ">
                    <img src="{{ s3Url('uploads') . '/' . $tips->image_url }}"
                        class="w-50 h-100 rounded rounded-4 img-fluid   center-block d-block mx-auto " alt="#"
                        style="aspect-ratio:16/9">
                </div>
            </div>
        </div>

        <hr class="bg-dark w-100">
        <div class="text-center mt-4">
            <h2 class=" fs-3 mx-3 "> {{ $tips->name }} </h2>
            <p class="mt-3  ">{{ $tips->trigger_tag }}
            </p>
        </div>

        <div class="container-fluid mb-5 mt-5">
            <p class="mx-3 "> {!! html_entity_decode($tips->des) !!} </p>
        </div>
        <div class="my-5">

            @if ($readArr)
                <div align="center" class="mb-5 mt-5">
                    <p>{{ __('education.finishReading') }}</p>
                    <i class="fa fa-check-circle fs-3 text-green"></i>
                </div>
            @else
                <div align="center" class="mb-5 mt-5">
                    <p>{{ __('education.readingQuestion') }}</p>
                    <form id="form1" method="post"
                        action="{{ route('front.patient.storeTopTipsCount.store', ['trigger_id' => Crypt::encrypt($tips->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
        </div>
    </div>

@endsection
@section('js')
    <script  nonce="{{ $cspNonce }}">
        $(document).ready(function() {
            $(function() {
                $('#check-box-store').on('change', function() {
                    $('#form1').submit();
                });
            });
        });
    </script>
@endsection