@extends('garage.layouts.app')

@section('title', 'Appointments')

@push('styles')
<!-- Select2 CSS -->
<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" />
@endpush

@section('content')
<!-- Hidden data for JavaScript -->
<div id="garageIdData" data-garage-id="{{ auth('garage_admin')->user()->garage_id ?? 1 }}" style="display: none;"></div>
<div class="d-flex flex-column h-100">
    <!-- Top Section - Search and Actions -->
    <div class="bg-white border-bottom p-3">
        <div class="d-flex align-items-center justify-content-between gap-3">
            <!-- Search Bar -->
            <div class="d-flex align-items-center gap-2 flex-grow-1" style="max-width: 400px;">
                <div class="position-relative flex-grow-1">
                    <i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280;"></i>
                    <input type="text" class="form-control form-control-sm ps-5" placeholder="Search Appointments" id="searchAppointments">
                </div>
                <button class="btn btn-sm btn-outline-secondary" title="Filter">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>

            <!-- Action Icons and Create Button -->
            <div class="d-flex align-items-center gap-2">
                <button class="btn btn-sm btn-link text-muted" title="Download">
                    <i class="bi bi-download"></i>
                </button>
                <button class="btn btn-sm btn-link text-muted" title="Calendar">
                    <i class="bi bi-calendar"></i>
                </button>
                <button class="btn btn-sm btn-link text-muted" title="Settings">
                    <i class="bi bi-gear"></i>
                </button>
                <button class="btn btn-primary btn-sm" id="createAppointmentBtn">
                    <i class="bi bi-plus-lg me-1"></i>Create Appointment
                </button>
            </div>
        </div>
    </div>

    <!-- Status Tabs -->
    <div class="bg-white border-bottom">
        <ul class="nav nav-tabs border-0 px-3" id="statusTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="requested-tab" data-bs-toggle="tab" data-bs-target="#requested" type="button" role="tab">
                    <i class="bi bi-clipboard-clock me-2"></i>
                    Requested <span class="badge bg-secondary ms-2">0</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="confirmed-tab" data-bs-toggle="tab" data-bs-target="#confirmed" type="button" role="tab">
                    <i class="bi bi-clipboard-check me-2"></i>
                    Confirmed <span class="badge bg-secondary ms-2">0</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="no-show-tab" data-bs-toggle="tab" data-bs-target="#no-show" type="button" role="tab">
                    <i class="bi bi-clipboard-minus me-2"></i>
                    No Show <span class="badge bg-secondary ms-2">2</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="cancelled-tab" data-bs-toggle="tab" data-bs-target="#cancelled" type="button" role="tab">
                    <i class="bi bi-clipboard-x me-2"></i>
                    Cancelled <span class="badge bg-secondary ms-2">0</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="completed-tab" data-bs-toggle="tab" data-bs-target="#completed" type="button" role="tab">
                    <i class="bi bi-clipboard-check-fill me-2"></i>
                    Completed <span class="badge bg-secondary ms-2">4</span>
                </button>
            </li>
        </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content flex-grow-1 overflow-auto bg-white">
        <!-- Requested Tab -->
        <div class="tab-pane fade" id="requested" role="tabpanel">
            <div class="p-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="date">
                                DATE <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="order">
                                ORDER# <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="customer">
                                CUSTOMER <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th>VEHICLE</th>
                            <th>LABELS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No appointments found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Confirmed Tab -->
        <div class="tab-pane fade" id="confirmed" role="tabpanel">
            <div class="p-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="date">
                                DATE <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="order">
                                ORDER# <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="customer">
                                CUSTOMER <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th>VEHICLE</th>
                            <th>LABELS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No appointments found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- No Show Tab (Active) -->
        <div class="tab-pane fade show active" id="no-show" role="tabpanel">
            <div class="p-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="date">
                                DATE <i class="bi bi-arrow-down ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="order">
                                ORDER# <i class="bi bi-arrow-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="customer">
                                CUSTOMER <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th>VEHICLE</th>
                            <th>LABELS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Appointment 1 -->
                        <tr class="cursor-pointer" onclick="viewAppointment(6)">
                            <td>
                                <div>11/07/2025</div>
                                <small class="text-muted">12:55 PM - 01:55 PM</small>
                            </td>
                            <td>
                                <div>
                                    <a href="#" class="text-decoration-none fw-semibold">APT-000006</a>
                                </div>
                                <small class="text-muted">FM-79</small>
                            </td>
                            <td>Mr. Zubair</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <!-- Appointment 2 -->
                        <tr class="cursor-pointer" onclick="viewAppointment(5)">
                            <td>
                                <div>09/07/2025</div>
                                <small class="text-muted">01:00 PM - 05:00 PM</small>
                            </td>
                            <td>
                                <div>
                                    <a href="#" class="text-decoration-none fw-semibold">APT-000005</a>
                                </div>
                            </td>
                            <td>Mr. Waseem</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <i class="bi bi-car-front text-muted"></i>
                                    <span>DE803 - Honda Civic</span>
                                </div>
                            </td>
                            <td>
                                <span class="badge" style="background-color: #a7f3d0; color: #065f46;">Fleet Appointment</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Cancelled Tab -->
        <div class="tab-pane fade" id="cancelled" role="tabpanel">
            <div class="p-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="date">
                                DATE <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="order">
                                ORDER# <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="customer">
                                CUSTOMER <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th>VEHICLE</th>
                            <th>LABELS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No appointments found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Completed Tab -->
        <div class="tab-pane fade" id="completed" role="tabpanel">
            <div class="p-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="date">
                                DATE <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="order">
                                ORDER# <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th class="sortable" data-sort="customer">
                                CUSTOMER <i class="bi bi-arrow-down-up ms-1"></i>
                            </th>
                            <th>VEHICLE</th>
                            <th>LABELS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No appointments found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background-color: #f8f9fa;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    background-color: #f8f9fa;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: #e5e7eb;
    color: #374151;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background-color: transparent;
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.75rem;
}

