{% extends "base.html" %}

{% block title %}Pengaturan Aplikasi - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Pengaturan Aplikasi{% endblock %}

{% block content %}
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
        <h3 class="text-lg sm:text-xl font-bold text-white">
            <i class="fas fa-cog mr-2"></i>
            Pengaturan Informasi Perusahaan
        </h3>
        <p class="text-blue-100 text-xs sm:text-sm mt-1">Informasi ini akan muncul di nota cetak.</p>
    </div>

    <form method="POST" action="{{ url_for('update_settings') }}" enctype="multipart/form-data" class="p-3 sm:p-4 lg:p-6">
        <!-- Logo Section -->
        <div class="mb-4 sm:mb-6 bg-gray-50 p-3 sm:p-5 rounded-lg border-2 border-dashed border-gray-200">
            <h4 class="font-bold text-gray-800 mb-3 text-sm sm:text-base flex items-center">
                <i class="fas fa-image text-blue-600 mr-2"></i>
                Logo Perusahaan
            </h4>
            
            <div class="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6">
                <div class="flex-shrink-0">
                    <div class="w-32 h-32 md:w-40 md:h-40 bg-white border-2 border-gray-300 rounded-lg flex items-center justify-center overflow-hidden">
                        {% if settings.logo_path %}
                        <img src="{{ url_for('static', filename='images/' + settings.logo_path) }}" 
                             alt="Logo" 
                             class="max-w-full max-h-full object-contain"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
                        <div style="display:none" class="text-center text-gray-400 p-2">
                            <i class="fas fa-image text-4xl mb-2"></i>
                            <p class="text-xs">Logo tidak ditemukan</p>
                        </div>
                        {% else %}
                        <div class="text-center text-gray-400 p-2">
                            <i class="fas fa-image text-4xl mb-2"></i>
                            <p class="text-xs">Belum ada logo</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <div class="flex-1 w-full">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-2">Upload Logo Baru</label>
                    <input type="file" name="logo" accept="image/*" 
                           class="block w-full text-xs sm:text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer">
                    <p class="text-xs text-gray-500 mt-2">
                        <i class="fas fa-info-circle mr-1"></i>
                        Format: PNG, JPG. Maks 2MB. Rekomendasi: 200x200px.
                    </p>
                </div>
            </div>
        </div>

        <!-- Company Info Section -->
        <div class="mb-4 sm:mb-6">
            <h4 class="font-bold text-gray-800 mb-3 text-sm sm:text-base flex items-center">
                <i class="fas fa-building text-blue-600 mr-2"></i>
                Informasi Perusahaan
            </h4>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Nama Perusahaan/Toko *</label>
                    <input type="text" name="company_name" value="{{ settings.company_name }}" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Contoh: UD. Kuat Betelok">
                </div>

                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Alamat Lengkap *</label>
                    <textarea name="company_address" required rows="2"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                              placeholder="Contoh: Jl. Raya Perdagangan No. 123">{{ settings.company_address }}</textarea>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">No. Telepon *</label>
                    <input type="text" name="company_phone" value="{{ settings.company_phone }}" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Contoh: (021) 12345678">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">No. WhatsApp *</label>
                    <input type="text" name="company_wa" value="{{ settings.company_wa }}" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Contoh: 0812-3456-7890">
                </div>
            </div>
        </div>

        <!-- Print Note Section -->
        <div class="mb-4 sm:mb-6">
            <h4 class="font-bold text-gray-800 mb-3 text-sm sm:text-base flex items-center">
                <i class="fas fa-sticky-note text-blue-600 mr-2"></i>
                Catatan di Nota
            </h4>
            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Catatan/Syarat & Ketentuan</label>
            <textarea name="print_note" 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="Contoh: Barang yang sudah dibeli tidak dapat dikembalikan">{{ settings.print_note }}</textarea>
        </div>

        <!-- Preview Section -->
        <div class="mb-4 sm:mb-6 bg-blue-50 p-3 sm:p-4 rounded-lg border border-blue-200">
            <h4 class="font-bold text-blue-800 mb-2 text-sm sm:text-base flex items-center">
                <i class="fas fa-eye text-blue-600 mr-2"></i>
                Preview Header Nota
            </h4>
            <div class="bg-white p-3 sm:p-4 rounded border border-blue-200 text-center">
                <div class="font-bold text-base sm:text-lg text-gray-800" id="preview_name">{{ settings.company_name }}</div>
                <div class="text-xs text-gray-600 mt-1" id="preview_address">{{ settings.company_address }}</div>
                <div class="text-xs text-gray-600" id="preview_contact">
                    Telp: <span id="preview_phone">{{ settings.company_phone }}</span> | 
                    WA: <span id="preview_wa">{{ settings.company_wa }}</span>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 gap-2 sm:gap-0 mt-6">
            <a href="{{ url_for('dashboard') }}" 
               class="w-full sm:w-auto text-center px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 font-semibold">
                Batal
            </a>
            <button type="submit" 
                    class="w-full sm:w-auto px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold">
                <i class="fas fa-save mr-2"></i>Simpan Pengaturan
            </button>
        </div>
    </form>
