@extends('layouts.app')

@section('title', 'Dashboard - Hutang Piutang')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-950 to-slate-900 relative" id="app">
    {{-- Background decoration --}}
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-3xl"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-500/5 rounded-full blur-3xl"></div>
    </div>

    {{-- Navbar --}}
    <nav class="relative z-50 border-b border-white/10 bg-white/5 backdrop-blur-xl">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center shadow-lg shadow-purple-500/20">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <span class="text-white font-bold text-lg tracking-tight">Hutang Piutang</span>
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-white/60 text-sm hidden sm:block">Halo, <span class="text-white font-medium">{{ Auth::user()->name }}</span></span>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="flex items-center gap-2 px-4 py-2 text-sm text-white/60 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all duration-300">
                            <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                            </svg>
                            Keluar
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    {{-- Main Content --}}
    <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">

        {{-- Kas Saat Ini & Estimasi Aset --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {{-- Kas Saat Ini --}}
            <div class="group bg-gradient-to-br from-cyan-500/10 to-blue-500/10 backdrop-blur-xl border border-cyan-500/20 rounded-2xl p-5 hover:from-cyan-500/15 hover:to-blue-500/15 transition-all duration-500">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">💰 Kas Saat Ini</span>
                </div>
                <p class="text-3xl font-bold text-white" id="statCurrentBalance">Rp 0</p>
                <p class="text-xs text-white/40 mt-1">Uang Masuk - Uang Keluar - Hutang Lunas</p>
            </div>
            {{-- Estimasi Aset --}}
            <div class="group bg-gradient-to-br from-violet-500/10 to-purple-500/10 backdrop-blur-xl border border-violet-500/20 rounded-2xl p-5 hover:from-violet-500/15 hover:to-purple-500/15 transition-all duration-500">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-violet-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">🏦 Estimasi Aset</span>
                </div>
                <p class="text-3xl font-bold text-white" id="statEstimasiAset">Rp 0</p>
                <p class="text-xs text-white/40 mt-1">Kas Saat Ini + Piutang Belum Dibayar</p>
            </div>
        </div>

        {{-- Hutang & Piutang Detail Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {{-- Hutang Detail --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-red-500/5 hover:border-red-500/20">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                            <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>
                        </div>
                        <span class="text-sm text-white/60 uppercase tracking-wider font-medium">Hutang</span>
                    </div>
                    <p class="text-xl font-bold text-white" id="statHutangTotal">Rp 0</p>
                </div>
                <div class="space-y-2 border-t border-white/10 pt-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-red-400/80 flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span>
                            Belum Lunas
                        </span>
                        <span class="text-sm font-semibold text-red-400" id="statHutangBelumLunas">Rp 0</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-emerald-400/80 flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span>
                            Sudah Lunas
                        </span>
                        <span class="text-sm font-semibold text-emerald-400" id="statHutangSudahLunas">Rp 0</span>
                    </div>
                </div>
            </div>
            {{-- Piutang Detail --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-emerald-500/5 hover:border-emerald-500/20">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                            <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                        </div>
                        <span class="text-sm text-white/60 uppercase tracking-wider font-medium">Piutang</span>
                    </div>
                    <p class="text-xl font-bold text-white" id="statPiutangTotal">Rp 0</p>
                </div>
                <div class="space-y-2 border-t border-white/10 pt-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-amber-400/80 flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span>
                            Belum Dibayar
                        </span>
                        <span class="text-sm font-semibold text-amber-400" id="statPiutangBelumLunas">Rp 0</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-emerald-400/80 flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span>
                            Sudah Dibayar
                        </span>
                        <span class="text-sm font-semibold text-emerald-400" id="statPiutangSudahLunas">Rp 0</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Stats Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="statsCards">
            {{-- Uang Masuk --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-teal-500/5 hover:border-teal-500/20">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-teal-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4"/></svg>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">Uang Masuk</span>
                </div>
                <p class="text-xl font-bold text-teal-400" id="statCashIn">Rp 0</p>
                <p class="text-xs text-white/40 mt-1">Total pemasukan</p>
            </div>
            {{-- Uang Keluar --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-orange-500/5 hover:border-orange-500/20">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V4m0 0l-4 4m4-4l4 4"/></svg>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">Uang Keluar</span>
                </div>
                <p class="text-xl font-bold text-orange-400" id="statCashOut">Rp 0</p>
                <p class="text-xs text-white/40 mt-1">Total pengeluaran</p>
            </div>
            {{-- Transaksi --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-blue-500/5 hover:border-blue-500/20">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">Transaksi</span>
                </div>
                <p class="text-xl font-bold text-blue-400" id="statTotalTransactions">0</p>
                <p class="text-xs text-white/40 mt-1">Total transaksi</p>
            </div>
            {{-- Overdue --}}
            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-5 hover:bg-white/10 transition-all duration-500 hover:shadow-lg hover:shadow-amber-500/5 hover:border-amber-500/20">
                <div class="flex items-center justify-between mb-3">
                    <div class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <span class="text-xs text-white/40 uppercase tracking-wider font-medium">Jatuh Tempo</span>
                </div>
                <p class="text-xl font-bold text-amber-400" id="statOverdue">0</p>
                <p class="text-xs text-white/40 mt-1">Lewat jatuh tempo</p>
            </div>
        </div>

        {{-- Chart Section --}}
        <div class="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
            <h2 class="text-white font-semibold text-lg mb-4">Ringkasan 6 Bulan Terakhir</h2>
            <div class="relative" style="height: 280px;">
                <canvas id="monthlyChart"></canvas>
            </div>
        </div>

        {{-- Tab Navigation --}}
        <div class="flex flex-wrap items-center gap-2 border-b border-white/10 pb-4">
            <button onclick="switchTab('transactions')" id="tabTransactions" class="tab-btn active px-5 py-2.5 text-sm font-medium rounded-xl transition-all duration-300">
                Transaksi
            </button>
            <button onclick="switchTab('contacts')" id="tabContacts" class="tab-btn px-5 py-2.5 text-sm font-medium rounded-xl transition-all duration-300">
                Kontak
            </button>
            <button onclick="switchTab('cashflow')" id="tabCashflow" class="tab-btn px-5 py-2.5 text-sm font-medium rounded-xl transition-all duration-300">
                Arus Kas
            </button>

            <div class="flex-1"></div>

            {{-- Search --}}
            <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="text" id="searchInput" placeholder="Cari..."
                       class="pl-10 pr-4 py-2.5 w-48 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50 transition-all duration-300">
            </div>
        </div>

        {{-- Transactions Tab --}}
        <div id="panelTransactions" class="tab-panel space-y-4">
            {{-- Filters --}}
            <div class="flex flex-wrap items-center gap-3">
                <select id="filterType" onchange="loadTransactions()" class="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300 appearance-none cursor-pointer">
                    <option value="" class="bg-slate-800">Semua Tipe</option>
                    <option value="hutang" class="bg-slate-800">Hutang</option>
                    <option value="piutang" class="bg-slate-800">Piutang</option>
                </select>
                <select id="filterStatus" onchange="loadTransactions()" class="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300 appearance-none cursor-pointer">
                    <option value="" class="bg-slate-800">Semua Status</option>
                    <option value="belum_lunas" class="bg-slate-800">Belum Lunas</option>
                    <option value="lunas" class="bg-slate-800">Lunas</option>
                </select>
                <button onclick="loadOverdue()" class="px-4 py-2 bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-amber-500/20 rounded-xl text-sm font-medium transition-all duration-300">
                    Jatuh Tempo
                </button>
                <button onclick="resetFilters()" class="px-4 py-2 bg-white/5 border border-white/10 text-white/50 hover:text-white hover:bg-white/10 rounded-xl text-sm font-medium transition-all duration-300">
                    Reset
                </button>
                <div class="flex-1"></div>
                <button onclick="openTransactionModal()" id="btnAddTransaction" class="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-purple-500/20 hover:shadow-purple-500/30 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] text-sm">
                    <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>
                    Tambah Transaksi
                </button>
            </div>

            {{-- Transactions List --}}
            <div id="transactionsList" class="space-y-3">
                <div class="text-center text-white/30 py-12">
                    <svg class="w-12 h-12 mx-auto mb-3 text-white/10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
                    Memuat data...
                </div>
            </div>
        </div>

        {{-- Contacts Tab --}}
        <div id="panelContacts" class="tab-panel hidden space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-white font-semibold">Daftar Kontak</h3>
                <button onclick="openPersonModal()" class="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-600 to-blue-600 hover:from-emerald-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] text-sm">
                    <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>
                    Tambah Kontak
                </button>
            </div>
            <div id="contactsList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="text-center text-white/30 py-12 col-span-full">Memuat kontak...</div>
            </div>
        </div>

        {{-- Cash Flow Tab --}}
        <div id="panelCashflow" class="tab-panel hidden space-y-4">
            <div class="flex flex-wrap items-center gap-3">
                <select id="filterCashType" onchange="loadCashFlows()" class="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300 appearance-none cursor-pointer">
                    <option value="" class="bg-slate-800">Semua Tipe</option>
                    <option value="masuk" class="bg-slate-800">Uang Masuk</option>
                    <option value="keluar" class="bg-slate-800">Uang Keluar</option>
                </select>
                <div class="flex-1"></div>
                <button onclick="openCashFlowModal()" class="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-teal-600 to-blue-600 hover:from-teal-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/20 hover:shadow-teal-500/30 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] text-sm">
                    <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>
                    Tambah Arus Kas
                </button>
            </div>
            <div id="cashFlowList" class="space-y-3">
                <div class="text-center text-white/30 py-12">Memuat arus kas...</div>
            </div>
        </div>
    </main>

    {{-- Balance Modal --}}
    <div id="balanceModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeBalanceModal()"></div>
        <div class="relative bg-slate-900/90 backdrop-blur-2xl border border-white/15 rounded-2xl shadow-2xl w-full max-w-md p-6 space-y-5 animate-modal-in">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white">Atur Saldo Awal</h3>
                <button onclick="closeBalanceModal()" class="text-white/40 hover:text-white transition-colors"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <p class="text-white/50 text-sm">Masukkan jumlah uang/modal awal yang Anda miliki sebelum mencatat hutang piutang.</p>
            <form id="balanceForm" onsubmit="submitBalance(event)" class="space-y-4">
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Saldo Awal (Rp)</label>
                    <input type="number" id="balanceAmount" min="0" required class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white text-lg font-semibold placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all duration-300" placeholder="0">
                </div>
                <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-semibold rounded-xl shadow-lg shadow-indigo-500/25 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                    Simpan Saldo Awal
                </button>
            </form>
        </div>
    </div>

    {{-- Transaction Modal --}}
    <div id="transactionModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeTransactionModal()"></div>
        <div class="relative bg-slate-900/90 backdrop-blur-2xl border border-white/15 rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 space-y-5 animate-modal-in">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white" id="transactionModalTitle">Tambah Transaksi</h3>
                <button onclick="closeTransactionModal()" class="text-white/40 hover:text-white transition-colors"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <form id="transactionForm" onsubmit="submitTransaction(event)" class="space-y-4">
                <input type="hidden" id="txId">
                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Tipe</label>
                        <select id="txType" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300">
                            <option value="hutang" class="bg-slate-800">Hutang</option>
                            <option value="piutang" class="bg-slate-800">Piutang</option>
                        </select>
                    </div>
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Kontak</label>
                        <select id="txPerson" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300">
                            <option value="" class="bg-slate-800">Pilih kontak...</option>
                        </select>
                    </div>
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Jumlah (Rp)</label>
                    <input type="number" id="txAmount" min="1" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300" placeholder="0">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Tanggal Transaksi</label>
                        <input type="date" id="txDate" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300">
                    </div>
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Jatuh Tempo</label>
                        <input type="date" id="txDue" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300">
                    </div>
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Keterangan</label>
                    <textarea id="txDesc" rows="2" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all duration-300 resize-none" placeholder="Opsional..."></textarea>
                </div>
                <button type="submit" class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-purple-500/25 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                    Simpan
                </button>
            </form>
        </div>
    </div>

    {{-- Person Modal --}}
    <div id="personModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closePersonModal()"></div>
        <div class="relative bg-slate-900/90 backdrop-blur-2xl border border-white/15 rounded-2xl shadow-2xl w-full max-w-lg p-6 space-y-5 animate-modal-in">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white" id="personModalTitle">Tambah Kontak</h3>
                <button onclick="closePersonModal()" class="text-white/40 hover:text-white transition-colors"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <form id="personForm" onsubmit="submitPerson(event)" class="space-y-4">
                <input type="hidden" id="personId">
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Nama</label>
                    <input type="text" id="personName" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all duration-300" placeholder="Nama kontak">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Telepon</label>
                        <input type="text" id="personPhone" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all duration-300" placeholder="08xx">
                    </div>
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Email</label>
                        <input type="email" id="personEmail" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all duration-300" placeholder="email@contoh.com">
                    </div>
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Alamat</label>
                    <textarea id="personAddress" rows="2" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all duration-300 resize-none" placeholder="Opsional..."></textarea>
                </div>
                <button type="submit" class="w-full py-3 bg-gradient-to-r from-emerald-600 to-blue-600 hover:from-emerald-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/25 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                    Simpan Kontak
                </button>
            </form>
        </div>
    </div>

    {{-- Detail / Installment Modal --}}
    <div id="detailModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeDetailModal()"></div>
        <div class="relative bg-slate-900/90 backdrop-blur-2xl border border-white/15 rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 space-y-5 animate-modal-in">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white">Detail Transaksi</h3>
                <button onclick="closeDetailModal()" class="text-white/40 hover:text-white transition-colors"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <div id="detailContent" class="space-y-4">
                {{-- Filled dynamically by JS --}}
            </div>
        </div>
    </div>

    {{-- Cash Flow Modal --}}
    <div id="cashFlowModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeCashFlowModal()"></div>
        <div class="relative bg-slate-900/90 backdrop-blur-2xl border border-white/15 rounded-2xl shadow-2xl w-full max-w-lg p-6 space-y-5 animate-modal-in">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white" id="cashFlowModalTitle">Tambah Arus Kas</h3>
                <button onclick="closeCashFlowModal()" class="text-white/40 hover:text-white transition-colors"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <form id="cashFlowForm" onsubmit="submitCashFlow(event)" class="space-y-4">
                <input type="hidden" id="cfId">
                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Tipe</label>
                        <select id="cfType" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/50 transition-all duration-300">
                            <option value="masuk" class="bg-slate-800">💰 Uang Masuk</option>
                            <option value="keluar" class="bg-slate-800">💸 Uang Keluar</option>
                        </select>
                    </div>
                    <div class="space-y-1.5">
                        <label class="text-white/70 text-sm font-medium">Tanggal</label>
                        <input type="date" id="cfDate" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/50 transition-all duration-300">
                    </div>
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Jumlah (Rp)</label>
                    <input type="number" id="cfAmount" min="1" required class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-teal-500/50 transition-all duration-300" placeholder="0">
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Kategori</label>
                    <input type="text" id="cfCategory" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-teal-500/50 transition-all duration-300" placeholder="cth: Gaji, Belanja, Transport...">
                </div>
                <div class="space-y-1.5">
                    <label class="text-white/70 text-sm font-medium">Keterangan</label>
                    <textarea id="cfDesc" rows="2" class="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-teal-500/50 transition-all duration-300 resize-none" placeholder="Opsional..."></textarea>
                </div>
                <button type="submit" class="w-full py-3 bg-gradient-to-r from-teal-600 to-blue-600 hover:from-teal-500 hover:to-blue-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                    Simpan
                </button>
            </form>
        </div>
    </div>




    {{-- Toast Notification --}}
    <div id="toast" class="fixed bottom-6 right-6 z-[200] hidden">
        <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl px-5 py-3 shadow-2xl flex items-center gap-3 animate-slide-up">
            <div id="toastIcon"></div>
            <span id="toastMessage" class="text-white text-sm font-medium"></span>
        </div>
    </div>
</div>

{{-- Chart.js CDN --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
@endsection