.table td {
    padding: 0.75rem;
    vertical-align: middle;
}

/* Modal Styles */
#createAppointmentModal .modal-dialog {
    max-width: 900px;
}

#createAppointmentModal .modal-body {
    padding: 1.5rem;
}

#createAppointmentModal .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

#createAppointmentModal .form-control,
#createAppointmentModal .form-select {
    font-size: 0.875rem;
}

#createAppointmentModal .input-group-text {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

#remindersTableBody td {
    font-size: 0.875rem;
    padding: 0.5rem;
}

.notification-channel.active i {
    opacity: 1;
}

.notification-channel:not(.active) i {
    opacity: 0.5;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
</style>

<script>
function viewAppointment(id) {
    // TODO: Load appointment details
    console.log('View appointment:', id);
    // Could open a modal or navigate to detail page
}

// Tab switching
document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
    tab.addEventListener('shown.bs.tab', function (event) {
        const targetTab = event.target.getAttribute('data-bs-target');
        // TODO: Load appointments for selected status
        console.log('Switched to tab:', targetTab);
    });
});

// Search functionality
document.getElementById('searchAppointments').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    // TODO: Filter appointments based on search term
    console.log('Searching for:', searchTerm);
});

// Sort functionality
document.querySelectorAll('.sortable').forEach(header => {
    header.addEventListener('click', function() {
        const sortField = this.getAttribute('data-sort');
        const icon = this.querySelector('i');
        
        // Toggle sort direction
        if (icon.classList.contains('bi-arrow-down')) {
            icon.className = 'bi bi-arrow-up ms-1';
        } else if (icon.classList.contains('bi-arrow-up')) {
            icon.className = 'bi bi-arrow-down ms-1';
        } else {
            icon.className = 'bi bi-arrow-down ms-1';
        }
        
        // Reset other sort icons
        document.querySelectorAll('.sortable i').forEach(otherIcon => {
            if (otherIcon !== icon) {
                otherIcon.className = 'bi bi-arrow-down-up ms-1';
            }
        });
        
        // TODO: Sort appointments
        console.log('Sort by:', sortField);
    });
});

// Create appointment button
document.getElementById('createAppointmentBtn').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('createAppointmentModal'));
    modal.show();
    resetAppointmentForm();
});
</script>

