@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_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;">
                <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">
                    <input type="hidden" id="statusDoctorId">
                    <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" id="statusDoctorStatus">
                            <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="button" class="btn btn-primary" id="updateStatusBtn">Update</button>
                </div>
            </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
                            @method('DELETE')
                            <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 }
    ]
});
    </script>

@endsection