@extends('layout.app')
@section('title', 'Appointments | Waiting Room')

@section('content')
<style>
.col-xxl-2.col-sm-6, .col-xxl-2.col-sm-4 {
	padding-right: 0px;
}
</style>
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Appointments') }}</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row shapreter-row">
                        <div class="col-sm-3">

                            <div class="custom-card-box">
                                <div class="static-icon">
                                    <span>
                                        <i class="far fa-note-sticky"></i>
                                    </span>
                                    <h3 id="todayBookingsCount" class="count mb-0">{{ $todayBookingsCount }}</h3>
                                    <span class="fs-14">{{ __('translations.Today Appointments') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="custom-card-box">
                                <div class="static-icon">
                                    <span>
                                        <i class="fas fa-book"></i>
                                    </span>
                                    <h3 id="bookingsCount" class="count mb-0">{{ $bookingsCount }}</h3>
                                    <span class="fs-14">{{ __('translations.Total Appointments') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="custom-card-box">
                                <div class="static-icon">
                                    <span>
                                        <i class="fas fa-calendar"></i>
                                    </span>
                                    <h3 id="cancelBookingsCount" class="count mb-0">{{ $cancelBookingsCount }}</h3>
                                    <span class="fs-14">{{ __('translations.Cancelled Appointments') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="custom-card-box">
                                <div class="static-icon">
                                    <span>
                                        <i class="fas fa-dollar"></i>
                                    </span>
                                    <h3 id="bookingsBalanceAmount" class="count mb-0">${{ $bookingsBalanceAmount }}</h3>
                                    <span id="" class="fs-14">{{ __('translations.Total Earning') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card p-3">
                <form id="filterForm">
				<div class="row">
                    <div class="col-xxl-2 col-sm-6">
                        <div>
                            <input type="date" id="filterDate" class="form-control"
                                placeholder="{{ __('translations.Select date') }}">
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-xxl-2 col-sm-6">
                        <div>
                            <input type="time" id="filterTime" class="form-control"
                                placeholder="{{ __('translations.Select time') }}">
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-xxl-2 col-sm-4">
                        <div>
							
                            <select id="filterDoctor" name="doctor" class="form-control default-select h-auto wide"
                                aria-label=".form-select-lg example">
                                <option value="" selected>{{ __('translations.Select Doctor') }}</option>
                                @foreach ($doctors as $doctor)
                                    <option value="{{ $doctor->id }}">{{ $doctor->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!--end col-->
                    <!--end col-->
                    <div class="col-xxl-3 col-sm-4">
                        <div>
                            <select id="filterStatus" name="status" class="form-control default-select h-auto wide"
                                aria-label=".form-select-lg example">
                                <option value="" selected>{{ __('translations.Status') }}</option>
                                <option value="completed">{{ __('translations.Completed') }}</option>
                                <option value="in_progress">{{ __('translations.Started') }}</option>
                                <option value="pending">{{ __('translations.Pending') }}</option>
                                <option value="absent">{{ __('translations.Absent') }}</option>
                                <option value="cancel">{{ __('translations.Cancelled') }}</option>
                                <option value="cancelled_by_clinic">{{ __('translations.Cancelled By Clinic') }}</option>
                            </select>
                        </div>
                    </div>
                    <!--end col-->
                    <!--end col-->
                    <div class="col-xxl-3 col-sm-4">
                        <div class="d-flex">
							<div class="me-2">
								<button type="button" class="btn btn-primary w-100 me-1" onclick="SearchData();"><i
										class="ri-equalizer-fill me-1 align-bottom"></i>
									{{ __('translations.Filters') }}
								</button>
							</div>

							<div>
								<a href="{{ route('appointments') }}" class="btn btn-primary w-100"><i
										class="ri-equalizer-fill me-1 align-bottom"></i>
									{{ __('translations.Clear Filters') }}
								</a>
							</div>
						</div>
                    </div>
                    <!--end col-->
            </div>
            <!--end row-->
            </form>
        </div>
    </div>
    
    <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('translations.All Appointments') }}</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="appointmentTable" class="display" style="min-width: 845px">
                            <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.Speciality') }}</th>
                                    <th>{{ __('translations.Doctor') }}</th>
                                    <th>{{ __('translations.Status') }}</th>
                                    <th>{{ __('translations.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </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="deleteUser">
                    @csrf
                    <input type="hidden" name="id" id="deleteUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this record?') }}
                    </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>

    <!-- Notification Modal -->
    <div class="modal fade" id="notifyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="notifyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notifyModalLabel">{{ __('translations.Send Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelAllAppointments">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="user_id" id="user_id" value="">
                        <input type="hidden" name="booking_id" id="booking_id" value="">
                        <input type="hidden" name="service_provider_id" id="service_provider_id" value="">
                        <div class="mb-3">
                            <label for="notifyMessage" class="form-label">{{ __('translations.Message') }}</label>
                            <textarea class="form-control" name="notification_message" id="notifyMessage" rows="4"></textarea>
                            <div id="charCount" class="form-text">{{ __('translations.256 characters remaining') }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit"
                            class="btn btn-primary">{{ __('translations.Send Notification') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')

    <script>
        $(document).ready(function() {
            // Enforce "End Time" to be after "Start Time"
            $('#startTime, #endTime').on('change', function() {
                const startTime = $('#startTime').val();
                const endTime = $('#endTime').val();

                if (startTime && endTime && endTime <= startTime) {
                    alert('End time must be greater than Start time!');
                    $('#endTime').val(''); // Reset end time if invalid
                }
            });
        });

        const notifyMessage = document.getElementById('notifyMessage');
        const charCount = document.getElementById('charCount');
        const maxChars = 256;

        // Function to update character count
        function updateCharCount() {
            const remainingChars = maxChars - notifyMessage.value.length;
            charCount.textContent = `${remainingChars} characters remaining`;

            // Change color if limit is reached
            if (remainingChars < 0) {
                charCount.style.color = 'red';
            } else {
                charCount.style.color = '';
            }
        }

        // Event listener for input
        notifyMessage.addEventListener('input', function() {
            if (notifyMessage.value.length > maxChars) {
                notifyMessage.value = notifyMessage.value.substring(0, maxChars);
            }
            updateCharCount();
        });

        // Event listener for paste
        notifyMessage.addEventListener('paste', function(e) {
            e.preventDefault(); // Prevent the default paste action
            const pastedData = e.clipboardData.getData('text/plain'); // Get pasted data as plain text
            const currentLength = notifyMessage.value.length;

            // Calculate the remaining characters
            const remainingChars = maxChars - currentLength;

            // If the pasted data is longer than the remaining characters, trim it
            if (pastedData.length > remainingChars) {
                notifyMessage.value += pastedData.substring(0, remainingChars);
            } else {
                notifyMessage.value += pastedData; // Otherwise, just append the pasted data
            }

            updateCharCount(); // Update character count after pasting
        });

        // Initial character count update
        updateCharCount();

        // Call SearchData when button is clicked, but without submitting the form
        $('#applyFilterButton').on('click', function(e) {
            e.preventDefault(); // Prevent default button action (form submission)
            SearchDataFilters(); // Call the SearchData function
        });

        function SearchDataFilters() {
            let startTime = $('#startTime').val();
            let endTime = $('#endTime').val();
            let filterDate = $('#filterDate').val();
            let doctorId = $('#filterDoctor').val();
            let status = $('#filterStatus').val();

            // Serialize form data
            var formData = $('#filterForm').serialize();

            $.ajax({
                url: "{{ route('appointments') }}", // Adjust the route if necessary
                type: "GET",
                data: formData, // Send the serialized form data
                beforeSend: function() {
                    console.log("Searching for data...");
                },
                success: function(response) {
                    // Update the values in the card boxes with filtered data
                    $('#todayBookingsCount').text(response.todayBookingsCount);
                    $('#bookingsCount').text(response.bookingsCount);
                    $('#cancelBookingsCount').text(response.cancelBookingsCount);
                    $('#bookingsBalanceAmount').text('$' + response.bookingsBalanceAmount);

                    console.log(response); // Check the response data for debugging
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching appointments:", error);
                }
            });
        }
    </script>


    <script>
        // Data Table
        $(document).ready(function() {
            let table = $('#appointmentTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('getClinicAppointments') }}",
                    "type": "POST",
                    data: function(d) {
                        d._token = '{{ csrf_token() }}'; // CSRF token
                        d.date = $('#filterDate').val();
                        // d.time = $('#filterTime').val();
                        d.start_time = $('#startTime').val(); // Start Time
                        d.end_time = $('#endTime').val(); // End Time
                        d.doctor = $('#filterDoctor').val();
                        d.status = $('#filterStatus').val();
                    }
                },
                'columns': [
                    // {data: 'checkbox', orderable: false},
                    {
                        data: 'id',
                        name: 'id',
                        orderable: false
                    },
                    {
                        data: 'patient_name',
                        name: 'patient_name',
                        orderable: false
                    },
                    {
                        data: 'date',
                        name: 'date',
                        orderable: false
                    },
                    {
                        data: 'time-slot',
                        name: 'time-slot',
                        orderable: false
                    },
                    {
                        data: 'price',
                        name: 'price',
                        orderable: false
                    },
                    {
                        data: 'queue',
                        name: 'queue',
                        orderable: false
                    },
                    {
                        data: 'speciality',
                        name: 'speciality',
                        orderable: false
                    },
                    {
                        data: 'sname',
                        name: 'sname',
                        orderable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ],
                language: {
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                }
            });
        });

        // Search button to trigger filtering
        function SearchData() {
            $('#appointmentTable').DataTable().ajax.reload(); // Refresh DataTable with new filters
        }
        // function SearchData() {
        //     $('#appointmentTable').DataTable().draw(true); // Refresh DataTable with new filters
        // }

        // Delete

        // Cancel
        function cancelAppointments(userId, bookingId, serviceProviderId) {
            // Set the values in the modal
            $('#user_id').val(userId);
            $('#booking_id').val(bookingId);
            $('#service_provider_id').val(serviceProviderId);

            // Show the modal
            $('#notifyModal').modal('show');
        }


        $("#cancelAllAppointments").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitCancelForm");
            const modal = $('#cancelModal');
            let formData = new FormData($("#cancelAllAppointments")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctor.sendNotificationToPatient') }}",
                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('Yes, Cancel');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Yes, Cancel');
                        modal.modal('hide');
                        console.log(res);

                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    // Check if responseJSON exists and has a message
                    if (e.responseJSON && e.responseJSON.message) {
                        notyf.error({
                            message: e.responseJSON.message,
                            duration: 3000
                        });
                    } else {
                        notyf.error({
                            message: 'An unexpected error occurred.',
                            duration: 3000
                        });
                    }
                }
            });
        });



        function deleteRecord(id) {
            $('#deleteUserId').val(id);
            // console.log(id);

        }

        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('booking.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