<!-- Create/Edit Appointment Modal -->
<div class="modal fade" id="createAppointmentModal" tabindex="-1" aria-labelledby="createAppointmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="createAppointmentModalLabel">Create Appointment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentForm">
                    <input type="hidden" id="appointmentId" name="appointment_id">
                    
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-7">
                            <!-- Label Selection -->
                            <div class="mb-3">
                                <label class="form-label">Labels</label>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addLabelBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="bi bi-tag me-1"></i>Add Label
                                            <i class="bi bi-chevron-down ms-1"></i>
                                        </button>
                                        <ul class="dropdown-menu" id="labelDropdownMenu" style="max-height: 300px; overflow-y: auto; min-width: 200px;">
                                            <!-- Labels will be loaded dynamically -->
                                        </ul>
                                    </div>
                                    <div id="selectedLabels" class="d-flex gap-2 flex-wrap"></div>
                                </div>
                            </div>

                            <!-- Title -->
                            <div class="mb-3">
                                <input type="text" class="form-control" id="appointmentTitle" name="title" placeholder="Title">
                            </div>

                            <!-- Date and Time Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Date <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="date" class="form-control" id="appointmentDate" name="appointment_date" required>
                                        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">From time <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="fromTime" name="start_time" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">To time <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="toTime" name="end_time" required>
                                </div>
                            </div>

                            <!-- Customer -->
                            <div class="mb-3">
                                <label class="form-label">Customer <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select class="form-select" id="customerSelect" name="customer_id" required>
                                        <option value="">Select Customer</option>
                                        <!-- Options will be loaded from garage_ledgers where ledger_type='customer' -->
                                    </select>
                                    <button type="button" class="btn btn-outline-secondary" id="addCustomerBtn" title="Add New Customer">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Vehicle -->
                            <div class="mb-3">
                                <label class="form-label">Vehicle</label>
                                <div class="input-group">
                                    <select class="form-select" id="vehicleSelect" name="vehicle_id">
                                        <option value="">Select Vehicle</option>
                                        <!-- Options will be loaded dynamically -->
                                    </select>
                                    <button type="button" class="btn btn-outline-secondary" id="addVehicleBtn" title="Add New Vehicle">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Service Writer -->
                            <div class="mb-3">
                                <label class="form-label">Service writer <span class="text-danger">*</span></label>
                                <select class="form-select searchable-select" id="serviceWriterSelect" name="service_writer_id" required data-placeholder="Search or select service writer...">
                                    <option value="">Service writer</option>
                                    <!-- Options will be loaded dynamically -->
                                </select>
                            </div>

                            <!-- Technician -->
                            <div class="mb-3">
                                <label class="form-label">Technician</label>
                                <select class="form-select searchable-select" id="technicianSelect" name="technician_id" data-placeholder="Search or select technician...">
                                    <option value="">Technician</option>
                                    <!-- Options will be loaded dynamically -->
                                </select>
                            </div>

                            <!-- Notes -->
                            <div class="mb-3">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="appointmentNotes" name="public_notes" rows="3" placeholder="Notes"></textarea>
                            </div>

                            <!-- Send Notification Toggle -->
                            <div class="mb-3 d-flex align-items-center gap-2">
                                <label class="form-label mb-0">Send Notification?</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="sendNotification" name="send_notification" checked>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column - Reminders -->
                        <div class="col-md-5 border-start ps-4">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <h6 class="mb-0 fw-semibold">Reminders</h6>
                                <div class="d-flex gap-2">
                                    <i class="bi bi-chat-dots text-muted" title="Chat"></i>
                                    <i class="bi bi-envelope text-danger" title="Email"></i>
                                    <i class="bi bi-whatsapp text-success" title="WhatsApp"></i>
                                </div>
                            </div>

                            <!-- Reminders Table -->
                            <div class="table-responsive mb-3">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Unit of time</th>
                                            <th>Event</th>
                                            <th width="40"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="remindersTableBody">
                                        <!-- Reminders will be added here -->
                                    </tbody>
                                </table>
                            </div>

                            <button type="button" class="btn btn-sm btn-outline-primary" id="addReminderBtn">
                                <i class="bi bi-plus-lg me-1"></i>New Reminder
                            </button>

                            <!-- Notification Channels (Bottom Right) -->
                            <div class="mt-4 pt-3 border-top">
                                <div class="d-flex align-items-center gap-3">
                                    <label class="form-label mb-0 small">Notification Channel:</label>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-link p-0 notification-channel" data-channel="chat" title="Chat">
                                            <i class="bi bi-chat-dots fs-5"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-link p-0 notification-channel active" data-channel="email" title="Email">
                                            <i class="bi bi-envelope-fill fs-5 text-primary"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-link p-0 notification-channel" data-channel="whatsapp" title="WhatsApp">
                                            <i class="bi bi-whatsapp fs-5"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-dark" id="submitAppointmentBtn">Create Appointment</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-person-plus me-2"></i>Add New Customer
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addCustomerForm" onsubmit="return false;">
                <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                    <div class="row">
                        <!-- Basic Information -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-muted">Basic Information</h6>
                            
                            <div class="mb-3">
                                <label class="form-label">Customer Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Contact Person</label>
                                <input type="text" class="form-control" name="contact_person">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Phone</label>
                                <input type="tel" class="form-control" name="phone">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" name="email">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Address</label>
                                <textarea class="form-control" name="address" rows="2"></textarea>
                            </div>
                        </div>

                        <!-- Financial Information -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-muted">Financial Information</h6>

                            <div class="mb-3">
                                <label class="form-label">Tax Number</label>
                                <input type="text" class="form-control" name="tax_number">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Credit Limit</label>
                                <div class="input-group">
                                    <span class="input-group-text">PKR</span>
                                    <input type="number" step="0.01" class="form-control" name="credit_limit" min="0">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Opening Balance</label>
                                <div class="input-group">
                                    <span class="input-group-text">PKR</span>
                                    <input type="number" step="0.01" class="form-control" name="opening_balance" value="0">
                                    <select class="form-select" name="opening_balance_type" style="max-width: 120px;">
                                        <option value="debit" selected>Debit</option>
                                        <option value="credit">Credit</option>
                                    </select>
                                </div>
                                <small class="text-muted">Debit = Customer owes you, Credit = You owe customer</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="2"></textarea>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active_modal" value="1" checked>
                                    <label class="form-check-label" for="is_active_modal">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="submitCustomerBtn">
                        <i class="bi bi-check-lg me-1"></i>Create Customer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Vehicle Modal -->
<div class="modal fade" id="addVehicleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Vehicle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addVehicleForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Customer <span class="text-danger">*</span></label>
                            <select class="form-select searchable-select" id="vehicleCustomerSelect" name="customer_ledger_id" required data-placeholder="Search or select customer...">
                                <option value="">Select Customer</option>
                                <!-- Will be populated from customer select -->
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Registration Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="registration_number" required placeholder="e.g., LEB181098">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">VIN (Vehicle Identification Number)</label>
                            <input type="text" class="form-control" name="vin" placeholder="17-character VIN">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Make</label>
                            <input type="text" class="form-control" name="make" placeholder="e.g., Honda, Toyota">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Model</label>
                            <input type="text" class="form-control" name="model" placeholder="e.g., City, Civic">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Year</label>
                            <input type="text" class="form-control" name="year" placeholder="e.g., 2020">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Color</label>
                            <input type="text" class="form-control" name="color" placeholder="e.g., Red, Blue">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Fuel Type</label>
                            <select class="form-select" name="fuel_type">
                                <option value="">Select Fuel Type</option>
                                <option value="petrol">Petrol</option>
                                <option value="diesel">Diesel</option>
                                <option value="electric">Electric</option>
                                <option value="hybrid">Hybrid</option>
                                <option value="cng">CNG</option>
                                <option value="lpg">LPG</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Engine Number</label>
                            <input type="text" class="form-control" name="engine_number">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Chassis Number</label>
                            <input type="text" class="form-control" name="chassis_number">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Odometer Reading</label>
                            <input type="number" class="form-control" name="odometer_reading" placeholder="Current mileage">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Registration Date</label>
                            <input type="date" class="form-control" name="registration_date">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Insurance Expiry</label>
                            <input type="date" class="form-control" name="insurance_expiry">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" name="notes" rows="2"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Vehicle</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let reminders = [];
