@extends('garage.layouts.app')

@section('title', 'Customers')

@section('content')
<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;">
                <form method="GET" action="{{ route('garage.customers.index') }}" class="d-flex align-items-center gap-2 flex-grow-1">
                    <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" name="search" placeholder="Search customers..." value="{{ $search ?? '' }}">
                    </div>
                    <select name="status" class="form-select form-select-sm" style="width: auto;">
                        <option value="all" {{ ($status ?? 'all') === 'all' ? 'selected' : '' }}>All Status</option>
                        <option value="active" {{ ($status ?? 'all') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ ($status ?? 'all') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                    <button type="submit" class="btn btn-sm btn-outline-secondary" title="Search">
                        <i class="bi bi-search"></i>
                    </button>
                    @if($search || ($status ?? 'all') !== 'all')
                    <a href="{{ route('garage.customers.index') }}" class="btn btn-sm btn-outline-secondary" title="Clear">
                        <i class="bi bi-x-lg"></i>
                    </a>
                    @endif
                </form>
            </div>

            <!-- Action Icons and Create Button -->
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#importCustomersCsvModal" title="Import CSV">
                    <i class="bi bi-upload me-1"></i>Import CSV
                </button>
                @include('garage.partials.trash-link', ['trashType' => 'customers'])
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createCustomerModal">
                    <i class="bi bi-plus-lg me-1"></i>Add Customer
                </button>
            </div>
        </div>
    </div>

    <!-- Customers Table -->
    <div class="bg-white flex-grow-1">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 80px;">Code</th>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Email</th>
                        <th>Credit Limit</th>
                        <th>Balance</th>
                        <th style="width: 100px;">Status</th>
                        <th style="width: 120px;" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $customer)
                    <tr>
                        <td>
                            <span class="badge bg-secondary">{{ $customer->code }}</span>
                        </td>
                        <td>
                            <a href="{{ route('garage.customers.show', $customer->id) }}" class="text-decoration-none fw-semibold">
                                {{ $customer->name }}@if(!empty($customer->last_name)) {{ $customer->last_name }}@endif
                            </a>
                            @if($customer->contact_person)
                            <small class="text-muted">{{ $customer->contact_person }}</small>
                            @endif
                        </td>
                        <td>
                            @if($customer->phone)
                            <div><i class="bi bi-telephone me-1"></i>{{ $customer->phone }}</div>
                            @endif
                            @if($customer->address)
                            <small class="text-muted d-block">{{ \Illuminate\Support\Str::limit($customer->address, 30) }}</small>
                            @endif
                        </td>
                        <td>
                            @if($customer->email)
                            <a href="mailto:{{ $customer->email }}" class="text-decoration-none">{{ $customer->email }}</a>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($customer->credit_limit)
                            <span class="text-success">PKR {{ number_format($customer->credit_limit, 2) }}</span>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $balance = $customer->opening_balance;
                                $balanceType = $customer->opening_balance_type;
                                $displayBalance = $balanceType === 'credit' ? -$balance : $balance;
                            @endphp
                            <span class="{{ $displayBalance >= 0 ? 'text-success' : 'text-danger' }}">
                                PKR {{ number_format(abs($displayBalance), 2) }}
                            </span>
                        </td>
                        <td>
                            @if($customer->is_active)
                            <span class="badge bg-success">Active</span>
                            @else
                            <span class="badge bg-secondary">Inactive</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <button
                                    type="button"
                                    class="btn btn-outline-primary"
                                    title="Edit"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editCustomerModal"
                                    data-id="{{ $customer->id }}"
                                    data-code="{{ e($customer->code) }}"
                                    data-barcode="{{ e($customer->barcode ?? '') }}"
                                    data-name="{{ e($customer->name) }}"
                                    data-last_name="{{ e($customer->last_name ?? '') }}"
                                    data-cnic="{{ e($customer->cnic ?? '') }}"
                                    data-customer_type="{{ e($customer->customer_type ?? '') }}"
                                    data-discount_rate="{{ $customer->discount_rate ?? 0 }}"
                                    data-phone="{{ e($customer->phone) }}"
                                    data-mobile="{{ e($customer->mobile ?? '') }}"
                                    data-email="{{ e($customer->email) }}"
                                    data-address="{{ e($customer->address) }}"
                                    data-area="{{ e($customer->area ?? '') }}"
                                    data-city="{{ e($customer->city ?? '') }}"
                                    data-tax_number="{{ e($customer->tax_number) }}"
                                    data-credit_limit="{{ $customer->credit_limit }}"
                                    data-opening_balance="{{ $customer->opening_balance }}"
                                    data-opening_balance_type="{{ $customer->opening_balance_type }}"
                                    data-description="{{ e($customer->description) }}"
                                    data-is_active="{{ (int) $customer->is_active }}"
                                >
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" onclick="deleteCustomer({{ $customer->id }})" title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                                <p class="mt-2 mb-0">No customers found</p>
                                <button type="button" class="btn btn-primary btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#createCustomerModal">Add First Customer</button>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($customers->hasPages())
        <div class="p-3 border-top">
            {{ $customers->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Import CSV Modal -->
<div class="modal fade" id="importCustomersCsvModal" tabindex="-1" aria-labelledby="importCustomersCsvModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content customer-modal-content customer-modal-content--garage">
            <form method="POST" action="{{ route('garage.customers.import-csv') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header customer-modal-header">
                    <div class="d-flex align-items-center gap-3 flex-grow-1">
                        <div class="customer-modal-header-icon" aria-hidden="true">
                            <i class="bi bi-file-earmark-arrow-up"></i>
                        </div>
                        <div>
                            <h5 class="modal-title customer-modal-title" id="importCustomersCsvModalLabel">Import Customers & Vehicles</h5>
                            <div class="customer-modal-subtitle">Customer CSV is required. Customer detail CSV is optional.</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3 px-3">
                    <div class="mb-3">
                        <label class="form-label small text-muted">Customer CSV <span class="text-danger">*</span></label>
                        <input type="file" name="customer_csv" class="form-control" accept=".csv,.txt" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small text-muted">Customer detail CSV (optional)</label>
                        <input type="file" name="customer_detail_csv" class="form-control" accept=".csv,.txt">
                    </div>
                    <div class="small text-muted">
                        Import logic: Customer CSV creates/updates customer ledgers only. Customer detail CSV (optional) creates/updates vehicles and syncs sub-ledgers.
                    </div>
                </div>
                <div class="modal-footer customer-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-upload me-1"></i>Start Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
@include('shared.customer-modal-styles')
@endpush

<!-- Create Modal -->
<div class="modal fade" id="createCustomerModal" tabindex="-1" aria-labelledby="createCustomerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content customer-modal-content customer-modal-content--garage">
            <form method="POST" action="{{ route('garage.customers.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header customer-modal-header">
                    <div class="d-flex align-items-center gap-3 flex-grow-1">
                        <div class="customer-modal-header-icon" aria-hidden="true">
                            <i class="bi bi-person-plus"></i>
                        </div>
                        <div>
                            <h5 class="modal-title customer-modal-title" id="createCustomerModalLabel">Customer</h5>
                            <div class="customer-modal-subtitle">New customer — same layout as ePOS (tabs below).</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body customer-modal-body p-0">
                    <div class="customer-modal-body-inner customer-modal-body-inner--tabs">
                        @include('garage.customers.partials.form-fields', ['idSuffix' => 'create', 'customerNo' => $nextCustomerCode ?? '' ])
                    </div>
                </div>
                <div class="modal-footer customer-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editCustomerModal" tabindex="-1" aria-labelledby="editCustomerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content customer-modal-content customer-modal-content--garage">
            <form method="POST" id="editCustomerForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header customer-modal-header">
                    <div class="d-flex align-items-center gap-3 flex-grow-1">
                        <div class="customer-modal-header-icon" aria-hidden="true">
                            <i class="bi bi-pencil-square"></i>
                        </div>
                        <div>
                            <h5 class="modal-title customer-modal-title" id="editCustomerModalLabel">Customer</h5>
                            <div class="customer-modal-subtitle">Edit details — Customer Information &amp; other tabs.</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body customer-modal-body p-0">
                    <div class="customer-modal-body-inner customer-modal-body-inner--tabs">
                        @include('garage.customers.partials.form-fields', ['idSuffix' => 'edit'])
                    </div>
                </div>
                <div class="modal-footer customer-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteCustomerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content customer-modal-content customer-modal-content--garage border-0">
            <div class="modal-header customer-modal-header">
                <div class="d-flex align-items-center gap-3 flex-grow-1">
                    <div class="customer-modal-header-icon" aria-hidden="true">
                        <i class="bi bi-trash3"></i>
                    </div>
                    <div>
                        <h5 class="modal-title customer-modal-title" id="deleteCustomerModalLabel">Delete customer</h5>
                        <div class="customer-modal-subtitle">This cannot be undone.</div>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-4 px-4">
                <p class="mb-0 text-secondary">Are you sure you want to remove this customer from your list? Linked history may still reference them.</p>
            </div>
            <div class="modal-footer customer-modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Vehicle Transfer Modal (must appear before stacked scripts so IDs exist when JS runs) -->
<div class="modal fade" id="cmTransferVehicleModal" tabindex="-1" aria-labelledby="cmTransferVehicleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content customer-modal-content customer-modal-content--garage">
            <div class="modal-header customer-modal-header">
                <div class="d-flex align-items-center gap-3 flex-grow-1">
                    <div class="customer-modal-header-icon" aria-hidden="true"><i class="bi bi-arrow-left-right"></i></div>
                    <div>
                        <h5 class="modal-title customer-modal-title" id="cmTransferVehicleModalLabel">Transfer vehicle</h5>
                        <div class="customer-modal-subtitle">Move this vehicle to another customer (history stays intact).</div>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-3 px-3">
                <input type="hidden" id="cmTransferFromCustomerId" value="">
                <input type="hidden" id="cmTransferVehicleId" value="">

                <div class="mb-2">
                    <label class="form-label small fw-semibold d-flex align-items-center gap-2">
                        <span>Search customer (3+ chars)</span>
                        <span class="text-muted" role="button" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Quick search only (min 3 chars). Select the target customer from the dropdown below.">
                            <i class="bi bi-info-circle"></i>
                        </span>
                    </label>
                    <input type="search" class="form-control form-control-sm" id="cmTransferSearch" placeholder="Type name / code / phone…" autocomplete="off">
                </div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold">Select target customer</label>
                    <select class="form-select form-select-sm" id="cmTransferTargetCustomer">
                        <option value="">— Select —</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold">Notes (optional)</label>
                    <input type="text" class="form-control form-control-sm" id="cmTransferNotes" placeholder="Reason / reference…">
                </div>
                <div class="small text-muted">This only changes the vehicle’s current owner; past history remains unchanged.</div>
            </div>
            <div class="modal-footer customer-modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="cmTransferConfirmBtn">
                    <i class="bi bi-check-lg me-1"></i>Transfer
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function deleteCustomer(id) {
    const form = document.getElementById('deleteForm');
    form.action = '{{ route("garage.customers.destroy", ":id") }}'.replace(':id', id);
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

function bytesToLabel(bytes) {
    const b = parseInt(bytes || 0, 10);
    if (!b) return '';
    const kb = b / 1024;
    if (kb < 1024) return `${kb.toFixed(0)} KB`;
    const mb = kb / 1024;
    return `${mb.toFixed(1)} MB`;
}

async function loadCustomerAttachments(customerId, listId) {
    const list = document.getElementById(listId);
    if (!list) return;
    list.innerHTML = '<div class=\"text-muted small\">Loading…</div>';

    try {
        const res = await fetch(`{{ url('/garage/customers') }}/${customerId}/attachments`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const atts = data.attachments || [];

        if (!atts.length) {
            list.innerHTML = '<div class=\"text-muted small\">No documents uploaded yet.</div>';
            return;
        }

        list.innerHTML = atts.map(a => {
            const delUrl = `{{ url('/garage/customers') }}/${customerId}/attachments/${a.id}`;
            const meta = [a.mime_type || '', bytesToLabel(a.size)].filter(Boolean).join(' • ');
            const viewUrl = a.url || '';
            return `
                <div class=\"epos-attachment-item\">
                    <div>
                        <div class=\"epos-attachment-name\">${(a.original_name || '').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
                        <div class=\"epos-attachment-meta\">${meta}</div>
                    </div>
                    <div class=\"d-flex align-items-center gap-2\">
                        ${viewUrl ? `<a class=\"btn btn-sm btn-outline-primary\" href=\"${viewUrl}\" target=\"_blank\" rel=\"noopener\">View</a>` : ``}
                    <form method=\"POST\" action=\"${delUrl}\" onsubmit=\"return confirm('Delete this document?');\">
                        <input type=\"hidden\" name=\"_token\" value=\"{{ csrf_token() }}\" />
                        <input type=\"hidden\" name=\"_method\" value=\"DELETE\" />
                        <button type=\"submit\" class=\"btn btn-sm btn-outline-danger\">Delete</button>
                    </form>
                    </div>
                </div>
            `;
        }).join('');
    } catch (e) {
        list.innerHTML = '<div class=\"text-danger small\">Failed to load documents.</div>';
    }
}

async function loadCustomerVehicles(customerId, suffix) {
    const list = document.getElementById(`cm_vehicles_list_${suffix}`);
    if (!list) return;
    list.innerHTML = '<div class="text-muted small">Loading…</div>';

    try {
        // Use customer-scoped endpoint (same JSON shape as admin)
        const res = await fetch(`{{ url('/garage/customers') }}/${customerId}/vehicles`, { headers: { 'Accept': 'application/json' } });
        if (!res.ok) {
            list.innerHTML = `<div class="text-danger small">Failed to load vehicles (HTTP ${res.status}).</div>`;
            return;
        }

        const payload = await res.json();
        const vehicles = payload.vehicles || [];

        if (!vehicles.length) {
            list.innerHTML = '<div class="text-muted small">No vehicles yet.</div>';
            return;
        }

        list.innerHTML = vehicles.map(v => {
            const title = [v.registration_number, v.make, v.model, v.year].filter(Boolean).join(' ');
            return `
                <div class="epos-attachment-item">
                    <div>
                        <div class="epos-attachment-name">${title.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
                        <div class="epos-attachment-meta">${[v.vin ? `VIN: ${v.vin}` : '', v.fuel_type ? `Fuel: ${v.fuel_type}` : '', (v.odometer_reading ?? '') !== '' && v.odometer_reading !== null ? `Odo: ${v.odometer_reading}` : ''].filter(Boolean).join(' • ')}</div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-cm-veh-transfer="1"
                            data-id="${v.id}"
                            data-from_customer="${customerId}"
                        >Transfer</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-cm-veh-edit="1"
                            data-id="${v.id}"
                            data-registration_number="${(v.registration_number || '').replace(/\"/g,'&quot;')}"
                            data-make="${(v.make || '').replace(/\"/g,'&quot;')}"
                            data-model="${(v.model || '').replace(/\"/g,'&quot;')}"
                            data-year="${(v.year || '').replace(/\"/g,'&quot;')}"
                            data-vin="${(v.vin || '').replace(/\"/g,'&quot;')}"
                            data-fuel_type="${(v.fuel_type || '').replace(/\"/g,'&quot;')}"
                            data-odometer_reading="${v.odometer_reading ?? ''}"
                            data-color="${(v.color || '').replace(/\"/g,'&quot;')}"
                        >Edit</button>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-cm-veh-del="1" data-id="${v.id}">Delete</button>
                    </div>
                </div>
            `;
        }).join('');
    } catch (e) {
        list.innerHTML = '<div class="text-danger small">Failed to load vehicles.</div>';
    }
}

function bindVehicleManager(customerId, suffix) {
    const saveBtn = document.getElementById(`cm_vehicle_save_btn_${suffix}`);
    const cancelBtn = document.getElementById(`cm_vehicle_cancel_btn_${suffix}`);
    const saveLbl = document.getElementById(`cm_vehicle_save_lbl_${suffix}`);
    if (!saveBtn) return;

    let editingId = null;

    const readForm = () => ({
        customer_ledger_id: customerId,
        registration_number: document.getElementById(`cm_vehicle_reg_${suffix}`)?.value?.trim() || '',
        make: document.getElementById(`cm_vehicle_make_${suffix}`)?.value?.trim() || '',
        model: document.getElementById(`cm_vehicle_model_${suffix}`)?.value?.trim() || '',
        year: document.getElementById(`cm_vehicle_year_${suffix}`)?.value?.trim() || '',
        vin: document.getElementById(`cm_vehicle_vin_${suffix}`)?.value?.trim() || '',
        fuel_type: document.getElementById(`cm_vehicle_fuel_${suffix}`)?.value || '',
        odometer_reading: document.getElementById(`cm_vehicle_odo_${suffix}`)?.value || '',
        color: document.getElementById(`cm_vehicle_color_${suffix}`)?.value?.trim() || '',
    });

    const fillForm = (v) => {
        document.getElementById(`cm_vehicle_reg_${suffix}`).value = v.registration_number || '';
        document.getElementById(`cm_vehicle_make_${suffix}`).value = v.make || '';
        document.getElementById(`cm_vehicle_model_${suffix}`).value = v.model || '';
        document.getElementById(`cm_vehicle_year_${suffix}`).value = v.year || '';
        document.getElementById(`cm_vehicle_vin_${suffix}`).value = v.vin || '';
        document.getElementById(`cm_vehicle_fuel_${suffix}`).value = v.fuel_type || '';
        document.getElementById(`cm_vehicle_odo_${suffix}`).value = v.odometer_reading || '';
        document.getElementById(`cm_vehicle_color_${suffix}`).value = v.color || '';
    };

    const resetForm = () => {
        editingId = null;
        fillForm({});
        if (saveLbl) saveLbl.textContent = 'Add Vehicle';
        if (cancelBtn) cancelBtn.style.display = 'none';
    };

    saveBtn.addEventListener('click', async () => {
        const payload = readForm();
        if (!payload.registration_number) {
            alert('Registration number is required.');
            return;
        }

        const url = editingId ? `/garage/api/vehicles/${editingId}` : `/garage/api/vehicles`;
        const method = editingId ? 'PUT' : 'POST';

        try {
            const res = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),
                },
                body: JSON.stringify(payload),
            });

            const data = await res.json().catch(() => ({}));
            if (!res.ok || data.success === false) {
                alert(data.message || 'Failed to save vehicle.');
                return;
            }

            resetForm();
            await loadCustomerVehicles(customerId, suffix);
        } catch (e) {
            alert('Failed to save vehicle.');
        }
    });

    if (cancelBtn) {
        cancelBtn.addEventListener('click', () => resetForm());
    }

    document.addEventListener('click', async (e) => {
        const editBtn = e.target.closest('[data-cm-veh-edit=\"1\"]');
        const delBtn = e.target.closest('[data-cm-veh-del=\"1\"]');
        const transferBtn = e.target.closest('[data-cm-veh-transfer=\"1\"]');
        if (transferBtn) {
            const vehId = transferBtn.getAttribute('data-id');
            const fromId = transferBtn.getAttribute('data-from_customer');
            const m = document.getElementById('cmTransferVehicleModal');
            if (!m) return;
            document.getElementById('cmTransferFromCustomerId').value = fromId || '';
            document.getElementById('cmTransferVehicleId').value = vehId || '';
            document.getElementById('cmTransferSearch').value = '';
            document.getElementById('cmTransferNotes').value = '';
            document.getElementById('cmTransferTargetCustomer').innerHTML = '<option value="">— Select —</option>';
            if (window.bootstrap) {
                window.bootstrap.Modal.getOrCreateInstance(m).show();
            }
            return;
        }
        if (editBtn) {
            editingId = editBtn.getAttribute('data-id');
            fillForm({
                registration_number: editBtn.getAttribute('data-registration_number'),
                make: editBtn.getAttribute('data-make'),
                model: editBtn.getAttribute('data-model'),
                year: editBtn.getAttribute('data-year'),
                vin: editBtn.getAttribute('data-vin'),
                fuel_type: editBtn.getAttribute('data-fuel_type'),
                odometer_reading: editBtn.getAttribute('data-odometer_reading'),
                color: editBtn.getAttribute('data-color'),
            });
            if (saveLbl) saveLbl.textContent = 'Update Vehicle';
            if (cancelBtn) cancelBtn.style.display = '';
            return;
        }
        if (delBtn) {
            const id = delBtn.getAttribute('data-id');
            if (!confirm('Delete this vehicle?')) return;
            try {
                const res = await fetch(`/garage/api/vehicles/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),
                    },
                });
                if (!res.ok) {
                    alert('Failed to delete vehicle.');
                    return;
                }
                await loadCustomerVehicles(customerId, suffix);
            } catch {
                alert('Failed to delete vehicle.');
            }
        }
    });

    resetForm();
}

function formatOutstandingDisplay(ob, type) {
    const n = parseFloat(ob) || 0;
    const t = type || 'debit';
    const signed = t === 'credit' ? -n : n;
    const absLabel = Math.abs(signed).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    const suffix = signed < 0 ? ' CR' : ' DR';
    return absLabel + suffix;
}

document.addEventListener('DOMContentLoaded', function () {
    const createModal = document.getElementById('createCustomerModal');
    if (createModal) {
        createModal.addEventListener('show.bs.modal', function () {
            const form = createModal.querySelector('form');
            if (form) {
                form.reset();
            }
            const hintEl = document.getElementById('cm_customer_no_hint_create');
            if (hintEl) hintEl.style.display = '';
            const ob = document.getElementById('cm_opening_balance_create');
            const obt = document.getElementById('cm_opening_balance_type_create');
            const out = document.getElementById('cm_outstanding_create');
            if (ob) ob.value = '0';
            if (obt) obt.value = 'debit';
            if (out) out.value = '0';
            const activeCb = document.getElementById('customer_is_active_create');
            if (activeCb) activeCb.checked = true;
            const ctype = document.getElementById('cm_customer_type_create');
            if (ctype) ctype.value = 'individual';
            const tabBtn = document.getElementById('cm-tab-info-create');
            if (tabBtn && window.bootstrap) {
                window.bootstrap.Tab.getOrCreateInstance(tabBtn).show();
            }
        });
    }

    const editModal = document.getElementById('editCustomerModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', function (event) {
            const btn = event.relatedTarget;
            if (!btn) return;
            const id = btn.getAttribute('data-id');
            const form = document.getElementById('editCustomerForm');
            form.action = '{{ route("garage.customers.update", ":id") }}'.replace(':id', id);

            const g = (k) => btn.getAttribute('data-' + k) || '';

            document.getElementById('cm_customer_no_edit').value = g('code');
            document.getElementById('cm_customer_no_hint_edit').style.display = 'none';

            form.querySelector('[name="barcode"]').value = g('barcode');
            form.querySelector('[name="name"]').value = g('name');
            form.querySelector('[name="last_name"]').value = g('last_name');
            form.querySelector('[name="cnic"]').value = g('cnic');
            form.querySelector('[name="customer_type"]').value = g('customer_type') || 'individual';
            form.querySelector('[name="discount_rate"]').value = g('discount_rate') || '0';
            form.querySelector('[name="phone"]').value = g('phone');
            form.querySelector('[name="mobile"]').value = g('mobile');
            form.querySelector('[name="email"]').value = g('email');
            form.querySelector('[name="address"]').value = g('address');
            form.querySelector('[name="area"]').value = g('area');
            form.querySelector('[name="city"]').value = g('city');
            form.querySelector('[name="tax_number"]').value = g('tax_number');
            form.querySelector('[name="credit_limit"]').value = g('credit_limit');
            form.querySelector('[name="opening_balance"]').value = g('opening_balance');
            form.querySelector('[name="opening_balance_type"]').value = g('opening_balance_type') || 'debit';
            form.querySelector('[name="description"]').value = g('description');
            form.querySelector('[name="is_active"]').checked = g('is_active') === '1';

            document.getElementById('cm_outstanding_edit').value = formatOutstandingDisplay(g('opening_balance'), g('opening_balance_type'));

            loadCustomerAttachments(id, 'cm_attachments_list_edit');
            loadCustomerVehicles(id, 'edit');
            bindVehicleManager(id, 'edit');

            // Also reload whenever Vehicle Reading tab is opened
            const vehicleTabBtn = document.getElementById('cm-tab-vehicle-edit');
            if (vehicleTabBtn && vehicleTabBtn.dataset.cmVehBound !== '1') {
                vehicleTabBtn.dataset.cmVehBound = '1';
                vehicleTabBtn.addEventListener('shown.bs.tab', function () {
                    const form = document.getElementById('editCustomerForm');
                    // customer id from form action .../customers/{id}
                    const action = form?.getAttribute('action') || '';
                    const parts = action.split('/').filter(Boolean);
                    const currentId = parts[parts.length - 1] || id;
                    loadCustomerVehicles(currentId, 'edit');
                });
            }

            const tabBtn = document.getElementById('cm-tab-info-edit');
            if (tabBtn && window.bootstrap) {
                window.bootstrap.Tab.getOrCreateInstance(tabBtn).show();
            }
        });
    }

    // Vehicle transfer: typeahead uses same API as repair orders / sales (min 3 chars)
    (function initVehicleTransfer() {
        const customerSearchUrl = @json(route('garage.api.ledgers.customers.search'));
        function debounce(fn, wait) {
            let t = null;
            return function () {
                const ctx = this;
                const args = arguments;
                clearTimeout(t);
                t = setTimeout(function () { fn.apply(ctx, args); }, wait);
            };
        }
        async function fetchJson(url) {
            const res = await fetch(url, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
            });
            if (!res.ok) throw new Error('Request failed');
            const data = await res.json();
            return Array.isArray(data) ? data : [];
        }
        const searchEl = document.getElementById('cmTransferSearch');
        const sel = document.getElementById('cmTransferTargetCustomer');
        const confirmBtn = document.getElementById('cmTransferConfirmBtn');
        if (!searchEl || !sel || !confirmBtn) return;

        searchEl.addEventListener('input', debounce(async function () {
            const term = String(searchEl.value || '').trim();
            if (term.length < 3) return;
            const fromId = document.getElementById('cmTransferFromCustomerId').value;
            try {
                const list = await fetchJson(customerSearchUrl + '?term=' + encodeURIComponent(term));
                const filtered = list.filter(function (c) { return String(c.id) !== String(fromId); });
                sel.innerHTML = '<option value="">— Select —</option>' + filtered.map(function (c) {
                    const meta = [c.code || null, c.phone || null].filter(Boolean).join(' · ');
                    const label = meta ? (c.name + ' · ' + meta) : c.name;
                    const safe = String(label).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                    return '<option value="' + c.id + '">' + safe + '</option>';
                }).join('');
            } catch (e) {
                console.warn('Customer search failed', e);
            }
        }, 250));

        confirmBtn.addEventListener('click', async function () {
            const fromId = document.getElementById('cmTransferFromCustomerId').value;
            const vehId = document.getElementById('cmTransferVehicleId').value;
            const toId = sel.value;
            const notes = document.getElementById('cmTransferNotes').value || '';
            if (!toId) { alert('Select target customer.'); return; }
            // Use normal POST submit (more reliable than fetch in subfolder / proxy setups)
            const tpl = @json(route('garage.customers.vehicles.transfer', ['id' => ':id', 'vehicle' => ':vehicle']));
            const action = String(tpl).replace(':id', encodeURIComponent(fromId)).replace(':vehicle', encodeURIComponent(vehId));
            const csrf = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');

            const f = document.createElement('form');
            f.method = 'POST';
            f.action = action;
            f.style.display = 'none';

            const iCsrf = document.createElement('input');
            iCsrf.type = 'hidden';
            iCsrf.name = '_token';
            iCsrf.value = csrf;
            f.appendChild(iCsrf);

            const iTo = document.createElement('input');
            iTo.type = 'hidden';
            iTo.name = 'to_customer_ledger_id';
            iTo.value = String(toId);
            f.appendChild(iTo);

            const iNotes = document.createElement('input');
            iNotes.type = 'hidden';
            iNotes.name = 'notes';
            iNotes.value = String(notes || '');
            f.appendChild(iNotes);

            document.body.appendChild(f);
            f.submit();
        });
    })();
});
</script>
@endpush
@endsection