@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold text-slate-900">Dashboard Kasir</h2>
                <p class="text-sm text-slate-500">Kelola open saldo dan closing harian.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <x-button href="{{ route('orders.index') }}">Buat Order</x-button>
                <x-button href="{{ route('orders.all') }}" variant="secondary">Lihat Semua Order</x-button>
            </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
            <x-card>
                <p class="text-sm text-slate-500">Open Saldo Hari Ini</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">
                    {{ $latestShift?->open_amount ? format_rupiah($latestShift->open_amount) : '-' }}
                </p>
                <p class="mt-1 text-xs text-slate-500">{{ now()->format('d-m-Y') }}</p>
            </x-card>
            <x-card>
                <p class="text-sm text-slate-500">Closing Hari Ini</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">
                    {{ $latestShift?->closing_amount ? format_rupiah($latestShift->closing_amount) : '-' }}
                </p>
                <p class="mt-1 text-xs text-slate-500">{{ now()->format('d-m-Y') }}</p>
            </x-card>
        </div>

        <div class="flex flex-wrap gap-3">
            @if(!$activeShift)
                <x-button type="button" id="open-shift-btn">Open Saldo</x-button>
            @else
                <x-button type="button" id="close-shift-btn">Closing</x-button>
            @endif
        </div>
    </div>

    <div id="open-shift-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/60 p-4">
        <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-900">Open Saldo</h3>
                <button type="button" id="close-open-modal" class="text-slate-400 hover:text-slate-600">&times;</button>
            </div>
            <form method="post" action="{{ route('cashier_shifts.open') }}" class="mt-4 grid gap-4">
                @csrf
                <div>
                    <label for="open-amount-display" class="mb-2 block text-sm font-semibold text-slate-700">Jumlah Open Saldo</label>
                    <input id="open-amount-display" type="text" placeholder="Rp 0" class="block w-full rounded-lg border px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-amber-400 focus:ring-amber-200 border-amber-100">
                </div>
                <input type="hidden" name="open_amount" id="open-amount" value="">
                <x-input name="notes" label="Catatan (opsional)" />
                <div class="flex justify-end">
                    <x-button type="submit">Simpan</x-button>
                </div>
            </form>
        </div>
    </div>

    <div id="close-shift-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/60 p-4">
        <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-900">Closing Saldo</h3>
                <button type="button" id="close-close-modal" class="text-slate-400 hover:text-slate-600">&times;</button>
            </div>
            <form method="post" action="{{ route('cashier_shifts.close') }}" class="mt-4 grid gap-4">
                @csrf
                <div>
                    <label for="closing-amount-display" class="mb-2 block text-sm font-semibold text-slate-700">Jumlah Closing</label>
                    <input id="closing-amount-display" type="text" placeholder="Rp 0" class="block w-full rounded-lg border px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-amber-400 focus:ring-amber-200 border-amber-100">
                </div>
                <input type="hidden" name="closing_amount" id="closing-amount" value="">
                <x-input name="notes" label="Catatan (opsional)" />
                <div class="flex justify-end">
                    <x-button type="submit">Simpan</x-button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const openShiftBtn = document.getElementById('open-shift-btn');
        const closeShiftBtn = document.getElementById('close-shift-btn');
        const openModal = document.getElementById('open-shift-modal');
        const closeModal = document.getElementById('close-shift-modal');
        const closeOpenModal = document.getElementById('close-open-modal');
        const closeCloseModal = document.getElementById('close-close-modal');

        function toggleModal(modal, show) {
            if (!modal) return;
            modal.classList.toggle('hidden', !show);
            modal.classList.toggle('flex', show);
        }

        openShiftBtn?.addEventListener('click', () => toggleModal(openModal, true));
        closeShiftBtn?.addEventListener('click', () => toggleModal(closeModal, true));
        closeOpenModal?.addEventListener('click', () => toggleModal(openModal, false));
        closeCloseModal?.addEventListener('click', () => toggleModal(closeModal, false));
        openModal?.addEventListener('click', (event) => {
            if (event.target === openModal) toggleModal(openModal, false);
        });
        closeModal?.addEventListener('click', (event) => {
            if (event.target === closeModal) toggleModal(closeModal, false);
        });

        function formatRupiahInput(displayEl, hiddenEl) {
            if (!displayEl || !hiddenEl) return;
            const raw = displayEl.value.replace(/[^0-9]/g, '');
            hiddenEl.value = raw;
            const formatted = raw ? new Intl.NumberFormat('id-ID').format(parseInt(raw, 10)) : '';
            displayEl.value = formatted ? `Rp ${formatted}` : '';
        }

        const openDisplay = document.getElementById('open-amount-display');
        const openHidden = document.getElementById('open-amount');
        const closingDisplay = document.getElementById('closing-amount-display');
        const closingHidden = document.getElementById('closing-amount');

        openDisplay?.addEventListener('input', () => formatRupiahInput(openDisplay, openHidden));
        closingDisplay?.addEventListener('input', () => formatRupiahInput(closingDisplay, closingHidden));
    </script>
@endsection