let selectedLabels = [];
let selectedNotificationChannels = ['email'];

// Reset form
function resetAppointmentForm() {
    document.getElementById('appointmentForm').reset();
    document.getElementById('appointmentId').value = '';
    document.getElementById('createAppointmentModalLabel').textContent = 'Create Appointment';
    document.getElementById('submitAppointmentBtn').textContent = 'Create Appointment';
    reminders = [];
    selectedLabels = [];
    selectedNotificationChannels = ['email'];
    updateRemindersTable();
    updateSelectedLabels();
    updateNotificationChannels();
}

// Add reminder
document.getElementById('addReminderBtn').addEventListener('click', function() {
    const unit = prompt('Enter unit of time (e.g., 10):', '10');
    if (unit) {
        const timeUnit = prompt('Enter time unit (minute/hour/day):', 'minute');
        const event = prompt('Enter event (before/after):', 'before');
        if (timeUnit && event) {
            reminders.push({
                unit_of_time: parseInt(unit),
                time_unit: timeUnit,
                event: event
            });
            updateRemindersTable();
        }
    }
});

// Update reminders table
function updateRemindersTable() {
    const tbody = document.getElementById('remindersTableBody');
    tbody.innerHTML = '';
    
    if (reminders.length === 0) {
        reminders.push({ unit_of_time: 10, time_unit: 'minute', event: 'before' });
    }
    
    reminders.forEach((reminder, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${reminder.unit_of_time} ${reminder.time_unit}${reminder.unit_of_time > 1 ? 's' : ''}</td>
            <td>${reminder.event.charAt(0).toUpperCase() + reminder.event.slice(1)}</td>
            <td>
                <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeReminder(${index})">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

// Remove reminder
function removeReminder(index) {
    reminders.splice(index, 1);
    updateRemindersTable();
}

// Load labels for dropdown
function loadLabels() {
    // TODO: Load labels from API endpoint /garage/api/labels
    fetch('/garage/api/labels')
        .then(response => response.json())
        .then(data => {
            const dropdown = document.getElementById('labelDropdownMenu');
            dropdown.innerHTML = '';
            
            if (data.length === 0) {
                dropdown.innerHTML = '<li><span class="dropdown-item-text text-muted">No labels available</span></li>';
                return;
            }
            
            data.forEach(label => {
                const isSelected = selectedLabels.some(sl => sl.id === label.id);
                const li = document.createElement('li');
                li.innerHTML = `
                    <a class="dropdown-item ${isSelected ? 'active' : ''}" href="#" data-label-id="${label.id}">
                        <i class="bi bi-tag-fill me-2" style="color: ${label.color || '#6b7280'}"></i>
                        ${label.name}
                        ${isSelected ? '<i class="bi bi-check float-end text-primary"></i>' : ''}
                    </a>
                `;
                li.querySelector('a').addEventListener('click', function(e) {
                    e.preventDefault();
                    toggleLabel({
                        id: label.id,
                        name: label.name,
                        color: label.color || '#6b7280'
                    });
                });
                dropdown.appendChild(li);
            });
        })
        .catch(error => {
            console.error('Error loading labels:', error);
            // Fallback: Use sample labels
            const labels = [
                { id: 1, name: 'Fleet Appointment', color: '#a7f3d0' },
                { id: 2, name: 'VIP Customer', color: '#fef3c7' },
                { id: 3, name: 'Urgent', color: '#fee2e2' },
                { id: 4, name: 'Follow Up', color: '#ddd6fe' }
            ];
            
            const dropdown = document.getElementById('labelDropdownMenu');
            dropdown.innerHTML = '';
            
            labels.forEach(label => {
                const isSelected = selectedLabels.some(sl => sl.id === label.id);
                const li = document.createElement('li');
                li.innerHTML = `
                    <a class="dropdown-item ${isSelected ? 'active' : ''}" href="#" data-label-id="${label.id}">
                        <i class="bi bi-tag-fill me-2" style="color: ${label.color}"></i>
                        ${label.name}
                        ${isSelected ? '<i class="bi bi-check float-end text-primary"></i>' : ''}
                    </a>
                `;
                li.querySelector('a').addEventListener('click', function(e) {
                    e.preventDefault();
                    toggleLabel({
                        id: label.id,
                        name: label.name,
                        color: label.color
                    });
                });
                dropdown.appendChild(li);
            });
        });
}

// Toggle label selection
function toggleLabel(label) {
    const index = selectedLabels.findIndex(sl => sl.id === label.id);
    if (index > -1) {
        selectedLabels.splice(index, 1);
    } else {
        selectedLabels.push(label);
    }
    updateSelectedLabels();
    loadLabels(); // Refresh dropdown to update checkmarks
}

// Update selected labels display
function updateSelectedLabels() {
    const container = document.getElementById('selectedLabels');
    container.innerHTML = '';
    selectedLabels.forEach((label, index) => {
        const badge = document.createElement('span');
        badge.className = 'badge';
        badge.style.backgroundColor = label.color || '#6b7280';
        badge.style.color = '#fff';
        badge.innerHTML = `
            <i class="bi bi-tag-fill me-1"></i>
            ${label.name}
            <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.7em;" onclick="removeLabel(${index})"></button>
        `;
        container.appendChild(badge);
    });
}

// Remove label
function removeLabel(index) {
    selectedLabels.splice(index, 1);
    updateSelectedLabels();
    loadLabels(); // Refresh dropdown
}

// Notification channel selection
document.querySelectorAll('.notification-channel').forEach(btn => {
    btn.addEventListener('click', function() {
        const channel = this.getAttribute('data-channel');
        if (selectedNotificationChannels.includes(channel)) {
            selectedNotificationChannels = selectedNotificationChannels.filter(c => c !== channel);
            this.classList.remove('active');
            this.querySelector('i').classList.remove('text-primary', 'text-success');
        } else {
            selectedNotificationChannels.push(channel);
            this.classList.add('active');
            if (channel === 'email') {
                this.querySelector('i').classList.add('text-primary');
            } else if (channel === 'whatsapp') {
                this.querySelector('i').classList.add('text-success');
            }
        }
    });
});

// Update notification channels display
function updateNotificationChannels() {
    document.querySelectorAll('.notification-channel').forEach(btn => {
        const channel = btn.getAttribute('data-channel');
        if (selectedNotificationChannels.includes(channel)) {
            btn.classList.add('active');
            const icon = btn.querySelector('i');
            if (channel === 'email') {
                icon.classList.add('text-primary');
            } else if (channel === 'whatsapp') {
                icon.classList.add('text-success');
            }
        } else {
            btn.classList.remove('active');
            const icon = btn.querySelector('i');
            icon.classList.remove('text-primary', 'text-success');
        }
    });
}

// Submit appointment form
document.getElementById('submitAppointmentBtn').addEventListener('click', function() {
    const form = document.getElementById('appointmentForm');
    if (form.checkValidity()) {
        const formData = new FormData(form);
        formData.append('reminders', JSON.stringify(reminders));
        formData.append('labels', JSON.stringify(selectedLabels));
        formData.append('notification_channels', JSON.stringify(selectedNotificationChannels));
        
        // TODO: Submit via AJAX
        console.log('Submitting appointment:', Object.fromEntries(formData));
        
        // For now, just close modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('createAppointmentModal'));
        modal.hide();
    } else {
        form.reportValidity();
    }
});

// Load customers from garage_ledgers where ledger_type='customer'
function loadCustomers() {
    return new Promise((resolve, reject) => {
        // Load customers from API endpoint
        // This should fetch from garage_ledgers where ledger_type='customer'
        const garageId = document.getElementById('garageIdData').dataset.garageId || 1;
        
        fetch(`/garage/api/ledgers/customers?garage_id=${garageId}`)
            .then(response => response.json())
            .then(data => {
                // Use jQuery if available, otherwise vanilla JS
                if (typeof jQuery !== 'undefined') {
                    const $ = jQuery;
                    const select = $('#customerSelect');
                    // Clear existing options except the first one
                    select.find('option:not(:first)').remove();
                    
                    if (!data || data.length === 0) {
                        select.append('<option value="" disabled>No customers found</option>');
                        if (select.hasClass('select2-hidden-accessible')) {
                            select.trigger('change');
                        }
                        resolve(data);
                        return;
                    }
                    
                    data.forEach(customer => {
                        let displayText = customer.name;
                        if (customer.phone) {
                            displayText += ` (${customer.phone})`;
                        }
                        if (customer.email) {
                            displayText += ` - ${customer.email}`;
                        }
                        select.append(new Option(displayText, customer.id, false, false));
                    });
                    
                    // Trigger Select2 update if initialized
                    if (select.hasClass('select2-hidden-accessible')) {
                        select.trigger('change');
                    }
                } else {
                    // Fallback to vanilla JS
                    const select = document.getElementById('customerSelect');
                    while (select.options.length > 1) {
                        select.remove(1);
                    }
                    
                    if (!data || data.length === 0) {
                        const option = document.createElement('option');
                        option.value = '';
                        option.textContent = 'No customers found';
                        option.disabled = true;
                        select.appendChild(option);
                        resolve(data);
                        return;
                    }
                    
                    data.forEach(customer => {
                        const option = document.createElement('option');
                        option.value = customer.id;
                        let displayText = customer.name;
                        if (customer.phone) {
                            displayText += ` (${customer.phone})`;
                        }
                        if (customer.email) {
                            displayText += ` - ${customer.email}`;
                        }
                        option.textContent = displayText;
                        select.appendChild(option);
                    });
                }
                
                resolve(data);
            })
            .catch(error => {
                console.error('Error loading customers:', error);
                // Fallback: Add sample customers
                if (typeof jQuery !== 'undefined') {
                    const select = $('#customerSelect');
                    const sampleCustomers = [
                        { id: 1, name: 'Mr. Arslan', phone: '+1234567890' },
                        { id: 2, name: 'Mr. Zubair', phone: '+1234567891' },
                        { id: 3, name: 'Mr. Waseem', phone: '+1234567892' }
                    ];
                    sampleCustomers.forEach(customer => {
                        select.append(new Option(`${customer.name} (${customer.phone})`, customer.id, false, false));
                    });
                    if (select.hasClass('select2-hidden-accessible')) {
                        select.trigger('change');
                    }
                } else {
                    const select = document.getElementById('customerSelect');
                    const sampleCustomers = [
                        { id: 1, name: 'Mr. Arslan', phone: '+1234567890' },
                        { id: 2, name: 'Mr. Zubair', phone: '+1234567891' },
                        { id: 3, name: 'Mr. Waseem', phone: '+1234567892' }
                    ];
                    sampleCustomers.forEach(customer => {
                        const option = document.createElement('option');
                        option.value = customer.id;
                        option.textContent = `${customer.name} (${customer.phone})`;
                        select.appendChild(option);
                    });
                }
                reject(error);
            });
    });
}

// Load vehicles from garage_vehicles
function loadVehicles(customerId = null) {
    const garageId = document.getElementById('garageIdData').dataset.garageId || 1;
    let url = `/garage/api/vehicles?garage_id=${garageId}`;
    if (customerId) {
        url += `&customer_id=${customerId}`;
    }
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (typeof jQuery !== 'undefined') {
                const $ = jQuery;
                const select = $('#vehicleSelect');
                // Clear existing options except the first one
                select.find('option:not(:first)').remove();
                
                if (data.length === 0) {
                    select.append('<option value="" disabled>No vehicles found</option>');
                    if (select.hasClass('select2-hidden-accessible')) {
                        select.trigger('change');
                    }
                    return;
                }
                
                data.forEach(vehicle => {
                    let displayText = vehicle.registration_number;
                    if (vehicle.make && vehicle.model) {
                        displayText += ` - ${vehicle.make} ${vehicle.model}`;
                    }
                    if (vehicle.year) {
                        displayText += ` (${vehicle.year})`;
                    }
                    select.append(new Option(displayText, vehicle.id, false, false));
                });
                
                // Trigger Select2 update if initialized
                if (select.hasClass('select2-hidden-accessible')) {
                    select.trigger('change');
                }
            } else {
                // Fallback to vanilla JS
                const select = document.getElementById('vehicleSelect');
                while (select.options.length > 1) {
                    select.remove(1);
                }
                if (data.length === 0) {
                    const option = document.createElement('option');
                    option.value = '';
                    option.textContent = 'No vehicles found';
                    option.disabled = true;
                    select.appendChild(option);
                    return;
                }
                data.forEach(vehicle => {
                    const option = document.createElement('option');
                    option.value = vehicle.id;
                    let displayText = vehicle.registration_number;
                    if (vehicle.make && vehicle.model) {
                        displayText += ` - ${vehicle.make} ${vehicle.model}`;
                    }
                    if (vehicle.year) {
                        displayText += ` (${vehicle.year})`;
                    }
                    option.textContent = displayText;
                    select.appendChild(option);
                });
            }
        })
        .catch(error => {
            console.error('Error loading vehicles:', error);
            // Fallback: Add sample vehicles
            if (typeof jQuery !== 'undefined') {
                const $ = jQuery;
                const select = $('#vehicleSelect');
                const sampleVehicles = [
                    { id: 1, registration_number: 'LEB181098', make: 'Honda', model: 'City', year: '2020' },
                    { id: 2, registration_number: 'DE803', make: 'Honda', model: 'Civic', year: '2016' },
                    { id: 3, registration_number: 'AGL525', make: 'Toyota', model: 'Passo', year: '2016' }
                ];
                sampleVehicles.forEach(vehicle => {
                    select.append(new Option(`${vehicle.registration_number} - ${vehicle.make} ${vehicle.model} (${vehicle.year})`, vehicle.id, false, false));
                });
                if (select.hasClass('select2-hidden-accessible')) {
                    select.trigger('change');
                }
            }
        });
}

// Load service writers and technicians
function loadEmployees() {
    // TODO: Load from garages_admins
    const serviceWriterSelect = document.getElementById('serviceWriterSelect');
    const technicianSelect = document.getElementById('technicianSelect');
    
    // Sample data
    const employees = [
        { id: 1, name: 'Arslan Babar' },
        { id: 2, name: 'Muhammad Irshad' }
    ];
    
    employees.forEach(emp => {
        const option1 = document.createElement('option');
        option1.value = emp.id;
        option1.textContent = emp.name;
        serviceWriterSelect.appendChild(option1);
        
        const option2 = document.createElement('option');
        option2.value = emp.id;
        option2.textContent = emp.name;
        technicianSelect.appendChild(option2);
    });
    
    // Set default service writer
    if (employees.length > 0) {
        serviceWriterSelect.value = employees[0].id;
    }
}

// Add customer button
document.getElementById('addCustomerBtn').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('addCustomerModal'));
    modal.show();
});

