@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content">

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">{{ $module }}</h4>
            </div>

            <div class="text-end d-flex">
                <div
                    class="bg-white border shadow-sm rounded px-1 pb-0 text-center d-flex align-items-center justify-content-center">
                    <a href="{{ route('doctor.index', ['viewType' => 'list']) }}"
                        class="{{ $viewType == 'list' ? 'bg-light' : 'bg-white' }} rounded p-1 d-flex align-items-center justify-content-center">
                        <i class="ti ti-list fs-14 text-body"></i></a>
                    <a href="{{ route('doctor.index', ['viewType' => 'grid']) }}"
                        class="{{ $viewType == 'list' ? 'bg-white' : 'bg-light' }} rounded p-1 d-flex align-items-center justify-content-center">
                        <i class="ti ti-layout-grid fs-14 text-body"></i> </a>
                </div>
                <a href="{{ route('doctor.create') }}" class="btn btn-primary ms-2 fs-13 btn-md"><i
                        class="ti ti-plus me-1"></i>New
                    {{ $singluar }}</a>
            </div>

        </div>
        <!-- End Page Header -->

        @if ($viewType == 'list')
            @include('doctor::list')
        @else
            @include('doctor::grid')
        @endif

    </div>
    <!-- End Content -->

</div>

<!-- ========================
   End Page Content
  ========================= -->


<!-- Start Delete Modal  -->
<div class="modal fade" id="delete_modal">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center position-relative z-1">
                <img src="assets/img/bg/delete-modal-bg-01.png" alt=""
                    class="img-fluid position-absolute top-0 start-0 z-n1">
                <img src="assets/img/bg/delete-modal-bg-02.png" alt=""
                    class="img-fluid position-absolute bottom-0 end-0 z-n1">
                <div class="mb-3">
                    <span class="avatar avatar-lg bg-danger text-white"><i class="ti ti-trash fs-24"></i></span>
                </div>
                <h5 class="fw-bold mb-1">Delete Confirmation</h5>
                <p class="mb-3">Are you sure want to delete?</p>
                <div class="d-flex justify-content-center">
                    <div class="d-flex justify-content-center">
                        <a href="javascript:void(0);" class="btn btn-light position-relative z-1 me-3"
                            data-bs-dismiss="modal">Cancel</a>
                        <form id="deleteForm" method="POST" class="modal-content">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger position-relative z-1">Yes, Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- DataTables  -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>


<script>
    $(document).ready(function() {




        $(document).on('click', '.delete_modal', function() {
            const id = $(this).data('id');
            const url = $(this).data('url');
            $('#deleteForm').attr('action', url);
            $('#delete_modal').modal('show');
        });


    });
</script>

@include('layouts.footer')