@extends('Front.PatientLayout.mainLayout')
@section('title', 'GP/Hospital')
@section('css')
    <style>
        .thumbnail i {
            top: 50%;
            left: 50%;
            position: absolute;
            margin-left: -25px;
            margin-top: -30px;
        }

        .img {
            position: relative;
        }

        .img i {
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }

        .scrollmenu {
            /* background-color: #333; */
            overflow: auto;
            white-space: nowrap;
        }

        .scrollmenu a {
            display: inline-block;
            /* color: white; */
            text-align: center;
            padding: 14px;
            text-decoration: none;
            /* admin.png */
        }

        .playBtn {
            z-index: 99;

        }
    </style>
@endsection
@section('content')
    <div class="container-fluid ">

        <div align="center" class="card ">
            <div class="position-relative mt-3 card-body">
                <img src="{{ asset(IMG) }}/img_gp_hospital_header.webp"
                    class="object-fit-cover w-sm-50 w-lg-25   w-md-50 w-100" alt="...">
            </div>
        </div>

        <div class=" text-center mx-4 mt-4">
            <h3> {{ __('gpHospital.title') }}
            </h3>
            <p class="mt-3"> {{ __('gpHospital.sub_title') }}</p>

            <div class="d-flex justify-content-center mt-3">
                <a href="{{ route('front.patient.my-copd-summmary.view') }}"
                    class="text-white btn btn-dark bgDarkBlue fw-bold">{{ __('gpHospital.mysummary') }}</a>
            </div>

            <p class="mt-3">{{ __('gpHospital.mysummary_sub1') }}</p>

            <p class="mt-3">{{ __('gpHospital.mysummary_sub2') }}</p>
        </div>

        <div class="p-2 rounded mt-4 mb-4">
            <div class=" row row-cols-1 row-cols-md-2 row-cols-lg-3 p-2 ">

                @foreach ($data as $gpH)
                    {{-- {{ pre($gpH) }} --}}
                    <a href="{{ route('front.patient.gp-qusetions.view', ['cat_id' => encrypt($gpH['id'])]) }}">
                        <div align="center" class="col mb-4">
                            <div class="card col-10">
                                <div class="card-image border-radius-lg position-relative">
                                    <div class="rounded p-1 blur-shadow-image thumbnail">
                                        <img class="w-100 object-fit-cover   img-fluid border-radius-lg "
                                            src="{{ $gpH['image_url'] }}"style="aspect-ratio:16/9">
                                    </div>
                                </div>
                                <div class="text-start card-body">
                                    <h5>{{ $gpH['name'] }}</h5>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
@endsection