// Add vehicle button
document.getElementById('addVehicleBtn').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('addVehicleModal'));
    
    // Populate customer dropdown in vehicle modal from main customer select
    if (typeof jQuery !== 'undefined') {
        const $ = jQuery;
        const customerSelect = $('#customerSelect');
        const vehicleCustomerSelect = $('#vehicleCustomerSelect');
        
        // Clear and populate
        vehicleCustomerSelect.find('option:not(:first)').remove();
        
        // Copy options from main customer select
        customerSelect.find('option:not(:first)').each(function() {
            vehicleCustomerSelect.append(new Option($(this).text(), $(this).val(), false, false));
        });
        
        // Pre-select if customer is already selected in main form
        if (customerSelect.val()) {
            vehicleCustomerSelect.val(customerSelect.val()).trigger('change');
        }
        
        // Re-initialize Select2 for vehicle customer select
        setTimeout(function() {
            if (vehicleCustomerSelect.hasClass('select2-hidden-accessible')) {
                vehicleCustomerSelect.select2('destroy');
            }
            vehicleCustomerSelect.select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: 'Search or select customer...',
                allowClear: true,
                dropdownParent: $('#addVehicleModal')
            });
        }, 100);
    }
    
    modal.show();
});

// Submit add vehicle form
document.getElementById('addVehicleForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const garageId = document.getElementById('garageIdData').dataset.garageId || 1;
    
    // Submit via AJAX to create vehicle in garage_vehicles
    fetch('/garage/api/vehicles', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            garage_id: garageId,
            customer_ledger_id: formData.get('customer_ledger_id'),
            registration_number: formData.get('registration_number'),
            vin: formData.get('vin') || null,
            make: formData.get('make') || null,
            model: formData.get('model') || null,
            year: formData.get('year') || null,
            color: formData.get('color') || null,
            fuel_type: formData.get('fuel_type') || null,
            engine_number: formData.get('engine_number') || null,
            chassis_number: formData.get('chassis_number') || null,
            odometer_reading: formData.get('odometer_reading') || null,
            registration_date: formData.get('registration_date') || null,
            insurance_expiry: formData.get('insurance_expiry') || null,
            notes: formData.get('notes') || null
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Add new vehicle to select
            if (typeof jQuery !== 'undefined') {
                const $ = jQuery;
                const select = $('#vehicleSelect');
                let displayText = data.vehicle.registration_number;
                if (data.vehicle.make && data.vehicle.model) {
                    displayText += ` - ${data.vehicle.make} ${data.vehicle.model}`;
                }
                if (data.vehicle.year) {
                    displayText += ` (${data.vehicle.year})`;
                }
                select.append(new Option(displayText, data.vehicle.id, true, true));
                select.trigger('change');
                
                // Also update customer select if vehicle customer is different
                const customerSelect = $('#customerSelect');
                if (data.vehicle.customer_ledger_id && customerSelect.val() != data.vehicle.customer_ledger_id) {
                    customerSelect.val(data.vehicle.customer_ledger_id).trigger('change');
                }
            }
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('addVehicleModal'));
            modal.hide();
            this.reset();
        } else {
            alert(data.message || 'Failed to create vehicle. Please try again.');
        }
    })
    .catch(error => {
        console.error('Error creating vehicle:', error);
        alert('Failed to create vehicle. Please try again.');
    });
});

