@extends('admin.layout.index')
@section('title', 'Manage Clinic Appointments | Waiting Room')

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">{{ __('translations.Clinics Management') }}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.Manage Clinic Appointments') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header border-bottom-dashed">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <div>
                                        <h5 class="card-title mb-0">{{ __('translations.Manage Clinic Appointments') }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <div class="col-xl-5">
                                        <div class="search-box">
                                            <input type="text" class="form-control search"
                                                   placeholder="{{ __('translations.Search for clinic name, status, or something...') }}">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xl-7">
                                        <div class="row g-3">
                                            <div class="col-sm-4">
                                                <input type="date" class="form-control" id="datepicker-range"
                                                       data-provider="flatpickr" data-date-format="d M, Y"
                                                       placeholder="{{ __('translations.Select date') }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <select class="form-control" id="clinicStatus">
                                                    <option value="">{{ __('translations.Select Doctor') }}</option>
                                                    <option value="approved">Dr. Rhona</option>
                                                    <option value="pending">Dr. Cedric</option>
                                                    <option value="rejected">Dr. Garrett</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-4">
                                                <button type="button" class="btn btn-primary w-100"
                                                        onclick="SearchClinicData();">
                                                    <i class="ri-equalizer-fill me-2 align-bottom"></i>{{ __('translations.Filters') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="scroll-horizontal" class="table nowrap align-middle" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.Patient Name') }}</th>
                                        <th>{{ __('translations.Date') }}</th>
                                        <th>{{ __('translations.Time Slots') }}</th>
                                        <th>{{ __('translations.Fees') }}</th>
                                        <th>{{ __('translations.Queue no.') }}</th>
                                        <th>{{ __('translations.Specialty') }}</th>
                                        <th>{{ __('translations.Doctor') }}</th>
                                        <th>{{ __('translations.Status') }}</th>
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!-- Example appointment rows -->
                                    <tr>
                                        <td>01</td>
                                        <td><a href="{{route('admin-appointments-detail')}}">John Doe</a></td>
                                        <td>9 July, 2024</td>
                                        <td>10:30 AM - 11:00 AM</td>
                                        <td>$200</td>
                                        <td>3</td>
                                        <td>{{ __('translations.Neurologist') }}</td>
                                        <td>Dr. Cedric</td>
                                        <td>
                                            <span class="badge bg-success">{{ __('translations.Completed') }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="{{route('admin-appointments-detail')}}"
                                                   class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                        class="bx bx-detail"></i></a>
                                                <a href="#" class="btn btn-danger shadow btn-xs sharp"
                                                   data-bs-toggle="modal" data-bs-target="#deleteModal"><i
                                                        class="bx bx-trash-alt "></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>02</td>
                                        <td><a href="{{route('admin-appointments-detail')}}">Jane Smith</a></td>
                                        <td>10 July, 2024</td>
                                        <td>11:00 AM - 11:30 AM</td>
                                        <td>$150</td>
                                        <td>4</td>
                                        <td>{{ __('translations.Cardiologist') }}</td>
                                        <td>Dr. Rhona</td>
                                        <td>
                                            <span class="badge bg-warning">{{ __('translations.Ongoing') }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="{{route('admin-appointments-detail')}}"
                                                   class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                        class="bx bx-detail"></i></a>
                                                <a href="#" class="btn btn-danger shadow btn-xs sharp"
                                                   data-bs-toggle="modal" data-bs-target="#deleteModal"><i
                                                        class="bx bx-trash-alt "></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>03</td>
                                        <td><a href="{{route('admin-appointments-detail')}}">Michael Brown</a></td>
                                        <td>11 July, 2024</td>
                                        <td>11:30 AM - 12:00 PM</td>
                                        <td>$250</td>
                                        <td>5</td>
                                        <td>{{ __('translations.Dermatologist') }}</td>
                                        <td>Dr. Garrett</td>
                                        <td>
                                            <span class="badge bg-secondary">{{ __('translations.Scheduled') }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="{{route('admin-appointments-detail')}}"
                                                   class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                        class="bx bx-detail"></i></a>
                                                <a href="#" class="btn btn-danger shadow btn-xs sharp"
                                                   data-bs-toggle="modal" data-bs-target="#deleteModal"><i
                                                        class="bx bx-trash-alt "></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Add more rows as needed -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

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


            <!--Delete Modal -->
            <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                 aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Delete Appointment') }}</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form id="deleteAppointmentForm">
                            @csrf
                            <input type="hidden" name="id" id="deleteAppointmentId">
                            <div class="modal-body">
                                {{ __('translations.Are you sure you want to delete this appointment?') }}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                                <button id="submitDelForm" type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('custom-script')
    <script>
    </script>
@endsection