@extends('layouts.app')
@section('title', 'Cash Recon')
@section('content')

@php
    $isAdmin = auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin');
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Cash Recon</h1>
        <p class="text-xs text-gray-400">Daily cash reconciliation · {{ now()->format('l, d M Y') }}</p>
    </div>
    <div class="flex items-center gap-2">
        @if($activeShifts->isEmpty())
            <a href="{{ route('cash-recon.open.form') }}" class="btn-success px-5 py-2.5 text-sm flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Open New Shift
            </a>
        @else
            <a href="{{ route('cash-recon.show', $activeShifts->first()) }}" class="btn-primary px-5 py-2.5 text-sm flex items-center gap-2">
                Continue Active Shift →
            </a>
        @endif
    </div>
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 rounded-lg px-3 py-2 mb-3 text-xs text-green-800">{{ session('success') }}</div>
@endif
@if(session('warning'))
<div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-3 text-xs text-amber-800">{{ session('warning') }}</div>
@endif

{{-- Today summary line --}}
<div class="bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200 rounded-xl px-4 py-3 mb-4 flex flex-wrap items-center gap-6 text-sm">
    <div>
        <p class="text-[10px] text-emerald-700 font-semibold uppercase tracking-wide">Today's Cash Collected (System)</p>
        <p class="text-xl font-bold text-emerald-700">KES {{ number_format($todayCashCollected, 2) }}</p>
    </div>
    <div class="flex-1 text-xs text-emerald-700/80">
        Sum of all cash payments recorded since 00:00 today across all shifts. This is the system's expected cash; counted physical cash should match.
    </div>
</div>

