@extends('simaju.layouts.main')
@section('title', 'Detail Guru')
@section('page-title', 'Detail Guru')
@section('content')
<div class="max-w-5xl mx-auto">
    <!-- Header -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center gap-6">
            <div class="w-24 h-24 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-3xl font-bold overflow-hidden">
                @if($guru->foto)
                <img src="{{ asset('storage/fotos/' . $guru->foto) }}" alt="{{ $guru->nama }}" class="w-full h-full object-cover">
                @else
                {{ strtoupper(substr($guru->nama, 0, 1)) }}
                @endif
            </div>
            <div class="flex-1">
                <h2 class="font-heading font-bold text-2xl">{{ $guru->nama }}</h2>
                <p class="text-gray-500">{{ $guru->nip }}</p>
                <div class="flex gap-2 mt-2">
                    @if($guru->jabatan)
                    <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">{{ \App\Models\Guru::getJabatanOptions()[$guru->jabatan] ?? $guru->jabatan }}</span>
                    @endif
                    <span class="px-2 py-1 text-xs rounded-full {{ $guru->status == 'aktif' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ ucfirst($guru->status) }}
                    </span>
                </div>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('simaju.guru.edit', $guru->id) }}" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">Edit</a>
                <a href="{{ route('simaju.guru.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Data Pribadi -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Data Pribadi</h3>
                <dl class="grid grid-cols-2 gap-4">
                    <div><dt class="text-gray-500 text-sm">Jenis Kelamin</dt><dd class="font-medium">{{ $guru->jk == 'L' ? 'Laki-laki' : 'Perempuan' }}</dd></div>
                    <div><dt class="text-gray-500 text-sm">Agama</dt><dd class="font-medium">{{ $guru->agama }}</dd></div>
                    <div><dt class="text-gray-500 text-sm">Tempat, Tgl Lahir</dt><dd class="font-medium">{{ $guru->tempat_lahir }}, {{ $guru->tanggal_lahir?->format('d/m/Y') ?? '-' }}</dd></div>
                    <div><dt class="text-gray-500 text-sm">Telepon</dt><dd class="font-medium">{{ $guru->telepon ?? '-' }}</dd></div>
                    <div><dt class="text-gray-500 text-sm">Email</dt><dd class="font-medium">{{ $guru->email ?? '-' }}</dd></div>
                    <div class="col-span-2"><dt class="text-gray-500 text-sm">Alamat</dt><dd class="font-medium">{{ $guru->alamat ?? '-' }}</dd></div>
                </dl>
            </div>

            <!-- Mata Pelajaran -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Mata Pelajaran yang Diampu</h3>
                @if($guru->guruMapels && $guru->guruMapels->count() > 0)
                <div class="space-y-3">
                    @foreach($guru->guruMapels as $gm)
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white text-sm font-bold">
                            {{ $gm->mataPelajaran->kode_mapel ?? 'MP' }}
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800">{{ $gm->mataPelajaran->nama_mapel ?? '-' }}</p>
                            <p class="text-sm text-gray-500">{{ $gm->kelas->nama_kelas ?? '-' }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-gray-500 text-center py-4">Belum ada mata pelajaran yang diampu</p>
                @endif
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Info Akun -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Akun Login</h3>
                @if($guru->user)
                <div class="space-y-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <p class="font-medium text-gray-800">Aktif</p>
                            <p class="text-sm text-gray-500">{{ $guru->user->email }}</p>
                        </div>
                    </div>
                    <div class="pt-3 border-t">
                        <p class="text-sm text-gray-500">Role</p>
                        <p class="font-medium">{{ $guru->user->role_label }}</p>
                    </div>
                </div>
                @else
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path></svg>
                    </div>
                    <p class="text-gray-500 text-sm">Belum punya akun login</p>
                </div>
                @endif
            </div>

            <!-- Kelas Wali -->
            @php $kelasWali = $guru->kelas->first(); @endphp
            @if($kelasWali)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Wali Kelas</h3>
                <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <p class="font-medium text-blue-800">{{ $kelasWali->nama_kelas }}</p>
                    <p class="text-sm text-blue-600">{{ $kelasWali->jurusan->nama_jurusan ?? '' }}</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection