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

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

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Form Donasi -->
        <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 Donasi 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="donatur_nama" class="block text-sm font-medium text-gray-700 mb-2">Nama Donatur</label>
                            <input type="text" name="donatur_nama" id="donatur_nama" 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 nama donatur">
                        </div>
                        
                        <div>
                            <label for="donatur_email" class="block text-sm font-medium text-gray-700 mb-2">Email Donatur</label>
                            <input type="email" name="donatur_email" id="donatur_email" 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 email donatur">
                        </div>
                        
                        <div>
                            <label for="donatur_telepon" class="block text-sm font-medium text-gray-700 mb-2">Telepon Donatur</label>
                            <input type="tel" name="donatur_telepon" id="donatur_telepon" 
                                   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 telepon donatur">
                        </div>
                        
                        <div>
                            <label for="jumlah" class="block text-sm font-medium text-gray-700 mb-2">Jumlah Donasi</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 donasi">
                                <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="metode_pembayaran" class="block text-sm font-medium text-gray-700 mb-2">Metode Pembayaran</label>
                            <select name="metode_pembayaran" id="metode_pembayaran" 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 metode pembayaran...</option>
                                <option value="transfer">Transfer Bank</option>
                                <option value="cash">Tunai</option>
                                <option value="qris">QRIS</option>
                                <option value="gopay">GoPay</option>
                                <option value="dana">DANA</option>
                                <option value="ovo">OVO</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select name="status" id="status" 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="pending">Pending</option>
                                <option value="confirmed">Confirmed</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mt-4 lg:mt-6">
                        <label for="keterangan" class="block text-sm font-medium text-gray-700 mb-2">Keterangan</label>
                        <textarea name="keterangan" id="keterangan" rows="4" 
                                  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 keterangan donasi"></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:donasi_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 Donasi
                        </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>
    // 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');
    }
    
    // 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 %}