{{-- Tab strip --}}
<style>
.cr-tab-bar { display:flex; gap:8px; border-bottom:2px solid #e5e7eb; padding:0 4px; margin-bottom:0; }
.cr-tab     { padding:10px 22px; font-size:13px; font-weight:600; color:#64748b;
              background:#fff; border:1.5px solid #e2e8f0; border-bottom:none;
              border-radius:10px 10px 0 0; cursor:pointer; transition:all .15s;
              margin-bottom:-2px; display:inline-flex; align-items:center; gap:7px;
              text-decoration:none; }
.cr-tab:hover { border-color:#cbd5e1; color:#334155; }
.cr-tab.active { background:linear-gradient(135deg,#10b981,#059669); color:#fff;
                 border-color:transparent; box-shadow:0 3px 8px rgba(16,185,129,.25); }
.cr-tab .tc { font-size:11px; padding:1px 7px; border-radius:99px; font-weight:700;
              background:rgba(255,255,255,.28); }
.cr-tab:not(.active) .tc { background:#e2e8f0; color:#475569; }
.cr-tab .tc.warn { background:#f59e0b; color:#fff; }
</style>
<div class="cr-tab-bar">
    <a href="{{ route('cash-recon.index', ['tab' => 'active']) }}" class="cr-tab {{ $tab === 'active' ? 'active' : '' }}">
        Active Shifts <span class="tc">{{ $activeShifts->count() }}</span>
    </a>
    @if($isAdmin)
    <a href="{{ route('cash-recon.index', ['tab' => 'pending']) }}" class="cr-tab {{ $tab === 'pending' ? 'active' : '' }}">
        Pending Review <span class="tc {{ $pendingShifts->count() > 0 ? 'warn' : '' }}">{{ $pendingShifts->count() }}</span>
    </a>
    @endif
    <a href="{{ route('cash-recon.index', ['tab' => 'history']) }}" class="cr-tab {{ $tab === 'history' ? 'active' : '' }}">
        History <span class="tc">{{ $historyShifts->total() }}</span>
    </a>
</div>

{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- ACTIVE SHIFTS TAB --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
@if($tab === 'active')
<div class="bg-white rounded-b-xl border border-t-0 shadow-sm overflow-hidden">
    @if($activeShifts->isEmpty())
        <div class="text-center py-12 px-4">
            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm text-gray-500 mb-1">No active shift right now.</p>
            <p class="text-xs text-gray-400 mb-4">Open a new shift to start tracking cash collections.</p>
            <a href="{{ route('cash-recon.open.form') }}" class="inline-block btn-success px-5 py-2 text-sm">+ Open New Shift</a>
        </div>
    @else
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="table-header">Shift #</th>
                    <th class="table-header">Date · Label</th>
                    <th class="table-header">Opened By</th>
                    <th class="table-header">Opened At</th>
                    <th class="table-header text-right">Opening Float</th>
                    <th class="table-header text-right">Expected Now</th>
                    <th class="table-header"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($activeShifts as $s)
                <tr class="hover:bg-emerald-50/30">
                    <td class="table-cell font-mono text-xs">#{{ $s->id }}</td>
                    <td class="table-cell text-xs">
                        {{ $s->shift_date->format('d M') }}
                        <span class="ml-1 inline-block px-2 py-0.5 text-[10px] uppercase font-semibold rounded bg-blue-50 text-blue-700">{{ $s->shift_label }}</span>
                    </td>
                    <td class="table-cell text-xs">{{ $s->openedBy->name ?? '—' }}</td>
                    <td class="table-cell text-xs">{{ $s->opened_at->format('H:i, d M') }}</td>
                    <td class="table-cell text-xs text-right font-mono">{{ number_format($s->opening_float, 2) }}</td>
                    <td class="table-cell text-xs text-right font-mono font-semibold text-emerald-700">{{ number_format($s->expectedCash(), 2) }}</td>
                    <td class="table-cell">
                        <a href="{{ route('cash-recon.show', $s) }}" class="text-xs text-emerald-600 font-medium">Open →</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>
@endif

{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- PENDING REVIEW TAB (admin only) --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
@if($tab === 'pending' && $isAdmin)
<div class="bg-white rounded-b-xl border border-t-0 shadow-sm overflow-hidden">
    @if($pendingShifts->isEmpty())
        <div class="text-center py-12 px-4">
            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm text-gray-500">No shifts pending approval. Variances under KES 200 auto-close.</p>
        </div>
    @else
        <table class="w-full">
            <thead class="bg-amber-50">
                <tr>
                    <th class="table-header">Shift #</th>
                    <th class="table-header">Date · Label</th>
                    <th class="table-header">Closed By</th>
                    <th class="table-header text-right">Expected</th>
                    <th class="table-header text-right">Counted</th>
                    <th class="table-header text-right">Variance</th>
                    <th class="table-header">Notes</th>
                    <th class="table-header"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($pendingShifts as $s)
                @php $v = $s->variance(); @endphp
                <tr class="hover:bg-amber-50/30">
                    <td class="table-cell font-mono text-xs">#{{ $s->id }}</td>
                    <td class="table-cell text-xs">
                        {{ $s->shift_date->format('d M') }} · {{ $s->shift_label }}
                    </td>
                    <td class="table-cell text-xs">{{ $s->closedBy->name ?? '—' }}<br><span class="text-[10px] text-gray-400">{{ $s->closed_at?->format('H:i, d M') }}</span></td>
                    <td class="table-cell text-xs text-right font-mono">{{ number_format($s->expectedCash(), 2) }}</td>
                    <td class="table-cell text-xs text-right font-mono">{{ number_format($s->closing_count, 2) }}</td>
                    <td class="table-cell text-xs text-right font-mono font-bold {{ $v < 0 ? 'text-red-600' : 'text-blue-600' }}">
                        {{ $v >= 0 ? '+' : '' }}{{ number_format($v, 2) }}
                    </td>
                    <td class="table-cell text-xs text-gray-600 max-w-[260px]"><span title="{{ $s->variance_notes }}" style="display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom">{{ $s->variance_notes ?: '—' }}</span></td>
                    <td class="table-cell">
                        <a href="{{ route('cash-recon.show', $s) }}" class="text-xs text-amber-700 font-bold">Review →</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>
@endif

{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- HISTORY TAB --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
@if($tab === 'history')
{{-- Date range filter --}}
<div class="bg-white border border-t-0 shadow-sm p-3">
    <form method="GET" class="flex flex-wrap items-end gap-2">
        <input type="hidden" name="tab" value="history">
        <div>
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">From</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-input text-xs w-36">
        </div>
        <div>
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">To</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-input text-xs w-36">
        </div>
        <button type="submit" class="btn-primary text-xs">Filter</button>
        @if(request('date_from') || request('date_to'))
            <a href="{{ route('cash-recon.index', ['tab' => 'history']) }}" class="btn-secondary text-xs">Clear</a>
        @endif
    </form>
</div>
<div class="bg-white rounded-b-xl border border-t-0 shadow-sm overflow-hidden">
    @if($historyShifts->isEmpty())
        <div class="text-center py-12 px-4 text-sm text-gray-400">No closed shifts {{ request('date_from') || request('date_to') ? 'in this range' : 'yet' }}.</div>
    @else
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="table-header">Shift #</th>
                    <th class="table-header">Date · Label</th>
                    <th class="table-header">Opened By</th>
                    <th class="table-header">Closed By</th>
                    <th class="table-header text-right">Expected</th>
                    <th class="table-header text-right">Counted</th>
                    <th class="table-header text-right">Variance</th>
                    <th class="table-header">Approval</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($historyShifts as $s)
                @php $v = $s->variance(); @endphp
                <tr class="hover:bg-gray-50">
                    <td class="table-cell">
                        <a href="{{ route('cash-recon.show', $s) }}" class="font-mono text-xs text-emerald-600 font-medium">#{{ $s->id }}</a>
                    </td>
                    <td class="table-cell text-xs">{{ $s->shift_date->format('d M Y') }} · {{ $s->shift_label }}</td>
                    <td class="table-cell text-xs">{{ $s->openedBy->name ?? '—' }}</td>
                    <td class="table-cell text-xs">{{ $s->closedBy->name ?? '—' }}</td>
                    <td class="table-cell text-xs text-right font-mono">{{ number_format($s->expectedCash(), 2) }}</td>
                    <td class="table-cell text-xs text-right font-mono">{{ number_format($s->closing_count, 2) }}</td>
                    <td class="table-cell text-xs text-right font-mono font-semibold {{ abs($v) < 0.01 ? 'text-gray-500' : ($v < 0 ? 'text-red-600' : 'text-blue-600') }}">
                        @if(abs($v) < 0.01) 0.00 @else {{ $v >= 0 ? '+' : '' }}{{ number_format($v, 2) }} @endif
                    </td>
                    <td class="table-cell text-xs">
                        @if($s->approved_at)
                            <span class="inline-block px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-[10px] font-semibold uppercase" title="Approved by {{ $s->approvedBy->name ?? '—' }} on {{ $s->approved_at->format('d M, H:i') }}">Admin Approved</span>
                        @elseif(abs($v) < 0.01)
                            <span class="text-[10px] text-gray-400">Clean close</span>
                        @else
                            <span class="text-[10px] text-gray-400">Auto-accepted</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($historyShifts->hasPages())
            <div class="px-4 py-3 border-t bg-gray-50">{{ $historyShifts->links() }}</div>
        @endif
    @endif
</div>
@endif

@endsection