@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')

    <div class="row align-items-center justify-content-between mb-4">
        <div class="col-auto">
            <h5 class="fw-bold mb-0">All Doctors</h5>
        </div>
        <div class="col-auto d-flex gap-2">

            <a href="{{ route('create_specialization') }}" class="btn btn-warning">
                <i class="ti tabler-stethoscope me-1"></i>
                Add Specialization
            </a>

            <a href="{{ route('create_doctor') }}" class="btn btn-primary">
                <i class="ti tabler-plus me-1"></i>
                Add Doctor
            </a>

        </div>
    </div>

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                </div>
            </div>
        </div>

        <div class="table-responsive px-3 pb-3">
            <table class="table" id="doctorsTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Doctor Name</th>
                        <th>Specialization</th>
                        <th>Mobile</th>
                        <th>Experience</th>
                        <th>Fee</th>
                        <th>Availability</th>
                        <!-- <th>Today</th> -->
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Status Modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">

                <form id="statusForm" method="POST">
                    @csrf

                    <input type="hidden" id="statusDoctorId">

                    <div class="modal-header">
                        <h5 class="modal-title">Update Doctor Status</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body p-4">

                        <div class="mb-3">
                            <label class="form-label">Doctor Name</label>
                            <input type="text" class="form-control" id="statusDoctorName" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status" id="statusDoctorStatus" required>
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                                <option value="On Leave">On Leave</option>
                            </select>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary" id="updateStatusBtn">
                            <span id="updateStatusText">Update</span>
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <div style="width:60px;height:60px;background:#fff0f0;border-radius:50%;
                                        display:flex;align-items:center;justify-content:center;margin:0 auto;">
                            <i class="ti tabler-trash" style="font-size:28px;color:#dc3545;"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold mb-1">Delete Doctor</h5>
                    <p class="text-muted mb-4">Are you sure?</p>
                    <div class="d-flex gap-2 justify-content-center">
                        <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                        <form id="deleteForm" method="POST">
                            @csrf
                            <button type="submit" id="submit_btn" class="btn btn-danger px-4">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
    </script>
    <script>
        const table = $('#doctorsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('doctor_list_data') }}",
            pageLength: 10,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            columnDefs: [
                {
                    targets: '_all',
                    className: 'text-nowrap'
                }
            ],
            columns: [
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row, meta) {
                        return meta.settings._iDisplayStart + meta.row + 1;
                    }
                },
                {data: 'doctor_name', name: 'doctor_name'},
                {data: 'specialization', name: 'specialization'},
                {data: 'mobile', name: 'mobile'},
                {data: 'experience', name: 'experience'},
                {data: 'consultation_fee', name: 'consultation_fee'},
                {data: 'available_days', name: 'available_days'},
                // { data: 'today_appointments', name: 'today_appointments', orderable: false, searchable: false },
                {data: 'status', name: 'status'},
                {data: 'action', orderable: false, searchable: false}
            ]
        });


        $(document).on('click', '.status-btn', function () {

            let doctorId = $(this).data('id');
            let doctorName = $(this).data('name');
            let doctorStatus = $(this).data('status');

            $('#statusDoctorId').val(doctorId);
            $('#statusDoctorName').val(doctorName);
            $('#statusDoctorStatus').val(doctorStatus);

        });

        $(document).on('click', '.delete-btn', function (e) {
            e.preventDefault();

            let id = $(this).data('id');

            let deleteUrl = "{{ url('admin/doctor') }}/" + id + "/delete";

            $('#deleteForm').attr('action', deleteUrl);

            $('#deleteModal').modal('show');
        });


        $(document).on('click', '.status-btn', function () {

            let id = $(this).data('id');
            let name = $(this).data('name');
            let status = $(this).data('status');

            $('#statusDoctorId').val(id);
            $('#statusDoctorName').val(name);
            $('#statusDoctorStatus').val(status);

            $('#statusForm').attr('action', "{{ url('admin/doctor') }}/" + id + "/status");
        });
    </script>

@endsection