<div>
    <!-- Header & Breadcrumb -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <nav class="flex text-xs text-slate-400 mb-1" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ route('dashboard') }}" class="text-slate-400 hover:text-white">Home</a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                            <a href="{{ route('personnel.index') }}" class="ml-1 text-slate-400 hover:text-white">Data Personil</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                            <span class="ml-1 text-slate-300 font-medium">Profil Individu</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-bold text-white tracking-tight">📱 Detail Profil & Riwayat Individu</h1>
        </div>

        <div class="flex items-center gap-3">
            <a href="{{ route('personnel.index') }}" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold transition-colors border border-slate-700/50 flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                <span>Kembali</span>
            </a>

            @if($user->parent_phone)
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $user->parent_phone) }}" target="_blank" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold shadow-lg shadow-emerald-600/20 transition-all flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-1.099 4.019 4.012-1.052z"/></svg>
                    <span>Hubungi Ortu WA</span>
                </a>
            @endif
        </div>
    </div>

    <!-- Main Grid Profile Card & Stats -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- Left: Profile Info Card -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm flex flex-col justify-between">
            <div class="text-center">
                <!-- Avatar -->
                <div class="w-24 h-24 rounded-2xl mx-auto overflow-hidden bg-slate-800 border-2 border-slate-700 flex items-center justify-center shadow-lg mb-4">
                    @if($user->photo_path)
                        <img src="{{ Storage::url($user->photo_path) }}" alt="{{ $user->name }}" class="w-full h-full object-cover">
                    @else
                        <span class="text-3xl font-bold text-sky-400">{{ strtoupper(substr($user->name, 0, 2)) }}</span>
                    @endif
                </div>

                <h2 class="text-lg font-bold text-white mb-1">{{ $user->name }}</h2>
                <div class="flex items-center justify-center gap-2 mb-4">
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-sky-500/10 text-sky-400 border border-sky-500/20">
                        {{ $user->role?->label ?? 'User' }}
                    </span>
                    @if($user->class_name)
                        <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                            Kelas {{ $user->class_name }}
                        </span>
                    @endif
                </div>
            </div>

            <!-- Details List -->
            <div class="space-y-3 text-xs border-t border-slate-800 pt-4">
                <div class="flex justify-between">
                    <span class="text-slate-400">NIS / NIP:</span>
                    <span class="font-mono text-white font-semibold">{{ $user->nip_nis ?? '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Email:</span>
                    <span class="font-mono text-slate-200">{{ $user->email }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">No. HP Orang Tua:</span>
                    <span class="font-mono text-emerald-400 font-semibold">{{ $user->parent_phone ?? '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Shift Jam Kerja:</span>
                    <span class="font-semibold text-sky-400">{{ $user->shift?->name ?? 'Tanpa Shift' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Status Akun:</span>
                    <span class="font-bold {{ $user->is_active ? 'text-emerald-400' : 'text-rose-400' }}">
                        {{ $user->is_active ? 'Aktif' : 'Non-Aktif' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Right: Monthly Stats & Month Filter -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Filter Month Card -->
            <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h3 class="text-sm font-bold text-white">Statistik Kehadiran Bulanan</h3>
                    <p class="text-xs text-slate-400">Periode: <strong class="text-sky-400">{{ $monthLabel }}</strong></p>
                </div>
                <div>
                    <input wire:model.live="selectedMonth" type="month" class="px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-medium focus:border-sky-500 focus:outline-none">
                </div>
            </div>

            <!-- Stats Grid -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold">H</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">Hadir</span>
                        <p class="text-xl font-bold text-emerald-400">{{ $stats['hadir'] }}</p>
                    </div>
                </div>

                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center font-bold">T</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">Terlambat</span>
                        <p class="text-xl font-bold text-amber-400">{{ $stats['terlambat'] }}</p>
                    </div>
                </div>

                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center font-bold">I</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">Izin</span>
                        <p class="text-xl font-bold text-sky-400">{{ $stats['izin'] }}</p>
                    </div>
                </div>

                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 flex items-center justify-center font-bold">S</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">Sakit</span>
                        <p class="text-xl font-bold text-purple-400">{{ $stats['sakit'] }}</p>
                    </div>
                </div>

                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 flex items-center justify-center font-bold">A</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">Alpha</span>
                        <p class="text-xl font-bold text-rose-400">{{ $stats['alpha'] }}</p>
                    </div>
                </div>

                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center font-bold">%</div>
                    <div>
                        <span class="text-[10px] font-semibold uppercase text-slate-400">% Kehadiran</span>
                        <p class="text-xl font-bold text-sky-400">{{ $stats['pctHadir'] }}%</p>
                    </div>
                </div>
            </div>

            <!-- 6-Month Attendance Rate Trend -->
            <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
                <h3 class="text-sm font-bold text-white mb-4">📈 Tren Kehadiran 6 Bulan Terakhir</h3>
                <div class="grid grid-cols-6 gap-2 items-end h-32 pt-4 border-b border-slate-800">
                    @foreach($monthsTrend as $mt)
                        <div class="flex flex-col items-center gap-2 h-full justify-end">
                            <span class="text-[10px] font-bold text-sky-400">{{ $mt['pct'] }}%</span>
                            <div class="w-full bg-slate-800 rounded-t-lg overflow-hidden flex flex-col justify-end" style="height: 80px;">
                                <div class="bg-sky-500 rounded-t-lg transition-all duration-500" style="height: {{ $mt['pct'] }}%;"></div>
                            </div>
                            <span class="text-[9px] text-slate-400 font-mono">{{ $mt['month'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- 30-Day Attendance Timeline & Leave History -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 30-Day Timeline Cards -->
        <div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
            <h3 class="text-base font-bold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <span>Riwayat Kehadiran 30 Hari Terakhir</span>
            </h3>

            <div class="space-y-3 max-h-[500px] overflow-y-auto pr-1">
                @forelse($timelineRecords as $rec)
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800/80 flex items-center justify-between gap-4 hover:border-slate-700 transition-all">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center font-bold text-xs
                                {{ $rec->status == 'Hadir' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : '' }}
                                {{ $rec->status == 'Terlambat' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' : '' }}
                                {{ $rec->status == 'Izin' ? 'bg-sky-500/10 text-sky-400 border border-sky-500/20' : '' }}
                                {{ $rec->status == 'Sakit' ? 'bg-purple-500/10 text-purple-400 border border-purple-500/20' : '' }}
                                {{ $rec->status == 'Alpha' ? 'bg-rose-500/10 text-rose-400 border border-rose-500/20' : '' }}">
                                {{ substr($rec->status, 0, 1) }}
                            </div>
                            <div>
                                <p class="text-xs font-bold text-white font-mono">{{ $rec->date->translatedFormat('l, d F Y') }}</p>
                                <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full inline-block mt-0.5
                                    {{ $rec->status == 'Hadir' ? 'bg-emerald-500/10 text-emerald-400' : '' }}
                                    {{ $rec->status == 'Terlambat' ? 'bg-amber-500/10 text-amber-400' : '' }}
                                    {{ $rec->status == 'Izin' ? 'bg-sky-500/10 text-sky-400' : '' }}
                                    {{ $rec->status == 'Sakit' ? 'bg-purple-500/10 text-purple-400' : '' }}
                                    {{ $rec->status == 'Alpha' ? 'bg-rose-500/10 text-rose-400' : '' }}">
                                    {{ $rec->status }}
                                </span>
                            </div>
                        </div>

                        <div class="text-right text-xs font-mono">
                            <p class="text-slate-300">Masuk: <span class="text-emerald-400 font-bold">{{ $rec->check_in ? substr($rec->check_in, 0, 5) : '-' }}</span></p>
                            <p class="text-slate-400 text-[11px]">Pulang: <span class="text-sky-400">{{ $rec->check_out ? substr($rec->check_out, 0, 5) : '-' }}</span></p>
                        </div>
                    </div>
                @empty
                    <p class="text-xs text-slate-500 text-center py-8">Belum ada riwayat rekaman presensi dalam 30 hari terakhir.</p>
                @endforelse
            </div>
        </div>

        <!-- Leave / Medical History -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm flex flex-col justify-between">
            <div>
                <h3 class="text-base font-bold text-white mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    <span>Riwayat Pengajuan Izin / Sakit</span>
                </h3>

                <div class="space-y-3 max-h-[420px] overflow-y-auto pr-1">
                    @forelse($leaveApplications as $leave)
                        <div class="p-3.5 rounded-xl bg-slate-950 border border-slate-800 text-xs">
                            <div class="flex items-center justify-between mb-1">
                                <span class="font-bold text-white capitalize">{{ $leave->type }}</span>
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase
                                    {{ $leave->status == 'approved' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : '' }}
                                    {{ $leave->status == 'rejected' ? 'bg-rose-500/10 text-rose-400 border border-rose-500/20' : '' }}
                                    {{ $leave->status == 'pending' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' : '' }}">
                                    {{ $leave->status }}
                                </span>
                            </div>
                            <p class="text-slate-400 text-[11px] font-mono mb-1">{{ $leave->start_date->format('d/m/Y') }} - {{ $leave->end_date->format('d/m/Y') }}</p>
                            <p class="text-slate-300 italic text-[11px]">"{{ $leave->reason }}"</p>
                        </div>
                    @empty
                        <p class="text-xs text-slate-500 text-center py-8">Belum ada catatan pengajuan izin / sakit.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
