@extends('garage.layouts.app')

@section('title', 'Cash Register Report')

@push('styles')
<style>
    .cr-hero{
        background: rgba(var(--bs-primary-rgb), .06);
        border: 1px solid rgba(var(--bs-primary-rgb), .22);
        border-radius: 14px;
        padding: .9rem 1rem;
    }
    .cr-kpi{
        border:1px solid #e9edf5;
        border-radius:12px;
        background:#fff;
        box-shadow: 0 6px 18px rgba(16,24,40,.05);
        position:relative;
        overflow:hidden;
    }
    .cr-kpi::before{
        content:"";
        position:absolute; left:0; top:0; bottom:0;
        width:4px;
        background: var(--bs-primary);
    }
    .cr-num{ font-weight:800; font-variant-numeric: tabular-nums; }
    .cr-table-wrap{
        border:1px solid #e9edf5;
        border-radius:12px;
        overflow:hidden;
        background:#fff;
        box-shadow: 0 10px 28px rgba(16,24,40,.06);
    }
    .cr-table thead th{
        font-size:.76rem;
        text-transform:uppercase;
        letter-spacing:.02em;
        color:#475467;
        background:#f8fafc;
        border-bottom:1px solid #e9edf5;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="cr-hero d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-0"><i class="bi bi-cash-coin me-2 text-primary"></i>Cash Register Report</h1>
            <div class="text-muted small">Sales totals by payment method for selected date range.</div>
        </div>
        <a class="btn btn-sm btn-outline-secondary" href="{{ route('garage.reports.index') }}">Back to reports</a>
    </div>

    <form method="GET" class="row g-2 mb-3">
        <div class="col-6 col-lg-2">
            <label class="form-label small text-muted mb-1">From</label>
            <input type="date" class="form-control form-control-sm" name="from" value="{{ $from }}">
        </div>
        <div class="col-6 col-lg-2">
            <label class="form-label small text-muted mb-1">To</label>
            <input type="date" class="form-control form-control-sm" name="to" value="{{ $to }}">
        </div>
        <div class="col-12 col-lg-2 d-grid align-items-end">
            <button class="btn btn-sm btn-primary mt-4">Filter</button>
        </div>
    </form>

    <div class="row g-2 mb-3">
        <div class="col-md-3"><div class="cr-kpi"><div class="p-2 ps-3"><div class="small text-muted">Grand total</div><div class="cr-num">PKR {{ number_format((float)($totals['grand_total'] ?? 0), 2) }}</div></div></div></div>
        <div class="col-md-3"><div class="cr-kpi"><div class="p-2 ps-3"><div class="small text-muted">Cash</div><div class="cr-num">PKR {{ number_format((float)($totals['cash_total'] ?? 0), 2) }}</div></div></div></div>
        <div class="col-md-3"><div class="cr-kpi"><div class="p-2 ps-3"><div class="small text-muted">Card</div><div class="cr-num">PKR {{ number_format((float)($totals['card_total'] ?? 0), 2) }}</div></div></div></div>
        <div class="col-md-3"><div class="cr-kpi"><div class="p-2 ps-3"><div class="small text-muted">Online</div><div class="cr-num">PKR {{ number_format((float)($totals['online_total'] ?? 0), 2) }}</div></div></div></div>
    </div>

    <div class="cr-table-wrap">
        <div class="p-2 border-bottom bg-light fw-semibold">Sales</div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle cr-table">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Invoice</th>
                    <th>Status</th>
                    <th class="text-end">Cash</th>
                    <th class="text-end">Card</th>
                    <th class="text-end">Online</th>
                    <th class="text-end">Grand total</th>
                </tr>
                </thead>
                <tbody>
                @forelse($rows as $r)
                    <tr>
                        <td class="text-muted">{{ $r->sale_date }}</td>
                        <td class="font-monospace">
                            @if(!empty($r->id))
                                <a class="text-decoration-none" href="{{ route('garage.sales.show', $r->id) }}">{{ $r->invoice_number ?? ('#'.$r->id) }}</a>
                            @else
                                {{ $r->invoice_number ?? '-' }}
                            @endif
                        </td>
                        <td><span class="badge bg-secondary">{{ str_replace('_',' ', (string)($r->status ?? '')) }}</span></td>
                        <td class="text-end">PKR {{ number_format((float)($r->cash_amount ?? 0), 2) }}</td>
                        <td class="text-end">PKR {{ number_format((float)($r->card_amount ?? 0), 2) }}</td>
                        <td class="text-end">PKR {{ number_format((float)($r->online_amount ?? 0), 2) }}</td>
                        <td class="text-end fw-semibold">PKR {{ number_format((float)($r->grand_total ?? 0), 2) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No sales found for selected dates.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection