@section('externalcss')

    <style>

        .node circle {
            fill: #fff;
            stroke: red;
            stroke-width: 3px;
        }

        .node text {
            font: 14px;
            font-weight: bold;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }

        .svg-chart-container {
            width: 100% !important;
        }

        .toast {
            opacity: 1 !important;
            background-color: #ff6767;
            padding: 5px !important;
            color: #fff;

        }

        .toast-header {
            background-color: #ff6767;
            color: #fff;
        }

    </style>

@endsection
<!--begin::Content-->
@if($org_unit_id)
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">

            <div class="mb-10 row">
                <div class="flex flex-col justify-center text-center col-md-12 align-items-center">
                    <h2 class="mb-4 font-bold fs-2x">Welcome To {{$selectedorgunit['unit_name']}}</h2>
                    <p class="fs-6" style="width: 80%; text-align: justify;">
                        We are delighted to provide you with a comprehensive, user-friendly platform designed to cater to all your healthcare needs. Whether you're scheduling a consultation with a doctor, booking a patholab test, or ordering medications from our pharmacy, your dashboard offers a seamless and efficient experience. Here's a closer look at the services available to you.
                    </p>
                    <p class="mt-3 font-semibold fs-2">
                        Welcome to a new era of personalized healthcare management!
                    </p>

                </div>
            </div>

            <div class="p-6 row g-2 g-xl-10 mb-xl-10">
               @foreach($clinicappliedservice as $service)
                @if($service['application_service_id'] =="1")
                    <div class="mb-4 col-xl-4">
                        <div class="p-6 cursor-pointer card " wire:click="gotopage('1')" style=" min-height:100px; border:rgb(0, 140, 255) dotted 4px; border-radius: 50px">
                            <div class="row">
                                <div class="col-12">
                                    <center>
                                        <img src="{{global_asset('assetswebnew/img/yodr/about/new/5.png')}}" class="w-150px"/>
                                    </center>
                                </div>
                                <div class="mt-2 text-center col-12 align-content-center">
                                    <h1 class="mb-2 font-bold text-dark fs-2 ">Dr. Consultation</h1>
                                    @if ($service['status'] == 0)
                                        <p class="font-bold fs-2" style="color: #fd0000;">Expired</p>
                                        <p class="font-semibold fs-4" style="color: #ff6767;">Click Here For Renew.</p>
                                    @else
                                        <p class="font-bold fs-6" style="color:rgb(0, 140, 255);">Click Here To See</p>
                                        <p class="font-normal fs-8" style="color: #000;">All Types Of Consultation Services.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                @endif

                    @if($service['application_service_id'] =="3")
                        <div class="mb-4 col-xl-4">
                            <div class="p-6 cursor-pointer card " wire:click="gotopage('3')" style=" min-height:100px; border:rgb(255, 166, 0) dotted 4px; border-radius: 50px">
                                <div class="row">
                                    <div class="col-12">
                                        <center>
                                            <img src="{{global_asset('assetswebnew/img/yodr/about/new/10.png')}}" class="w-150px"/>
                                        </center>
                                    </div>
                                    <div class="mt-2 text-center col-12 align-content-center">
                                        <h1 class="mb-2 font-bold text-dark fs-2">Laboratory</h1>
                                        @if ($service['status'] == 0)
                                            <p class="font-bold fs-2" style="color: #ff6767;">Expired</p>
                                            <p class="font-semibold fs-4" style="color: #ff6767;">Click Here For Renew.</p>
                                        @else
                                            <p class="font-bold fs-6"  style="color:rgb(255, 166, 0);">Click Here To See</p>
                                            <p class="font-normal fs-8" style="color: #000;">All Types Of Patholab Services.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    @endif

                    @if($service['application_service_id'] =="2")
                        <div class="mb-4 col-xl-4">
                            <div class="p-6 cursor-pointer card" wire:click="gotopage('2')" style=" min-height:100px; border:rgb(255, 17, 0) dotted 4px; border-radius: 50px">
                                <div class="row">
                                    <div class="col-12">
                                        <center>
                                            <img src="{{global_asset('assetswebnew/img/yodr/about/new/6.png')}}" class="w-150px"/>
                                        </center>
                                    </div>
                                    <div class="mt-2 text-center col-12 align-content-center">
                                        <h1 class="mb-2 font-bold text-dark fs-2 ">Pharmacy</h1>
                                        @if ($service['status'] == 0)
                                            <p class="font-bold fs-2" style="color: #fd0000;">Expired</p>
                                            <p class="font-semibold fs-4" style="color: #ff6767;">Click Here For Renew.</p>
                                        @else
                                            <p class="font-bold fs-6" style="color: rgb(255, 17, 0);">Click Here To See</p>
                                            <p class="font-normal fs-8" style="color: #000;">All Types Of Pharmacy Services.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    @endif



                @endforeach
                @if(!$consultation)
                       {{-- <div class="mb-4 col-xl-4">
                           <a href="/subscription_plan"  class="p-6 border-0 cursor-pointer card bg-light-info" style="box-shadow: 0px 5px 10px #000; min-height:100px">
                               <div class="row">
                                   <div class="col-3">
                                       <center>
                                           <img src="{{global_asset('assets/icons/hospital.png')}}" class="w-150px"/>
                                       </center>
                                   </div>
                                   <div class="text-center col-9 align-content-center">
                                       <h1 class="font-bold text-dark fs-2 ">Dr. Consultation</h1>
                                       <p class="font-normal fs-6" style="color: #000;">Click Here To Subscribe</p>
                                   </div>
                               </div>
                           </a>
                       </div> --}}

                       <div class="mb-4 col-xl-4">
                        <a href="/subscription_plan" class="p-6 cursor-pointer card "  style=" min-height:100px; border:rgb(0, 140, 255) dotted 4px; border-radius: 50px">
                            <div class="row">
                                <div class="col-12">
                                    <center>
                                        <img src="{{global_asset('assetswebnew/img/yodr/about/new/5.png')}}" class="w-150px"/>
                                    </center>
                                </div>
                                <div class="mt-2 text-center col-12 align-content-center">
                                    <h1 class="mb-2 font-bold text-dark fs-2 ">Dr. Consultation</h1>
                                    <p class="font-semibold fs-4" style="color: #ff6767;">Click Here To Subscribe</p>
                            </div>
                        </a>
                    </div>

                       
                @endif
                @if(!$lab)
                       {{-- <div class="mb-4 col-xl-4">
                           <a href="/subscription_plan"  class="p-6 border-0 cursor-pointer card bg-secondary" style="box-shadow: 0px 5px 10px #000; min-height:100px">
                               <div class="row">
                                   <div class="col-3">
                                       <center>
                                           <img src="{{global_asset('assets/icons/laboratory.png')}}" class="w-150px"/>
                                       </center>
                                   </div>
                                   <div class="text-center col-9 align-content-center">
                                       <h1 class="font-bold text-dark fs-2 ">Laboratory</h1>
                                       <p class="font-bold fs-6 text-danger">Click Here To Subscribe</p>
                                   </div>
                               </div>
                           </a>
                       </div> --}}
                       <div class="mb-4 col-xl-4">
                        <a href="/subscription_plan" class="p-6 cursor-pointer card "  style=" min-height:100px; border:rgb(255, 166, 0) dotted 4px; border-radius: 50px">
                            <div class="row">
                                <div class="col-12">
                                    <center>
                                        <img src="{{global_asset('assetswebnew/img/yodr/about/new/10.png')}}" class="w-150px"/>
                                    </center>
                                </div>
                                <div class="mt-2 text-center col-12 align-content-center">
                                    <h1 class="mb-2 font-bold text-dark fs-2">Laboratory</h1>
                                    <p class="font-bold fs-6 text-danger">Click Here To Subscribe</p>
                                    
                                </div>
                            </div>
                        </a>
                    </div>
                @endif
                @if(!$pharmacy)
                       {{-- <div class="mb-4 col-xl-4">
                           <a href="/subscription_plan"  class="p-6 border-0 cursor-pointer card bg-secondary" style="box-shadow: 0px 5px 10px #000; min-height:100px">
                               <div class="row">
                                   <div class="col-3">
                                       <center>
                                           <img src="{{global_asset('assets/icons/pharmacy.png')}}" class="w-150px"/>
                                       </center>
                                   </div>
                                   <div class="text-center col-9 align-content-center">
                                       <h1 class="font-bold text-dark fs-2 ">Pharmacy</h1>
                                       <p class="font-bold fs-6 text-danger">Click Here To Subscribe</p>
                                   </div>
                               </div>
                           </a>
                       </div> --}}

                    <div class="mb-4 col-xl-4">
                        <a href="/subscription_plan" class="p-6 cursor-pointer card"  style=" min-height:100px; border:rgb(255, 17, 0) dotted 4px; border-radius: 50px">
                            <div class="row">
                                <div class="col-12">
                                    <center>
                                        <img src="{{global_asset('assetswebnew/img/yodr/about/new/6.png')}}" class="w-150px"/>
                                    </center>
                                </div>
                                <div class="mt-2 text-center col-12 align-content-center">
                                    <h1 class="mb-2 font-bold text-dark fs-2 ">Pharmacy</h1>
                                    <p class="font-semibold fs-4" style="color: #ff6767;">Click Here To Subscribe</p>
                                   
                                </div>
                            </div>
                        </a>
                    </div>
                @endif

            </div>

        </div>
        <!--end::Container-->
    </div>


@else
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <div class="row g-5 g-xl-10 mb-xl-10">
                <div class="text-center col-lg-12 col-xl-12 col-xxl-12">
                    <h4 class="fs-2hx text-danger">Please Select An Unit</h4>
                </div>
            </div>
        </div>
    </div>
@endif
<!--end::Content-->
@section('externaljs')

    <script>

        window.history.forward();

        window.addEventListener('showsuccessmsg', event => {
            if (event.detail.type == "success") {
                showsuccessmsg(event.detail.message);
            } else {
                showerrorsmsg(event.detail.message);
            }
            //showsuccessmsg();
        });

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        function closemodal() {
            $('.modal').modal('hide');
        }
        function closemodal() {
            $('.modal').modal('hide');
        }

        window.addEventListener('closemodal', event => {
            closemodal();
        });
        window.addEventListener('show_expired_modal', event => {
            $('#kt_modal_expired_msg').modal('show');

        });
        window.addEventListener('hide_expired_modal', event => {
            $('#kt_modal_expired_msg').modal('hide');
        });
    </script>
@endsection