{{-- Modal: Pilih Dapur --}}
<div id="modalPilihDapur" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100] flex items-center justify-center hidden opacity-0 transition-opacity duration-300 p-4" onclick="if(event.target === this) window.closeModalPilihDapur()">
    <div class="glass-panel w-full max-w-md shadow-2xl transform scale-95 transition-transform duration-300 flex flex-col max-h-[85vh] overflow-hidden border border-white" id="modalPilihDapurContent">
        <div class="flex justify-between items-center px-8 py-6 border-b border-slate-100 bg-white z-10">
            <div>
                <h3 class="text-xl font-extrabold text-slate-800 flex items-center"><i class="fas fa-layer-group text-sky-500 mr-2.5"></i> Mode Tampilan</h3>
                <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mt-1">Pilih Cabang Dapur</p>
            </div>
            <button onclick="window.closeModalPilihDapur()" class="text-slate-400 hover:text-rose-500 text-2xl leading-none w-10 h-10 flex items-center justify-center transition bg-slate-50 rounded-full hover:bg-rose-50">&times;</button>
        </div>
        <div class="p-6 overflow-y-auto custom-scrollbar flex-1 bg-slate-50/50" id="listDapurModal"></div>
    </div>
</div>

{{-- Modal: Profile --}}
<div id="modalProfile" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100] flex items-center justify-center hidden opacity-0 transition-opacity duration-300 p-4" onclick="if(event.target === this) window.closeModalProfile()">
    <div class="glass-panel w-full max-w-3xl shadow-2xl transform scale-95 transition-transform duration-300 flex flex-col max-h-[95vh] overflow-hidden border border-white" id="modalProfileContent">
        <div class="p-8 flex flex-col relative overflow-y-auto custom-scrollbar">
            <button onclick="window.closeModalProfile()" class="absolute top-4 right-4 text-slate-400 hover:text-rose-500 text-xl w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center transition border border-slate-100">&times;</button>

            <div class="text-center mb-6 mt-2">
                <div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-sky-100 to-blue-100 flex items-center justify-center text-sky-800 font-extrabold border-4 border-white shadow-lg text-2xl mb-4 relative">
                    <span id="profInitials">SA</span>
                    <div class="absolute bottom-0 right-0 w-5 h-5 bg-sky-500 border-2 border-white rounded-full"></div>
                </div>
                <h3 class="text-2xl font-extrabold text-slate-800" id="profTitleName">Nama Pengguna</h3>
                <p class="text-xs text-sky-600 font-bold uppercase tracking-widest mb-3 mt-1" id="profRole">Role</p>
                <div class="inline-flex flex-col items-center gap-1 bg-slate-50 px-4 py-2.5 rounded-xl border border-slate-200 shadow-sm">
                    <div class="flex items-center gap-2"><i class="fas fa-building text-slate-400 text-sm"></i> <span class="text-xs font-bold text-slate-600" id="profDapur">Nama Dapur</span></div>
                    <div class="flex items-center gap-2 mt-1"><i class="fas fa-landmark text-slate-400 text-sm"></i> <span class="text-xs font-bold text-slate-600" id="profYayasan">Yayasan</span></div>
                </div>
            </div>

            <form onsubmit="event.preventDefault(); window.saveProfileUpdate();">
            <div class="w-full border-t border-slate-100 pt-6 text-left">
                <h4 class="text-sm font-extrabold text-slate-700 mb-4 flex items-center"><i class="fas fa-user-cog text-sky-500 mr-2"></i> Pengaturan Akun</h4>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Username (Akses Login)</label>
                        <input type="text" id="profEditUsername" class="glass-input w-full p-3 text-sm rounded-xl font-medium lowercase" required>
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Nama Lengkap</label>
                        <input type="text" id="profEditNama" class="glass-input w-full p-3 text-sm rounded-xl font-medium capitalize" required>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Alamat Email <span class="text-[9px] font-normal text-slate-400 normal-case">(Opsional)</span></label>
                        <input type="email" id="profEditEmail" class="glass-input w-full p-3 text-sm rounded-xl font-medium" placeholder="email@contoh.com">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Nomor HP <span class="text-[9px] font-normal text-slate-400 normal-case">(Opsional)</span></label>
                        <input type="text" id="profEditNoHp" class="glass-input w-full p-3 text-sm rounded-xl font-medium" placeholder="08123456789">
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Kata Sandi Baru <span class="text-[9px] font-normal text-slate-400 normal-case">(Opsional)</span></label>
                    <input type="password" id="profEditPassword" class="glass-input w-full p-3 text-sm rounded-xl font-medium" placeholder="Ketik sandi baru...">
                </div>

                <div id="profYayasanSection" class="hidden border-t border-slate-100 pt-4 mb-6">
                    <h4 class="text-sm font-extrabold text-slate-700 mb-4 flex items-center"><i class="fas fa-landmark text-sky-500 mr-2"></i> Pengaturan Cabang & Yayasan</h4>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Nama Cabang SPPG</label>
                            <input type="text" id="profEditNamaCabang" class="glass-input w-full p-3 text-sm rounded-xl font-medium capitalize" placeholder="Masukkan nama cabang SPPG...">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Nama Yayasan</label>
                            <input type="text" id="profEditYayasan" class="glass-input w-full p-3 text-sm rounded-xl font-medium capitalize" placeholder="Masukkan nama yayasan...">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Upload Logo Yayasan</label>
                        <div class="border-2 border-dashed border-sky-200 bg-sky-50/30 rounded-xl p-4 flex flex-col items-start hover:border-sky-400 transition duration-200 cursor-pointer" onclick="document.getElementById('profEditLogo').click()">
                            <input type="file" id="profEditLogo" accept="image/png, image/jpeg, image/jpg" onclick="event.stopPropagation()" class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 file:transition file:duration-150 cursor-pointer">
                            <p class="text-[10px] text-slate-400 mt-2"><i class="fas fa-info-circle mr-1 text-sky-400"></i> Maks. 2MB (PNG, JPG, JPEG). Menyesuaikan rasio otomatis pada kop cetak.</p>
                        </div>
                    </div>
                </div>

                <button type="submit" class="w-full py-3 bg-gradient-to-r from-sky-500 to-blue-500 text-white rounded-xl text-sm font-bold hover:from-sky-600 hover:to-blue-600 shadow-md shadow-sky-500/20 transition transform hover:-translate-y-0.5">Simpan Perubahan</button>
            </div>
            </form>

            <div class="w-full mt-5 border-t border-slate-100 pt-5">
                <form method="POST" action="{{ route('logout') }}" id="logoutForm">
                    @csrf
                    <button type="submit" class="w-full py-3 bg-white text-rose-500 rounded-xl text-sm font-bold hover:bg-rose-50 hover:text-rose-600 border border-slate-200 transition flex items-center justify-center">
                        <i class="fas fa-sign-out-alt mr-2"></i> Keluar Sistem
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>