@extends('app')

@section('title', 'Tetapan')

@section('content')
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Tetapan</h1>
        <p class="text-base text-gray-600">Konfigurasi keutamaan aplikasi anda.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Tetapan Akaun -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                <i data-lucide="user-cog" class="w-5 h-5 text-blue-600"></i>
                Tetapan Akaun
            </h3>
            <div class="space-y-1">
                <div class="flex items-center justify-between py-3 border-b border-slate-100">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Maklumat Prdaripadail</p>
                        <p class="text-xs text-gray-500">Kemaskini nama dan avatar anda</p>
                    </div>
                    <a href="/prdaripadaile" class="btn btn-sm btn-outline border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white hover:border-blue-600">
                        Edit
                    </a>
                </div>
                <div class="flex items-center justify-between py-3 border-b border-slate-100">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Kata Laluan</p>
                        <p class="text-xs text-gray-500">Tukar kata laluan log masuk anda</p>
                    </div>
                    <button class="btn btn-sm btn-outline border-blue-200 text-blue-600 hover:bg-blue-600 hover:text-white hover:border-blue-600">
                        Tukar
                    </button>
                </div>
            </div>
        </div>

        <!-- Notification Settings -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                <i data-lucide="bell" class="w-5 h-5 text-blue-600"></i>
                Pemberitahuan
            </h3>
            <div class="space-y-1">
                <div class="flex items-center justify-between py-3 border-b border-slate-100">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Amaran Kehadiran</p>
                        <p class="text-xs text-gray-500">Beritahu jika lewat daftar masuk atau tidak hadir</p>
                    </div>
                    <input type="checkbox" class="toggle toggle-sm toggle-primary" checked />
                </div>
                <div class="flex items-center justify-between py-3 border-b border-slate-100">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Permohonan Cuti</p>
                        <p class="text-xs text-gray-500">Beritahu apabila ada permohonan cuti baru</p>
                    </div>
                    <input type="checkbox" class="toggle toggle-sm toggle-primary" checked />
                </div>
                <div class="flex items-center justify-between py-3">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Kemas Kini Sistem</p>
                        <p class="text-xs text-gray-500">Pengumuman produk dan ciri baharu</p>
                    </div>
                    <input type="checkbox" class="toggle toggle-sm toggle-primary" />
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    if (window.lucide) window.lucide.createIcons();
});
</script>
@endpush