@extends('layouts.app')
@section('title', 'Close Cash Shift #' . $cashShift->id)
@section('content')

@php
    $expected = $cashShift->expectedCash();
    $threshold = \App\Models\CashShift::VARIANCE_THRESHOLD;
@endphp

<div class="max-w-3xl mx-auto">
    <div class="mb-3">
        <a href="{{ route('cash-recon.show', $cashShift) }}" class="text-xs text-emerald-600 hover:underline">← Back to Shift #{{ $cashShift->id }}</a>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h1 class="text-lg font-bold text-gray-900 mb-1">Close Shift #{{ $cashShift->id }}</h1>
        <p class="text-xs text-gray-500 mb-5">
            Count the physical cash in the till and enter the total below. The variance vs. expected will compute live.
        </p>

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                <ul class="text-xs text-red-700 list-disc pl-5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="POST" action="{{ route('cash-recon.close', $cashShift) }}">
            @csrf

            {{-- Reconciliation table --}}
            <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden mb-4" id="reconTable">
                <tbody class="divide-y divide-gray-100">
                    <tr>
                        <td class="px-4 py-2.5 text-gray-600">Opening float</td>
                        <td class="px-4 py-2.5 text-right font-mono" data-value="{{ $cashShift->opening_float }}">{{ number_format($cashShift->opening_float, 2) }}</td>
                    </tr>
                    <tr>
                        <td class="px-4 py-2.5 text-gray-600">+ Cash collected</td>
                        <td class="px-4 py-2.5 text-right font-mono text-emerald-700" data-value="{{ $cashShift->cashCollected() }}">{{ number_format($cashShift->cashCollected(), 2) }}</td>
                    </tr>
                    <tr class="bg-emerald-50/40">
                        <td class="px-4 py-2.5 font-bold text-gray-800">Expected in till</td>
                        <td class="px-4 py-2.5 text-right font-mono font-bold text-emerald-700" id="expectedCell" data-value="{{ $expected }}">{{ number_format($expected, 2) }}</td>
                    </tr>
                    <tr>
                        <td class="px-4 py-3 text-gray-600 font-semibold">Counted (physical) <span class="text-red-500">*</span></td>
                        <td class="px-4 py-3 text-right">
                            <input type="number" name="closing_count" id="countedInput" step="0.01" min="0"
                                   value="{{ old('closing_count') }}" required
                                   class="form-input text-right font-mono w-40 inline-block"
                                   placeholder="0.00"
                                   oninput="updateVariance()">
                        </td>
                    </tr>
                    <tr id="varianceRow" class="bg-gray-50">
                        <td class="px-4 py-3 font-bold text-gray-800">Variance</td>
                        <td class="px-4 py-3 text-right">
                            <span id="varianceCell" class="font-mono font-bold text-base text-gray-700">—</span>
                            <span id="varianceFlag" class="ml-2 text-[10px] uppercase font-bold"></span>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="bg-amber-50 border border-amber-200 rounded p-3 mb-4 text-xs text-amber-800">
                <p class="font-semibold mb-1">Threshold rule:</p>
                <p>
                    Variance up to <strong>±KES {{ number_format($threshold, 2) }}</strong> auto-accepts and closes the shift immediately.
                    Beyond that, the shift goes to Hospital Admin for approval before final close.
                </p>
            </div>

            {{-- Variance notes --}}
            <div class="mb-5">
                <label class="form-label">Variance Notes (required if variance ≠ 0)</label>
                <textarea name="variance_notes" rows="3" class="form-input" placeholder="Explain any discrepancy. e.g., 'Patient #123 paid 200 in 50-shilling coins; counted twice to be sure.'">{{ old('variance_notes') }}</textarea>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="btn-success px-6 py-2.5 text-sm">Submit &amp; Close Shift</button>
                <a href="{{ route('cash-recon.show', $cashShift) }}" class="btn-secondary px-5 py-2.5 text-sm">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const expected = parseFloat({{ $expected }});
const threshold = parseFloat({{ $threshold }});
function updateVariance() {
    const counted = parseFloat(document.getElementById('countedInput').value);
    const cell = document.getElementById('varianceCell');
    const flag = document.getElementById('varianceFlag');
    const row  = document.getElementById('varianceRow');
    if (isNaN(counted)) {
        cell.textContent = '—';
        flag.textContent = '';
        cell.className = 'font-mono font-bold text-base text-gray-700';
        row.className = 'bg-gray-50';
        return;
    }
    const variance = counted - expected;
    const sign = variance >= 0 ? '+' : '';
    cell.textContent = sign + variance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    if (Math.abs(variance) < 0.01) {
        cell.className = 'font-mono font-bold text-base text-gray-700';
        flag.textContent = 'CLEAN';
        flag.className = 'ml-2 text-[10px] uppercase font-bold text-green-600';
        row.className = 'bg-gray-50';
    } else if (Math.abs(variance) <= threshold) {
        cell.className = 'font-mono font-bold text-base ' + (variance < 0 ? 'text-red-600' : 'text-blue-600');
        flag.textContent = 'WITHIN THRESHOLD · AUTO-ACCEPT';
        flag.className = 'ml-2 text-[10px] uppercase font-bold text-amber-600';
        row.className = 'bg-amber-50/50';
    } else {
        cell.className = 'font-mono font-bold text-base ' + (variance < 0 ? 'text-red-600' : 'text-blue-600');
        flag.textContent = 'EXCEEDS THRESHOLD · NEEDS ADMIN';
        flag.className = 'ml-2 text-[10px] uppercase font-bold text-red-700';
        row.className = 'bg-red-50/40';
    }
}
document.addEventListener('DOMContentLoaded', updateVariance);
</script>
@endpush
@endsection