// When customer changes, filter vehicles - Initialize after jQuery is loaded
function initializeCustomerChangeHandler() {
    if (typeof jQuery !== 'undefined') {
        const $ = jQuery;
        $('#customerSelect').off('change').on('change', function() {
            const customerId = $(this).val();
            loadVehicles(customerId);
        });
    }
}

// Submit add customer form - using button click instead of form submit
const submitCustomerBtn = document.getElementById('submitCustomerBtn');
if (submitCustomerBtn) {
    submitCustomerBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const form = document.getElementById('addCustomerForm');
        
        if (!form.checkValidity()) {
            form.reportValidity();
            return false;
        }
        
        const formData = new FormData(form);
        const garageId = document.getElementById('garageIdData').dataset.garageId || 1;
        const submitBtn = this;
        const originalText = submitBtn.textContent;
        
        // Disable submit button
        submitBtn.disabled = true;
        submitBtn.textContent = 'Creating...';
        
        // Submit via AJAX to create customer in garage_ledgers
        fetch('/garage/api/ledgers', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                garage_id: garageId,
                name: formData.get('name'),
                contact_person: formData.get('contact_person') || null,
                phone: formData.get('phone') || null,
                email: formData.get('email') || null,
                address: formData.get('address') || null,
                tax_number: formData.get('tax_number') || null,
                credit_limit: formData.get('credit_limit') ? parseFloat(formData.get('credit_limit')) : null,
                opening_balance: formData.get('opening_balance') ? parseFloat(formData.get('opening_balance')) : 0,
                opening_balance_type: formData.get('opening_balance_type') || 'debit',
                description: formData.get('description') || null,
                is_active: document.getElementById('is_active_modal').checked,
                ledger_type: 'customer',
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => Promise.reject(err));
            }
            return response.json();
        })
        .then(data => {
            const ledger = data.ledger || data;
            
            if (ledger && ledger.id) {
                // Add new customer to select using jQuery
                if (typeof jQuery !== 'undefined' && jQuery.fn.select2) {
                    const $ = jQuery;
                    const select = $('#customerSelect');
                    let displayText = ledger.name;
                    if (ledger.phone) {
                        displayText += ` (${ledger.phone})`;
                    }
                    if (ledger.email) {
                        displayText += ` - ${ledger.email}`;
                    }
                    
                    // Remove "No customers found" option if exists
                    select.find('option[disabled]').remove();
                    
                    // Add new option and select it
                    const newOption = new Option(displayText, ledger.id, true, true);
                    select.append(newOption);
                    select.trigger('change');
                } else {
                    // Fallback if jQuery not available
                    const select = document.getElementById('customerSelect');
                    const option = document.createElement('option');
                    option.value = ledger.id;
                    option.textContent = ledger.name + (ledger.phone ? ` (${ledger.phone})` : '');
                    option.selected = true;
                    select.appendChild(option);
                }
                
                // Reset form
                form.reset();
                
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'));
                if (modal) {
                    modal.hide();
                }
                
                // Show success message
                alert('Customer created successfully!');
            } else {
                alert(data.message || 'Failed to create customer. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error creating customer:', error);
            const errorMsg = error.message || (error.error ? error.error.message : 'Failed to create customer. Please try again.');
            alert(errorMsg);
        })
        .finally(() => {
            // Re-enable submit button
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        });
        
        return false;
    });
}

