@extends('admin.layouts.app')

@section('title', 'Garage Customers')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">Customers - {{ $garage->name }}</h2>
            <small class="text-muted">Shared customer list (Master + Garage side)</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('garages.show', $garage) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Garage
            </a>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCustomerModal">
                <i class="bi bi-plus-lg me-1"></i>Add Customer
            </button>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form class="row g-2 mb-3" method="GET">
                <div class="col-md-5">
                    <input type="text" name="search" class="form-control" placeholder="Search customers..." value="{{ $search }}">
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-select">
                        <option value="all" {{ $status === 'all' ? 'selected' : '' }}>All Status</option>
                        <option value="active" {{ $status === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ $status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-outline-secondary" type="submit">Filter</button>
                    <a href="{{ route('admin.garages.customers.index', $garage) }}" class="btn btn-outline-secondary">Reset</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $customer)
                            <tr>
                                <td><span class="badge bg-secondary">{{ $customer->code }}</span></td>
                                <td>{{ $customer->name }}@if(!empty($customer->last_name)) {{ $customer->last_name }}@endif</td>
                                <td>{{ $customer->phone ?: '—' }}</td>
                                <td>{{ $customer->email ?: '—' }}</td>
                                <td>
                                    <span class="badge {{ $customer->is_active ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $customer->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-outline-primary"
                                        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>
                                    <form action="{{ route('admin.garages.customers.destroy', [$garage, $customer->id]) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this customer?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">No customers found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{ $customers->links() }}
        </div>
    </div>
</div>

<!-- 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--admin">
            <form method="POST" action="{{ route('admin.garages.customers.store', $garage) }}" 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('admin.garages.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--admin">
            <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('admin.garages.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>
@endsection

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

@push('scripts')
<script>
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('/admin/garages') }}/{{ $garage->id }}/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('/admin/garages') }}/{{ $garage->id }}/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 {
        const res = await fetch(`{{ url('/admin/garages') }}/{{ $garage->id }}/customers/${customerId}/vehicles`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const vehicles = data.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-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 = () => ({
        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 base = `{{ url('/admin/garages') }}/{{ $garage->id }}/customers/${customerId}/vehicles`;
        const url = editingId ? `${base}/${editingId}` : base;
        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"]');
        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;
            const url = `{{ url('/admin/garages') }}/{{ $garage->id }}/customers/${customerId}/vehicles/${id}`;
            try {
                const res = await fetch(url, {
                    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) return;

    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("admin.garages.customers.update", [$garage, ":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');

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