@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Laporan Kas' }}" />

    @php
        $focusDate = $filterDate ? \Carbon\Carbon::parse($filterDate) : now();
        $focusMonthLabel = $focusDate->translatedFormat('F Y');
        $focusDayLabel = $focusDate->translatedFormat('d F Y');

        $kasKecil = (float) ($summary['kas_kecil'] ?? 0);
        $kasTunai = (float) ($summary['kas_tunai'] ?? 0);
        $kasBank = (float) ($summary['kas_bank'] ?? 0);

        $kasKecilBulanan = (float) ($summary['kas_kecil_bulanan'] ?? 0);
        $kasTunaiBulanan = (float) ($summary['kas_tunai_bulanan'] ?? 0);
        $kasBankBulanan = (float) ($summary['kas_bank_bulanan'] ?? 0);

        $kasKecilHarian = (float) ($summary['kas_kecil_harian'] ?? 0);
        $kasTunaiHarian = (float) ($summary['kas_tunai_harian'] ?? 0);
        $kasBankHarian = (float) ($summary['kas_bank_harian'] ?? 0);

        $totalSetoran = (float) ($summary['total_setoran'] ?? 0);
        $grandTotalKas = $kasKecil + $kasTunai + $kasBank;

        $formatRupiah = fn ($value) => 'Rp ' . number_format((float) $value, 0, ',', '.');

        $badgeBase = 'inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium ring-1';
    @endphp

    {{-- Header Insight --}}
    <div class="mb-6 rounded-2xl border border-brand-200 bg-brand-50 p-5 dark:border-brand-900/40 dark:bg-brand-900/10">
        <div class="flex items-start gap-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-500 text-white">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>

            <div class="flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white/90">Ringkasan Kas yang Lebih Mudah Dibaca</h4>
                    <span class="rounded-full bg-white/80 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-white/10 dark:text-white/70">
                        Fokus Tanggal: {{ $focusDayLabel }}
                    </span>
                    <span class="rounded-full bg-white/80 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-white/10 dark:text-white/70">
                        Fokus Bulan: {{ $focusMonthLabel }}
                    </span>
                </div>

                <p class="mt-2 text-sm text-gray-700 dark:text-white/70">
                    Tampilan ini menonjolkan <b>saldo saat ini</b>, lalu dipecah menjadi <b>bulanan</b> dan <b>harian</b>.
                    Setiap kartu juga diberi <b>label sumber dana</b> agar lebih cepat dipahami dari mana angka itu terbentuk.
                </p>

                <div class="mt-3 flex flex-wrap gap-2">
                    <span class="inline-flex items-center rounded-lg bg-white px-2.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                        Hijau = uang masuk dominan
                    </span>
                    <span class="inline-flex items-center rounded-lg bg-white px-2.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                        Merah = uang keluar / pengurang saldo
                    </span>
                    <span class="inline-flex items-center rounded-lg bg-white px-2.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-white/70 dark:ring-white/10">
                        Gunakan Log Mutasi untuk audit perpindahan kas
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Summary --}}
    <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Kas Saat Ini</div>
            <div class="mt-2 text-2xl font-bold text-gray-800 dark:text-white/90">{{ $formatRupiah($grandTotalKas) }}</div>
            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Gabungan Kas Kecil + Kas Tunai + Kas Bank
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Setoran Bulan Ini</div>
            <div class="mt-2 text-2xl font-bold text-gray-800 dark:text-white/90">{{ $formatRupiah($totalSetoran) }}</div>
            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Total kas yang disetor ke bank pada {{ $focusMonthLabel }}
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Fokus Harian</div>
            <div class="mt-2 text-2xl font-bold text-gray-800 dark:text-white/90">{{ $focusDate->format('d') }}</div>
            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Data harian mengikuti tanggal filter aktif
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Fokus Bulanan</div>
            <div class="mt-2 text-xl font-bold text-gray-800 dark:text-white/90">{{ $focusMonthLabel }}</div>
            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Ringkasan bulanan mengikuti bulan dari tanggal filter
            </div>
        </div>
    </div>

    {{-- Action Buttons --}}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div class="flex flex-wrap gap-2">
            <button
                type="button"
                onclick="openModalDialog('petty')"
                class="inline-flex items-center gap-2 rounded-lg bg-success-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-success-600 transition-colors"
            >
                Deposit Kas Kecil
            </button>

            <button
                type="button"
                onclick="openModalDialog('cash')"
                class="inline-flex items-center gap-2 rounded-lg bg-purple-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-purple-600 transition-colors"
            >
                Deposit Kas Tunai
            </button>

            <button
                type="button"
                onclick="openModalDialog('bank')"
                class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600 transition-colors"
            >
                Deposit Kas Bank
            </button>

            <button
                type="button"
                onclick="openMutationDialog()"
                class="inline-flex items-center gap-2 rounded-lg bg-warning-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-warning-600 transition-colors"
            >
                Buat Mutasi
            </button>
        </div>

        <a
            href="{{ route('finance.mutations.index') }}"
            class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-black transition-colors dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
        >
            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
            Log Mutasi
        </a>
    </div>

    {{-- Filter --}}
    <div class="mb-6 flex flex-wrap items-end gap-3">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <x-form.date-picker
                name="date"
                label="Filter Tanggal"
                placeholder="Pilih tanggal"
                :defaultDate="$filterDate"
            />
            <button type="submit" class="h-11 rounded-lg bg-brand-500 px-4 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600 transition-colors" title="Terapkan filter">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                </svg>
            </button>
            <a href="{{ route('finance.cash') }}" class="h-11 flex items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">
                Reset
            </a>
        </form>
    </div>

    {{-- Main Account Cards --}}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-3">
        {{-- Kas Kecil --}}
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Kas Kecil</div>
                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Dipakai untuk pengeluaran operasional</div>
                </div>
                <div class="flex size-12 items-center justify-center rounded-xl bg-pink-50 dark:bg-pink-500/10">
                    <svg class="size-6 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>

            <div class="mt-4">
                <div class="text-xs text-gray-500 dark:text-gray-400">Saldo Saat Ini</div>
                <div class="mt-1 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasKecil) }}</div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3">
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Bulanan</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasKecilBulanan) }}</div>
                </div>
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Harian</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasKecilHarian) }}</div>
                </div>
            </div>

            <div class="mt-4">
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Sumber Dana / Pengaruh</div>
                <div class="flex flex-wrap gap-2">
                    <span class="{{ $badgeBase }} bg-success-50 text-success-700 ring-success-200 dark:bg-success-500/10 dark:text-success-300 dark:ring-success-500/20">Modal/Deposit</span>
                    <span class="{{ $badgeBase }} bg-brand-50 text-brand-700 ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">Mutasi Masuk</span>
                    <span class="{{ $badgeBase }} bg-error-50 text-error-700 ring-error-200 dark:bg-error-500/10 dark:text-error-300 dark:ring-error-500/20">Pengeluaran</span>
                </div>
            </div>
        </div>

        {{-- Kas Tunai --}}
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Kas Tunai</div>
                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Pembayaran cash dan arus tunai operasional</div>
                </div>
                <div class="flex size-12 items-center justify-center rounded-xl bg-purple-50 dark:bg-purple-500/10">
                    <svg class="size-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>

            <div class="mt-4">
                <div class="text-xs text-gray-500 dark:text-gray-400">Saldo Saat Ini</div>
                <div class="mt-1 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasTunai) }}</div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3">
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Bulanan</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasTunaiBulanan) }}</div>
                </div>
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Harian</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasTunaiHarian) }}</div>
                </div>
            </div>

            <div class="mt-4">
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Sumber Dana / Pengaruh</div>
                <div class="flex flex-wrap gap-2">
                    <span class="{{ $badgeBase }} bg-success-50 text-success-700 ring-success-200 dark:bg-success-500/10 dark:text-success-300 dark:ring-success-500/20">Pembayaran Cash</span>
                    <span class="{{ $badgeBase }} bg-brand-50 text-brand-700 ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">Mutasi Masuk</span>
                    <span class="{{ $badgeBase }} bg-indigo-50 text-indigo-700 ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20">Modal Tunai</span>
                    <span class="{{ $badgeBase }} bg-error-50 text-error-700 ring-error-200 dark:bg-error-500/10 dark:text-error-300 dark:ring-error-500/20">Setoran Bank</span>
                    <span class="{{ $badgeBase }} bg-error-50 text-error-700 ring-error-200 dark:bg-error-500/10 dark:text-error-300 dark:ring-error-500/20">Bayar Supplier</span>
                </div>
            </div>
        </div>

        {{-- Kas Bank --}}
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Kas Bank</div>
                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Transfer, e-wallet, dan setoran masuk bank</div>
                </div>
                <div class="flex size-12 items-center justify-center rounded-xl bg-cyan-50 dark:bg-cyan-500/10">
                    <svg class="size-6 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                </div>
            </div>

            <div class="mt-4">
                <div class="text-xs text-gray-500 dark:text-gray-400">Saldo Saat Ini</div>
                <div class="mt-1 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasBank) }}</div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3">
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Bulanan</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasBankBulanan) }}</div>
                </div>
                <div class="rounded-xl bg-gray-50 p-3 dark:bg-white/[0.04]">
                    <div class="text-xs text-gray-500 dark:text-gray-400">Harian</div>
                    <div class="mt-1 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $formatRupiah($kasBankHarian) }}</div>
                </div>
            </div>

            <div class="mt-4">
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Sumber Dana / Pengaruh</div>
                <div class="flex flex-wrap gap-2">
                    <span class="{{ $badgeBase }} bg-success-50 text-success-700 ring-success-200 dark:bg-success-500/10 dark:text-success-300 dark:ring-success-500/20">Transfer</span>
                    <span class="{{ $badgeBase }} bg-success-50 text-success-700 ring-success-200 dark:bg-success-500/10 dark:text-success-300 dark:ring-success-500/20">E-Wallet</span>
                    <span class="{{ $badgeBase }} bg-brand-50 text-brand-700 ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">Setoran Masuk</span>
                    <span class="{{ $badgeBase }} bg-indigo-50 text-indigo-700 ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20">Modal Bank</span>
                    <span class="{{ $badgeBase }} bg-error-50 text-error-700 ring-error-200 dark:bg-error-500/10 dark:text-error-300 dark:ring-error-500/20">Bayar Supplier</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Dialog: Deposit --}}
    <div id="modalDialog" class="fixed inset-0 z-99999 hidden items-center justify-center overflow-y-auto bg-gray-900/50 p-4" onclick="if(event.target === this) closeModalDialog()">
        <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900" onclick="event.stopPropagation()">
            <div class="mb-6 flex items-center justify-between">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800 dark:text-white/90">Deposit</h3>
                <button type="button" onclick="closeModalDialog()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <form id="modalForm" action="{{ route('finance.modals.store') }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Jumlah <span class="text-error-500">*</span></label>
                        <input type="number" name="amount" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" placeholder="0">
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal <span class="text-error-500">*</span></label>
                        <input type="date" name="modal_date" value="{{ now()->toDateString() }}" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Jenis <span class="text-error-500">*</span></label>
                        <select id="modalType" name="type" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                            <option value="topup">Deposit</option>
                            <option value="initial">Modal Awal</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Tujuan Kas <span class="text-error-500">*</span></label>
                        <select id="modalAccount" name="account" onchange="syncModalAccountUI(this.value)" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                            <option value="petty">Kas Kecil</option>
                            <option value="cash">Kas Tunai</option>
                            <option value="bank">Kas Bank</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Catatan</label>
                        <textarea name="notes" rows="2" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" placeholder="Opsional"></textarea>
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" onclick="closeModalDialog()" class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">Batal</button>
                    <button type="submit" class="rounded-lg bg-success-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-success-600">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Mutation Dialog --}}
    <div id="mutationDialog" class="fixed inset-0 z-99999 hidden items-center justify-center overflow-y-auto bg-gray-900/50 p-4" onclick="if(event.target === this) closeMutationDialog()">
        <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900" onclick="event.stopPropagation()">
            <div class="mb-6 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Buat Mutasi Kas</h3>
                <button type="button" onclick="closeMutationDialog()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <form action="{{ route('finance.mutations.store') }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Jumlah <span class="text-error-500">*</span></label>
                        <input type="number" name="amount" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" placeholder="0">
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal <span class="text-error-500">*</span></label>
                        <input type="date" name="mutation_date" value="{{ now()->toDateString() }}" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Dari <span class="text-error-500">*</span></label>
                            <select name="from_account" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                                <option value="petty">Kas Kecil</option>
                                <option value="cash">Kas Tunai</option>
                                <option value="bank">Kas Bank</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Ke <span class="text-error-500">*</span></label>
                            <select name="to_account" required class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:focus:border-brand-800">
                                <option value="bank">Kas Bank</option>
                                <option value="petty">Kas Kecil</option>
                                <option value="cash">Kas Tunai</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Catatan</label>
                        <textarea name="notes" rows="2" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" placeholder="Opsional"></textarea>
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" onclick="closeMutationDialog()" class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">Batal</button>
                    <button type="submit" class="rounded-lg bg-warning-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-warning-600">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function syncModalAccountUI(account) {
            const modalTitle = document.getElementById('modalTitle');

            const titleMap = {
                petty: 'Deposit Kas Kecil',
                cash: 'Deposit Kas Tunai',
                bank: 'Deposit Kas Bank'
            };

            modalTitle.textContent = titleMap[account] || 'Deposit';
        }

        function openModalDialog(account = 'petty') {
            const dialog = document.getElementById('modalDialog');
            const accountField = document.getElementById('modalAccount');
            const typeField = document.getElementById('modalType');

            accountField.value = account;
            typeField.value = 'topup';
            syncModalAccountUI(account);

            dialog.classList.remove('hidden');
            dialog.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeModalDialog() {
            const dialog = document.getElementById('modalDialog');
            dialog.classList.add('hidden');
            dialog.classList.remove('flex');
            document.body.style.overflow = '';
        }

        function openMutationDialog() {
            const dialog = document.getElementById('mutationDialog');
            dialog.classList.remove('hidden');
            dialog.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeMutationDialog() {
            const dialog = document.getElementById('mutationDialog');
            dialog.classList.add('hidden');
            dialog.classList.remove('flex');
            document.body.style.overflow = '';
        }
    </script>

    <div class="mt-12 border-t border-gray-200 pt-6 text-center text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400">
        <p>© {{ date('Y') }} <span class="font-semibold text-gray-700 dark:text-gray-300">aplikasipercetakan.com</span>. All rights reserved.</p>
    </div>
@endsection