{% extends "base.html" %}

{% block title %}Kas Masuk & Keluar - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Arus Kas (Cash Flow){% endblock %}

{% block content %}

<!-- 1. SUMMARY CARDS -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <!-- Card Masuk -->
    <div class="bg-white rounded-xl shadow-md p-4 border-l-4 border-green-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">Total Masuk</p>
                <h3 class="text-xl font-bold text-green-600">Rp {{ "{:,.0f}".format(total_masuk) }}</h3>
            </div>
            <div class="p-3 bg-green-100 rounded-full text-green-600">
                <i class="fas fa-arrow-down"></i>
            </div>
        </div>
    </div>

    <!-- Card Keluar -->
    <div class="bg-white rounded-xl shadow-md p-4 border-l-4 border-red-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">Total Keluar</p>
                <h3 class="text-xl font-bold text-red-600">Rp {{ "{:,.0f}".format(total_keluar) }}</h3>
            </div>
            <div class="p-3 bg-red-100 rounded-full text-red-600">
                <i class="fas fa-arrow-up"></i>
            </div>
        </div>
    </div>

    <!-- Card Balance -->
    <div class="bg-white rounded-xl shadow-md p-4 border-l-4 border-blue-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">Balance (Sisa)</p>
                <h3 class="text-xl font-bold text-blue-600">Rp {{ "{:,.0f}".format(balance) }}</h3>
            </div>
            <div class="p-3 bg-blue-100 rounded-full text-blue-600">
                <i class="fas fa-wallet"></i>
            </div>
        </div>
    </div>
</div>

