<?php
session_start();
include 'layouts/dbconn.php';
include 'layouts/session.php';

if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit();
}

$allowed_roles = ['SUPER_ADMIN', 'HOSPITAL_ADMIN', 'RECEPTIONIST', 'ENT_DOCTOR', 'ENT_CONSULTANT', 'NURSE'];
if (!in_array($_SESSION['role_code'], $allowed_roles)) {
    header('Location: dashboard.php');
    exit();
}

// Get patient ID from URL if provided
$patient_id = isset($_GET['patient_id']) ? (int)$_GET['patient_id'] : 0;
$patient = null;

// Fetch patient details if patient_id is provided
if ($patient_id) {
    $patient_sql = "SELECT 
                        p.*,
                        u.full_name, u.email, u.phone_primary, u.gender, 
                        u.date_of_birth,
                        TIMESTAMPDIFF(YEAR, u.date_of_birth, CURDATE()) as age
                    FROM patients p
                    INNER JOIN users u ON p.user_id = u.user_id
                    WHERE p.patient_id = ?";
    
    $stmt = $conn->prepare($patient_sql);
    $stmt->bind_param('i', $patient_id);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result->num_rows > 0) {
        $patient = $result->fetch_assoc();
    }
}

// Fetch all active doctors
$doctors_sql = "SELECT 
                    d.doctor_id,
                    u.full_name,
                    d.specialization,
                    
                    u.email,
                    u.phone_primary,
                    d.consultation_fee
                FROM doctors d
                INNER JOIN users u ON d.user_id = u.user_id
                WHERE d.is_active = 1
                ORDER BY u.full_name ASC";
$doctors = $conn->query($doctors_sql);

// Fetch active patients for dropdown (if patient not pre-selected)
if (!$patient) {
    $patients_sql = "SELECT 
                        p.patient_id,
                        p.patient_number,
                        u.full_name,
                        u.phone_primary,
                        u.gender,
                        TIMESTAMPDIFF(YEAR, u.date_of_birth, CURDATE()) as age
                    FROM patients p
                    INNER JOIN users u ON p.user_id = u.user_id
                    WHERE p.status = 'ACTIVE'
                    ORDER BY u.full_name ASC";
    $patients = $conn->query($patients_sql);
}
?>

<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'New Appointment')); ?>
    <?php include 'layouts/head-css.php'; ?>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <link href="assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet">
    
    <style>
        .appointment-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            margin-bottom: 1.5rem;
        }
        
        .section-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            align-items: center;
        }
        
        .patient-info-box {
            background: linear-gradient(135deg, #2d7a2d 0%, #26a69a 100%);
            border-radius: 12px;
            padding: 1.5rem;
            color: white;
            margin-bottom: 1.5rem;
        }
        
        .patient-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: #2d7a2d;
            border: 3px solid rgba(255,255,255,0.3);
        }
        
        .slot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .slot-btn {
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
            font-size: 0.875rem;
        }
        
        .slot-btn:hover:not(.disabled) {
            border-color: #2d7a2d;
            background: #f0fdf4;
            transform: translateY(-2px);
        }
        
        .slot-btn.selected {
            background: #2d7a2d;
            color: white;
            border-color: #2d7a2d;
        }
        
        .slot-btn.disabled {
            background: #f1f5f9;
            color: #94a3b8;
            cursor: not-allowed;
            opacity: 0.6;
        }
        
        .time-display {
            font-weight: 600;
            display: block;
        }
        
        .slot-info {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 0.25rem;
        }
        
        .doctor-card {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 0.75rem;
        }
        
        .doctor-card:hover {
            border-color: #2d7a2d;
            background: #f0fdf4;
        }
        
        .doctor-card.selected {
            border-color: #2d7a2d;
            background: #dcfce7;
        }
        
        .badge-custom {
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.75rem;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            z-index: 10;
        }
        
        .calendar-wrapper {
            position: relative;
            min-height: 200px;
        }
        
        .no-slots-message {
            text-align: center;
            padding: 2rem;
            color: #64748b;
        }
        
        .required-field::after {
            content: "*";
            color: #dc2626;
            margin-left: 0.25rem;
        }

        .info-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            font-size: 0.875rem;
        }

        .select2-container--bootstrap-5 .select2-selection {
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }
    </style>
