@extends('layouts.app')
@section('title', 'Cashier Shifts')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Cashier Shifts</h1>
            <p class="text-sm text-ink-muted">Open your shift with opening cash. Sales totals and items are calculated automatically.</p>
        </div>
        <div class="flex items-center gap-2">
            @if (!auth()->user()->activeShift)
                @can('shifts.manage')
                <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-open-shift')"><i data-lucide="play" class="w-3.5 h-3.5"></i> Open shift</button>
                @endcan
            @else
                <form method="POST" action="{{ route('cashier.shifts.close', $activeShift) }}" onsubmit="return confirm('Close this shift now? Sales totals will be saved and this shift will no longer accept sales.');">
                    @csrf
                    <button type="submit" class="btn-danger btn-sm"><i data-lucide="square" class="w-3.5 h-3.5"></i> Close shift</button>
                </form>
            @endif
        </div>
    </div>

    @if ($activeShift && $summary)
        <div class="card card-pad space-y-5">
            <div class="flex items-center justify-between flex-wrap gap-2">
                <div>
                    <h2 class="font-display font-bold">Current shift summary</h2>
                    <p class="text-xs text-ink-muted">Shift #{{ $activeShift->id }} · opened {{ $activeShift->opened_at->format('d M, H:i') }} · {{ $summary['orders_count'] }} order(s)/tab(s)</p>
                </div>
                <a href="{{ route('cashier.shifts.print', $activeShift) }}" target="_blank" class="btn-secondary btn-sm"><i data-lucide="printer" class="w-3.5 h-3.5"></i> Print / PDF</a>
            </div>

            <div class="grid grid-cols-2 xl:grid-cols-5 gap-3">
                <div class="rounded-lg bg-ink/5 p-3"><p class="text-xs text-ink-muted">Opening cash</p><p class="text-lg font-bold">{{ number_format($summary['opening_float'], 2) }}</p></div>
                <div class="rounded-lg bg-ink/5 p-3"><p class="text-xs text-ink-muted">Cash sales</p><p class="text-lg font-bold">{{ number_format($summary['cash_sales'], 2) }}</p></div>
                <div class="rounded-lg bg-ink/5 p-3"><p class="text-xs text-ink-muted">M-Pesa sales</p><p class="text-lg font-bold">{{ number_format($summary['mpesa_sales'], 2) }}</p></div>
                <div class="rounded-lg bg-ink/5 p-3"><p class="text-xs text-ink-muted">Credit sales</p><p class="text-lg font-bold">{{ number_format($summary['credit_sales'], 2) }}</p></div>
                <div class="rounded-lg bg-primary/10 p-3"><p class="text-xs text-ink-muted">Total sales</p><p class="text-lg font-bold">{{ number_format($summary['total_sales'], 2) }}</p></div>
            </div>

            <div>
                <div class="flex items-center justify-between gap-3 mb-2">
                    <h3 class="font-semibold">Products sold</h3>
                    <span class="text-xs text-ink-muted">Quantity and sales amount</span>
                </div>
                <div class="overflow-x-auto">
                    <table class="data-table">
                        <thead><tr><th>Product</th><th class="text-right">Quantity</th><th class="text-right">Amount</th></tr></thead>
                        <tbody>
                            @forelse ($summary['products'] as $name => $row)
                                <tr><td>{{ $name }}</td><td class="text-right">{{ number_format($row['qty'], 2) }}</td><td class="text-right">{{ number_format($row['total'], 2) }}</td></tr>
                            @empty
                                <tr><td colspan="3" class="text-center text-ink-muted py-6">No products sold on this shift yet.</td></tr>
                            @endforelse
                        </tbody>
                        <tfoot><tr><th>Total</th><th class="text-right">{{ number_format(collect($summary['products'])->sum('qty'), 2) }}</th><th class="text-right">{{ number_format(collect($summary['products'])->sum('total'), 2) }}</th></tr></tfoot>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Cashier</th><th>Opened</th><th>Closed</th><th class="text-right">Opening Cash</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($shifts as $shift)
                    <tr>
                        <td class="font-medium">{{ $shift->cashier->name }}</td>
                        <td>{{ $shift->opened_at->format('d M, H:i') }}</td>
                        <td>{{ $shift->closed_at?->format('d M, H:i') ?? '—' }}</td>
                        <td class="text-right">{{ number_format($shift->opening_float, 2) }}</td>
                        <td>
                            <x-badge color="{{ ['open' => 'emerald', 'closed' => 'amber', 'reviewed' => 'teal'][$shift->status] ?? 'slate' }}">{{ ucfirst($shift->status) }}</x-badge>
                        </td>
                        <td class="text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('cashier.shifts.print', $shift) }}" target="_blank" class="btn-ghost btn-sm" title="Print or save this shift as PDF"><i data-lucide="printer" class="w-3.5 h-3.5"></i> Print / PDF</a>
                                @if ($shift->status === 'closed' && auth()->user()->can('shifts.approve'))
                                    <form method="POST" action="{{ route('cashier.shifts.approve', $shift) }}">
                                        @csrf
                                        <button class="btn-ghost btn-sm">Review & approve</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-ink-muted py-8">No shifts recorded yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $shifts->links() }}

    <x-modal id="open-shift" title="Open shift">
        <form method="POST" action="{{ route('cashier.shifts.open') }}" id="open-shift-form" class="space-y-4">
            @csrf
            <div>
                <label class="field-label">Opening float ({{ config('pos.company.currency_symbol') }})</label>
                <input type="number" step="0.01" name="opening_float" value="{{ config('pos.shift.default_float') }}" class="input">
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="open-shift-form" class="btn-primary">Open shift</button>
        </x-slot:footer>
    </x-modal>


</div>
@endsection