@extends('layouts.app')

@section('title', 'Cash & Shift Variance')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Cash & Shift Variance')

@section('content')
@php
    $varColor = function ($v) {
        if ($v === null) return 'text-gray-300';
        if ($v > 0.009)  return 'text-green-600';
        if ($v < -0.009) return 'text-red-600';
        return 'text-gray-500';
    };
    $varText = function ($v) {
        if ($v === null) return '—';
        $sign = $v > 0 ? '+' : ($v < 0 ? '−' : '');
        return $sign . '₱' . number_format(abs($v), 2);
    };
@endphp

@include('reports._filter', [
    'active' => 'reports.cash-variance', 'mode' => 'range', 'from' => $from, 'to' => $to,
    'title' => 'Cash Handling & Shift Variance',
    'subtitle' => 'Shifts started ' . \Carbon\Carbon::parse($from)->format('M j') . ' – ' . \Carbon\Carbon::parse($to)->format('M j, Y'),
])

{{-- Summary tiles --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Net Variance</p>
        <p class="font-bold text-2xl mt-1 {{ $varColor($netVariance) }}">{{ $varText($netVariance) }}</p>
        <p class="text-gray-400 text-xs mt-1">over {{ $shiftCount }} shift{{ $shiftCount !== 1 ? 's' : '' }}</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Total Over</p>
        <p class="text-green-600 font-bold text-2xl mt-1">₱{{ number_format($totalOver, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">cash surpluses</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Total Short</p>
        <p class="text-red-600 font-bold text-2xl mt-1">₱{{ number_format(abs($totalShort), 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">cash shortfalls</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Unreconciled</p>
        <p class="font-bold text-2xl mt-1 {{ $flagged > 0 ? 'text-amber-600' : 'text-gray-800' }}">{{ $flagged }}</p>
        <p class="text-gray-400 text-xs mt-1">control gap · {{ $overThreshold }} over ₱{{ number_format($threshold, 0) }}</p>
    </div>
</div>

{{-- By cashier --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden mb-5">
    <div class="px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-700">By Cashier</h2>
        <p class="text-xs text-gray-400 mt-0.5">Cumulative over/short per staff member — sorted by magnitude</p>
    </div>
    @if(empty($byCashier))
    <p class="px-5 py-8 text-center text-gray-300 text-sm">No shifts in this period.</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[560px]">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Cashier</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Shifts</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Counted</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Unrecon.</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Net Variance</th>
                </tr>
            </thead>
            <tbody>
                @foreach($byCashier as $c)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3 font-medium text-gray-700">{{ $c['name'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $c['shifts'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $c['counted'] }}</td>
                    <td class="px-4 py-3 text-right {{ $c['no_count'] > 0 ? 'text-amber-600 font-semibold' : 'text-gray-400' }}">{{ $c['no_count'] }}</td>
                    <td class="px-5 py-3 text-right font-bold {{ $varColor($c['variance']) }}">{{ $varText($c['variance']) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

{{-- Detail --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-700">Shift Detail</h2>
        <p class="text-xs text-gray-400 mt-0.5">Most recent first · variance = counted closing − (opening + cash received)</p>
    </div>
    @if(empty($rows))
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No shifts started in this period.</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[760px]">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Shift</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Cashier</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Opening</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Closing</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Variance</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors {{ $row['no_count'] ? 'bg-amber-50/40' : '' }}">
                    <td class="px-5 py-3">
                        <p class="text-gray-700">{{ $row['started_at']->format('M j, Y') }}</p>
                        <p class="text-[10px] text-gray-400">{{ $row['type'] }} · {{ $row['started_at']->format('g:i A') }}{{ $row['ended_at'] ? '–' . $row['ended_at']->format('g:i A') : '' }}</p>
                    </td>
                    <td class="px-4 py-3 text-gray-600">{{ $row['cashier'] }}</td>
                    <td class="px-4 py-3">
                        @if($row['no_count'])
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-50 text-amber-700 border-[0.5px] border-amber-200">Unreconciled</span>
                        @else
                        <span class="text-xs text-gray-500 capitalize">{{ $row['status'] }}</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['opening'] !== null ? '₱' . number_format($row['opening'], 2) : '—' }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['closing'] !== null ? '₱' . number_format($row['closing'], 2) : '—' }}</td>
                    <td class="px-5 py-3 text-right font-bold {{ $varColor($row['variance']) }}">{{ $varText($row['variance']) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

@endsection