@extends('admin.layout')

@section('title', 'Pengaturan')

@section('page-title', 'Pengaturan')
@section('page-subtitle', 'Kelola pengaturan sistem dan akun')

@section('content')
    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'profil' }"
        x-init="window.addEventListener('hashchange', () => { activeTab = window.location.hash.substring(1) })">
        <!-- prengaturan tabs -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md mb-6">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <nav class="flex space-x-8 px-6" aria-label="Tabs">
                    <button @click="activeTab = 'profil'; window.location.hash = 'profil'"
                        :class="activeTab === 'profil' ? 'border-blue-500 text-blue-600 dark:text-blue-400' :
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'"
                        class="border-b-2 py-4 px-1 text-sm font-medium transition-colors duration-200">
                        Profil
                    </button>
                    <button @click="activeTab = 'keamanan'; window.location.hash = 'keamanan'"
                        :class="activeTab === 'keamanan' ? 'border-blue-500 text-blue-600 dark:text-blue-400' :
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'"
                        class="border-b-2 py-4 px-1 text-sm font-medium transition-colors duration-200">
                        Keamanan
                    </button>
                    <button @click="activeTab = 'sistem'; window.location.hash = 'sistem'"
                        :class="activeTab === 'sistem' ? 'border-blue-500 text-blue-600 dark:text-blue-400' :
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'"
                        class="border-b-2 py-4 px-1 text-sm font-medium transition-colors duration-200">
                        Sistem
                    </button>
                    <button @click="activeTab = 'notifikasi'; window.location.hash = 'notifikasi'"
                        :class="activeTab === 'notifikasi' ? 'border-blue-500 text-blue-600 dark:text-blue-400' :
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'"
                        class="border-b-2 py-4 px-1 text-sm font-medium transition-colors duration-200">
                        Notifikasi
                    </button>
                </nav>
            </div>
        </div>

        <!-- Profile Settings Section -->
        <div x-show="activeTab === 'profil'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-y-4"
            x-transition:enter-end="opacity-100 transform translate-y-0">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- Profile Picture -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Foto Profil</h3>
                    <div class="flex flex-col items-center">
                        <div
                            class="w-32 h-32 bg-blue-500 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4 uppercase">
                            {{ substr($resultakun->Nama ?? 'A', 0, 1) }}
                        </div>
                        <button
                            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition text-sm font-medium mb-2">
                            Upload Foto Baru
                        </button>
                        <button class="text-red-600 hover:text-red-800 text-sm font-medium transition">
                            Hapus Foto
                        </button>
                    </div>
                </div>

                <!-- informasi profil -->
                <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Informasi Profil</h3>
                    <form class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama
                                    Lengkap</label>
                                <input type="text" value="{{ $resultakun->Nama ?? '' }}"
                                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Username</label>
                                <input type="text" value="{{ $resultakun->Username ?? '' }}"
                                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
                            <input type="email" value="{{ $resultakun->Email ?? '' }}"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">No.
                                Telepon</label>
                            <input type="tel" value="{{ $resultakun->Telp ?? '' }}"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bio</label>
                            <textarea rows="3"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ $resultakun->IDLevel == 1 ? 'Administrator' : ($resultakun->IDLevel == 2 ? 'Prodi' : 'Surveyor') }} Tracer Study UNMUH Jember</textarea>
                        </div>
                        <div class="flex space-x-3 pt-4">
                            <button type="submit"
                                class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition font-medium">
                                Simpan Perubahan
                            </button>
                            <button type="button"
                                class="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-6 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition font-medium">
                                Batal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security Settings Section -->
        <div x-show="activeTab === 'keamanan'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-y-4"
            x-transition:enter-end="opacity-100 transform translate-y-0" id="keamanan">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Keamanan Akun</h3>
                <div class="space-y-4">
                    <div
                        class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Ubah Password</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Terakhir diubah 30 hari yang lalu</p>
                        </div>
                        <button
                            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition text-sm font-medium">
                            Ubah Password
                        </button>
                    </div>
                    <div
                        class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Autentikasi Dua Faktor</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Tambahkan lapisan keamanan ekstra</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 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-blue-500">
                            </div>
                        </label>
                    </div>
                    <div
                        class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Sesi Aktif</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">2 perangkat terhubung</p>
                        </div>
                        <button
                            class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm font-medium transition">
                            Lihat Detail
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Settings Section -->
        <div x-show="activeTab === 'sistem'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-y-4"
            x-transition:enter-end="opacity-100 transform translate-y-0">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Application Settings -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Pengaturan Aplikasi</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="font-medium text-gray-800 dark:text-white">Email Notifikasi</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Terima notifikasi via email</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 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-blue-500">
                                </div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="font-medium text-gray-800 dark:text-white">Auto Backup</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Backup otomatis setiap hari</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 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-blue-500">
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- University Settings -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Informasi Universitas</h3>
                    <form class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama
                                Universitas</label>
                            <input type="text" value="Universitas Muhammadiyah Jember"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Alamat</label>
                            <textarea rows="2"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">Jl. Karimata No. 49, Jember, Jawa Timur</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Website</label>
                            <input type="url" value="https://unmuhjember.ac.id/"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <button type="submit"
                            class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition font-medium">
                            Simpan Perubahan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Notification Settings Section -->
        <div x-show="activeTab === 'notifikasi'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-y-4"
            x-transition:enter-end="opacity-100 transform translate-y-0">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Pengaturan Notifikasi</h3>
                <p class="text-gray-500 dark:text-gray-400">Halaman pengaturan notifikasi sedang dalam pengembangan.</p>
            </div>
        </div>
    </div>
@endsection