@extends('siswa.layout')

@section('content')
<div class="max-w-5xl mx-auto py-12">

    <div 
        class="bg-white rounded-2xl shadow-lg border border-slate-200"
        x-data="{ open:false }"
    >
        <br>
        {{-- HEADER --}}
        <div class="px-8 pt-14 pb-8 text-center border-b -mt-40">

            {{-- AVATAR --}}
            <div class="flex justify-center">
                <img
                    @click="open=true; $nextTick(() => lucide.createIcons())"
                    src="{{ $student->photo ? (str_starts_with($student->photo,'http') ? $student->photo : asset('uploads/'.$student->photo)) : 'https://ui-avatars.com/api/?name='.urlencode($student->name).'&background=random&size=300&bold=true' }}"
                    class="w-24 h-24 rounded-full object-cover shadow-md cursor-pointer hover:scale-105 transition"
                >
            </div>

            {{-- LIGHTBOX --}}
            <div
                x-show="open"
                x-transition.opacity
                @click="open=false"
                style="display:none;"
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
            >
                <div @click.stop class="relative">
                    <img
                        src="{{ $student->photo ? (str_starts_with($student->photo,'http') ? $student->photo : asset('uploads/'.$student->photo)) : 'https://ui-avatars.com/api/?name='.urlencode($student->name).'&background=random&size=300&bold=true' }}"
                        class="w-72 h-72 rounded-full object-cover shadow-2xl ring-4 ring-white"
                    >
                </div>
            </div>

            {{-- NAMA --}}
            <h1 class="mt-4 text-2xl font-bold text-slate-900">
                {{ $student->name }}
            </h1>

            {{-- BADGE --}}
            <div class="flex justify-center gap-2 mt-3">
                <span class="px-3 py-1 bg-indigo-50 text-indigo-700 text-xs font-semibold rounded-full">
                    Siswa Aktif
                </span>
                <span class="px-3 py-1 bg-slate-100 text-slate-600 text-xs font-semibold rounded-full">
                    Dashboard Profil
                </span>
            </div>

            {{-- BUTTON --}}
            <div class="mt-6">
                <a href="{{ route('siswa.password.edit') }}"
                   class="inline-flex items-center gap-2 px-6 py-2.5 bg-slate-900 hover:bg-black text-white text-sm font-semibold rounded-xl shadow transition">
                    <i data-lucide="key-round" class="w-4 h-4"></i>
                    Ubah Password
                </a>
            </div>

        </div>

        {{-- INFO --}}
        <div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-6">

            {{-- NISN --}}
            <div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
                 onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
                 onmouseleave="this.style.boxShadow=''">
                <div class="p-3 bg-indigo-50 rounded-lg">
                    <i data-lucide="id-card" class="w-5 h-5 text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-slate-400 font-semibold">NISN</p>
                    <p class="font-semibold text-slate-800">{{ $student->nisn }}</p>
                </div>
            </div>

            {{-- KELAS --}}
            <div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
                 onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
                 onmouseleave="this.style.boxShadow=''">
                <div class="p-3 bg-indigo-50 rounded-lg">
                    <i data-lucide="graduation-cap" class="w-5 h-5 text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-slate-400 font-semibold">Kelas</p>
                    <p class="font-semibold text-slate-800">{{ $student->studentClass->name ?? '-' }}</p>
                </div>
            </div>

            {{-- JURUSAN --}}
            <div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
                 onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
                 onmouseleave="this.style.boxShadow=''">
                <div class="p-3 bg-indigo-50 rounded-lg">
                    <i data-lucide="map-pin" class="w-5 h-5 text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-slate-400 font-semibold">Jurusan</p>
                    <p class="font-semibold text-slate-800">{{ $student->department->name ?? '-' }}</p>
                </div>
            </div>

            {{-- WALI --}}
            <div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
                 onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
                 onmouseleave="this.style.boxShadow=''">
                <div class="p-3 bg-indigo-50 rounded-lg">
                    <i data-lucide="user-round-check" class="w-5 h-5 text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-slate-400 font-semibold">Wali Kelas</p>
                    <p class="font-semibold text-slate-800">
                        {{ $student->studentClass->homeroom_teacher->user->name ?? '-' }}
                    </p>
                </div>
            </div>

            {{-- JENIS KELAMIN --}}
<div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
     onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
     onmouseleave="this.style.boxShadow=''">
    <div class="p-3 bg-indigo-50 rounded-lg">
        <i data-lucide="users" class="w-5 h-5 text-indigo-600"></i>
    </div>
    <div>
        <p class="text-xs text-slate-400 font-semibold">Jenis Kelamin</p>
        <p class="font-semibold text-slate-800">
            {{ $student->jenis_kelamin == 'L' ? 'Laki-laki' : ($student->jenis_kelamin == 'P' ? 'Perempuan' : '-') }}
        </p>
    </div>
</div>

{{-- AGAMA --}}
<div class="flex items-center gap-4 p-5 rounded-xl bg-slate-50 border transition-transform duration-200 hover:scale-105 hover:border-indigo-200 cursor-default"
     onmouseenter="this.style.boxShadow='0 8px 25px rgba(99,102,241,0.25)'"
     onmouseleave="this.style.boxShadow=''">
    <div class="p-3 bg-indigo-50 rounded-lg">
        <i data-lucide="heart-handshake" class="w-5 h-5 text-indigo-600"></i>
    </div>
    <div>
        <p class="text-xs text-slate-400 font-semibold">Agama</p>
        <p class="font-semibold text-slate-800">
            {{ $student->agama ?? '-' }}
        </p>
    </div>
</div>


        </div>

    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();
});

document.addEventListener('alpine:initialized', () => {
    Alpine.effect(() => {
        setTimeout(() => lucide.createIcons(), 50);
    });
});
</script>
@endsection