@extends('admin.layout.index')
@section('title', 'Appointment Monitoring & Control')
@section('custom-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection
@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.Appointment Monitoring & Control') }}</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.Appointments') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-xl-3 col-md-6">
                    <!-- card -->
                    <div class="card card-animate">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0"> {{ __('translations.Total Appointments') }}</p>
                                </div>
                                {{-- <div class="flex-shrink-0">
                                                <h5 class="text-success fs-14 mb-0">
                                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0.0 %
                                                </h5>
                                            </div> --}}
                            </div>
                            <div class="d-flex align-items-end justify-content-between mt-4">
                                <div>
                                    <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                                                                          data-target="{{ $totalBookings }}">0</span>
                                    </h4>

                                </div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="bx bx-laptop text-success"></i>
                                    </span>
                                </div>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->

                <div class="col-xl-3 col-md-6">
                    <!-- card -->
                    <div class="card card-animate">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('translations.Pending Appointments') }}</p>
                                </div>
                                {{-- <div class="flex-shrink-0">
                                                <h5 class="text-danger fs-14 mb-0">
                                                    <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -0.01 %
                                                </h5>
                                            </div> --}}
                            </div>
                            <div class="d-flex align-items-end justify-content-between mt-4">
                                <div>
                                    <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                        <span class="counter-value" data-target="{{ $totalPending }}">0</span>
                                    </h4>

                                </div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="bx bx-outline  text-info"></i>
                                    </span>
                                </div>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->

                <div class="col-xl-3 col-md-6">
                    <!-- card -->
                    <div class="card card-animate">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('translations.Inprogress Appointments') }}</p>
                                </div>
                                {{-- <div class="flex-shrink-0">
                                                <h5 class="text-success fs-14 mb-0">
                                                    <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0.0 %
                                                </h5>
                                            </div> --}}
                            </div>
                            <div class="d-flex align-items-end justify-content-between mt-4">
                                <div>
                                    <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                        <span class="counter-value" data-target="{{ $totalProgress }}">0</span>
                                    </h4>
                                </div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-warning-subtle rounded fs-3">
                                        <i class="bx bx-user-circle text-warning"></i>
                                    </span>
                                </div>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->

                <div class="col-xl-3 col-md-6">
                    <!-- card -->
                    <div class="card card-animate">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('translations.Completed Appointments') }}</p>
                                </div>
                                {{-- <div class="flex-shrink-0">
                                                <h5 class="text-muted fs-14 mb-0">
                                                    +0.00 %
                                                </h5>
                                            </div> --}}
                            </div>
                            <div class="d-flex align-items-end justify-content-between mt-4">
                                <div>
                                    <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                        <span class="counter-value" data-target="{{ $totalComplete }}">0</span>
                                    </h4>
                                </div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-primary-subtle rounded fs-3">
                                        <i class="bx bx-check-square  text-primary"></i>
                                    </span>
                                </div>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->
            </div> <!-- end row-->

            <!-- Filters -->
            <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">
                                    <h5 class="card-title mb-0">{{ __('translations.All Appointments') }}</h5>
                                </div>
                            </div>
                        </div>

                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <div class="col-xl-4">
                                        <div class="search-box">
                                            <input type="text" id="searchQuery" class="form-control search"
                                                   placeholder="{{ __('translations.Search for category name, or something...') }}">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xl-8">
                                        <div class="row g-3">
                                            <div class="col-sm-3">
                                                <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-3">
                                                <select class="form-control" id="clinicFilter">
                                                    <option value="">{{ __('translations.All Clinics') }}
                                                    </option>
                                                    @foreach ($cData as $clinic)
                                                        <option value="{{ $clinic->id }}">{{ $clinic->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <select class="form-control" id="statusFilter">
                                                    <option value="">{
                                                        { __('translations.Appointments Status') }}
                                                    </option>
                                                    <option value="completed">
                                                        {{ __('translations.Completed') }}
                                                    </option>
                                                    <option value="cancel">
                                                        {{ __('translations.Cancelled') }}

                                                    </option>
                                                    <option value="pending">
                                                        {{ __('translations.Pending') }}
                                                    </option>
                                                    <option value="absent">
                                                        {{ __('translations.Absent') }}
                                                    </option>
                                                    <option value="in_progress">
                                                        {{ __('translations.In Progress') }}
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <button type="button" id="applyFilters" 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="clinicTable" class="table nowrap align-middle" style="width:100%">
                                    <thead class="table-light">
                                    <tr>
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.Patient Name') }}</th>
                                        <th>{{ __('translations.Doctor') }}</th>
                                        <th>{{ __('translations.Clinic') }}</th>
                                        <th>{{ __('translations.Appointment Time') }}</th>
                                        <th>{{ __('translations.Status') }}</th>
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{-- <tr>
                                        <td>01</td>
                                        <td><a href="{{ route('admin-appointments-detail') }}">John Doe</a></td>
                                        <td>Dr. Smith</td>
                                        <td>Sunrise Clinic</td>
                                        <td>10:00 AM, 02 Dec 2024</td>
                                        <td><span class="badge bg-success">Rescheduled</span></td>
                                        <td class="action-buttons">
                                            <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>
                                        </td>
                                    </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

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


    <!--Delete Modal -->
    <div class="modal fade" id="deleteUserModal" 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="deleteBooking">
                    @csrf
                    <input type="hidden" name="id" id="deleteBookingId">
                    <div class="modal-body">
                        <p>{{ __('translations.Are you sure you want to delete this booking?') }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('translations.Cancel') }}
                        </button>
                        <button type="submit" class="btn btn-danger">{{ __('translations.Delete') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        // Delete
        function deleteBookingRecord(id) {
            $('#deleteBookingId').val(id);
        }

        $(document).ready(function () {

            flatpickr("#datepicker-range", {
                dateFormat: "d-m-Y",
                maxDate: "today"
            });

            let table = $('#clinicTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "ordering": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('admin-appointments-monitoring') }}",
                    "type": "GET",
                    "data": function (d) {
                        // "_token": "{{ csrf_token() }}",
                        d.searchQuery = $('#searchQuery').val();
                        d.date = $('#datepicker-range').val();
                        d.clinic = $('#clinicFilter').val();
                        d.status = $('#statusFilter').val();
                    }
                },
                'columns': [{
                    data: null, // This column will not have any data, just an index
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row, meta) {
                        return meta.row + 1 + (meta.settings
                            ._iDisplayStart); // Calculate serial number
                    },
                },
                    {
                        data: 'patient_name',
                        orderable: false
                    },
                    {
                        data: 'doctor_name',
                        orderable: false
                    },
                    {
                        data: 'clinic_name',
                        orderable: false
                    },
                    {
                        data: 'appointment_time',
                        orderable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        orderable: false
                    },
                ]
            });
            $('#searchQuery').on('keyup', function () {
                table.search(this.value).draw();
            });
            // // Global search via DataTables' built-in method
            // $('#globalSearch').on('keyup', function() {
            //     // table.search(this.value).reload();
            //     table.search(this.value).draw();
            // });

            // Reload DataTable on filter change
            $('#applyFilters').on('click', function () {
                table.ajax.reload();
            });

            $("#deleteBooking").on('submit', function (e) {
                e.preventDefault();
                const btn = $("#submitDelForm");
                const modal = $('#deleteModal');
                let formData = new FormData($("#deleteBooking")[0]);
                $.ajax({
                    type: "POST",
                    url: "{{ route('clinicBooking.delete') }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function () {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function (res) {
                        if (res.success === true) {
                            btn.prop('disabled', false);
                            btn.html('Delete');
                            modal.modal('hide');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function () {
                                window.location.reload();
                            }, 2000);

                        } else {
                            btn.prop('disabled', false);
                            btn.html('Delete');
                            modal.modal('hide');
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function (e) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                    }
                });
            });

        });
    </script>
@endsection