{{-- resources/views/livewire/siswa/profil.blade.php --}}
@php use Illuminate\Support\Facades\Storage; @endphp

<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col gap-1">
        <h1 class="text-xl font-semibold">Profil {{ auth()->user()->role }}</h1>
        <p class="text-xs text-slate-500">Kelola informasi akun dan lihat biodata siswa</p>
    </div>

    {{-- Flash --}}
    @if (session('success'))
        <div class="rounded-lg bg-green-50 text-green-800 p-3 text-sm flex items-center gap-2">
            <i class="bi bi-check-circle-fill"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif
    @if (session('error'))
        <div class="rounded-lg bg-rose-50 text-rose-800 p-3 text-sm flex items-center gap-2">
            <i class="bi bi-x-circle-fill"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    {{-- Grid 2 kolom --}}
    <div class="grid gap-3 lg:grid-cols-3">
        {{-- Profil & Pengguna (editable) --}}
        <div class="lg:col-span-2 rounded-2xl bg-white ring-1 ring-slate-200 p-4 space-y-4">
            <div class="flex items-center justify-between">
                <div class="font-medium text-slate-800">Informasi Akun</div>
                <span class="text-xs rounded-full bg-slate-100 text-slate-700 px-2 py-0.5">{{ strtoupper($role) }}</span>
            </div>

            <div class="flex items-start gap-4">
                <div class="w-24 h-24 rounded-xl overflow-hidden bg-slate-100 ring-1 ring-slate-200">
                    @if ($foto_path)
                        <img src="{{ Storage::url($foto_path) }}" alt="Foto Profil" class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-slate-400">
                            <i class="bi bi-person text-4xl"></i>
                        </div>
                    @endif
                </div>

                <div class="grid sm:grid-cols-2 gap-3 flex-1 text-sm">
                    <div>
                        <div class="text-slate-500">Username</div>
                        <div class="font-medium text-slate-800">{{ $username }}</div>
                    </div>
                    <div>
                        <div class="text-slate-500">Nama</div>
                        <div class="font-medium text-slate-800">{{ $nama }}</div>
                    </div>
                    <div>
                        <div class="text-slate-500">Nomor Induk</div>
                        <div class="font-medium text-slate-800">{{ $nomor_induk }}</div>
                    </div>
                    <div>
                        <div class="text-slate-500">Nomor HP</div>
                        <div class="mt-1">
                            <input type="text" wire:model.defer="nomor_hp"
                                   class="w-full rounded-lg border {{ $errors->has('nomor_hp') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-indigo-500 focus:border-indigo-500' }} px-3 py-2">
                            @error('nomor_hp') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="text-slate-500">Foto Profil</div>
                        <input type="file" wire:model="foto" accept=".jpg,.jpeg,.png,.webp"
                               class="mt-1 w-full rounded-lg border-slate-300 focus:ring-indigo-500 focus:border-indigo-500">
                        @error('foto') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                        @if ($foto)
                            <div class="mt-2 text-xs text-slate-500">Pratinjau upload baru (belum tersimpan):</div>
                            <img src="{{ $foto->temporaryUrl() }}" class="mt-1 w-28 h-28 rounded-lg object-cover ring-1 ring-slate-200" />
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end">
                <button type="button" wire:click="saveProfile"
                        class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 text-white px-4 py-2 hover:bg-indigo-700">
                    <i class="bi bi-save"></i> Simpan Perubahan
                </button>
            </div>
        </div>

    </div>

    {{-- Ubah Password --}}
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="font-medium text-slate-800 mb-3">Ubah Password</div>

        <div class="grid sm:grid-cols-3 gap-3">
            <div>
                <label class="block text-sm mb-1">Password Lama</label>
                <input type="password" wire:model.defer="current_password"
                       class="w-full rounded-lg border {{ $errors->has('current_password') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-indigo-500 focus:border-indigo-500' }} px-3 py-2">
                @error('current_password') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm mb-1">Password Baru</label>
                <input type="password" wire:model.defer="new_password"
                       class="w-full rounded-lg border {{ $errors->has('new_password') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-indigo-500 focus:border-indigo-500' }} px-3 py-2">
                @error('new_password') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm mb-1">Konfirmasi Password Baru</label>
                <input type="password" wire:model.defer="new_password_confirmation"
                       class="w-full rounded-lg border {{ $errors->has('new_password_confirmation') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-indigo-500 focus:border-indigo-500' }} px-3 py-2">
                @error('new_password_confirmation') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex items-center justify-end mt-3">
            <button type="button" wire:click="changePassword"
                    class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 text-white px-4 py-2 hover:bg-indigo-700">
                <i class="bi bi-key"></i> Update Password
            </button>
        </div>
    </div>
</div>