<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Pengaturan</h2>
            <p class="text-slate-500 mt-1 text-sm">Sesuaikan preferensi aplikasi Anda</p>
        </div>
    </div>

    <div class="max-w-4xl">
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf
            @method('PATCH')

            <!-- General Settings -->
            <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm mb-6">
                <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4 flex items-center">
                    <i class="fas fa-cog mr-2 text-teal-500"></i>Umum
                </h3>

                <div class="space-y-4 sm:space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <label for="default_currency_id" class="block text-sm font-medium text-slate-700 mb-2">Mata Uang Default</label>
                            <select id="default_currency_id" name="default_currency_id"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                @foreach($currencies ?? [] as $currency)
                                    <option value="{{ $currency->id }}" {{ (old('default_currency_id', $settings->default_currency_id ?? null) == $currency->id) ? 'selected' : '' }}>
                                        {{ $currency->code }} - {{ $currency->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="date_format" class="block text-sm font-medium text-slate-700 mb-2">Format Tanggal</label>
                            <select id="date_format" name="date_format"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="d/m/Y" {{ old('date_format', $settings->date_format ?? 'd/m/Y') === 'd/m/Y' ? 'selected' : '' }}>DD/MM/YYYY (31/12/2025)</option>
                                <option value="m/d/Y" {{ old('date_format', $settings->date_format ?? '') === 'm/d/Y' ? 'selected' : '' }}>MM/DD/YYYY (12/31/2025)</option>
                                <option value="Y-m-d" {{ old('date_format', $settings->date_format ?? '') === 'Y-m-d' ? 'selected' : '' }}>YYYY-MM-DD (2025-12-31)</option>
                                <option value="d-m-Y" {{ old('date_format', $settings->date_format ?? '') === 'd-m-Y' ? 'selected' : '' }}>DD-MM-YYYY (31-12-2025)</option>
                                <option value="d M Y" {{ old('date_format', $settings->date_format ?? '') === 'd M Y' ? 'selected' : '' }}>DD Mon YYYY (31 Dec 2025)</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <label for="first_day_of_week" class="block text-sm font-medium text-slate-700 mb-2">Awal Minggu</label>
                            <select id="first_day_of_week" name="first_day_of_week"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="sunday" {{ old('first_day_of_week', $settings->first_day_of_week ?? 'monday') === 'sunday' ? 'selected' : '' }}>Minggu</option>
                                <option value="monday" {{ old('first_day_of_week', $settings->first_day_of_week ?? 'monday') === 'monday' ? 'selected' : '' }}>Senin</option>
                            </select>
                        </div>
                        <div>
                            <label for="locale" class="block text-sm font-medium text-slate-700 mb-2">Bahasa</label>
                            <select id="locale" name="locale"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="id" {{ old('locale', $settings->locale ?? 'id') === 'id' ? 'selected' : '' }}>Bahasa Indonesia</option>
                                <option value="en" {{ old('locale', $settings->locale ?? '') === 'en' ? 'selected' : '' }}>English</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <label for="theme" class="block text-sm font-medium text-slate-700 mb-2">Tema</label>
                            <select id="theme" name="theme"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="light" {{ old('theme', $settings->theme ?? 'light') === 'light' ? 'selected' : '' }}>Terang</option>
                                <option value="dark" {{ old('theme', $settings->theme ?? '') === 'dark' ? 'selected' : '' }}>Gelap</option>
                                <option value="system" {{ old('theme', $settings->theme ?? '') === 'system' ? 'selected' : '' }}>Ikuti Sistem</option>
                            </select>
                        </div>
                        <div>
                            <label for="timezone" class="block text-sm font-medium text-slate-700 mb-2">Zona Waktu</label>
                            <select id="timezone" name="timezone"
                                    class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                                <option value="Asia/Jakarta" {{ old('timezone', $settings->timezone ?? 'Asia/Jakarta') === 'Asia/Jakarta' ? 'selected' : '' }}>WIB (Jakarta)</option>
                                <option value="Asia/Makassar" {{ old('timezone', $settings->timezone ?? '') === 'Asia/Makassar' ? 'selected' : '' }}>WITA (Makassar)</option>
                                <option value="Asia/Jayapura" {{ old('timezone', $settings->timezone ?? '') === 'Asia/Jayapura' ? 'selected' : '' }}>WIT (Jayapura)</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notification Settings -->
            <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm mb-6">
                <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4 flex items-center">
                    <i class="fas fa-bell mr-2 text-teal-500"></i>Notifikasi
                </h3>

                <div class="space-y-3 sm:space-y-4">
                    <!-- Hidden fields for unchecked checkboxes -->
                    <input type="hidden" name="email_notifications" value="0">
                    <input type="hidden" name="budget_alerts" value="0">
                    <input type="hidden" name="bill_reminders" value="0">
                    <input type="hidden" name="weekly_summary" value="0">
                    <input type="hidden" name="monthly_summary" value="0">

                    <div class="flex items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 text-sm sm:text-base">Notifikasi Email</p>
                            <p class="text-xs sm:text-sm text-slate-500">Izinkan notifikasi email</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="email_notifications" value="1" class="sr-only peer"
                                   {{ old('email_notifications', $settings->email_notifications ?? true) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 text-sm sm:text-base">Peringatan Anggaran</p>
                            <p class="text-xs sm:text-sm text-slate-500">Notifikasi saat mendekati batas anggaran</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="budget_alerts" value="1" class="sr-only peer"
                                   {{ old('budget_alerts', $settings->budget_alerts ?? true) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 text-sm sm:text-base">Pengingat Tagihan</p>
                            <p class="text-xs sm:text-sm text-slate-500">Ingatkan tentang transaksi berulang</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="bill_reminders" value="1" class="sr-only peer"
                                   {{ old('bill_reminders', $settings->bill_reminders ?? true) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 text-sm sm:text-base">Ringkasan Mingguan</p>
                            <p class="text-xs sm:text-sm text-slate-500">Terima ringkasan pengeluaran mingguan via email</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="weekly_summary" value="1" class="sr-only peer"
                                   {{ old('weekly_summary', $settings->weekly_summary ?? false) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 text-sm sm:text-base">Ringkasan Bulanan</p>
                            <p class="text-xs sm:text-sm text-slate-500">Terima ringkasan pengeluaran bulanan via email</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="monthly_summary" value="1" class="sr-only peer"
                                   {{ old('monthly_summary', $settings->monthly_summary ?? false) ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Save Button -->
            <div class="flex justify-end mb-6 sm:mb-8">
                <button type="submit" class="w-full sm:w-auto px-6 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                    <i class="fas fa-save mr-2"></i>Simpan Pengaturan
                </button>
            </div>
        </form>

        <!-- Data Management -->
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm">
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4 flex items-center">
                <i class="fas fa-database mr-2 text-teal-500"></i>Manajemen Data
            </h3>

            <div class="space-y-3 sm:space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 sm:p-4 bg-slate-50 rounded-xl gap-3">
                    <div>
                        <p class="font-medium text-slate-800 text-sm sm:text-base">Ekspor Semua Data</p>
                        <p class="text-xs sm:text-sm text-slate-500">Unduh semua data keuangan Anda dalam format JSON</p>
                    </div>
                    <a href="{{ route('settings.export-data') }}"
                       class="w-full sm:w-auto text-center px-4 py-2 bg-slate-100 text-slate-700 rounded-xl hover:bg-slate-200 transition font-medium">
                        <i class="fas fa-download mr-2"></i>Ekspor
                    </a>
                </div>

                <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 sm:p-4 bg-rose-50 rounded-xl gap-3">
                    <div>
                        <p class="font-medium text-rose-600 text-sm sm:text-base">Hapus Semua Data</p>
                        <p class="text-xs sm:text-sm text-slate-500">Hapus permanen semua data. Tidak dapat dibatalkan.</p>
                    </div>
                    <button type="button" onclick="document.getElementById('deleteDataModal').classList.remove('hidden')"
                            class="w-full sm:w-auto text-center px-4 py-2 bg-rose-100 text-rose-600 rounded-xl hover:bg-rose-200 transition font-medium">
                        <i class="fas fa-trash mr-2"></i>Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Data Modal -->
    <div id="deleteDataModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black/50" onclick="document.getElementById('deleteDataModal').classList.add('hidden')"></div>
            <div class="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-exclamation-triangle text-rose-500 text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-800">Hapus Semua Data</h3>
                    <p class="text-slate-500 mt-2 text-sm">Ini akan menghapus permanen semua transaksi, akun, anggaran, dan target Anda. Tindakan ini tidak dapat dibatalkan.</p>
                </div>
                <form action="{{ route('settings.delete-data') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="mb-4">
                        <label for="confirm_delete" class="block text-sm font-medium text-slate-700 mb-2">Ketik <span class="font-bold text-rose-600">DELETE</span> untuk konfirmasi</label>
                        <input type="text" id="confirm_delete" name="confirm"
                               class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-rose-500 focus:ring-rose-500"
                               required placeholder="DELETE">
                    </div>
                    <div class="flex flex-col sm:flex-row justify-end gap-3">
                        <button type="button" onclick="document.getElementById('deleteDataModal').classList.add('hidden')"
                                class="px-5 py-2.5 text-slate-600 hover:text-slate-800 font-medium transition order-2 sm:order-1">Batal</button>
                        <button type="submit" class="px-5 py-2.5 bg-rose-500 hover:bg-rose-600 text-white font-medium rounded-xl transition order-1 sm:order-2">
                            Hapus Semuanya
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