</head>

<body>
    <div id="layout-wrapper">
        <?php include 'layouts/menu.php'; ?>
        
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    <!-- 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">New Appointment</h4>
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>
                                        <?php if ($patient): ?>
                                        <li class="breadcrumb-item"><a href="patient_profile.php?id=<?php echo $patient_id; ?>">Patient Profile</a></li>
                                        <?php endif; ?>
                                        <li class="breadcrumb-item"><a href="list_appointments.php">Appointments</a></li>
                                        <li class="breadcrumb-item active">New Appointment</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form id="appointmentForm">
                        <div class="row">
                            <!-- Left Column - Patient & Doctor Selection -->
                            <div class="col-lg-4">
                                <!-- Patient Information -->
                                <div class="appointment-card">
                                    <h5 class="section-title">
                                        <i class="ri-user-line me-2"></i>Patient Information
                                    </h5>
                                    
                                    <?php if ($patient): ?>
                                    <!-- Pre-selected Patient Display -->
                                    <div class="patient-info-box">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="patient-avatar me-3">
                                                <?php echo strtoupper(substr($patient['full_name'], 0, 2)); ?>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1"><?php echo htmlspecialchars($patient['full_name']); ?></h6>
                                                <div class="small opacity-90">
                                                    <i class="ri-hashtag"></i> <?php echo htmlspecialchars($patient['patient_number']); ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-2 small">
                                            <div class="col-6">
                                                <div class="info-badge">
                                                    <i class="ri-calendar-line me-1"></i>
                                                    <?php echo $patient['age']; ?> years
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="info-badge">
                                                    <i class="ri-user-line me-1"></i>
                                                    <?php echo ucfirst(strtolower($patient['gender'])); ?>
                                                </div>
                                            </div>
                                            <div class="col-12 mt-2">
                                                <i class="ri-phone-line me-1"></i>
                                                <?php echo htmlspecialchars($patient['phone_primary']); ?>
                                            </div>
                                            <?php if ($patient['email']): ?>
                                            <div class="col-12">
                                                <i class="ri-mail-line me-1"></i>
                                                <?php echo htmlspecialchars($patient['email']); ?>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <input type="hidden" name="patient_id" value="<?php echo $patient_id; ?>">
                                    <a href="new_appointment.php" class="btn btn-sm btn-outline-light w-100" style="border-color: rgba(255,255,255,0.3); color: #2d7a2d;">
                                        <i class="ri-refresh-line me-1"></i> Select Different Patient
                                    </a>
                                    
                                    <?php else: ?>
                                    <!-- Patient Selection Dropdown -->
                                    <div class="mb-3">
                                        <label class="form-label required-field">Select Patient</label>
                                        <select class="form-select" id="patientSelect" name="patient_id" required>
                                            <option value="">Choose a patient...</option>
                                            <?php while($p = $patients->fetch_assoc()): ?>
                                            <option value="<?php echo $p['patient_id']; ?>" 
                                                    data-name="<?php echo htmlspecialchars($p['full_name']); ?>"
                                                    data-number="<?php echo htmlspecialchars($p['patient_number']); ?>"
                                                    data-phone="<?php echo htmlspecialchars($p['phone_primary']); ?>"
                                                    data-age="<?php echo $p['age']; ?>"
                                                    data-gender="<?php echo $p['gender']; ?>">
                                                <?php echo htmlspecialchars($p['full_name']); ?> - 
                                                <?php echo htmlspecialchars($p['patient_number']); ?>
                                            </option>
                                            <?php endwhile; ?>
                                        </select>
                                    </div>
                                    
                                    <!-- Selected Patient Preview -->
                                    <div id="patientPreview" class="patient-info-box" style="display: none;">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="patient-avatar me-3" id="previewAvatar"></div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1" id="previewName"></h6>
                                                <div class="small opacity-90" id="previewNumber"></div>
                                            </div>
                                        </div>
                                        <div class="row g-2 small">
                                            <div class="col-6">
                                                <div class="info-badge" id="previewAge"></div>
                                            </div>
                                            <div class="col-6">
                                                <div class="info-badge" id="previewGender"></div>
                                            </div>
                                            <div class="col-12 mt-2" id="previewPhone"></div>
                                        </div>
                                    </div>
                                    <?php endif; ?>
                                </div>

                                <!-- Doctor Selection -->
                                <div class="appointment-card">
                                    <h5 class="section-title">
                                        <i class="ri-user-star-line me-2"></i>Select Doctor
                                    </h5>
                                    
                                    <div id="doctorsList">
                                        <?php 
                                        $doctors->data_seek(0);
                                        while($doctor = $doctors->fetch_assoc()): 
                                        ?>
                                        <div class="doctor-card" data-doctor-id="<?php echo $doctor['doctor_id']; ?>">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-1"><?php echo htmlspecialchars($doctor['full_name']); ?></h6>
                                                    <div class="text-muted small mb-2">
                                                        <i class="ri-stethoscope-line me-1"></i>
                                                        <?php echo htmlspecialchars($doctor['specialization']); ?>
                                                    </div>
                                                    <div class="text-muted small">
                                                        <i class="ri-money-dollar-circle-line me-1"></i>
                                                        KES <?php echo number_format($doctor['consultation_fee'], 0); ?>
                                                    </div>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input doctor-radio" type="radio" 
                                                           name="doctor_id" value="<?php echo $doctor['doctor_id']; ?>" 
                                                           id="doctor<?php echo $doctor['doctor_id']; ?>" required>
                                                </div>
                                            </div>
                                        </div>
                                        <?php endwhile; ?>
                                    </div>
                                </div>

                                <!-- Appointment Type -->
                                <div class="appointment-card">
                                    <h5 class="section-title">
                                        <i class="ri-file-list-3-line me-2"></i>Appointment Type
                                    </h5>
                                    
                                    <div class="mb-3">
                                        <label class="form-label required-field">Type</label>
                                        <select class="form-select" name="appointment_type" required>
                                            <option value="">Select Type</option>
                                            <option value="CONSULTATION" selected>Consultation</option>
                                            <option value="FOLLOW_UP">Follow-up</option>
                                            <option value="PROCEDURE">Procedure</option>
                                            <option value="EMERGENCY">Emergency</option>
                                            <option value="TELEMEDICINE">Telemedicine</option>
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Booking Source</label>
                                        <select class="form-select" name="booking_source" required>
                                            <option value="STAFF" selected>Staff</option>
                                            <option value="PHONE">Phone</option>
                                            <option value="WALK_IN">Walk-in</option>
                                            <option value="ONLINE">Online</option>
                                        </select>
                                    </div>

                                    <div>
                                        <label class="form-label">Duration (minutes)</label>
                                        <input type="number" class="form-control" name="estimated_duration" 
                                               value="30" min="15" step="15">
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column - Date, Time & Details -->
                            <div class="col-lg-8">
                                <!-- Date Selection -->
                                <div class="appointment-card">
                                    <h5 class="section-title">
                                        <i class="ri-calendar-line me-2"></i>Select Date & Time
                                    </h5>
                                    
                                    <div class="mb-4">
                                        <label class="form-label required-field">Appointment Date</label>
                                        <input type="date" class="form-control" id="appointmentDate" 
                                               name="appointment_date" required 
                                               min="<?php echo date('Y-m-d'); ?>">
                                        <div class="form-text">
                                            <i class="ri-information-line"></i> 
                                            Select a doctor and date to view available time slots
                                        </div>
                                    </div>

                                    <!-- Available Slots -->
                                    <div class="calendar-wrapper">
                                        <div id="slotsLoading" class="loading-overlay" style="display: none;">
                                            <div class="text-center">
                                                <div class="spinner-border text-success" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                                <div class="mt-2 text-muted">Loading available slots...</div>
                                            </div>
                                        </div>
                                        
                                        <div id="availableSlots">
                                            <div class="no-slots-message">
                                                <i class="ri-calendar-2-line" style="font-size: 3rem; opacity: 0.3;"></i>
                                                <p class="mt-2">Please select a doctor and date to view available slots</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <input type="hidden" name="slot_id" id="selectedSlotId">
                                    <input type="hidden" name="appointment_time" id="selectedTime">
                                </div>

                                <!-- Appointment Details -->
                                <div class="appointment-card">
                                    <h5 class="section-title">
                                        <i class="ri-file-text-line me-2"></i>Appointment Details
                                    </h5>
                                    
                                    <div class="mb-3">
                                        <label class="form-label required-field">Chief Complaint</label>
                                        <textarea class="form-control" name="chief_complaint" rows="3" 
                                                  placeholder="Describe the main reason for this appointment..." required></textarea>
                                        <div class="form-text">Be specific to help the doctor prepare</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Special Requirements</label>
                                        <textarea class="form-control" name="special_requirements" rows="2" 
                                                  placeholder="Any special equipment, assistance, or preparation needed..."></textarea>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Room Number (Optional)</label>
                                            <input type="text" class="form-control" name="room_number" 
                                                   placeholder="e.g., Room 101">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Status</label>
                                            <select class="form-select" name="status">
                                                <option value="SCHEDULED" selected>Scheduled</option>
                                                <option value="CONFIRMED">Confirmed</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label">Additional Notes</label>
                                        <textarea class="form-control" name="notes" rows="2" 
                                                  placeholder="Any additional information..."></textarea>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="d-flex gap-2 justify-content-end">
                                        <a href="<?php echo $patient ? 'patient_profile.php?id='.$patient_id : 'list_appointments.php'; ?>" 
                                           class="btn btn-light">
                                            <i class="ri-close-line me-1"></i> Cancel
                                        </a>
                                        <button type="submit" class="btn btn-success" id="submitBtn">
                                            <i class="ri-calendar-check-line me-1"></i> Book Appointment
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <?php include 'layouts/footer.php'; ?>
        </div>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="assets/libs/sweetalert2/sweetalert2.min.js"></script>

    <script>
    $(document).ready(function() {
        // Initialize Select2 for patient dropdown if exists
        <?php if (!$patient): ?>
        $('#patientSelect').select2({
            theme: 'bootstrap-5',
            placeholder: 'Search for a patient...',
            allowClear: true,
            width: '100%'
        });

        // Patient selection preview
        $('#patientSelect').on('change', function() {
            const selected = $(this).find(':selected');
            if (selected.val()) {
                const name = selected.data('name');
                const number = selected.data('number');
                const phone = selected.data('phone');
                const age = selected.data('age');
                const gender = selected.data('gender');
                
                $('#previewAvatar').text(name.substring(0, 2).toUpperCase());
                $('#previewName').text(name);
                $('#previewNumber').html('<i class="ri-hashtag"></i> ' + number);
                $('#previewAge').html('<i class="ri-calendar-line me-1"></i>' + age + ' years');
                $('#previewGender').html('<i class="ri-user-line me-1"></i>' + gender.charAt(0) + gender.slice(1).toLowerCase());
                $('#previewPhone').html('<i class="ri-phone-line me-1"></i>' + phone);
                
                $('#patientPreview').slideDown();
            } else {
                $('#patientPreview').slideUp();
            }
        });
        <?php endif; ?>

        // Doctor card selection
        $('.doctor-card').on('click', function() {
            $('.doctor-card').removeClass('selected');
            $(this).addClass('selected');
            $(this).find('.doctor-radio').prop('checked', true);
            loadAvailableSlots();
        });

        // Doctor radio change
        $('.doctor-radio').on('change', function() {
            $('.doctor-card').removeClass('selected');
            $(this).closest('.doctor-card').addClass('selected');
            loadAvailableSlots();
        });

        // Date change
        $('#appointmentDate').on('change', function() {
            loadAvailableSlots();
        });

        // Load available slots
        function loadAvailableSlots() {
            const doctorId = $('input[name="doctor_id"]:checked').val();
            const date = $('#appointmentDate').val();

            if (!doctorId || !date) {
                $('#availableSlots').html(`
                    <div class="no-slots-message">
                        <i class="ri-calendar-2-line" style="font-size: 3rem; opacity: 0.3;"></i>
                        <p class="mt-2">Please select a doctor and date to view available slots</p>
                    </div>
                `);
                return;
            }

            $('#slotsLoading').show();

            $.ajax({
                url: 'get_available_slots.php',
                method: 'POST',
                data: {
                    doctor_id: doctorId,
                    date: date
                },
                dataType: 'json',
                success: function(response) {
                    $('#slotsLoading').hide();
                    
                    if (response.success && response.slots && response.slots.length > 0) {
                        let slotsHtml = '<label class="form-label required-field">Select Time Slot</label><div class="slot-grid">';
                        
                        response.slots.forEach(function(slot) {
                            const disabled = slot.is_available === 0 ? 'disabled' : '';
                            const statusText = slot.is_available === 0 ? 'Booked' : 'Available';
                            
                            slotsHtml += `
                                <button type="button" class="slot-btn ${disabled}" 
                                        data-slot-id="${slot.slot_id}"
                                        data-time="${slot.start_time}"
                                        ${disabled ? 'disabled' : ''}>
                                    <span class="time-display">${formatTime(slot.start_time)}</span>
                                    <span class="slot-info">${statusText}</span>
                                </button>
                            `;
                        });
                        
                        slotsHtml += '</div>';
                        $('#availableSlots').html(slotsHtml);

                        // Slot selection
                        $('.slot-btn:not(.disabled)').on('click', function() {
                            $('.slot-btn').removeClass('selected');
                            $(this).addClass('selected');
                            $('#selectedSlotId').val($(this).data('slot-id'));
                            $('#selectedTime').val($(this).data('time'));
                        });
                    } else {
                        $('#availableSlots').html(`
                            <div class="no-slots-message">
                                <i class="ri-calendar-close-line" style="font-size: 3rem; opacity: 0.3;"></i>
                                <p class="mt-2 mb-0">No available slots for this date</p>
                                <small class="text-muted">Please try a different date</small>
                            </div>
                        `);
                    }
                },
                error: function() {
                    $('#slotsLoading').hide();
                    $('#availableSlots').html(`
                        <div class="no-slots-message">
                            <i class="ri-error-warning-line text-danger" style="font-size: 3rem;"></i>
                            <p class="mt-2 text-danger">Error loading slots. Please try again.</p>
                        </div>
                    `);
                }
            });
        }

        // Format time helper
        function formatTime(time) {
            const [hours, minutes] = time.split(':');
            const hour = parseInt(hours);
            const ampm = hour >= 12 ? 'PM' : 'AM';
            const displayHour = hour % 12 || 12;
            return `${displayHour}:${minutes} ${ampm}`;
        }

        // Form submission
        $('#appointmentForm').on('submit', function(e) {
            e.preventDefault();

            // Validate slot selection
            if (!$('#selectedSlotId').val()) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Time Slot Required',
                    text: 'Please select an available time slot'
                });
                return;
            }

            const submitBtn = $('#submitBtn');
            submitBtn.prop('disabled', true);
            submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Booking...');

            $.ajax({
                url: 'create_appointment.php',
                method: 'POST',
                data: $(this).serialize(),
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Appointment Booked!',
                            text: response.message,
                            confirmButtonText: 'View Appointment'
                        }).then((result) => {
                            if (result.isConfirmed && response.appointment_id) {
                                window.location.href = 'appointment_details.php?id=' + response.appointment_id;
} else {
<?php if ($patient): ?>
window.location.href = 'patient_profile.php?id=<?php echo $patient_id; ?>';
<?php else: ?>
window.location.href = 'list_appointments.php';
<?php endif; ?>
}
});
} else {
Swal.fire({
icon: 'error',
title: 'Booking Failed',
text: response.message || 'An error occurred while booking the appointment'
});
submitBtn.prop('disabled', false);
submitBtn.html('<i class="ri-calendar-check-line me-1"></i> Book Appointment');
}
},
error: function() {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'An unexpected error occurred. Please try again.'
});
submitBtn.prop('disabled', false);
submitBtn.html('<i class="ri-calendar-check-line me-1"></i> Book Appointment');
}
});
});
});
</script>
<script src="assets/js/app.js"></script>
</body>
</html>