</div>

<!-- BACKUP & RESTORE SECTION -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden mt-6">
    <div class="p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
        <h3 class="text-lg sm:text-xl font-bold text-white">
            <i class="fas fa-database mr-2"></i>
            Backup & Restore Database
        </h3>
        <p class="text-green-100 text-xs sm:text-sm mt-1">Simpan cadangan data Anda secara rutin atau pulihkan dari cadangan sebelumnya.</p>
    </div>

    {% if current_user.role == 'Demo' %}
    <!-- Notifikasi khusus akun Demo -->
    <div class="mx-4 sm:mx-6 mt-4 p-3 bg-yellow-50 border border-yellow-300 rounded-lg flex items-start gap-3">
        <i class="fas fa-lock text-yellow-500 mt-0.5 flex-shrink-0"></i>
        <div>
            <p class="text-sm font-semibold text-yellow-800">Fitur Tidak Tersedia di Akun Demo</p>
            <p class="text-xs text-yellow-700 mt-0.5">Backup & Restore Database hanya dapat digunakan oleh Admin atau Owner. Hubungi pemilik toko untuk mengakses fitur ini.</p>
        </div>
    </div>
    {% endif %}

    <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Backup Section -->
        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 {% if current_user.role == 'Demo' %}opacity-60{% endif %}">
            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
                <i class="fas fa-download text-green-600 mr-2"></i>
                Backup Database
            </h4>
            <p class="text-sm text-gray-600 mb-4">
                Unduh file database (.db) ke perangkat Anda sebagai cadangan (backup).
                Lakukan ini secara berkala untuk mencegah kehilangan data.
            </p>
            {% if current_user.role == 'Demo' %}
            <button type="button" onclick="showDemoNotif('backup')" class="inline-flex items-center px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-lg cursor-not-allowed">
                <i class="fas fa-lock mr-2"></i> Download Backup
            </button>
            {% else %}
            <a href="{{ url_for('backup_db') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700">
                <i class="fas fa-download mr-2"></i> Download Backup
            </a>
            {% endif %}
        </div>

        <!-- Restore Section -->
        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 {% if current_user.role == 'Demo' %}opacity-60{% endif %}">
            <h4 class="font-bold text-gray-800 mb-2 flex items-center">
                <i class="fas fa-upload text-orange-600 mr-2"></i>
                Restore Database
            </h4>
            <p class="text-sm text-gray-600 mb-4">
                Pulihkan data dari file backup (.db) yang pernah Anda unduh sebelumnya.
                <strong class="text-red-600">Perhatian:</strong> Data saat ini akan diganti seluruhnya!
            </p>
            {% if current_user.role == 'Demo' %}
            <div class="flex flex-col gap-3">
                <input type="file" accept=".db" disabled
                       class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-gray-100 file:text-gray-400 cursor-not-allowed opacity-50">
                <button type="button" onclick="showDemoNotif('restore')" class="inline-flex items-center justify-center px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-lg cursor-not-allowed">
                    <i class="fas fa-lock mr-2"></i> Restore Database
                </button>
            </div>
            {% else %}
            <form method="POST" action="{{ url_for('restore_db') }}" enctype="multipart/form-data" class="flex flex-col gap-3" onsubmit="return confirm('PERINGATAN: Semua data saat ini akan DITIMPA oleh file backup ini. Lanjutkan?');">
                <input type="file" name="backup_file" accept=".db" required
                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100 cursor-pointer">
                <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-lg hover:bg-orange-700">
                    <i class="fas fa-upload mr-2"></i> Restore Database
                </button>
            </form>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function showDemoNotif(type) {
    const label = type === 'backup' ? 'Backup Database' : 'Restore Database';
    const msg = `Fitur ${label} tidak tersedia di akun Demo.\n\nHubungi Admin atau Owner untuk mengakses fitur ini.`;
    alert(msg);
}

// Live preview
document.addEventListener('DOMContentLoaded', function() {
    const fields = [
        { input: 'company_name', preview: 'preview_name' },
        { input: 'company_address', preview: 'preview_address' },
        { input: 'company_phone', preview: 'preview_phone' },
        { input: 'company_wa', preview: 'preview_wa' }
    ];
    
    fields.forEach(field => {
        const input = document.querySelector(`[name="${field.input}"]`);
        const previewEl = document.getElementById(field.preview);
        
        if (input && previewEl) {
            input.addEventListener('input', function() {
                previewEl.textContent = this.value || '-';
            });
        }
    });
});
</script>
{% endblock %}