@extends('simaju.layouts.main')

@section('title', 'Profil Saya')
@section('page-title', 'Profil')
@section('page-subtitle', 'Informasi akun Anda')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Profile Card -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-24">
                <!-- Header Banner -->
                <div class="bg-gradient-to-r from-primary to-blue-600 h-32 relative">
                    <div class="absolute -bottom-12 left-1/2 -translate-x-1/2">
                        @php
                            $user = auth()->user();
                            $words = explode(' ', $user->name);
                            $avatarText = strtoupper(substr($words[0] ?? '', 0, 1) . substr($words[1] ?? '', 0, 1));
                        @endphp
                        <div class="w-24 h-24 bg-gradient-to-br from-slate-700 to-slate-800 rounded-2xl flex items-center justify-center text-white font-bold text-3xl border-4 border-white shadow-lg">
                            {{ $avatarText }}
                        </div>
                    </div>
                </div>

                <div class="pt-16 pb-6 px-6 text-center">
                    <h3 class="text-xl font-bold text-gray-800">{{ $user->name }}</h3>
                    <p class="text-gray-500 text-sm mt-1">{{ $user->email }}</p>

                    <div class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full">
                        <i class="fas fa-shield-alt"></i>
                        <span class="text-sm font-medium">{{ ucfirst(str_replace('_', ' ', $user->role)) }}</span>
                    </div>

                    @if(isset($guru) && $guru && $guru->jabatan)
                        <div class="mt-3">
                            <span class="inline-flex items-center gap-1 px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">
                                <i class="fas fa-briefcase"></i>
                                {{ $guru->jabatan ? ($guru->getJabatanOptions()[$guru->jabatan] ?? $guru->jabatan) : '-' }}
                            </span>
                        </div>
                    @endif
                </div>

                <div class="border-t border-gray-200 px-6 py-4 space-y-3">
                    <a href="{{ route('simaju.settings.change-password') }}"
                       class="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                        <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                            <i class="fas fa-key"></i>
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800">Ganti Password</p>
                            <p class="text-xs text-gray-500">Ubah password akun</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </a>

                    @if(auth()->user()->role === 'admin')
                    <a href="{{ route('simaju.settings.index') }}"
                       class="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 group-hover:bg-purple-600 group-hover:text-white transition-colors">
                            <i class="fas fa-cog"></i>
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800">Pengaturan Sekolah</p>
                            <p class="text-xs text-gray-500">Konfigurasi sistem</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </a>
                    @endif

                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit"
                                class="w-full flex items-center gap-3 px-4 py-3 bg-red-50 rounded-xl hover:bg-red-100 transition-colors group">
                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                                <i class="fas fa-sign-out-alt"></i>
                            </div>
                            <div class="flex-1 text-left">
                                <p class="font-medium text-red-700">Logout</p>
                                <p class="text-xs text-red-400">Keluar dari sistem</p>
                            </div>
                            <i class="fas fa-chevron-right text-red-400"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Column - Info -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Info Akun -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-id-card text-primary"></i>
                        Informasi Akun
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Nama Lengkap</label>
                                <p class="text-gray-800 font-medium">{{ $user->name }}</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Email</label>
                                <p class="text-gray-800">{{ $user->email }}</p>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Role / Hak Akses</label>
                                <p class="text-gray-800">
                                    <span class="px-2 py-1 bg-primary/10 text-primary rounded text-sm font-medium">
                                        {{ ucfirst(str_replace('_', ' ', $user->role)) }}
                                    </span>
                                </p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Terakhir Login</label>
                                @if($user->last_login_at)
                                    <p class="text-gray-800">{{ $user->last_login_at->format('d M Y, H:i') }}</p>
                                    <p class="text-xs text-gray-500">{{ $user->last_login_at->diffForHumans() }}</p>
                                @else
                                    <p class="text-gray-500 italic">Belum pernah login</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Info Guru -->
            @if(isset($guru))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-chalkboard-teacher text-primary"></i>
                            Informasi Guru
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">NIP</label>
                                <p class="text-gray-800 font-medium">{{ $guru->nip ?? '-' }}</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Jenis Kelamin</label>
                                <p class="text-gray-800">{{ $guru->jk === 'L' ? 'Laki-laki' : 'Perempuan' }}</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">No. HP</label>
                                <p class="text-gray-800">{{ $guru->no_hp ?? '-' }}</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tempat, Tgl Lahir</label>
                                <p class="text-gray-800">
                                    @if($guru->tempat_lahir)
                                        {{ $guru->tempat_lahir }}, {{ $guru->tanggal_lahir ? \Carbon\Carbon::parse($guru->tanggal_lahir)->format('d M Y') : '-' }}
                                    @else
                                        -
                                    @endif
                                </p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Agama</label>
                                <p class="text-gray-800">{{ $guru->agama ?? '-' }}</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Status</label>
                                <p class="text-gray-800">
                                    <span class="px-2 py-1 {{ $guru->status === 'aktif' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }} rounded text-sm font-medium">
                                        {{ ucfirst($guru->status ?? 'aktif') }}
                                    </span>
                                </p>
                            </div>
                        </div>

                        <!-- Jabatan -->
                        @if($guru->jabatan)
                            <div class="mt-4 bg-purple-50 border border-purple-200 rounded-lg p-4">
                                <label class="block text-xs font-medium text-purple-600 uppercase tracking-wider mb-2">
                                    <i class="fas fa-briefcase mr-1"></i>Jabatan
                                </label>
                                <p class="text-purple-800 font-semibold text-lg">{{ $guru->getJabatanLabel() }}</p>
                            </div>
                        @endif

                        <!-- Mata Pelajaran -->
                        @if($guru->mataPelajarans && $guru->mataPelajarans->count() > 0)
                            <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <label class="block text-xs font-medium text-blue-600 uppercase tracking-wider mb-2">
                                    <i class="fas fa-book mr-1"></i>Mata Pelajaran yang Diampu
                                </label>
                                <div class="flex flex-wrap gap-2 mt-2">
                                    @foreach($guru->mataPelajarans as $mapel)
                                        <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
                                            {{ $mapel->nama }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Kelas Wali (jika wali kelas) -->
                @if($guru->jabatan === 'wali_kelas' && $guru->kelas->first())
                    @php $kelasWali = $guru->kelas->first(); @endphp
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
                            <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-users-class text-green-600"></i>
                                Kelas sebagai Wali Kelas
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-green-50 rounded-lg p-4 text-center">
                                    <p class="text-xs font-medium text-green-600 uppercase tracking-wider mb-1">Kelas</p>
                                    <p class="text-xl font-bold text-green-700">{{ $kelasWali->nama_kelas }}</p>
                                    <p class="text-sm text-green-600">{{ $kelasWali->jurusan->nama_jurusan ?? '' }}</p>
                                </div>
                                <div class="bg-green-50 rounded-lg p-4 text-center">
                                    <p class="text-xs font-medium text-green-600 uppercase tracking-wider mb-1">Tahun Ajaran</p>
                                    <p class="text-xl font-bold text-green-700">{{ $kelasWali->tahun_ajaran }}</p>
                                </div>
                                <div class="bg-green-50 rounded-lg p-4 text-center">
                                    <p class="text-xs font-medium text-green-600 uppercase tracking-wider mb-1">Jumlah Siswa</p>
                                    <p class="text-xl font-bold text-green-700">{{ $kelasWali->siswas ? $kelasWali->siswas->count() : 0 }}</p>
                                    <p class="text-sm text-green-600">siswa</p>
                                </div>
                            </div>
                            <div class="mt-4 text-center">
                                <a href="{{ route('simaju.guru-wali.dashboard', $guru->id) }}"
                                   class="inline-flex items-center gap-2 px-6 py-3 bg-green-600 text-white font-medium rounded-xl hover:bg-green-700 transition-colors shadow-sm">
                                    <i class="fas fa-chart-line"></i>
                                    Buka Dashboard Wali Kelas
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

            <!-- Info Sekolah -->
            @if(isset($pengaturan))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-school text-primary"></i>
                            Informasi Sekolah
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="flex items-start gap-4">
                            <div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center text-white flex-shrink-0">
                                <i class="fas fa-graduation-cap fa-2x"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-lg font-bold text-gray-800">{{ $pengaturan->nama_sekolah }}</h4>
                                <p class="text-gray-500 text-sm mt-1">
                                    {{ $pengaturan->alamat ? $pengaturan->alamat . ', ' : '' }}
                                    {{ $pengaturan->kecamatan ? $pengaturan->kecamatan . ', ' : '' }}
                                    {{ $pengaturan->kabupaten_kota ?? '' }}
                                </p>
                                @if($pengaturan->email)
                                    <div class="flex items-center gap-4 mt-2 text-sm text-gray-600">
                                        <span><i class="fas fa-envelope mr-1"></i>{{ $pengaturan->email }}</span>
                                        @if($pengaturan->no_telepon)
                                            <span><i class="fas fa-phone mr-1"></i>{{ $pengaturan->no_telepon }}</span>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection