<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Detail Santri') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow-lg rounded-xl overflow-hidden">

                <!-- Tombol Kembali -->
                <div class="p-4 border-b">
                    <a href="{{ route('santris.index') }}" 
                       class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg">
                        &larr; Kembali ke Daftar Santri
                    </a>
                </div>

                <!-- Konten Detail -->
                <div class="p-6 md:flex md:space-x-6">
                    <!-- Foto -->
                    <div class="md:w-1/3 flex justify-center md:justify-start mb-4 md:mb-0">
                        @if($santri->foto)
                            <img src="{{ asset('storage/' . $santri->foto) }}" 
                                 alt="Foto Santri" 
                                 class="rounded-xl w-48 h-48 object-cover border shadow-sm">
                        @else
                            <div class="w-48 h-48 bg-gray-100 flex items-center justify-center rounded-xl border">
                                <span class="text-gray-400">Tidak ada foto</span>
                            </div>
                        @endif
                    </div>

                    <!-- Data Santri -->
                    <div class="md:w-2/3 space-y-3">
                        <h1 class="text-2xl font-bold text-gray-800">{{ $santri->nama }}</h1>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">NIS: {{ $santri->nis }}</span>
                            <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                                Kelas: {{ $santri->kelas ? $santri->kelas->nama_kelas : 'Belum Ditetapkan' }}
                            </span>
                        </div>

                        <div class="mt-4 space-y-1 text-gray-700">
                            <p><strong>Tempat, Tanggal Lahir:</strong> {{ $santri->tempat_lahir ?? '-' }}, {{ $santri->tanggal_lahir ?? '-' }}</p>
                            <p><strong>Alamat:</strong> {{ $santri->alamat ?? '-' }}</p>
                            <p><strong>Jenis Kelamin:</strong> {{ $santri->jenis_kelamin ?? '-' }}</p>
                            <p><strong>Telepon/HP:</strong> {{ $santri->no_telp ?? '-' }}</p>
                        </div>

                        <!-- Tombol Edit & Hapus -->
                        <div class="mt-6 flex space-x-2">
                            <a href="{{ route('santris.edit', $santri) }}" 
                               class="bg-yellow-400 hover:bg-yellow-500 text-white font-semibold px-4 py-2 rounded-lg">
                               Edit
                            </a>
                            <form action="{{ route('santris.destroy', $santri) }}" method="POST" 
                                  onsubmit="return confirm('Yakin hapus?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="bg-red-500 hover:bg-red-600 text-white font-semibold px-4 py-2 rounded-lg">
                                    Hapus
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</x-app-layout>
