@extends('layouts.app')

@section('title', 'Recent Sales')

@section('content')
@php
    $canDelete = auth()->user()->hasPermission('delete_pos_sell');
    $filtered = $search !== '' || $day !== 'all' || $method;
    // ?register= is kept on every link (a register's sales); a super admin's working register needs no parameter
    $keep = request()->filled('register') && $register ? ['register' => $register->id] : [];
    $methodStyle = [
        'cash' => ['#047857', '#ecfdf5'], 'airtel_money' => ['#b91c1c', '#fef2f2'], 'mpamba' => ['#0f766e', '#f0fdfa'],
        'card' => ['#1d4ed8', '#eff6ff'], 'bank_transfer' => ['#4338ca', '#eef2ff'], 'split' => ['#7c3aed', '#f5f3ff'],
    ];
    $label = fn ($m) => $methods[strtolower((string) $m)] ?? ucwords(str_replace('_', ' ', (string) $m));
    // Invoice numbers from the till are long (INV-1792675837162738): show the last 6 digits, full on hover
    $shortInvoice = fn ($no) => strlen($no) > 12 ? '…' . substr($no, -6) : $no;
    $when = function ($date) {
        if (!$date) return '';
        if ($date->isToday()) return 'Today';
        if ($date->isYesterday()) return 'Yesterday';
        return $date->format('d M');
    };
