@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('patient') }}">
                        <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>
                Patient 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 Patients</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('patient_filter_search') }}" method="POST">
                @csrf

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

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Sheet No</label>
                        <input type="text" name="sheet_no" class="form-control"
                               placeholder="Sheet No" value="{{ old('sheet_no') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Patient Name</label>
                        <input type="text" name="patient_name" class="form-control"
                               placeholder="Patient Name" value="{{ old('patient_name') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control"
                               placeholder="Phone Number" value="{{ old('phone') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control"
                               placeholder="Email" 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 class="col-md-4">
                        <label class="form-label">Blood Group</label>
                        <select name="blood_group" class="form-select">
                            <option value="">All</option>
                            @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                                <option value="{{ $bg }}" {{ old('blood_group') == $bg ? 'selected' : '' }}>{{ $bg }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Patient For</label>
                        <select name="patient_for" class="form-select">
                            <option value="">All</option>
                            <option value="Dental"   {{ old('patient_for') == 'Dental'   ? 'selected' : '' }}>Dental</option>
                            <option value="Hospital" {{ old('patient_for') == 'Hospital' ? 'selected' : '' }}>Hospital</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Marital Status</label>
                        <select name="marital_status" class="form-select">
                            <option value="">All</option>
                            @foreach(['Single','Married','Divorced','Widowed'] as $ms)
                                <option value="{{ $ms }}" {{ old('marital_status') == $ms ? 'selected' : '' }}>{{ $ms }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="section-title my-4">
                    <h5><i class="ti tabler-map-pin me-2"></i>Location</h5>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Place</label>
                        <input type="text" name="place" class="form-control"
                               placeholder="Place" value="{{ old('place') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">City</label>
                        <input type="text" name="city" class="form-control"
                               placeholder="City" value="{{ old('city') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">State</label>
                        <input type="text" name="state" class="form-control"
                               placeholder="State" value="{{ old('state') }}">
                    </div>
                </div>

 

                <hr class="my-4">

                <div class="d-flex justify-content-center gap-2">
                    <a href="{{ route('patient_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($patients) }} 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>Sheet No</th>
                            <th>Patient Name</th>
                            <th>Phone</th>
                            <th>Gender</th>
                            <th>Blood Group</th>
                            <th>Place</th>
                            <th>Patient For</th>
                            <th>Department</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($patients);

            $('#filterResultsTable').DataTable({
                data: data,
                pageLength: 10,
                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) { return meta.row + 1; }
                    },
                    {
                        data: 'sheet_no',
                        render: function (data) { return `<span class="fw-semibold">${data}</span>`; }
                    },
                    { data: 'patient_name' },
                    { data: 'phone' },
                    { data: 'gender' },
                    { data: 'blood_group' },
                    { data: 'place' },
                    { data: 'patient_for' },
                    { data: 'department' },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return `
                                <div class="d-flex gap-1">
                                    <a href="{{ url('admin/patient') }}/${row.id}" class="btn btn-sm btn-label-info">
                                        <i class="ti tabler-eye"></i>
                                    </a>
                                    <a href="{{ url('admin/patient') }}/${row.id}/edit" class="btn btn-sm btn-primary">
                                        <i class="ti tabler-edit"></i>
                                    </a>
                                </div>
                            `;
                        }
                    }
                ]
            });
        });
        @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 join #edf1f7; }
    </style>
@endsection