@extends('layouts.app')

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

@section('content')
@php
    $method = fn ($key) => $methodNames[$key] ?? ucwords(str_replace('_', ' ', (string) ($key ?: 'cash')));
    $qty = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
    $dayLabel = function ($date) {
        if ($date->isToday()) return 'Today';
        if ($date->isYesterday()) return 'Yesterday';
        return $date->format('l, d M Y');
    };
    $periods = ['all' => 'All', 'today' => 'Today', 'yesterday' => 'Yesterday', 'week' => 'Last 7 days'];
    $canEdit = auth()->user()->hasPermission('edit_pos_sell');
    $canDelete = auth()->user()->hasPermission('delete_pos_sell');
@endphp

<div class="recent-page">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
        <div>
            <h1 class="h4 fw-bold mb-1">Recent Sales</h1>
            <p class="text-muted small mb-0">
                {{ $seesAll ? 'Sales from every till' : 'Your sales' }}, newest first.
                @if($summary['last_sale'])
                    Last sale {{ \Carbon\Carbon::parse($summary['last_sale'])->diffForHumans() }}.
                @endif
            </p>
        </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>

    <!-- At a glance -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="glance glance-main">
                <div class="glance-label">Today</div>
                <div class="glance-value">{{ formatCurrency($summary['today_total']) }}</div>
                <div class="glance-sub">{{ number_format($summary['today_count']) }} {{ $summary['today_count'] == 1 ? 'sale' : 'sales' }}</div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="glance">
                <div class="glance-label">This shift</div>
                @if($summary['shift_total'] !== null)
                    <div class="glance-value">{{ formatCurrency($summary['shift_total']) }}</div>
                    <div class="glance-sub">{{ number_format($summary['shift_count']) }} {{ $summary['shift_count'] == 1 ? 'sale' : 'sales' }} on your open register</div>
                @else
                    <div class="glance-value text-muted">-</div>
                    <div class="glance-sub">No register open</div>
                @endif
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <!-- Search and period -->
            <form method="GET" action="{{ route('pos.recent.sales') }}" class="glance h-100 d-flex flex-column justify-content-center gap-2" id="recentFilters">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                    <input type="search" name="search" value="{{ $search }}" class="form-control" placeholder="Invoice, customer, phone or product" autocomplete="off">
                    <input type="hidden" name="period" value="{{ $period }}">
                    <button class="btn btn-primary" type="submit">Find</button>
                </div>
                <div class="d-flex gap-1 flex-wrap">
                    @foreach($periods as $key => $label)
                        <a href="{{ route('pos.recent.sales', array_filter(['period' => $key === 'all' ? null : $key, 'search' => $search ?: null])) }}"
                           class="chip {{ $period === $key ? 'active' : '' }}">{{ $label }}</a>
                    @endforeach
                </div>
            </form>
        </div>
    </div>

    @if($sales->isEmpty())
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5 text-muted">
                <i class="bi bi-receipt fs-1 d-block mb-2 opacity-50"></i>
                @if($search !== '' || $period !== 'all')
                    No sales match{{ $search !== '' ? ' "' . $search . '"' : '' }}.
                    <a href="{{ route('pos.recent.sales') }}">Show all recent sales</a>
                @else
                    No sales yet. Sales appear here as soon as they are made.
                @endif
            </div>
        </div>
    @else
        @foreach($sales->getCollection()->groupBy(fn ($s) => $s->created_at->toDateString()) as $day => $daySales)
            <div class="day-head">
                <span>{{ $dayLabel(\Carbon\Carbon::parse($day)) }}</span>
                <span class="text-muted fw-normal">{{ $daySales->count() }} {{ $daySales->count() == 1 ? 'sale' : 'sales' }} · {{ formatCurrency($daySales->sum('total_amount')) }}</span>
            </div>

            <div class="card border-0 shadow-sm mb-3 sales-list">
                @foreach($daySales as $sale)
                    @php
                        $names = $sale->items->map(fn ($i) => $i->product?->name ?? 'Deleted product');
                        $cashier = $sale->user?->name ?? $sale->register?->user?->name;
                    @endphp
                    <div class="sale-row">
                        <div class="sale-time">
                            <div class="fw-bold">{{ $sale->created_at->format('H:i') }}</div>
                            <a href="{{ route('sales.show', $sale->id) }}" class="sale-invoice">#{{ $sale->invoice_no }}</a>
                        </div>

                        <div class="sale-main">
                            <div class="sale-products" title="{{ $names->implode(', ') }}">
                                {{ $names->take(3)->implode(', ') }}
                                @if($names->count() > 3)<span class="text-muted">+{{ $names->count() - 3 }} more</span>@endif
                            </div>
                            <div class="sale-meta">
                                <span><i class="bi bi-person"></i> {{ $sale->customer_name ?: 'Walk-in' }}</span>
                                @if($sale->contact_number)<span><i class="bi bi-telephone"></i> {{ $sale->contact_number }}</span>@endif
                                <span><i class="bi bi-box"></i> {{ $qty($sale->items->sum('quantity')) }} {{ $sale->items->sum('quantity') == 1 ? 'item' : 'items' }}</span>
                                @if($seesAll && $cashier)<span><i class="bi bi-person-badge"></i> {{ $cashier }}</span>@endif
                                @if($sale->is_edited)<span class="tag tag-edited"><i class="bi bi-pencil-fill"></i> Edited</span>@endif
                                @if($sale->hasDiscount())<span class="tag tag-discount" title="{{ $sale->discount_reason }}"><i class="bi bi-tag-fill"></i> {{ formatCurrency($sale->discount_amount) }} off</span>@endif
                                @if(strtolower((string) $sale->payment_status) !== 'paid')<span class="tag tag-due">{{ ucfirst($sale->payment_status ?: 'Unpaid') }}</span>@endif
                            </div>
                        </div>

                        <div class="sale-pay">
                            @if($sale->payment_method === 'split' && $sale->payments->isNotEmpty())
                                @foreach($sale->payments as $payment)
                                    <span class="pay-pill">{{ $method($payment->method) }} <strong>{{ number_format($payment->amount) }}</strong></span>
                                @endforeach
                            @else
                                <span class="pay-pill">{{ $method($sale->payment_method) }}</span>
                            @endif
                        </div>

                        <div class="sale-total">{{ formatCurrency($sale->total_amount) }}</div>

                        <div class="sale-actions">
                            <a href="{{ route('sales.show', $sale->id) }}" class="icon-btn" title="View sale"><i class="bi bi-eye"></i></a>
                            <a href="{{ route('sales.show', ['sale' => $sale->id, 'format' => 'print']) }}" target="_blank" rel="noopener" class="icon-btn" title="Print invoice"><i class="bi bi-printer"></i></a>
                            @if($canEdit)
                                <a href="{{ route('sales.edit', $sale->id) }}" class="icon-btn" title="Edit sale"><i class="bi bi-pencil"></i></a>
                            @endif
                            @if($canDelete)
                                <form action="{{ route('sales.destroy', $sale->id) }}" method="POST" class="d-inline m-0"
                                      onsubmit="return confirm('Delete sale #{{ $sale->invoice_no }}? The stock goes back on the shelf and the deletion is recorded in Loss Prevention.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="icon-btn icon-danger" title="Delete sale"><i class="bi bi-trash"></i></button>
                                </form>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach

        @if($sales->hasPages())
            <div class="d-flex justify-content-center">{{ $sales->links() }}</div>
        @endif
    @endif
