@extends('client.layout.master')
@section('page-title', 'Clinic')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Clinic</li>
@endsection
@section('title','Clinic')
@section('content')
    <!-- Container-fluid starts-->
    <div class="">
        <div class="custom-page">
            <div class="">
                <div class="">



                    <div>
                        {{--                            <livewire:client.clinic.clinic-table/>--}}
                        <livewire:client.clinic.table.clinic-table/>
                    </div>

                    <livewire:client.clinic.modal.create/>
                    <livewire:client.clinic.modal.update/>
                    <livewire:client.clinic.delete/>
                    <livewire:client.clinic.view/>
{{--                    <livewire:client.clinic.service.modal.show/>--}}
{{--                    <livewire:client.clinic.assistant.modal.show/>--}}
{{--                    <livewire:client.clinic.appointment.modal.show/>--}}
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade min-height custom-modal-style min-height" id="exampleModal" tabindex="-1"
             aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link text-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection
@push('style')
   <style>
       body.offcanvas-opened .custom-page {
           padding-inline-end: 30%;
           transition: padding-inline-end 0.3s ease;
       }

       @media (max-width: 768px) {
           body.offcanvas-opened .custom-page {
               padding-inline-end: 0 !important;
           }
       }


   </style>
@endpush
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // List of specific offcanvas IDs to watch
            const offcanvasIds = [
                'assistant_modal_show',
                'appointment_modal_show',
                'service_modal'
            ];

            offcanvasIds.forEach(id => {
                const offcanvas = document.getElementById(id);
                if (offcanvas) {
                    // عند الفتح
                    offcanvas.addEventListener('show.bs.offcanvas', function () {
                        document.body.classList.add('offcanvas-opened');
                    });

                    // عند الإغلاق
                    offcanvas.addEventListener('hidden.bs.offcanvas', function () {
                        document.body.classList.remove('offcanvas-opened');
                    });
                }
            });
        });
    </script>
@endpush