@extends('backend.app')

@section('content')
    <div class="main-breadcrumb d-flex align-items-center my-3 position-relative">
        <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-14">Manage Doctors</h2>
        <div class="flex-shrink-0">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-end mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.doctors.index') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Manage Doctors</li>
                </ol>

            </nav>
        </div>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>Manage Doctors</h4>
            <div class="d-flex flex-wrap gap-3 ms-auto">
                {{-- Search Box --}}
                <div class="form-icon">
                    <input type="text" class="form-control form-control-icon" id="searchBox"
                        placeholder="Search Here ...">
                    <i class="ri-search-2-line text-muted"></i>
                </div>
<div class="dropdown">
                    <button class="btn btn-outline-light text-muted dropdown-toggle" type="button" id="filterByDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Filter By
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="filterByDropdown">
                        <li><a class="dropdown-item status-filter" data-status="">All</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Pending">Pending</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Uploaded">Uploaded</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Rejected">Rejected</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Generated">Generated</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Approved">Approved</a></li>
                    </ul>
                </div>


                {{-- Add New Button --}}
               
                <a href="{{ route('export') }}" class="btn btn-44 btn-light shadow-sm">
                    <i class="bi bi-download"></i></a>
            </div>
        </div>

        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-subtle-success  alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-subtle-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="table-box table-responsive">
                <table class="table table-hover text-nowrap" id="infographicTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Doctor Name</th>
                            <th>Designation</th>
                            <th>Speciality</th>
                            <th>Subject</th>
                            <th>Empid</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            let statusFilter = '';
            let table = $('#infographicTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.doctors.index') }}",
                    data: function(d) {
                        d.status = statusFilter; // Send status filter to server
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                    },
                    {
                        data: 'doctorname',
                        name: 'doctorname',
                    },
                    {
                        data: 'designation',
                        name: 'designation'
                    },{
                        data: 'speciality',
                        name: 'speciality'
                    },
                    {
                        data: 'subject',
                        name: 'subject'
                    },
                    {
                        data: 'empid',
                        name: 'empid',
                    },{
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: true
                    },{
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: true
                    },
                    
                ]
            });

            // 🔍 Search in DataTable
            $('#searchBox').on('keyup', function() {
                table.search(this.value).draw();
            });

            // 📌 Filter by Status
            $('.status-filter').on('click', function() {
                statusFilter = $(this).data('status');
                table.ajax.reload();
            });
        });
    </script>
@endsection