</div>

<style>
    .recent-page { padding: 1.5rem 1rem; max-width: 1200px; margin: 0 auto; }

    .glance { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.85rem 1rem; height: 100%; }
    .glance-main { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
    .glance-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; opacity: 0.75; }
    .glance-value { font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
    .glance-sub { font-size: 0.8rem; opacity: 0.75; }

    .chip { font-size: 0.78rem; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid #d1d5db; color: #374151; text-decoration: none; background: #fff; }
    .chip:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
    .chip.active { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }

    .day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
        font-weight: 700; color: var(--theme-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin: 1rem 0.25rem 0.4rem; }
    .day-head .text-muted { text-transform: none; letter-spacing: 0; }

    .sales-list { border-radius: 12px; overflow: hidden; }
    .sale-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 130px auto; gap: 0.25rem 1rem; align-items: center;
        padding: 0.8rem 1rem; border-bottom: 1px solid #f1f5f9; }
    .sale-row:last-child { border-bottom: 0; }
    .sale-row:hover { background: #f8fafc; }
    .sale-invoice { font-size: 0.75rem; color: var(--theme-primary); text-decoration: none; word-break: break-all; }
    .sale-invoice:hover { text-decoration: underline; }
    .sale-products { font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sale-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
    .sale-meta i { opacity: 0.7; }
    .tag { font-size: 0.7rem; font-weight: 700; padding: 0 0.45rem; border-radius: 999px; }
    .tag-edited { background: #fef3c7; color: #92400e; }
    .tag-discount { background: #dcfce7; color: #166534; }
    .tag-due { background: #fee2e2; color: #991b1b; }
    .sale-pay { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }
    .pay-pill { font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #f1f5f9; color: #334155; white-space: nowrap; }
    .sale-total { text-align: right; font-weight: 800; font-size: 1.05rem; color: #111827; white-space: nowrap; }
    .sale-actions { display: flex; gap: 0.15rem; justify-content: flex-end; }
    .icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
        border: 0; background: transparent; color: #64748b; text-decoration: none; }
    .icon-btn:hover { background: #f1f5f9; color: var(--theme-primary); }
    .icon-danger:hover { background: #fee2e2; color: #b91c1c; }

    /* Phones: each sale as a compact card */
    @media (max-width: 767px) {
        .sale-row { grid-template-columns: minmax(0, 1fr) auto; }
        .sale-time { grid-column: 1; display: flex; gap: 0.5rem; align-items: baseline; }
        .sale-total { grid-column: 2; grid-row: 1; }
        .sale-main { grid-column: 1 / -1; }
        .sale-pay { grid-column: 1; justify-content: flex-start; }
        .sale-actions { grid-column: 2; }
    }
</style>
@endsection

@section('scripts')
<script>
// Keep the list current without getting in the way: refresh only on the first page,
// with no search typed, while the page is visible and nobody is typing in the search box.
(function () {
    const params = new URLSearchParams(location.search);
    if ((params.get('page') || '1') !== '1' || params.get('search')) return;
    const box = document.querySelector('#recentFilters input[name="search"]');
    setInterval(function () {
        if (document.visibilityState !== 'visible') return;
        if (box && (document.activeElement === box || box.value.trim() !== '')) return;
        location.reload();
    }, 60000);
})();
</script>
@endsection