@extends('mainlayout.layout')

@section('title', config('app.name') . ' | Customer Support')
@section('topbar-search', 'enabled')

@section('content')
<main class="portal-workspace">
    <header class="portal-page-header">
        <div>
            <span class="portal-eyebrow">Customer Support</span>
            <h1 class="portal-user-heading">{{ trim(Auth::user()->first_name . ' ' . Auth::user()->last_name) ?: 'Customer Support' }}</h1>
            <p>Manage active customer cases and recent orders.</p>
        </div>
        <div class="portal-header-actions"><a class="btn btn-mlk-primary" href="{{ route('support.cases.create') }}"><i class="bx bx-plus"></i> New case</a></div>
    </header>

    <section class="portal-kpi-grid portal-kpi-grid--two" aria-label="Support summary">
        @foreach([
            ['Orders', $summary['current_orders'], 'bx-cart', 'green'],
            ['Open cases', $summary['open_cases'], 'bx-support', 'dark'],
        ] as [$label, $value, $icon, $tone])
            <article class="portal-kpi-card"><span class="portal-kpi-icon tone-{{ $tone }}"><i class="bx {{ $icon }}"></i></span><span class="portal-kpi-label">{{ $label }}</span><strong>{{ number_format($value) }}</strong></article>
        @endforeach
    </section>

    <section class="portal-card">
        <header class="portal-card-header"><div><h2>Cases</h2><p>Up to 25 open cases requiring attention.</p></div><a href="{{ route('support.cases.index') }}">View all</a></header>
        <div class="table-responsive"><table class="table portal-table"><thead><tr><th>Case</th><th>Customer</th><th>Order</th><th>Type</th><th>Priority</th><th>Status</th><th>Updated</th></tr></thead><tbody>
        @forelse($cases as $case)
            <tr class="portal-clickable-row" data-href="{{ route('support.cases.show', $case) }}" tabindex="0" role="link" aria-label="Open case {{ $case->subject }}">
                <td><a href="{{ route('support.cases.show', $case) }}">{{ $case->subject }}</a><small>#{{ strtoupper(substr($case->public_id, 0, 8)) }}</small></td>
                <td>{{ trim(optional($case->customer)->first_name . ' ' . optional($case->customer)->last_name) ?: 'Customer not linked' }}<small>{{ optional($case->customer)->phone ?: 'Phone not available' }}</small></td>
                <td>{{ optional($case->order)->referenceid ?: 'Not linked' }}</td>
                <td>{{ ucfirst(str_replace('_', ' ', $case->type)) }}</td>
                <td><span class="portal-priority-label priority-{{ $case->priority }}">{{ ucfirst($case->priority) }}</span></td>
                <td>@include('support.cases.partials.status-pill', ['case' => $case])</td>
                <td>{{ optional($case->updated_at)->format('d M Y') ?: '—' }}<small>{{ optional($case->updated_at)->format('H:i') }}</small></td>
            </tr>
        @empty<tr><td colspan="7"><div class="portal-empty portal-empty--muted compact">No open cases in your scope.</div></td></tr>@endforelse
        </tbody></table></div>
    </section>

    <section class="portal-card">
        <header class="portal-card-header"><div><h2>Recent customer orders</h2><p>Latest 25 customer orders.</p></div><a href="{{ route('support.orders.index') }}">View all orders</a></header>
        <div class="table-responsive"><table class="table portal-table"><thead><tr><th>Order ID</th><th>Customer</th><th>Project &amp; plot</th><th>Payment plan</th><th>Amount</th><th>Status</th></tr></thead><tbody>
        @forelse($orders as $order)
            <tr class="portal-clickable-row" data-href="{{ route('support.orders.show', $order) }}" tabindex="0" role="link" aria-label="Open order {{ $order->referenceid ?: $order->id }}">
                <td><a href="{{ route('support.orders.show', $order) }}">{{ $order->referenceid ?: '#' . $order->id }}</a><small>{{ optional($order->created_at)->format('d M Y') }}</small></td>
                <td>{{ trim(optional($order->user)->first_name . ' ' . optional($order->user)->last_name) ?: 'Unknown customer' }}<small>{{ optional($order->user)->phone ?: ($order->phonenumber ?: $order->msisdn) }}</small></td>
                <td>{{ optional($order->property)->name ?: 'Project unavailable' }}<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 ?: ['Generated', 'In progress', 'Completed'][$order->status] ?? 'Current' }}</span></td>
            </tr>
        @empty<tr><td colspan="6"><div class="portal-empty compact">No customer orders found.</div></td></tr>@endforelse
        </tbody></table></div>
    </section>
</main>
@endsection

@push('scripts')
<script>
(function () {
    document.querySelectorAll('.portal-clickable-row[data-href]').forEach(function (row) {
        function openRecord() {
            window.location.href = row.dataset.href;
        }

        row.addEventListener('click', function (event) {
            if (!event.target.closest('a, button')) openRecord();
        });
        row.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                openRecord();
            }
        });
    });
})();
</script>
@endpush