// Also prevent form submission
const addCustomerForm = document.getElementById('addCustomerForm');
if (addCustomerForm) {
    addCustomerForm.addEventListener('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
}

// Initialize Select2 for searchable dropdowns
function initializeSearchableSelects() {
    // Destroy existing Select2 instances first
    $('.searchable-select').each(function() {
        if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
        }
    });
    
    // Initialize Select2 for all searchable selects
    $('.searchable-select').select2({
        theme: 'bootstrap-5',
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder') || 'Select an option...';
        },
        allowClear: true,
        dropdownParent: $('#createAppointmentModal')
    });
    
    // For vehicle customer select in add vehicle modal
    if ($('#vehicleCustomerSelect').length) {
        if ($('#vehicleCustomerSelect').hasClass('select2-hidden-accessible')) {
            $('#vehicleCustomerSelect').select2('destroy');
        }
        $('#vehicleCustomerSelect').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Search or select customer...',
            allowClear: true,
            dropdownParent: $('#addVehicleModal')
        });
    }
}

// Initialize - This function will be called after jQuery is loaded
function initializeApp() {
    // Check if jQuery is available
    if (typeof jQuery === 'undefined') {
        console.warn('jQuery not available yet, retrying...');
        setTimeout(initializeApp, 100);
        return;
    }
    
    updateRemindersTable();
    updateSelectedLabels();
    updateNotificationChannels();
    loadLabels();
    
    // Load data first, then initialize Select2
    loadCustomers().then(() => {
        loadVehicles();
        loadEmployees();
        
        // Initialize searchable selects after data is loaded and jQuery/Select2 are ready
        setTimeout(function() {
            if (typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
                initializeSearchableSelects();
                initializeCustomerChangeHandler();
            } else {
                console.warn('Waiting for Select2 to load...');
                setTimeout(function() {
                    if (typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
                        initializeSearchableSelects();
                        initializeCustomerChangeHandler();
                    }
                }, 200);
            }
        }, 300);
    }).catch(() => {
        // If loadCustomers fails, still try to initialize
        loadVehicles();
        loadEmployees();
        setTimeout(function() {
            if (typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
                initializeSearchableSelects();
                initializeCustomerChangeHandler();
            }
        }, 300);
    });
}