@endphp
<style>
    .rs { max-width: 1200px; margin: 0 auto; font-size: .875rem; }
    .rs-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .rs-head h4 { font-weight: 700; margin: 0; }
    .rs-head small { color: #64748b; }
    .rs-register { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; margin-bottom: .9rem; border-radius: 10px;
                   background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: .9rem; flex-wrap: wrap; }
    .rs-register.closed { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
    .rs-register > i { font-size: 1.15rem; }
    .rs-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .85rem; }
    .rs-search { position: relative; flex: 1 1 220px; max-width: 320px; }
    .rs-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
    .rs-search input { padding-left: 2rem; }
    .rs-days { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; }
    .rs-days a { padding: .3rem .75rem; border-radius: 8px; color: #475569; text-decoration: none; font-weight: 600; font-size: .8rem; }
    .rs-days a.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

    .rs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow-x: auto; }
    .rs-table { width: 100%; border-collapse: collapse; }
    .rs-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 700;
                   background: #f8fafc; padding: .6rem .85rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
    .rs-table td { padding: .6rem .85rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .rs-table tbody tr:hover { background: #f8fafc; }
    .rs-table tbody tr:last-child td { border-bottom: 0; }

    .rs-time { font-weight: 700; color: #0f172a; white-space: nowrap; }
    .rs-sub { color: #94a3b8; font-size: .75rem; }
    .rs-invoice { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: #1e3a8a; font-weight: 600; white-space: nowrap; }
    /* The items column takes whatever room is left and shortens long names with "…" */
    .rs-table td.c-items { width: 100%; max-width: 0; }
    .rs-items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-weight: 500; }
    .rs-table td.c-who { white-space: nowrap; }
    /* Actions stay in view if the table is ever wider than the screen */
    .rs-table .c-actions { position: sticky; right: 0; background: #fff; }
    .rs-table th.c-actions { background: #f8fafc; }
    .rs-table tbody tr:hover .c-actions { background: #f8fafc; }
    .rs-pay { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
    .rs-split { font-size: .72rem; color: #64748b; white-space: nowrap; }
    .rs-total { font-weight: 800; color: #0f172a; white-space: nowrap; text-align: right; }
    .rs-edited { font-size: .65rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0 .3rem; margin-left: .25rem; }

    .rs-actions { display: flex; gap: .3rem; justify-content: flex-end; }
    .rs-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
              border: 0; font-size: .9rem; text-decoration: none; transition: filter .15s; }
    .rs-btn:hover { filter: brightness(.93); }
    .rs-btn.view { color: #1e40af; background: #eff6ff; }
    .rs-btn.edit { color: #b45309; background: #fef3c7; }
    .rs-btn.delete { color: #dc2626; background: #fee2e2; }

    .rs-empty { padding: 3rem 1rem; text-align: center; color: #64748b; }
    .rs-empty i { font-size: 2.5rem; color: #cbd5e1; display: block; margin-bottom: .5rem; }

    /* Medium screens: drop "Sold by" (it is on the sale page) and let split details wrap */
    @media (max-width: 1199.98px) {
        .rs-table .c-who { display: none; }
        .rs-split { white-space: normal; }
    }

    /* Phones: each sale as a compact card */
    @media (max-width: 767.98px) {
        .rs-table thead { display: none; }
        .rs-table, .rs-table tbody, .rs-table tr, .rs-table td { display: block; width: 100%; }
        .rs-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .75rem .9rem; border-bottom: 1px solid #f1f5f9; }
        .rs-table td { padding: 0; border: 0; }
        .rs-table td.c-items { grid-column: 1 / -1; }
        .rs-table td.c-items { max-width: none; }
        .rs-table td.c-actions { grid-column: 1 / -1; position: static; background: transparent; }
        .rs-actions { justify-content: flex-start; margin-top: .25rem; }
        .rs-table td.c-who { display: none; }
    }
</style>

<div class="rs container-fluid py-3">
    <div class="rs-head">
        <div>
            <h4>Recent Sales</h4>
            <small>{{ number_format($sales->total()) }} sale{{ $sales->total() === 1 ? '' : 's' }}{{ $filtered ? ' found' : '' }}</small>
        </div>
        <a href="{{ route('pos.new') }}" class="btn btn-primary btn-sm"><i class="bi bi-arrow-left me-1"></i> Back to POS</a>
    </div>

    @if($register)
        <div class="rs-register {{ $register->closed_at ? 'closed' : '' }}">
            <i class="bi bi-cash-stack"></i>
            <div class="flex-grow-1">
                Only the sales of <strong>{{ $register->user->name ?? 'Unknown' }}'s register #{{ $register->id }}</strong>
                <span class="rs-sub">
                    · opened {{ optional($register->opened_at)->format('d M Y H:i') }}
                    · {{ $register->closed_at ? 'closed ' . $register->closed_at->format('d M Y H:i') : 'still open' }}
                </span>
            </div>
            @if($keep && $seesAll)
                <a href="{{ route('pos.recent.sales') }}" class="btn btn-sm btn-light border">All sales</a>
            @endif
        </div>
    @endif

    <form method="GET" action="{{ route('pos.recent.sales') }}" class="rs-filters">
        <input type="hidden" name="day" value="{{ $day }}">
        @if($keep)<input type="hidden" name="register" value="{{ $keep['register'] }}">@endif
        <div class="rs-search">
            <i class="bi bi-search"></i>
            <input type="search" name="q" value="{{ $search }}" class="form-control form-control-sm" placeholder="Invoice (last digits) or customer">
        </div>
        <div class="rs-days" role="tablist" aria-label="Day">
            @foreach(['today' => 'Today', 'yesterday' => 'Yesterday', 'all' => 'All'] as $key => $text)
                <a href="{{ route('pos.recent.sales', array_filter(['q' => $search, 'method' => $method, 'day' => $key]) + $keep) }}"
                   class="{{ $day === $key ? 'active' : '' }}">{{ $text }}</a>
            @endforeach
        </div>
        <select name="method" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()" aria-label="Payment method">
            <option value="">All payments</option>
            @foreach($methods as $key => $text)
                <option value="{{ $key }}" @selected($method === $key)>{{ $text }}</option>
            @endforeach
        </select>
        @if($filtered)
            <a href="{{ route('pos.recent.sales', $keep) }}" class="btn btn-sm btn-light border">Clear</a>
        @endif
    </form>

    <div class="rs-card">
        <table class="rs-table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Invoice</th>
                    <th>Items</th>
                    <th>Payment</th>
                    @if($seesAll)<th class="c-who">Sold by</th>@endif
                    <th class="text-end">Total</th>
                    <th class="text-end c-actions">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($sales as $sale)
                    @php
                        $items = $sale->items ?? collect();
                        $names = $items->map(fn ($i) => $i->product->name ?? $i->name ?? 'Item');
                        $pm = strtolower((string) $sale->payment_method);
                        [$fg, $bg] = $methodStyle[$pm] ?? ['#475569', '#f1f5f9'];
                    @endphp
                    <tr>
                        <td>
                            <div class="rs-time">{{ $sale->created_at?->format('H:i') }}</div>
                            <div class="rs-sub">{{ $when($sale->created_at) }}</div>
                        </td>
                        <td>
                            <span class="rs-invoice" title="{{ $sale->invoice_no }}">#{{ $shortInvoice($sale->invoice_no) }}</span>
                            @if($sale->is_edited)<span class="rs-edited" title="Edited after the sale">EDITED</span>@endif
                            <div class="rs-sub">{{ $sale->customer_name ?: 'Walk-in' }}</div>
                        </td>
                        <td class="c-items">
                            <div class="rs-items" title="{{ $names->implode(', ') }}">
                                {{ $names->first() ?? 'No items' }}@if($names->count() > 1) <span class="rs-sub">+{{ $names->count() - 1 }} more</span>@endif
                            </div>
                            <div class="rs-sub">{{ rtrim(rtrim(number_format($items->sum('quantity'), 2), '0'), '.') }} item(s)</div>
                        </td>
                        <td>
                            <span class="rs-pay" style="color: {{ $fg }}; background: {{ $bg }};">{{ $label($pm) }}</span>
                            @if($pm === 'split' && $sale->payments->count())
                                <div class="rs-split">{{ $sale->payments->map(fn ($p) => $label($p->method) . ' ' . number_format($p->amount))->implode(' · ') }}</div>
                            @endif
                        </td>
                        @if($seesAll)
                            <td class="c-who"><span class="rs-sub" style="font-size: .8rem;">{{ $sale->user->name ?? '—' }}</span></td>
                        @endif
                        <td class="rs-total">MWK {{ number_format($sale->total_amount ?? 0) }}</td>
                        <td class="c-actions">
                            <div class="rs-actions">
                                <a href="{{ route('sales.show', $sale->id) }}" class="rs-btn view" title="View sale" aria-label="View sale {{ $sale->invoice_no }}"><i class="bi bi-eye"></i></a>
                                @if(in_array($sale->id, $editableIds, true))
                                    <a href="{{ route('sales.edit', ['sale' => $sale->id, 'return' => request()->fullUrl()]) }}" class="rs-btn edit" title="Edit sale" aria-label="Edit sale {{ $sale->invoice_no }}"><i class="bi bi-pencil"></i></a>
                                @endif
                                @if($canDelete)
                                    <form action="{{ route('sales.destroy', $sale->id) }}" method="POST" class="m-0"
                                          onsubmit="return confirm(@js('Void sale ' . $sale->invoice_no . '? The stock goes back into stock and the void is recorded in Loss Prevention.'));">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="rs-btn delete" title="Void sale" aria-label="Void sale {{ $sale->invoice_no }}"><i class="bi bi-x-octagon"></i></button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $seesAll ? 7 : 6 }}">
                            <div class="rs-empty">
                                <i class="bi bi-receipt"></i>
                                {{ $filtered ? 'No sales match these filters.' : 'No sales yet.' }}
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($sales->hasPages())
        <div class="mt-3">{{ $sales->links() }}</div>
    @endif
</div>
@endsection

@section('scripts')
<script>
// New sales appear without reloading by hand: refresh every 30 seconds, but not while
// searching or filtering (that would wipe what was typed) or while the tab is hidden.
@if(!$filtered)
setInterval(function () {
    const typing = document.activeElement && document.activeElement.matches('input, select');
    if (!document.hidden && !typing) window.location.reload();
}, 30000);
@endif
</script>
@endsection