@extends('layouts.new-layout')

@section('title', 'Appointment Lookup')

@push('head')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        .lookup-container {
            max-width:1000px;
            width: 95%;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
        }

        .result-container {
            margin-top: 20px;
            display: none;
        }

        .text-left {
            text-align: start;
        }

        .time-btn {
            margin: 5px;
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background: #232323;
            color: white;
        }

        .time-btn.selected {
            background: #0056b3;
        }

        .time-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        #appointment-lookup-form input::placeholder {
            color: darkgrey !important;
            color: gray;
        }
    </style>
@endpush

@section('content')
    <div class="lookup-container">
        <h2>Find Your Appointment</h2>
        <p>Enter your appointment ID to retrieve details.</p>
        <form id="appointment-lookup-form">
            <div class="mb-3 -d-flex gap-2 align-items-center">
                <input type="text" id="appointment_id" class="form-control" value="{{ request('appointment_id') }}" placeholder="Enter Appointment ID" required>
                <input type="email" id="appointment_email" class="form-control mt-2" value="{{ request('appointment_email') }}" placeholder="Enter Appointment Email" required>
            </div>
            <button type="submit" class="py-2 btn-blue2 text-center text-uppercase px-lg-3 px-md-3 button-48">
                <small>Search Appointment <i class="fa fa-search" aria-hidden="true"></i></small>
            </button>
        </form>
        <div id="error-message" class="text-danger mt-3" style="display: none;"></div>

        <div class="result-container text-left mt-4 p-3 border rounded" id="appointment-result">
            <h3>Appointment Details</h3>
            <p><strong>Appointment ID:</strong> <span id="result-appointment-id"></span></p>
            <p><strong>Date:</strong> <span id="result-date"></span></p>
            <p><strong>Time:</strong> <span id="result-time"></span></p>
            <p><strong>Status:</strong> <span id="result-status"></span></p>
            <p><strong>Email:</strong> <span id="result-email"></span></p>
            <p><strong>Phone:</strong> <span id="result-phone"></span></p>
            <div id="result-custom-fields"></div>
            <div class="mt-3 d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#rescheduleModal">Reschedule Appointment</button>
                <button id="cancel-btn" class="btn btn-danger btn-sm">Cancel Appointment</button>
            </div>
        </div>
    </div>

    <!-- Reschedule Modal -->
    <div class="modal fade" id="rescheduleModal" tabindex="-1" aria-labelledby="rescheduleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rescheduleModalLabel">Reschedule Appointment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="new-date" class="form-label"><strong>Reschedule Date:</strong></label>
                    <div class="input-group" style="cursor:pointer;" onclick="document.getElementById('new-date')._flatpickr && document.getElementById('new-date')._flatpickr.open()">
                        <input type="text" id="new-date" class="form-control" placeholder="Select a date" readonly style="cursor:pointer; background:#fff;">
                        <span class="input-group-text" style="cursor:pointer;"><i class="fas fa-calendar-alt"></i></span>
                    </div>
                    <div id="timeSlots" class="mt-3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="confirm-reschedule-btn" type="button" class="btn btn-warning">Confirm Reschedule</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // Init flatpickr when reschedule modal opens
        document.getElementById('rescheduleModal').addEventListener('shown.bs.modal', function () {
            var input = document.getElementById('new-date');
            if (!input._flatpickr) {
                flatpickr(input, {
                    minDate: 'today',
                    dateFormat: 'Y-m-d',
                    disableMobile: true,
                    allowInput: false,
                    onChange: function() {
                        input.dispatchEvent(new Event('change'));
                    }
                });
            }
        });

        document.addEventListener("DOMContentLoaded", function () {

            const form = document.getElementById("appointment-lookup-form");
            const appointmentIdInput = document.getElementById("appointment_id");
            const appointmentEmailInput = document.getElementById("appointment_email");
            const errorMessage = document.getElementById("error-message");
            const resultContainer = document.getElementById("appointment-result");
            const datePicker = document.getElementById("new-date");
            const timeSlotsContainer = document.getElementById("timeSlots");
            const submitButton = form.querySelector('button[type="submit"]');
            const successModal = document.getElementById("successModal");
            const successModalCloseBtn = successModal ? successModal.querySelector('button[type="button"]') : null;
            let selectedAppointmentCategory = null;
            let selectedInterval = 0;

            if (successModalCloseBtn) {
                successModalCloseBtn.addEventListener('click', ()=>{
                    successModal.close();
                    document.body.removeAttribute('style');
                    window.location.href = '{{ route("welcome") }}';
                });
            }

            form.addEventListener("submit", async function (event) {
                event.preventDefault();
                errorMessage.style.display = "none";
                resultContainer.style.display = "none";

                const submitButton = event.target.querySelector('button[type="submit"]');
                const originalButtonHTML = submitButton.innerHTML;

                submitButton.setAttribute('disabled', 'disabled');
                submitButton.innerHTML = '<span>Searching...</span>';

                const appointmentId = appointmentIdInput.value.trim();
                const appointmentEmail = appointmentEmailInput.value.trim();

                if (!appointmentId || !appointmentEmail) {
                    errorMessage.textContent = "Please enter a valid Appointment ID and Email.";
                    errorMessage.style.display = "block";
                    submitButton.removeAttribute('disabled');
                    submitButton.innerHTML = originalButtonHTML;
                    return;
                }

                try {
                    selectedAppointmentCategory = null;
                    const response = await fetch(`{{ route("appointments.find") }}`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ appointment_id: appointmentId, appointment_email: appointmentEmail })
                    });

                    const data = await response.json();
                    if (!response.ok) throw new Error(data.error || "An error occurred.");

                    document.getElementById("result-appointment-id").textContent = data.appointment_id;
                    document.getElementById("result-date").textContent = data.date;
                    document.getElementById("result-time").textContent = data.time;
                    document.getElementById("result-status").innerHTML = data.approved ? '<span class="btn btn-sm btn-success">Approved</span>' : '<span class="btn btn-sm btn-danger">Pending</span>'
                    document.getElementById("result-email").textContent = data.email;
                    document.getElementById("result-phone").textContent = data.phone;

                    const customFieldsContainer = document.getElementById('result-custom-fields');
                    customFieldsContainer.innerHTML = '';
                    (data.custom_fields || []).forEach(function(field) {
                        const row = document.createElement('p');
                        row.innerHTML = '<strong>' + field.label + ':</strong> <span>' + field.value + '</span>';
                        customFieldsContainer.appendChild(row);
                    });

                    resultContainer.style.display = "block";

                    selectedAppointmentCategory = 'Others';
                    selectedInterval = 180;
                    resultContainer.style.display = "block";
                } catch (error) {
                    errorMessage.textContent = error.message;
                    errorMessage.style.display = "block";
                } finally {
                    submitButton.removeAttribute('disabled')
                    submitButton.innerHTML = originalButtonHTML;
                }
            });

            if(appointmentIdInput.value.trim() && appointmentEmailInput.value.trim()){
                setTimeout(() => submitButton.click(), 300);
            }

            datePicker.addEventListener("change", function () {
                const selectedDate = datePicker.value.trim();
                const category = selectedAppointmentCategory; // dynamically fetched category

                if (!selectedDate) return;

                

                fetch(`/appointments/available-times?date=${selectedDate}&category=${category}`)
                    .then(response => response.json())
                    .then(data => {
                        let bookedSlots = data.bookedSlots;
                        const availableSlots = data.availableSlots;
                        let slotsHtml = '';
                        timeSlotsContainer.innerHTML = '';
                        let startTime = new Date();
                        startTime.setHours(10, 0, 0, 0); // 10:00 AM
                        let endTime = new Date();
                        endTime.setHours(18, 0, 0, 0); // 6:00 PM
                        availableSlots.forEach(availableSlot => {
                            const button = document.createElement("button");
                            button.type = "button";
                            button.className = "time-btn";
                            button.dataset.time = availableSlot;
                            button.textContent = availableSlot;
                            button.addEventListener("click", function () {
                                document.querySelectorAll(".time-btn").forEach(btn => btn.classList.remove("selected"));
                                button.classList.add("selected");
                            });
                            timeSlotsContainer.appendChild(button);
                        });

                        if (availableSlots.length === 0) {
                            timeSlotsContainer.innerHTML = '<p>No Slot Available</p>';
                        }
                    })
                    .catch(error => console.error("Error fetching available times:", error));
            });

            document.getElementById("confirm-reschedule-btn").addEventListener("click", function() {
                const button = document.getElementById("confirm-reschedule-btn");
                const originalText = button.textContent;

                // Update button state
                button.textContent = "Rescheduling...";
                button.setAttribute('disabled', 'disabled');

                const appointmentId = document.getElementById("result-appointment-id").textContent;
                const newDate = datePicker.value;
                const selectedTime = document.querySelector(".time-btn.selected")?.dataset.time;

                if (!newDate || !selectedTime) {
                    alert("Please select a date and time.");
                    button.textContent = originalText;
                    button.removeAttribute('disabled');
                    return;
                }

                fetch(`{{ route("appointments.reschedule") }}`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ appointment_id: appointmentId, new_date: newDate, new_time: selectedTime })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) throw new Error(data.error);

                        document.getElementById("result-date").textContent = newDate;
                        document.getElementById("result-time").textContent = selectedTime;
                        document.getElementById("result-status").textContent = "Rescheduled";

                        // Close the modal using Bootstrap's modal API
                        const rescheduleModalEl = document.getElementById('rescheduleModal');
                        const modal = bootstrap.Modal.getInstance(rescheduleModalEl) || new bootstrap.Modal(rescheduleModalEl);
                        modal.hide();

                        document.querySelector('.modal-backdrop.fade.show')?.classList.remove('show', 'modal-backdrop');
                        // Show success modal
                        document.getElementById("successModalTitle").textContent = "Appointment Rescheduled";
                        document.getElementById("successModalMessage").textContent = data.message;
                        successModal.showModal();
                        setTimeout(() => {
                            window.location.href = '{{ route("welcome") }}';
                        }, 2000);
                    })
                    .catch(error => {
                        alert(error.message);
                        // Reset button on error
                        button.textContent = originalText;
                        button.removeAttribute('disabled');
                    })
            });

            // Cancel Appointment
            document.getElementById("cancel-btn").addEventListener("click", function () {
                const appointmentId = document.getElementById("result-appointment-id").textContent;

                if (!confirm("Are you sure you want to cancel this appointment?")) {
                    return;
                }

                fetch(`{{ route("appointments.cancel") }}`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ appointment_id: appointmentId })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) throw new Error(data.error);
                        alert(data.message);
                        document.getElementById("result-status").textContent = "Cancelled";

                        document.getElementById("successModalTitle").textContent = "Appointment Cancelled";
                        document.getElementById("successModalMessage").textContent = data.message;
                        successModal.showModal();
                        setInterval(()=>{
                            location.reload();
                        }, 2000)
                    })
                    .catch(error => alert(error.message));
            });

            datePicker.min = new Date().toISOString().split('T')[0];

            function disableSundays() {
                const today = new Date();
                const oneYearFromNow = new Date();
                oneYearFromNow.setFullYear(today.getFullYear() + 1);

                datePicker.setAttribute("min", today.toISOString().split('T')[0]);

                datePicker.addEventListener("beforeinput", function(e) {
                    const potentialDate = new Date(e.data);
                    if (!isNaN(potentialDate.getTime()) && potentialDate.getDay() === 0) {
                        // e.preventDefault();
                    }
                });
            }

            disableSundays();

        });
    </script>
@endpush

@push('modals')

    <dialog id="successModal">
        <div class="modal-content bg-white rounded-lg overflow-hidden">
            <div class="p-6 text-center">
                <div class="mb-4 flex justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2" id="successModalTitle">Success!</h3>
                <p class="text-gray-600 mb-5" id="successModalMessage">Your action was completed successfully.</p>
                <button type="button" class="btn btn-success">
                    Okay
                </button>
            </div>
        </div>
    </dialog>
@endpush