@extends('layouts.layout-horizontal')

@section('title', 'Customers')

@section('css')
<style>
    .ac-dropdown {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #fff; border: 1px solid #e5e9f0; border-radius: 8px;
        box-shadow: 0 8px 24px rgba(10,20,35,.08);
        max-height: 340px; overflow-y: auto; z-index: 1050; min-width: 260px;
    }
    .ac-item {
        display: block; padding: 8px 12px; cursor: pointer; text-decoration: none;
        color: #1a1f36; border-bottom: 1px solid #f0f2f7; font-size: 13px; line-height: 1.3;
    }
    .ac-item:last-child { border-bottom: none; }
    .ac-item:hover, .ac-item.ac-active { background: #f4f5f8; color: #0b1020; }
    .ac-item-title { font-weight: 500; }
    .ac-item-sub { font-size: 11px; color: #8792a2; margin-top: 1px; }
    .ac-empty { padding: 12px; font-size: 12px; color: #8792a2; text-align: center; }
    .ac-hint { padding: 6px 12px; font-size: 11px; color: #8792a2; background: #fafbfc; border-top: 1px solid #f0f2f7; text-align: center; }
    .ac-hint kbd { font-size: 10px; background: #fff; border: 1px solid #d1d5db; padding: 1px 5px; border-radius: 3px; }
</style>
@endsection

@section('content')

    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h5 class="mb-0">Customers
                <small class="text-muted fw-normal">· {{ number_format($customers->total()) }}</small>
                @if(!empty($q))
                    <small class="text-muted fw-normal">· matches for "<b>{{ $q }}</b>"</small>
                    <a href="{{ route('customers.index') }}" class="small ms-1">clear</a>
                @endif
            </h5>
            <div class="d-flex align-items-center gap-2">
                <form method="GET" action="{{ route('customers.index') }}" class="position-relative">
                    <input type="search" name="q" id="custSearch" value="{{ $q }}" autocomplete="off" class="form-control form-control-sm" placeholder="Search name, mobile or GSTIN…" style="min-width:240px;">
                    <div class="ac-dropdown" id="custAcDropdown" hidden></div>
                </form>
                <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph-duotone ph-plus me-1"></i> New Customer
                </a>
            </div>
        </div>
        <div class="card-body">
            <div>
            <div class="table-responsive">
            <table class="table table-hover table-sm align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="white-space:nowrap">Name</th>
                        <th style="white-space:nowrap">Mobile</th>
                        <th style="white-space:nowrap">GST Number</th>
                        <th style="max-width:250px">Address</th>
                        <th style="white-space:nowrap">State</th>
                        <th style="white-space:nowrap">Pincode</th>
                        <th style="white-space:nowrap">Party</th>
                        <th class="no-sort no-export"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($customers as $c)
                        <tr>
                            <td><a href="{{ route('customers.show', $c) }}">{{ $c->name }}</a> {!! $c->is_sez ? '<span class="badge bg-danger">SEZ</span>' : '' !!}</td>
                            <td>{{ $c->mobile }}</td>
                            <td>{{ $c->gst_number }}</td>
                            <td style="max-width:250px; white-space:normal; word-break:break-word">{{ $c->billing_address }}</td>
                            <td>{{ $c->state }}</td>
                            <td>{{ $c->pincode }}</td>
                            <td class="text-capitalize">{{ $c->party_type }}</td>
                            <td class="text-center">
                                <div class="tbl-actions">
                                    <a href="{{ route('customers.show', $c) }}" class="tbl-act" data-bs-toggle="tooltip" title="View"><i class="ph-duotone ph-eye"></i></a>
                                    <a href="{{ route('customers.edit', $c) }}" class="tbl-act" data-bs-toggle="tooltip" title="Edit"><i class="ph-duotone ph-pencil-simple"></i></a>
                                    <form action="{{ route('customers.destroy', $c) }}" method="post" class="d-inline"
                                        onsubmit="return confirm('Delete this customer?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="tbl-act text-danger" data-bs-toggle="tooltip" title="Delete">
                                            <i class="ph-duotone ph-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                @include('partials._empty-state', [
                                    'icon' => 'ph-users',
                                    'title' => 'No customers yet',
                                    'subtitle' => 'Add your first customer to get started.',
                                    'action' => route('customers.create'),
                                    'actionLabel' => 'Add Customer',
                                ])
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            </div>
            @if($customers->hasPages())
                <div class="mt-3">
                    {{ $customers->links() }}
                </div>
            @endif
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script>
    (function () {
        const input = document.getElementById('custSearch');
        const dropdown = document.getElementById('custAcDropdown');
        if (!input || !dropdown) return;

        const CUSTOMER_BASE = @json(url('c/' . currentCompanyId() . '/customers'));

        let debounce, activeIdx = -1, items = [];

        function close() { dropdown.hidden = true; dropdown.innerHTML = ''; activeIdx = -1; }

        function escapeHtml(s) {
            return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
        }

        function render(list) {
            items = list;
            if (!list.length) {
                dropdown.innerHTML = '<div class="ac-empty">No matches. Press <kbd>Enter</kbd> to search the table.</div>';
            } else {
                dropdown.innerHTML = list.map((c, i) => `
                    <a href="${CUSTOMER_BASE}/${c.id}" class="ac-item" data-idx="${i}">
                        <div class="ac-item-title">${escapeHtml(c.text)}</div>
                        ${c.subtitle ? `<div class="ac-item-sub">${escapeHtml(c.subtitle)}</div>` : ''}
                    </a>`).join('') + `
                    <div class="ac-hint">Press <kbd>Enter</kbd> to show all matches in the table.</div>`;
            }
            dropdown.hidden = false;
        }

        input.addEventListener('input', () => {
            const q = input.value.trim();
            clearTimeout(debounce);
            if (!q) { close(); return; }
            debounce = setTimeout(() => {
                fetch(`{{ url('api/customers/search') }}?q=${encodeURIComponent(q)}`, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(r => r.json())
                .then(render)
                .catch(() => close());
            }, 200);
        });

        input.addEventListener('keydown', e => {
            if (dropdown.hidden || !items.length) return;
            const links = dropdown.querySelectorAll('.ac-item');
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                activeIdx = Math.min(activeIdx + 1, links.length - 1);
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                activeIdx = Math.max(activeIdx - 1, 0);
            } else if (e.key === 'Enter' && activeIdx >= 0) {
                e.preventDefault();
                window.location.href = links[activeIdx].href;
                return;
            } else if (e.key === 'Escape') {
                close();
                return;
            } else {
                return;
            }
            links.forEach((l, i) => l.classList.toggle('ac-active', i === activeIdx));
            links[activeIdx]?.scrollIntoView({ block: 'nearest' });
        });

        document.addEventListener('click', e => {
            if (!input.contains(e.target) && !dropdown.contains(e.target)) close();
        });
    })();
</script>
@endsection