@extends('mainlayout.layout')

@php($customerName = trim($customer->first_name . ' ' . $customer->middle_name . ' ' . $customer->last_name))

@section('title', config('app.name') . ' | ' . ($customerName ?: 'Customer'))
@section('topbar-search', 'enabled')

@section('content')
<main class="portal-workspace portal-light-type">
    <header class="portal-page-header">
        <div>
            <a class="portal-back-link" href="{{ url('/dashboard') }}"><i class="bx bx-left-arrow-alt"></i> Dashboard</a>
            <span class="portal-eyebrow">Customer</span>
            <h1>{{ $customerName ?: 'Customer details' }}</h1>
            <p>Customer profile and order history.</p>
        </div>
    </header>

    <div class="portal-detail-grid">
        <section>
            <article class="portal-card">
                <header class="portal-card-header">
                    <div><h2>Recent orders</h2><p>The latest orders placed by this customer.</p></div>
                    <span class="portal-status portal-status--neutral">{{ $orders->count() }} {{ Str::plural('order', $orders->count()) }}</span>
                </header>
                <div class="table-responsive">
                    <table class="table portal-table">
                        <thead><tr><th>Order ID</th><th>Property &amp; plot</th><th>Payment plan</th><th>Amount</th><th>Status</th><th aria-label="Action"></th></tr></thead>
                        <tbody>
                        @forelse($orders as $order)
                            <tr class="portal-clickable-row" tabindex="0" role="link" data-href="{{ route('support.orders.show', $order) }}" aria-label="View order {{ $order->referenceid ?: $order->id }}">
                                <td>{{ $order->referenceid ?: $order->id }}</td>
                                <td>{{ optional($order->property)->name ?: 'Property not available' }}<small>Plot {{ optional($order->plot)->plotnumber ?: 'not selected' }}</small></td>
                                <td>{{ ucfirst($order->order_type ?: 'Not specified') }}</td>
                                <td>TZS {{ number_format((int) $order->amount) }}</td>
                                <td><span class="portal-status">{{ $order->status_description ?: 'Status unavailable' }}</span></td>
                                <td><a class="portal-row-action" href="{{ route('support.orders.show', $order) }}" aria-label="View order {{ $order->referenceid ?: $order->id }}"><i class="bx bx-right-arrow-alt"></i></a></td>
                            </tr>
                        @empty
                            <tr><td colspan="6"><div class="portal-empty portal-empty--muted compact">No orders found for this customer.</div></td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </article>
        </section>

        <aside>
            <article class="portal-card portal-facts">
                <h2>Customer details</h2>
                <dl>
                    <div><dt>Name</dt><dd>{{ $customerName ?: 'Not available' }}</dd></div>
                    <div><dt>Phone</dt><dd>{{ $customer->phone ?: 'Not available' }}</dd></div>
                    <div><dt>Email</dt><dd>{{ $customer->email ?: 'Not available' }}</dd></div>
                    <div><dt>Customer ID</dt><dd>{{ $customer->uid }}</dd></div>
                    <div><dt>Registered</dt><dd>{{ optional($customer->created_at)->format('d M Y') ?: 'Not available' }}</dd></div>
                </dl>
            </article>
        </aside>
    </div>
</main>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.portal-clickable-row[data-href]').forEach(function (row) {
    row.addEventListener('click', function (event) {
        if (!event.target.closest('a, button')) window.location.assign(row.dataset.href);
    });
    row.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            window.location.assign(row.dataset.href);
        }
    });
});
</script>
@endpush