{% extends "base.html" %}

{% block title_key %}ramadan.page_title{% endblock %}
{% block title %}🌙 Ramadan Trading Mode{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8 text-center">
        <h1 class="text-3xl font-bold text-gray-800 mb-2" data-i18n="ramadan.title">🌙 Ramadan Trading Mode</h1>
        <p class="text-gray-600" data-i18n="ramadan.subtitle">Bulan suci dengan fitur trading yang menghormati ibadah puasa</p>
        <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
            <p class="text-blue-800">
                <i class="fas fa-info-circle"></i> <span data-i18n="ramadan.info">Mode ini aktif secara otomatis selama bulan Ramadan dan akan menyesuaikan pengaturan trading Anda untuk menghormati waktu ibadah. Anda tidak perlu mengaktifkannya secara manual.</span>
            </p>
        </div>
    </div>

    <!-- Current Status Card -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800" data-i18n="ramadan.status">Status Ramadan</h2>
            <span id="ramadan-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800" data-i18n="ramadan.loading">
                Loading...
            </span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="border rounded-lg p-4">
                <div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.period">Periode Ramadan</div>
                <div id="ramadan-period" class="text-lg font-semibold text-blue-600" data-i18n="ramadan.loading">
                    Loading...
                </div>
            </div>
            
            <div class="border rounded-lg p-4">
                <div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.greeting">Salam Ramadan</div>
                <div id="ramadan-greeting" class="text-lg font-semibold text-green-600" data-i18n="ramadan.loading">
                    Loading...
                </div>
            </div>
        </div>
    </div>

    <!-- Iftar Countdown -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.iftar_countdown">⏱️ Hitung Mundur Iftar</h2>
        
        <div class="flex justify-center items-center">
            <div class="text-center mx-4">
                <div id="iftar-hours" class="text-4xl font-bold text-gray-800">00</div>
                <div class="text-sm text-gray-500" data-i18n="ramadan.hours">Jam</div>
            </div>
            <div class="text-4xl font-bold text-gray-300">:</div>
            <div class="text-center mx-4">
                <div id="iftar-minutes" class="text-4xl font-bold text-gray-800">00</div>
                <div class="text-sm text-gray-500" data-i18n="ramadan.minutes">Menit</div>
            </div>
        </div>
        
        <div class="text-center mt-4 text-gray-600">
            <span data-i18n="ramadan.until">Sampai</span> <span id="next-prayer" data-i18n="ramadan.iftar">Iftar</span>
        </div>
    </div>

    <!-- Trading Adjustments -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.trading_adjustments">⚙️ Penyesuaian Trading</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.fasting_times">Waktu Istirahat Puasa</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.suhoor">Sahur</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.suhoor_time">03:30 - 05:00 WIB</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-orange-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.iftar_time">Iftar</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.iftar_time_range">18:00 - 19:30 WIB</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-purple-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.tarawih">Tarawih</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.tarawih_time">20:00 - 21:30 WIB</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.risk_adjustments">Penyesuaian Risiko</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.reduced_risk_mode">Reduced Risk Mode</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.reduced_risk_description">20% pengurangan risiko selama puasa</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-blue-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.patience_mode">Patience Mode</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.patience_mode_description">Fokus pada kualitas bukan kuantitas</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
                        <div>
                            <div class="font-medium" data-i18n="ramadan.optimal_hours">Optimal Hours</div>
                            <div class="text-sm text-gray-500" data-i18n="ramadan.optimal_hours_time">22:00 - 03:00 WIB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Zakat Calculator -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.zakat_calculator">💰 Kalkulator Zakat Trading</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_information">Informasi Zakat</h3>
                <div class="space-y-3">
                    <div class="border rounded-lg p-3">
                        <div class="text-sm text-gray-500" data-i18n="ramadan.gold_nisab">Nisab Emas</div>
                        <div class="text-lg font-semibold">85 gram</div>
                    </div>
                    <div class="border rounded-lg p-3">
                        <div class="text-sm text-gray-500" data-i18n="ramadan.silver_nisab">Nisab Perak</div>
                        <div class="text-lg font-semibold">595 gram</div>
                    </div>
                    <div class="border rounded-lg p-3">
                        <div class="text-sm text-gray-500" data-i18n="ramadan.zakat_percentage">Persentase Zakat</div>
                        <div class="text-lg font-semibold">2.5%</div>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_reminder">Pengingat Zakat</h3>
                <div class="border rounded-lg p-4 bg-blue-50">
                    <p class="text-gray-700">
                        <span data-i18n="ramadan.zakat_trading_reminder">Zakat perdagangan: 2.5% dari profit trading selama 1 tahun hijriah. Jangan lupa menghitung zakat dari profit trading Anda selama Ramadan.</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Patience Reminder -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.patience_reminder">🧘‍♂️ Pengingat Kesabaran</h2>
        
        <div class="border rounded-lg p-6 bg-green-50 text-center">
            <div id="patience-reminder" class="text-lg text-gray-700 italic" data-i18n="ramadan.loading">
                Loading...
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Function to update Ramadan status
function updateRamadanStatus(status) {
    const statusElement = document.getElementById('ramadan-status');
    const periodElement = document.getElementById('ramadan-period');
    const greetingElement = document.getElementById('ramadan-greeting');
    
    if (status.is_ramadan) {
        statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
        statusElement.textContent = 'Aktif';
        periodElement.textContent = `${status.start_date} sampai ${status.end_date}`;
        greetingElement.textContent = status.greeting;
    } else {
        statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
        statusElement.textContent = 'Tidak Aktif';
        periodElement.textContent = 'Bukan periode Ramadan';
        greetingElement.textContent = 'Saatnya berpuasa, saatnya trading dengan berkah';
    }
}

// Function to update Iftar countdown
function updateIftarCountdown(features) {
    if (features.is_ramadan && features.features.iftar_countdown) {
        const countdown = features.features.iftar_countdown;
        document.getElementById('iftar-hours').textContent = countdown.hours.toString().padStart(2, '0');
        document.getElementById('iftar-minutes').textContent = countdown.minutes.toString().padStart(2, '0');
        document.getElementById('next-prayer').textContent = countdown.next_prayer;
    }
}

// Function to update patience reminder
function updatePatienceReminder(features) {
    if (features.is_ramadan && features.features.patience_reminder) {
        document.getElementById('patience-reminder').textContent = features.features.patience_reminder;
    }
}

// Function to fetch and update all Ramadan data
async function fetchRamadanData() {
    try {
        // Fetch status
        const statusResponse = await fetch('/api/ramadan/status');
        const statusData = await statusResponse.json();
        if (statusData.success) {
            updateRamadanStatus(statusData);
        }
        
        // Fetch features
        const featuresResponse = await fetch('/api/ramadan/features');
        const featuresData = await featuresResponse.json();
        if (featuresData.success) {
            updateIftarCountdown(featuresData);
            updatePatienceReminder(featuresData);
        }
    } catch (error) {
        console.error('Error fetching Ramadan data:', error);
    }
}

// Add event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Initial data load
    fetchRamadanData();
    
    // Auto-refresh every minute
    setInterval(fetchRamadanData, 60000);
});
</script>
{% endblock %}