@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Keuangan</h1>
    
    @if(session('success'))
        <div class="bg-green-100 dark:bg-green-800 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-200 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-green-100 dark:bg-green-800 rounded-lg p-6 transition-colors duration-200">
            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">Total Penerimaan</h3>
            <p class="text-2xl font-bold text-green-600 dark:text-green-300">Rp {{ number_format($totalPenerimaan, 0, ',', '.') }}</p>
        </div>
        <div class="bg-red-100 dark:bg-red-800 rounded-lg p-6 transition-colors duration-200">
            <h3 class="text-lg font-semibold text-red-800 dark:text-red-200 mb-2">Total Pengeluaran</h3>
            <p class="text-2xl font-bold text-red-600 dark:text-red-300">Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}</p>
        </div>
        <div class="bg-blue-100 dark:bg-blue-800 rounded-lg p-6 transition-colors duration-200">
            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">Saldo Kas</h3>
            <p class="text-2xl font-bold {{ $saldoKas >= 0 ? 'text-blue-600 dark:text-blue-300' : 'text-red-600 dark:text-red-300' }}">
                Rp {{ number_format($saldoKas, 0, ',', '.') }}
            </p>
        </div>
    </div>

    <!-- Add Transaction Button -->
    <div class="mb-6">
        <button id="addTransactionBtn" class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
            Tambah Transaksi
        </button>
    </div>

    <!-- Transactions Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-colors duration-200">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Riwayat Transaksi</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Jenis</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kategori</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kepala Keluarga</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Jumlah</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Keterangan</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($transaksiKeuangan as $index => $transaksi)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $index + 1 }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $transaksi->tanggal->format('d/m/Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {{ $transaksi->jenis_transaksi == 'penerimaan' ? 'bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200' : 'bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200' }}">
                                    {{ ucfirst($transaksi->jenis_transaksi) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $transaksi->kategori }}
                                @if($transaksi->sub_kategori)
                                    <br><small class="text-gray-500 dark:text-gray-400">{{ $transaksi->sub_kategori }}</small>
                                @endif
                                @if($transaksi->bulan_iuran && $transaksi->tahun_iuran)
                                    <br><small class="text-gray-500 dark:text-gray-400">{{ $transaksi->bulan_iuran }} {{ $transaksi->tahun_iuran }}</small>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                {{ $transaksi->keluarga ? $transaksi->keluarga->nama_kepala_keluarga : '-' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium 
                                {{ $transaksi->jenis_transaksi == 'penerimaan' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ $transaksi->jenis_transaksi == 'penerimaan' ? '+' : '-' }}Rp {{ number_format($transaksi->jumlah, 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                {{ $transaksi->keterangan ?: '-' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                Belum ada transaksi keuangan
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Transaction Modal -->
<div id="addTransactionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 overflow-y-auto h-full w-full hidden transition-all duration-200">
    <div class="relative top-20 mx-auto p-5 border border-gray-200 dark:border-gray-700 w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800 transition-colors duration-200">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Tambah Transaksi Keuangan</h3>
                <button id="closeModalBtn" class="text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 transition-colors duration-200">
                    <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"></path>
                    </svg>
                </button>
            </div>
            
            <form id="transactionForm" action="{{ route('keuangan.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Tanggal -->
                    <div>
                        <label for="tanggal" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal</label>
                        <input type="date" id="tanggal" name="tanggal" required 
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                    </div>

                    <!-- Jenis Transaksi -->
                    <div>
                        <label for="jenis_transaksi" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Transaksi</label>
                        <select id="jenis_transaksi" name="jenis_transaksi" required 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Jenis Transaksi</option>
                            <option value="penerimaan">Penerimaan</option>
                            <option value="pengeluaran">Pengeluaran</option>
                        </select>
                    </div>

                    <!-- Kategori -->
                    <div>
                        <label for="kategori" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategori</label>
                        <select id="kategori" name="kategori" required 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Kategori</option>
                        </select>
                    </div>

                    <!-- Sub Kategori -->
                    <div id="subKategoriDiv" class="hidden">
                        <label for="sub_kategori" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sub Kategori</label>
                        <select id="sub_kategori" name="sub_kategori" 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Sub Kategori</option>
                        </select>
                    </div>

                    @if(!$isRwUser)
                    <!-- Bulan Iuran -->
                    <div id="bulanIuranDiv" class="hidden">
                        <label for="bulan_iuran" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bulan Iuran</label>
                        <select id="bulan_iuran" name="bulan_iuran" 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Bulan</option>
                            <option value="Januari">Januari</option>
                            <option value="Februari">Februari</option>
                            <option value="Maret">Maret</option>
                            <option value="April">April</option>
                            <option value="Mei">Mei</option>
                            <option value="Juni">Juni</option>
                            <option value="Juli">Juli</option>
                            <option value="Agustus">Agustus</option>
                            <option value="September">September</option>
                            <option value="Oktober">Oktober</option>
                            <option value="November">November</option>
                            <option value="Desember">Desember</option>
                        </select>
                    </div>

                    <!-- Tahun Iuran -->
                    <div id="tahunIuranDiv" class="hidden">
                        <label for="tahun_iuran" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tahun Iuran</label>
                        <select id="tahun_iuran" name="tahun_iuran" 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Tahun</option>
                            @for($year = (date('Y') + 5); $year >= 2020; $year--)
                                <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                            @endfor
                        </select>
                    </div>

                    <!-- Kepala Keluarga -->
                    <div id="keluargaDiv" class="hidden">
                        <label for="keluarga_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kepala Keluarga</label>
                        <select id="keluarga_id" name="keluarga_id" 
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                            <option value="">Pilih Kepala Keluarga</option>
                            @foreach($keluargaList as $keluarga)
                                <option value="{{ $keluarga->id }}">{{ $keluarga->nama_kepala_keluarga }} ({{ $keluarga->nomor_kk }})</option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <!-- Jumlah -->
                    <div>
                        <label for="jumlah" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jumlah (Rp)</label>
                        <input type="number" id="jumlah" name="jumlah" required min="0" step="0.01"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
                    </div>
                </div>

                <!-- Keterangan -->
                <div class="mt-4">
                    <label for="keterangan" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Keterangan</label>
                    <textarea id="keterangan" name="keterangan" rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200"></textarea>
                </div>

                <!-- Submit Button -->
                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button" id="cancelBtn" 
                            class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200">
                        Simpan Transaksi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const addTransactionBtn = document.getElementById('addTransactionBtn');
    const addTransactionModal = document.getElementById('addTransactionModal');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const jenisTransaksiSelect = document.getElementById('jenis_transaksi');
    const kategoriSelect = document.getElementById('kategori');
    const subKategoriSelect = document.getElementById('sub_kategori');
    const subKategoriDiv = document.getElementById('subKategoriDiv');
    const bulanIuranDiv = document.getElementById('bulanIuranDiv');
    const tahunIuranDiv = document.getElementById('tahunIuranDiv');
    const keluargaDiv = document.getElementById('keluargaDiv');
    
    // Check if user is RW
    const isRwUser = {{ $isRwUser ? 'true' : 'false' }};

    // Set today's date as default
    document.getElementById('tanggal').value = new Date().toISOString().split('T')[0];

    // Modal controls
    addTransactionBtn.addEventListener('click', function() {
        addTransactionModal.classList.remove('hidden');
    });

    function closeModal() {
        addTransactionModal.classList.add('hidden');
        document.getElementById('transactionForm').reset();
        hideAllConditionalFields();
    }

    closeModalBtn.addEventListener('click', closeModal);
    cancelBtn.addEventListener('click', closeModal);

    // Close modal when clicking outside
    addTransactionModal.addEventListener('click', function(e) {
        if (e.target === addTransactionModal) {
            closeModal();
        }
    });

    function hideAllConditionalFields() {
        subKategoriDiv.classList.add('hidden');
        if (!isRwUser) {
            bulanIuranDiv.classList.add('hidden');
            tahunIuranDiv.classList.add('hidden');
            keluargaDiv.classList.add('hidden');
        }
        kategoriSelect.innerHTML = '<option value="">Pilih Kategori</option>';
        subKategoriSelect.innerHTML = '<option value="">Pilih Sub Kategori</option>';
    }

    // Handle jenis transaksi change
    jenisTransaksiSelect.addEventListener('change', function() {
        const jenisTransaksi = this.value;
        hideAllConditionalFields();

        if (jenisTransaksi === 'penerimaan') {
            kategoriSelect.innerHTML = `
                <option value="">Pilih Kategori</option>
                <option value="Iuran Wajib">Iuran Wajib</option>
                <option value="Bantuan Pemerintah">Bantuan Pemerintah</option>
                <option value="Swadaya Murni Masyarakat">Swadaya Murni Masyarakat</option>
            `;
        } else if (jenisTransaksi === 'pengeluaran') {
            kategoriSelect.innerHTML = `
                <option value="">Pilih Kategori</option>
                <option value="Operasional Warga">Operasional Warga</option>
                <option value="Kegiatan Hari Besar Nasional">Kegiatan Hari Besar Nasional</option>
                <option value="Hari Besar Agama">Hari Besar Agama</option>
                <option value="Kebersihan">Kebersihan</option>
                <option value="Keamanan">Keamanan</option>
                <option value="Lainnya">Lainnya</option>
            `;
        }
    });

    // Handle kategori change
    kategoriSelect.addEventListener('change', function() {
        const kategori = this.value;
        const jenisTransaksi = jenisTransaksiSelect.value;

        // Hide all conditional fields first
        subKategoriDiv.classList.add('hidden');
        if (!isRwUser) {
            bulanIuranDiv.classList.add('hidden');
            tahunIuranDiv.classList.add('hidden');
            keluargaDiv.classList.add('hidden');
        }

        if (jenisTransaksi === 'penerimaan') {
            if (kategori === 'Iuran Wajib' && !isRwUser) {
                bulanIuranDiv.classList.remove('hidden');
                tahunIuranDiv.classList.remove('hidden');
                keluargaDiv.classList.remove('hidden');
            } else if (kategori === 'Bantuan Pemerintah') {
                subKategoriDiv.classList.remove('hidden');
                subKategoriSelect.innerHTML = `
                    <option value="">Pilih Sub Kategori</option>
                    <option value="Melalui Kelurahan/Kecamatan">Melalui Kelurahan/Kecamatan</option>
                    <option value="APBD Pemkot">APBD Pemkot</option>
                    <option value="APBD Provinsi">APBD Provinsi</option>
                    <option value="APBN">APBN</option>
                `;
            }
        }
    });
});
</script>
@endsection