@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-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('doctor') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Doctor Filter
            </h5>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    {{-- Filter Form --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header py-3">
            <h5><i class="ti tabler-filter me-2"></i>Filter Doctors</h5>
            <p class="text-muted mb-0 small">Fill any fields you want to filter by — leave others empty</p>
        </div>

        <div class="card-body p-4">
            <form action="{{ route('doctor_filter_search') }}" method="POST">
                @csrf

                <div class="section-title mb-4">
                    <h5><i class="ti tabler-user me-2"></i>Personal Information</h5>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Doctor Name</label>
                        <input type="text" name="doctor_name" class="form-control"
                               placeholder="Enter Doctor Name" value="{{ old('doctor_name') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Mobile</label>
                        <input type="text" name="mobile" class="form-control"
                               placeholder="Mobile Number" value="{{ old('mobile') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control"
                               placeholder="Email Address" value="{{ old('email') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="">All</option>
                            @foreach(['Male','Female','Other'] as $g)
                                <option value="{{ $g }}" {{ old('gender') == $g ? 'selected' : '' }}>{{ $g }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="section-title my-4">
                    <h5><i class="ti tabler-stethoscope me-2"></i>Professional Information</h5>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Specialization</label>
                        <select name="specialization" class="form-select">
                            <option value="">All</option>
                            @foreach(['General Physician','Dentist','Cardiologist','Dermatologist','Neurologist','Orthopedic','Pediatrician','Gynecologist'] as $s)
                                <option value="{{ $s }}" {{ old('specialization') == $s ? 'selected' : '' }}>{{ $s }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Qualification</label>
                        <input type="text" name="qualification" class="form-control"
                               placeholder="MBBS, MD etc." value="{{ old('qualification') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Experience (Years)</label>
                        <input type="number" name="experience" class="form-control"
                               placeholder="Years" value="{{ old('experience') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Consultation Fee</label>
                        <input type="number" name="consultation_fee" class="form-control"
                               placeholder="Fee" value="{{ old('consultation_fee') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Online Consultation</label>
                        <select name="online_consultation" class="form-select">
                            <option value="">All</option>
                            <option value="Yes" {{ old('online_consultation') == 'Yes' ? 'selected' : '' }}>Yes</option>
                            <option value="No"  {{ old('online_consultation') == 'No'  ? 'selected' : '' }}>No</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">All</option>
                            @foreach(['Active','Inactive','On Leave'] as $st)
                                <option value="{{ $st }}" {{ old('status') == $st ? 'selected' : '' }}>{{ $st }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-center gap-2">
                    <a href="{{ route('doctor_filter') }}" class="btn btn-label-secondary px-4">Reset</a>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="ti tabler-search me-1"></i> Search
                    </button>
                </div>

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

    {{-- Results --}}
    @isset($searched)
    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h5><i class="ti tabler-list me-2"></i>Search Results
                <span class="badge bg-label-primary ms-2">{{ count($doctors) }} found</span>
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table" id="filterResultsTable">
                   <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>Status</th>
        <th>Action</th>
    </tr>
</thead>
                </table>
            </div>
        </div>
    </div>
    @endisset

    <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>
        @isset($searched)
        $(document).ready(function () {
            const data = @json($doctors);

$('#filterResultsTable').DataTable({
    data: data,
    pageLength: 10,
    ordering: true,
    searching: true,
    columns: [
        {
            data: null,
            render: function (data, type, row, meta) { return meta.row + 1; }
        },
        { data: 'doctor_name' },
        { data: 'specialization' },
        { data: 'mobile' },
        {
            data: 'experience',
            render: function (data) { return data + ' Years'; }
        },
        {
            data: 'fee',
            render: function (data) { return '₹ ' + data; }
        },
        { data: 'availability' },
        {
            data: 'status',
            render: function (data) {
                const cls = data === 'Active' ? 'bg-label-success' : data === 'On Leave' ? 'bg-label-warning' : 'bg-label-danger';
                return `<span class="badge ${cls}">${data}</span>`;
            }
        },
        {
            data: null,
            orderable: false,
            searchable: false,
            render: function (data, type, row) {
                return `
                    <a href="{{ url('admin/doctor') }}/${row.id}/edit" class="btn btn-sm btn-primary">
                        <i class="ti tabler-edit"></i> Edit
                    </a>
                `;
            }
        }
    ]
});
                    
                
            });
    
        @endisset
    </script>

    <style>
        .card { border-radius: 18px; }
        .form-control, .form-select { min-height: 46px; border-radius: 10px; }
        .form-control:focus, .form-select:focus { box-shadow: none; border-color: #696cff; }
        .section-title { border-left: 4px solid #696cff; padding-left: 12px; }
        .section-title h5 { margin: 0; font-weight: 700; }
        .card-header { border-bottom: 1px solid #edf1f7; }
    </style>
@endsection