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

{% block title %}Pengaturan Notifikasi - Sistem Keuangan HMI{% endblock %}
{% block page_title %}Pengaturan Notifikasi{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Pengaturan Notifikasi</h3>
                <p class="text-sm text-gray-600">Kelola preferensi notifikasi Anda</p>
            </div>
            
            <a href="{% url 'keuangan:notifikasi_list' %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Notifikasi
            </a>
        </div>
    </div>
    
    <!-- Settings Form -->
    <form method="POST" class="space-y-6">
        {% csrf_token %}
        
        <!-- Email Notifications -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h4 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-envelope mr-2"></i>
                Notifikasi Email
            </h4>
            <p class="text-sm text-gray-600 mb-6">Pilih jenis notifikasi yang ingin Anda terima melalui email</p>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Transaksi Baru</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada transaksi keuangan baru</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_transaksi_baru" 
                                   {% if pengaturan.email_transaksi_baru %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Donasi Baru</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada donasi baru masuk</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_donasi_baru" 
                                   {% if pengaturan.email_donasi_baru %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Iuran Telat</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada anggota yang telat membayar iuran</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_iuran_telat" 
                                   {% if pengaturan.email_iuran_telat %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Laporan Siap</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika laporan keuangan sudah siap</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_laporan_ready" 
                                   {% if pengaturan.email_laporan_ready %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Saldo Rendah</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika saldo keuangan mencapai batas minimum</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_saldo_rendah" 
                                   {% if pengaturan.email_saldo_rendah %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Pengingat</label>
                        <p class="text-sm text-gray-500">Notifikasi pengingat untuk tugas atau deadline</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_pengingat" 
                                   {% if pengaturan.email_pengingat %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- In-App Notifications -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h4 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-bell mr-2"></i>
                Notifikasi Dalam Aplikasi
            </h4>
            <p class="text-sm text-gray-600 mb-6">Pilih jenis notifikasi yang ingin Anda lihat di dalam aplikasi</p>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Transaksi Baru</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada transaksi keuangan baru</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_transaksi_baru" 
                                   {% if pengaturan.inapp_transaksi_baru %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Donasi Baru</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada donasi baru masuk</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_donasi_baru" 
                                   {% if pengaturan.inapp_donasi_baru %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Iuran Telat</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika ada anggota yang telat membayar iuran</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_iuran_telat" 
                                   {% if pengaturan.inapp_iuran_telat %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Laporan Siap</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika laporan keuangan sudah siap</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_laporan_ready" 
                                   {% if pengaturan.inapp_laporan_ready %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Saldo Rendah</label>
                        <p class="text-sm text-gray-500">Notifikasi ketika saldo keuangan mencapai batas minimum</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_saldo_rendah" 
                                   {% if pengaturan.inapp_saldo_rendah %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700">Pengingat</label>
                        <p class="text-sm text-gray-500">Notifikasi pengingat untuk tugas atau deadline</p>
                    </div>
                    <div class="ml-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="inapp_pengingat" 
                                   {% if pengaturan.inapp_pengingat %}checked{% endif %}
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Threshold Settings -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h4 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-sliders-h mr-2"></i>
                Pengaturan Threshold
            </h4>
            <p class="text-sm text-gray-600 mb-6">Atur batas minimum untuk notifikasi tertentu</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="saldo_rendah_threshold" class="block text-sm font-medium text-gray-700 mb-2">
                        Batas Saldo Rendah (Rupiah)
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">Rp</span>
                        </div>
                        <input type="number" id="saldo_rendah_threshold" name="saldo_rendah_threshold" 
                               value="{{ pengaturan.saldo_rendah_threshold }}"
                               class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                               placeholder="1000000">
                    </div>
                    <p class="mt-1 text-sm text-gray-500">Notifikasi akan muncul ketika saldo keuangan di bawah nilai ini</p>
                </div>
                
                <div>
                    <label for="iuran_telat_hari" class="block text-sm font-medium text-gray-700 mb-2">
                        Hari Iuran Telat
                    </label>
                    <div class="relative">
                        <input type="number" id="iuran_telat_hari" name="iuran_telat_hari" 
                               value="{{ pengaturan.iuran_telat_hari }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                               placeholder="7" min="1" max="30">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">hari</span>
                        </div>
                    </div>
                    <p class="mt-1 text-sm text-gray-500">Notifikasi akan muncul jika iuran terlambat lebih dari jumlah hari ini</p>
                </div>
            </div>
        </div>
        
        <!-- Save Button -->
        <div class="flex justify-end">
            <button type="submit" 
                    class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <i class="fas fa-save mr-2"></i>
                Simpan Pengaturan
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Format currency input
    document.getElementById('saldo_rendah_threshold').addEventListener('input', function(e) {
        let value = e.target.value.replace(/[^\d]/g, '');
        if (value) {
            e.target.value = parseInt(value);
        }
    });
    
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const saldoThreshold = document.getElementById('saldo_rendah_threshold').value;
        const iuranTelatHari = document.getElementById('iuran_telat_hari').value;
        
        if (!saldoThreshold || saldoThreshold < 0) {
            e.preventDefault();
            alert('Batas saldo rendah harus diisi dan tidak boleh negatif.');
            return false;
        }
        
        if (!iuranTelatHari || iuranTelatHari < 1 || iuranTelatHari > 30) {
            e.preventDefault();
            alert('Hari iuran telat harus antara 1-30 hari.');
            return false;
        }
    });
</script>
{% endblock %}