// Re-initialize Select2 when modal is opened
document.getElementById('createAppointmentModal').addEventListener('shown.bs.modal', function() {
    setTimeout(function() {
        // Reload customers and vehicles first
        loadCustomers().then(() => {
            loadVehicles();
            // Then initialize Select2
            setTimeout(function() {
                initializeSearchableSelects();
                initializeCustomerChangeHandler();
            }, 100);
        }).catch(() => {
            loadVehicles();
            setTimeout(function() {
                initializeSearchableSelects();
            }, 100);
        });
    }, 200);
});

document.getElementById('addVehicleModal').addEventListener('shown.bs.modal', function() {
    setTimeout(function() {
        if (typeof jQuery !== 'undefined') {
            const $ = jQuery;
            if ($('#vehicleCustomerSelect').hasClass('select2-hidden-accessible')) {
                $('#vehicleCustomerSelect').select2('destroy');
            }
            $('#vehicleCustomerSelect').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: 'Search or select customer...',
                allowClear: true,
                dropdownParent: $('#addVehicleModal')
            });
        }
    }, 200);
});

// Reset form when customer modal is opened
document.getElementById('addCustomerModal').addEventListener('show.bs.modal', function() {
    const form = document.getElementById('addCustomerForm');
    if (form) {
        form.reset();
        // Reset checkbox to checked
        const isActiveCheckbox = document.getElementById('is_active_modal');
        if (isActiveCheckbox) {
            isActiveCheckbox.checked = true;
        }
        // Reset opening balance type to debit
        const openingBalanceType = form.querySelector('select[name="opening_balance_type"]');
        if (openingBalanceType) {
            openingBalanceType.value = 'debit';
        }
        // Reset opening balance to 0
        const openingBalance = form.querySelector('input[name="opening_balance"]');
        if (openingBalance) {
            openingBalance.value = '0';
        }
    }
});

// Re-initialize Select2 when customer modal is closed (to refresh customer list)
document.getElementById('addCustomerModal').addEventListener('hidden.bs.modal', function() {
    // Reload customers after modal closes
    setTimeout(function() {
        loadCustomers();
    }, 100);
});
</script>
@endsection

@push('scripts')
<!-- jQuery (required for Select2) - Load first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
// Ensure jQuery is available before using it
(function() {
    // Wait for jQuery to be loaded
    function waitForJQuery(callback) {
        if (typeof jQuery !== 'undefined') {
            callback();
        } else {
            setTimeout(function() {
                waitForJQuery(callback);
            }, 50);
        }
    }
    
    // Initialize all jQuery-dependent code after jQuery is loaded
    waitForJQuery(function() {
        // All jQuery code will be initialized here or in DOMContentLoaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                initializeApp();
            });
        } else {
            initializeApp();
        }
    });
})();
</script>
@endpush