{% extends 'keuangan/base.html' %}
{% load static %}

{% block title %}Tambah Transaksi - HMI Website{% endblock %}
{% block page_title %}Tambah Transaksi{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Form Transaksi -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Form Transaksi Baru</h3>
                </div>
                
                <form method="POST" class="p-4 lg:p-6">
                    {% csrf_token %}
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
                        <div>
                            <label for="judul" class="block text-sm font-medium text-gray-700 mb-2">Judul Transaksi</label>
                            <input type="text" name="judul" id="judul" required 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                   placeholder="Masukkan judul transaksi">
                        </div>
                        
                        <div>
                            <label for="kategori" class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
                            <select name="kategori" id="kategori" required 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="">Pilih kategori...</option>
                                {% for k in kategori_list %}
                                <option value="{{ k.id }}">{{ k.nama }} ({{ k.get_tipe_display }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div>
                            <label for="tipe" class="block text-sm font-medium text-gray-700 mb-2">Tipe</label>
                            <select name="tipe" id="tipe" required 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="">Pilih tipe...</option>
                                <option value="pemasukan">Pemasukan</option>
                                <option value="pengeluaran">Pengeluaran</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="jumlah" class="block text-sm font-medium text-gray-700 mb-2">Jumlah</label>
                            <div class="relative">
                                <input type="number" name="jumlah" id="jumlah" required min="0" step="1000" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                       placeholder="Masukkan jumlah">
                                <button type="button" onclick="openCalculator()" 
                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <i class="fas fa-calculator"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div>
                            <label for="tanggal" class="block text-sm font-medium text-gray-700 mb-2">Tanggal</label>
                            <input type="date" name="tanggal" id="tanggal" required 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        </div>
                    </div>
                    
                    <div class="mt-4 lg:mt-6">
                        <label for="deskripsi" class="block text-sm font-medium text-gray-700 mb-2">Deskripsi</label>
                        <textarea name="deskripsi" id="deskripsi" rows="4" required 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                  placeholder="Masukkan deskripsi transaksi"></textarea>
                    </div>
                    
                    <div class="mt-4 lg:mt-6 flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                        <a href="{% url 'keuangan:transaksi_list' %}" 
                           class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md text-center">
                            Batal
                        </a>
                        <button type="submit" 
                                class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md">
                            <i class="fas fa-save mr-2"></i>
                            Simpan Transaksi
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Kalkulator Sidebar -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Kalkulator</h3>
                </div>
                
                <div class="p-4 lg:p-6">
                    <!-- Calculator Display -->
                    <div class="mb-4">
                        <input type="text" id="calc-display" readonly 
                               class="w-full px-4 py-3 text-right text-xl font-mono bg-gray-100 border border-gray-300 rounded-md"
                               value="0">
                    </div>
                    
                    <!-- Calculator Buttons -->
                    <div class="grid grid-cols-4 gap-2">
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcClear()">C</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcBackspace()">⌫</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('/')">/</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('*')">×</button>
                        
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('7')">7</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('8')">8</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('9')">9</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('-')">-</button>
                        
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('4')">4</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('5')">5</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('6')">6</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('+')">+</button>
                        
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('1')">1</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('2')">2</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('3')">3</button>
                        <button class="calc-btn bg-green-500 hover:bg-green-600 text-white p-2 rounded-md font-semibold text-sm row-span-2" onclick="calcEquals()">=</button>
                        
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm col-span-2" onclick="calcInput('0')">0</button>
                        <button class="calc-btn bg-gray-200 hover:bg-gray-300 p-2 rounded-md font-semibold text-sm" onclick="calcInput('.')">.</button>
                    </div>
                    
                    <!-- Quick Actions -->
                    <div class="mt-4 space-y-2">
                        <button onclick="useCalculatorResult()" class="w-full bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md text-sm">
                            Gunakan Hasil
                        </button>
                        <button onclick="formatCurrency()" class="w-full bg-purple-500 hover:bg-purple-600 text-white p-2 rounded-md text-sm">
                            Format Rupiah
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Set today's date as default
    document.getElementById('tanggal').value = new Date().toISOString().split('T')[0];
    
    // Calculator variables
    let calcValue = '0';
    let calcOperator = null;
    let calcWaitingForOperand = false;
    
    function calcInput(value) {
        if (calcWaitingForOperand) {
            calcValue = value;
            calcWaitingForOperand = false;
        } else {
            calcValue = calcValue === '0' ? value : calcValue + value;
        }
        document.getElementById('calc-display').value = calcValue;
    }
    
    function calcClear() {
        calcValue = '0';
        calcOperator = null;
        calcWaitingForOperand = false;
        document.getElementById('calc-display').value = calcValue;
    }
    
    function calcBackspace() {
        if (calcValue.length > 1) {
            calcValue = calcValue.slice(0, -1);
        } else {
            calcValue = '0';
        }
        document.getElementById('calc-display').value = calcValue;
    }
    
    function calcEquals() {
        if (calcOperator && !calcWaitingForOperand) {
            try {
                const result = eval(calcValue);
                calcValue = String(result);
                calcOperator = null;
                calcWaitingForOperand = true;
                document.getElementById('calc-display').value = calcValue;
            } catch (e) {
                alert('Error dalam perhitungan');
                calcClear();
            }
        }
    }
    
    function useCalculatorResult() {
        const result = document.getElementById('calc-display').value;
        document.getElementById('jumlah').value = result;
    }
    
    function formatCurrency() {
        const value = document.getElementById('calc-display').value;
        const formatted = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(parseFloat(value) || 0);
        document.getElementById('calc-display').value = formatted;
    }
    
    function openCalculator() {
        document.getElementById('calculator-modal').classList.remove('hidden');
    }
    
    // Update kategori options based on tipe selection
    document.getElementById('tipe').addEventListener('change', function() {
        const tipe = this.value;
        const kategoriSelect = document.getElementById('kategori');
        const options = kategoriSelect.querySelectorAll('option');
        
        // Show/hide options based on tipe
        options.forEach(option => {
            if (option.value === '') return; // Keep the default option
            
            const optionText = option.textContent;
            const isMatchingTipe = optionText.includes(tipe === 'pemasukan' ? 'Pemasukan' : 'Pengeluaran');
            
            if (tipe && !isMatchingTipe) {
                option.style.display = 'none';
            } else {
                option.style.display = 'block';
            }
        });
        
        // Reset selection if current selection is hidden
        if (kategoriSelect.value && kategoriSelect.selectedOptions[0].style.display === 'none') {
            kategoriSelect.value = '';
        }
    });
    
    // Format currency input
    document.getElementById('jumlah').addEventListener('input', function() {
        let value = this.value.replace(/[^\d]/g, '');
        if (value) {
            value = parseInt(value);
            this.value = new Intl.NumberFormat('id-ID').format(value);
        }
    });
</script>
{% endblock %}