@extends('layouts.app')
@section('title', 'Buka Sesi Kasir')
@section('page-title', 'Buka Sesi Kasir')

@section('content')
<div class="max-w-md mx-auto mt-8">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-8 text-center">
            <div class="text-5xl mb-3">🏪</div>
            <h2 class="text-xl font-bold text-white">Mulai Sesi Kasir</h2>
            <p class="text-blue-100 text-sm mt-1">Masukkan jumlah uang tunai awal di laci kasir</p>
        </div>
        <div class="p-6">
            @if($otherActiveSession)
                <div class="text-center py-4">
                    <div class="text-4xl mb-4">⚠️</div>
                    <h3 class="text-lg font-bold text-slate-800">Sesi Kasir Sudah Ada</h3>
                    <p class="text-sm text-slate-500 mt-2">
                        Maaf, saat ini kasir <strong>{{ $otherActiveSession->user->name }}</strong> sedang menggunakan sistem kasir. 
                        Satu sesi harus ditutup sebelum sesi baru dapat dibuka.
                    </p>
                    <div class="mt-8 flex flex-col gap-2">
                        <a href="{{ route('dashboard') }}" 
                            class="w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition">
                            Kembali ke Dashboard
                        </a>
                    </div>
                </div>
            @else
                @if(session('warning'))
                <div class="mb-4 px-4 py-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-800 text-sm">
                    ⚠️ {{ session('warning') }}
                </div>
                @endif

                @if(session('error'))
                <div class="mb-4 px-4 py-3 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm">
                    ❌ {{ session('error') }}
                </div>
                @endif

                <form method="POST" action="{{ route('pos.store-session') }}">
                    @csrf
                    <div class="mb-5">
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Uang Tunai Awal (Modal Kas)</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 font-medium text-sm">Rp</span>
                            <input type="number" name="opening_cash" id="opening_cash" min="0" value="0"
                                class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-xl text-lg font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 @error('opening_cash') border-red-500 @enderror"
                                placeholder="0" required>
                        </div>
                        @error('opening_cash')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-xs text-slate-500 mt-2">Jumlah uang yang ada di laci kasir saat memulai shift.</p>
                    </div>

                    {{-- Quick amount --}}
                    <div class="grid grid-cols-3 gap-2 mb-5">
                        @foreach([0, 100000, 200000, 300000, 500000, 1000000] as $amt)
                        <button type="button" onclick="document.getElementById('opening_cash').value = {{ $amt }}"
                            class="py-2 text-xs font-medium bg-slate-100 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-200 border border-slate-200 rounded-lg transition">
                            {{ $amt == 0 ? 'Rp 0' : 'Rp ' . number_format($amt, 0, ',', '.') }}
                        </button>
                        @endforeach
                    </div>

                    <button type="submit"
                        class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl transition shadow-lg shadow-blue-500/30">
                        🚀 Buka Sesi Kasir
                    </button>
                </form>
            @endif
        </div>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('dashboard') }}" class="text-sm text-slate-500 hover:text-slate-700">
            ← Kembali ke Dashboard
        </a>
    </div>
</div>

{{-- PREMIUM LOADING OVERLAY --}}
<div id="loadingOverlay" class="fixed inset-0 z-[200] flex flex-col items-center justify-center bg-slate-900 hidden transition-all duration-500">
    <div class="relative">
        <div class="w-24 h-24 bg-blue-500 rounded-3xl rotate-45 flex items-center justify-center shadow-2xl shadow-blue-500/40 animate-pulse">
            <span class="text-white text-5xl font-black -rotate-45">P</span>
        </div>
        <div class="absolute -inset-4 border-t-4 border-l-4 border-blue-500 rounded-full animate-spin"></div>
    </div>
    <div class="mt-12 text-center">
        <h2 class="text-white text-2xl font-black tracking-widest uppercase animate-bounce">Memproses</h2>
        <p class="text-slate-500 text-sm mt-2 tracking-widest font-mono">SINKRONISASI DATA...</p>
    </div>
    <div class="w-64 h-1 bg-slate-800 rounded-full mt-8 overflow-hidden">
        <div class="h-full bg-blue-500 animate-progress"></div>
    </div>
</div>
@push('scripts')
<script>
    function showLoading(show) {
        document.getElementById('loadingOverlay').classList.toggle('hidden', !show);
    }

    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', () => showLoading(true));
    }

    window.addEventListener('DOMContentLoaded', () => {
        showLoading(true);
        setTimeout(() => {
            showLoading(false);
        }, 1500);
    });
</script>
@endpush
@endsection