<!-- 2. DATA TABLE & FILTER -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
        <div class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:justify-between gap-3">
            
            <!-- Tombol Tambah -->
            <button onclick="openModal('addModal')" 
                    class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-4 py-2 rounded-lg font-semibold transition-colors text-sm shadow-md whitespace-nowrap lg:order-2">
                <i class="fas fa-plus mr-2"></i>Tambah Transaksi
            </button>

            <!-- Form Filter -->
            <form method="GET" class="flex flex-col sm:flex-row gap-2 flex-1 lg:order-1 lg:mr-4">
                <!-- Date Range -->
                <div class="flex gap-2 items-center">
                    <input type="date" name="start_date" value="{{ start_date }}" 
                           class="w-full sm:w-32 px-2 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" 
                           title="Tanggal Mulai">
                    <span class="text-gray-500">-</span>
                    <input type="date" name="end_date" value="{{ end_date }}" 
                           class="w-full sm:w-32 px-2 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" 
                           title="Tanggal Akhir">
                </div>

                <!-- Search -->
                <div class="relative flex-1">
                    <input type="text" name="search" value="{{ search }}" 
                           placeholder="Cari kategori/ket..." 
                           class="w-full pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                </div>

                <button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white px-3 py-2 rounded-lg text-sm">
                    <i class="fas fa-filter"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="block lg:hidden divide-y divide-gray-100">
        {% for cash in cashflows.items %}
        <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1 min-w-0 pr-2">
                    <div class="flex items-center gap-2 mb-1">
                        {% if cash.jenis == 'Masuk' %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700 flex-shrink-0">
                            <i class="fas fa-arrow-down mr-1"></i>Masuk
                        </span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700 flex-shrink-0">
                            <i class="fas fa-arrow-up mr-1"></i>Keluar
                        </span>
                        {% endif %}
                        <span class="text-xs font-bold text-gray-900">{{ cash.kategori }}</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-1">
                        <i class="fas fa-calendar text-gray-400 mr-1"></i>{{ cash.tanggal.strftime('%d/%m/%Y %H:%M') }}
                    </p>
                    <p class="text-xs text-gray-600 truncate">{{ cash.keterangan }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">
                        <i class="fas fa-user text-gray-400 mr-1"></i>{{ cash.user.nama_lengkap if cash.user else '-' }}
                    </p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-base font-bold {% if cash.jenis == 'Masuk' %}text-green-600{% else %}text-red-600{% endif %}">
                        {% if cash.jenis == 'Masuk' %}+{% else %}-{% endif %}Rp {{ "{:,.0f}".format(cash.jumlah) }}
                    </p>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
                <button onclick="editCashflow({{ cash.id }}, '{{ cash.jenis }}', '{{ cash.kategori }}', {{ cash.jumlah }}, '{{ cash.keterangan }}')" 
                        class="text-blue-600 hover:text-blue-700 active:text-blue-800 p-1.5 transition-colors">
                    <i class="fas fa-edit text-sm"></i>
                </button>
                <a href="{{ url_for('delete_cashflow', id=cash.id) }}" 
                   onclick="return confirm('Yakin ingin menghapus transaksi kas ini?')"
                   class="text-red-600 hover:text-red-700 active:text-red-800 p-1.5 transition-colors">
                    <i class="fas fa-trash text-sm"></i>
                </a>
            </div>
        </div>
        {% else %}
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-inbox text-4xl mb-2"></i>
            <p class="text-sm">Belum ada transaksi kas pada periode ini.</p>
        </div>
        {% endfor %}
    </div>

    <!-- Desktop Table View -->
    <div class="hidden lg:block overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Jenis</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kategori</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Keterangan</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Jumlah</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">User</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for cash in cashflows.items %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm text-gray-600">{{ cash.tanggal.strftime('%d/%m/%Y %H:%M') }}</td>
                    <td class="px-4 py-3">
                        {% if cash.jenis == 'Masuk' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-arrow-down mr-1"></i>Masuk
                        </span>
                        {% else %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                            <i class="fas fa-arrow-up mr-1"></i>Keluar
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ cash.kategori }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ cash.keterangan }}</td>
                    <td class="px-4 py-3 text-sm font-bold {% if cash.jenis == 'Masuk' %}text-green-600{% else %}text-red-600{% endif %}">
                        {% if cash.jenis == 'Masuk' %}+{% else %}-{% endif %} Rp {{ "{:,.0f}".format(cash.jumlah) }}
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ cash.user.nama_lengkap if cash.user else '-' }}</td>
                    <td class="px-4 py-3 text-center">
                        <button onclick="editCashflow({{ cash.id }}, '{{ cash.jenis }}', '{{ cash.kategori }}', {{ cash.jumlah }}, '{{ cash.keterangan }}')" 
                                class="text-blue-600 hover:text-blue-800 mr-3 p-1">
                            <i class="fas fa-edit"></i>
                        </button>
                        <a href="{{ url_for('delete_cashflow', id=cash.id) }}" 
                           onclick="return confirm('Yakin ingin menghapus transaksi kas ini?')"
                           class="text-red-600 hover:text-red-800 p-1">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
                        <p>Belum ada transaksi kas pada periode ini.</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if cashflows.pages > 1 %}
    <div class="p-3 sm:p-4 lg:p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                {{ cashflows.per_page * (cashflows.page - 1) + 1 }} - 
                {{ [cashflows.per_page * cashflows.page, cashflows.total]|min }} dari {{ cashflows.total }}
            </p>
            <div class="flex space-x-1 sm:space-x-2">
                {% if cashflows.has_prev %}
                <a href="?page={{ cashflows.prev_num }}{% if search %}&search={{ search }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-left"></i>
                </a>
                {% endif %}
                {% for page_num in cashflows.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" 
                           class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == cashflows.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100 active:bg-gray-200{% endif %}">
                            {{ page_num }}
                        </a>
                    {% endif %}
                {% endfor %}
                {% if cashflows.has_next %}
                <a href="?page={{ cashflows.next_num }}{% if search %}&search={{ search }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-right"></i>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Modal Add dan Edit (Sama Seperti Sebelumnya, tidak perlu diubah, tapi disertakan di file ini di bawah) -->
<!-- Add Modal -->
<div id="addModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4 hidden">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-lg max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Tambah Transaksi Kas</h3>
        </div>
        <form method="POST" action="{{ url_for('add_cashflow') }}" class="p-3 sm:p-4 lg:p-6">
            <div class="space-y-3 sm:space-y-4">
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis Transaksi *</label>
                    <select name="jenis" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="Masuk">Kas Masuk</option>
                        <option value="Keluar">Kas Keluar</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kategori *</label>
                    <select name="kategori" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <optgroup label="Kas Masuk">
                            <option value="Modal Awal">Modal Awal (Kasir)</option>
                            <option value="Tambahan Modal">Tambahan Modal Owner</option>
                            <option value="Penjualan">Penjualan</option>
                            <option value="Pelunasan Piutang">Pelunasan Piutang</option>
                            <option value="Pendapatan Lain">Pendapatan Lain</option>
                        </optgroup>
                        <optgroup label="Kas Keluar">
                            <option value="Setor Bank">Setor ke Bank</option>
                            <option value="Prive Owner">Prive Owner (Tarik Tunai)</option>
                            <option value="Pembelian Stok">Pembelian Stok</option>
                            <option value="Biaya Sewa">Biaya Sewa</option>
                            <option value="Biaya Listrik">Biaya Listrik</option>
                            <option value="Gaji Karyawan">Gaji Karyawan</option>
                            <option value="Biaya Transport">Biaya Transport</option>
                            <option value="Biaya Operasional">Biaya Operasional</option>
                        </optgroup>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jumlah *</label>
                    <input type="number" name="jumlah" required step="0.01" min="0"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Masukkan jumlah">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Keterangan</label>
                    <textarea name="keterangan" rows="3"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                              placeholder="Detail transaksi..."></textarea>
                </div>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6">
                <button type="button" onclick="closeModal('addModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 font-semibold">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4 hidden">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-lg max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Edit Transaksi Kas</h3>
        </div>
        <form id="editForm" method="POST" class="p-3 sm:p-4 lg:p-6">
            <div class="space-y-3 sm:space-y-4">
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis Transaksi *</label>
                    <select name="jenis" id="edit_jenis" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="Masuk">Kas Masuk</option>
                        <option value="Keluar">Kas Keluar</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kategori *</label>
                    <select name="kategori" id="edit_kategori" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <optgroup label="Kas Masuk">
                            <option value="Modal Awal">Modal Awal (Kasir)</option>
                            <option value="Tambahan Modal">Tambahan Modal Owner</option>
                            <option value="Penjualan">Penjualan</option>
                            <option value="Pelunasan Piutang">Pelunasan Piutang</option>
                            <option value="Pendapatan Lain">Pendapatan Lain</option>
                        </optgroup>
                        <optgroup label="Kas Keluar">
                            <option value="Setor Bank">Setor ke Bank</option>
                            <option value="Prive Owner">Prive Owner (Tarik Tunai)</option>
                            <option value="Pembelian Stok">Pembelian Stok</option>
                            <option value="Biaya Sewa">Biaya Sewa</option>
                            <option value="Biaya Listrik">Biaya Listrik</option>
                            <option value="Gaji Karyawan">Gaji Karyawan</option>
                            <option value="Biaya Transport">Biaya Transport</option>
                            <option value="Biaya Operasional">Biaya Operasional</option>
                        </optgroup>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jumlah *</label>
                    <input type="number" name="jumlah" id="edit_jumlah" required step="0.01" min="0"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Masukkan jumlah">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Keterangan</label>
                    <textarea name="keterangan" id="edit_keterangan" rows="3"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                              placeholder="Detail transaksi..."></textarea>
                </div>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6">
                <button type="button" onclick="closeModal('editModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 font-semibold">
                    <i class="fas fa-save mr-2"></i>Update
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function editCashflow(id, jenis, kategori, jumlah, keterangan) {
    document.getElementById('editForm').action = `/cashflow/edit/${id}`;
    document.getElementById('edit_jenis').value = jenis;
    document.getElementById('edit_kategori').value = kategori;
    document.getElementById('edit_jumlah').value = jumlah;
    document.getElementById('edit_keterangan').value = keterangan;
    openModal('editModal');
}
</script>
{% endblock %}