@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 with a float, close with an actual cash count — variance is flagged 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
                @can('shifts.manage')
                <button class="btn-danger btn-sm" x-on:click="$dispatch('open-modal-close-shift')"><i data-lucide="square" class="w-3.5 h-3.5"></i> Close my shift</button>
                @endcan
            @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">My shift — live progress</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) so far</p>
                </div>
                <span class="text-lg font-bold">{{ config('pos.company.currency_symbol') }} {{ number_format($summary['total_sales'], 2) }} <span class="text-xs font-normal text-ink-muted">total sales</span></span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                    <p class="text-[11px] font-bold uppercase tracking-wide text-ink-faint mb-2">Payments received, by method</p>
                    <div class="space-y-1.5">
                        <div class="flex items-center justify-between text-sm bg-ink/5 rounded-lg px-3 py-2">
                            <span class="font-medium">Cash in drawer (float + cash sales − payouts)</span>
                            <span class="font-bold">{{ number_format($summary['cash_in_drawer'], 2) }}</span>
                        </div>
                        @forelse ($summary['by_method'] as $method => $amount)
                            <div class="flex items-center justify-between text-sm px-3 py-1.5">
                                <span>{{ $method }}</span>
                                <span class="font-semibold">{{ number_format($amount, 2) }}</span>
                            </div>
                        @empty
                            <p class="text-sm text-ink-muted px-3 py-1.5">No payments recorded yet this shift.</p>
                        @endforelse
                    </div>
                </div>

                <div>
                    <p class="text-[11px] font-bold uppercase tracking-wide text-ink-faint mb-2">Products & services sold this shift</p>
                    <div class="max-h-64 overflow-y-auto space-y-1">
                        @forelse ($summary['products'] as $name => $row)
                            <div class="flex items-center justify-between text-sm px-3 py-1.5 border-b border-border/60">
                                <span>{{ $name }} <span class="text-ink-faint">× {{ $row['qty'] }}</span></span>
                                <span class="font-medium">{{ number_format($row['total'], 2) }}</span>
                            </div>
                        @empty
                            <p class="text-sm text-ink-muted px-3 py-1.5">Nothing sold yet this shift.</p>
                        @endforelse
                    </div>
                </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">Float</th><th class="text-right">Expected</th><th class="text-right">Actual</th><th class="text-right">Variance</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 class="text-right">{{ number_format($shift->expected_cash, 2) }}</td>
                        <td class="text-right">{{ $shift->actual_cash !== null ? number_format($shift->actual_cash, 2) : '—' }}</td>
                        <td class="text-right {{ $shift->variance < 0 ? 'text-danger' : ($shift->variance > 0 ? 'text-success' : '') }} font-semibold">
                            {{ $shift->variance !== null ? number_format($shift->variance, 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">
                            @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
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="9" 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>

    <x-modal id="close-shift" title="Close shift">
        <form method="POST" action="{{ route('cashier.shifts.close', auth()->user()->activeShift ?? 0) }}" id="close-shift-form" class="space-y-4">
            @csrf
            <div>
                <label class="field-label">Actual cash counted ({{ config('pos.company.currency_symbol') }})</label>
                <input type="number" step="0.01" name="actual_cash" class="input" required>
            </div>
            <p class="text-xs text-ink-muted">Expected cash is computed automatically from sales, expenses and withdrawals logged on this shift.</p>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="close-shift-form" class="btn-danger">Close shift</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection