@extends('admin.layout')

@section('content')
<div class="max-w-6xl mx-auto mt-0">

  <!-- Header -->
  <div class="flex items-center justify-between mb-8">
    <h2 class="text-3xl font-semibold text-gray-800 flex items-center gap-3">
      <i class="fa-solid fa-id-card text-blue-600"></i>
      Detail Pendaftaran Siswa
    </h2>
    <a href="{{ route('admin.pendaftaran.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all duration-300 shadow-sm">
      <i class="fa-solid fa-arrow-left"></i> Kembali
    </a>
  </div>

  <!-- Card Detail -->
  <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
    <div class="p-8 grid md:grid-cols-2 gap-8">

      <!-- Kolom Kiri DATA SISWA-->
      <div class="space-y-4">
        <div>
            <p class="text-sm text-gray-500">Nama Lengkap</p>
            <p class="text-lg font-semibold text-gray-800">{{ $siswa->nama_lengkap }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">NIK</p>
            <p class="text-lg text-gray-800">{{ $siswa->nik }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">NISN</p>
            <p class="text-lg text-gray-800">{{ $siswa->nisn }}</p>
        </div>
        @if($siswa->kip)
        <div>
            <p class="text-sm text-gray-500">KIP</p>
            <p class="text-lg text-gray-800">{{ $siswa->kip }}</p>
        </div>
        @endif
        <div>
            <p class="text-sm text-gray-500">Tempat, Tanggal Lahir</p>
            <p class="text-lg text-gray-800">
                {{ $siswa->tempat_lahir }},
                {{ \Carbon\Carbon::parse($siswa->tanggal_lahir)->format('d M Y') }}
            </p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Jenis Kelamin</p>
            <p class="text-lg text-gray-800">
                {{ $siswa->jenis_kelamin === 'L' ? 'Laki-laki' : 'Perempuan' }}
            </p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Agama</p>
            <p class="text-lg text-gray-800">{{ $siswa->agama }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Jumlah Saudara</p>
            <p class="text-lg text-gray-800">{{ $siswa->jumlah_saudara }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Anak Ke</p>
            <p class="text-lg text-gray-800">{{ $siswa->anak_ke }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Hobi</p>
            <p class="text-lg text-gray-800">{{ $siswa->hobi }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Cita-cita</p>
            <p class="text-lg text-gray-800">{{ $siswa->cita_cita }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">No HP</p>
            <p class="text-lg text-gray-800">{{ $siswa->no_hp }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Email Aktif</p>
            <p class="text-lg text-gray-800">{{ $siswa->email }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Pembiaya Sekolah</p>
            <p class="text-lg text-gray-800">{{ $siswa->pembiaya_sekolah }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Kebutuhan Disabilitas</p>
            <p class="text-lg text-gray-800">{{ $siswa->kebutuhan_disabilitas }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Kebutuhan Khusus</p>
            <p class="text-lg text-gray-800">{{ $siswa->kebutuhan_khusus }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Status Tempat Tinggal</p>
            <p class="text-lg text-gray-800">{{ $siswa->status_tempat_tinggal }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Jarak ke Madrasah</p>
            <p class="text-lg text-gray-800">{{ $siswa->jarak_ke_madrasah }} km</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Waktu Tempuh</p>
            <p class="text-lg text-gray-800">{{ $siswa->waktu_tempuh }} menit</p>
        </div>

        <div>
            <p class="text-sm text-gray-500">Transportasi</p>
            <p class="text-lg text-gray-800">{{ $siswa->transportasi }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Alamat Lengkap</p>
            <p class="text-lg text-gray-800">{{ $siswa->alamat_lengkap }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Prestasi</p>
            <p class="text-lg text-gray-800">{{ $siswa->prestasi }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500">Beasiswa / Bantuan</p>
            <p class="text-lg text-gray-800">{{ $siswa->beasiswa }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500">Status Pendaftaran</p>
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium
              @if($siswa->status_pendaftaran == 'diterima') bg-green-100 text-green-700
              @elseif($siswa->status_pendaftaran == 'ditolak') bg-red-100 text-red-700
              @else bg-yellow-100 text-yellow-700 @endif">
            <i class="fa-solid fa-circle mr-2 text-xs"></i>
            {{ ucfirst($siswa->status_pendaftaran) }}
          </span>
        </div>        

      </div>

      <!-- Kolom Kanan -->
      <div class="space-y-10">

          <!-- ======================= -->
          <!--        DATA AYAH        -->
          <!-- ======================= -->
          <div class="backdrop-blur-xl bg-white/60 border border-gray-200/60 shadow-sm rounded-2xl p-6">
            <div class="flex items-center mb-5">
                <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
                    <i class="fa-solid fa-user text-blue-500"></i>
                </div>
                <h3 class="ml-3 text-xl font-semibold text-gray-900">Data Ayah</h3>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500">NIK Ayah</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->nik_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Nama Ayah</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->nama_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Tempat, Tanggal Lahir</p>
                    <p class="text-base font-medium text-gray-800">
                        {{ $siswa->tempat_lahir_ayah }},
                        {{ \Carbon\Carbon::parse($siswa->tanggal_lahir_ayah)->format('d M Y') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status Ayah</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->status_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Pendidikan</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->pendidikan_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Pekerjaan</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->pekerjaan_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Domisili</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->domisili_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">No HP</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->no_hp_ayah }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Penghasilan</p>
                    <p class="text-base font-medium text-gray-800">
                        Rp {{ number_format($siswa->penghasilan_ayah, 0, ',', '.') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status Tempat Tinggal</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->status_tempat_tinggal_ayah }}</p>
                </div>
                <div class="md:col-span-2">
                    <p class="text-sm text-gray-500">Alamat Ayah</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->alamat_ayah }}</p>
                </div>
            </div>
          </div>

          <!-- ======================= -->
          <!--        DATA IBU         -->
          <!-- ======================= -->
          <div class="backdrop-blur-xl bg-white/60 border border-gray-200/60 shadow-sm rounded-2xl p-6">
            <div class="flex items-center mb-5">
                <div class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center">
                    <i class="fa-solid fa-user text-pink-500"></i>
                </div>
                <h3 class="ml-3 text-xl font-semibold text-gray-900">Data Ibu</h3>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500">NIK Ibu</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->nik_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Nama Ibu</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->nama_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Tempat, Tanggal Lahir</p>
                    <p class="text-base font-medium text-gray-800">
                        {{ $siswa->tempat_lahir_ibu }},
                        {{ \Carbon\Carbon::parse($siswa->tanggal_lahir_ibu)->format('d M Y') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status Ibu</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->status_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Pendidikan</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->pendidikan_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Pekerjaan</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->pekerjaan_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Domisili</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->domisili_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">No HP</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->no_hp_ibu }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Penghasilan</p>
                    <p class="text-base font-medium text-gray-800">
                        Rp {{ number_format($siswa->penghasilan_ibu, 0, ',', '.') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status Tempat Tinggal</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->status_tempat_tinggal_ibu }}</p>
                </div>
                <div class="md:col-span-2">
                    <p class="text-sm text-gray-500">Alamat Ibu</p>
                    <p class="text-base font-medium text-gray-800">{{ $siswa->alamat_ibu }}</p>
                </div>
            </div>
          </div>

          <!-- ======================= -->
          <!--        DATA WALI        -->
          <!-- ======================= -->
          <div class="backdrop-blur-xl bg-white/60 border border-gray-200/60 shadow-sm rounded-2xl p-6">
              <div class="flex items-center mb-5">
                  <div class="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center">
                      <i class="fa-solid fa-user-shield text-purple-500"></i>
                  </div>
                  <h3 class="ml-3 text-xl font-semibold text-gray-900">Data Wali</h3>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                      <p class="text-sm text-gray-500">NIK Wali</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->nik_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Nama Wali</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->nama_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Tempat, Tanggal Lahir</p>
                      <p class="text-base font-medium text-gray-800">
                          {{ $siswa->tempat_lahir_wali }},
                          {{ \Carbon\Carbon::parse($siswa->tanggal_lahir_wali)->format('d M Y') }}
                      </p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Status Wali</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->status_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Pendidikan</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->pendidikan_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Pekerjaan</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->pekerjaan_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Domisili</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->domisili_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">No HP</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->no_hp_wali }}</p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Penghasilan</p>
                      <p class="text-base font-medium text-gray-800">
                          Rp {{ number_format($siswa->penghasilan_wali, 0, ',', '.') }}
                      </p>
                  </div>
                  <div>
                      <p class="text-sm text-gray-500">Status Tempat Tinggal</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->status_tempat_tinggal_wali }}</p>
                  </div>
                  <div class="md:col-span-2">
                      <p class="text-sm text-gray-500">Alamat Wali</p>
                      <p class="text-base font-medium text-gray-800">{{ $siswa->alamat_wali }}</p>
                  </div>
              </div>
          </div>

      <!--  END KOLOM KANAN -->
      </div>

    </div>

    <!-- Dokumen Upload -->
    <div class="border-t border-gray-100 bg-gray-50 p-8 grid md:grid-cols-3 gap-6">

      @foreach ([          
          'file_kk' => 'File KK',
          'file_ktp_ortu' => 'File KTP Orang Tua',
          'file_akte' => 'File Akte Kelahiran',
          'file_ijazah' => 'File Ijazah/SKL',
        ] as $field => $label)

      @if ($siswa->$field)
      <div x-data="{ open: false }">
        <h3 class="text-gray-700 font-semibold mb-2 flex items-center gap-2">
          <i class="fa-solid fa-file-image text-gray-500"></i> {{ $label }}
        </h3>

        <!-- Thumbnail -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100
                    w-56 h-56 flex items-center justify-center cursor-pointer hover:opacity-90 transition"
             @click="open = true">
          <img src="{{ asset('storage/'.$siswa->$field) }}" class="object-cover w-full h-full">
        </div>

        <!-- Modal Preview -->
        <div x-show="open"
             @click.away="open = false"
             class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50"
             x-transition>
          <div class="relative">
            <img src="{{ asset('storage/'.$siswa->$field) }}"
                 class="max-w-[90vw] max-h-[85vh] rounded-lg shadow-2xl border-4 border-white">
            <button @click="open = false"
                    class="absolute -top-3 -right-3 bg-white text-gray-700 rounded-full p-2 shadow hover:bg-gray-200">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
        </div>
      </div>
      @endif

      @endforeach

    </div>

    <!-- Footer -->
    <div class="px-8 py-6 border-t bg-white flex flex-col sm:flex-row justify-between">

      <p class="text-sm text-gray-500">
        Didaftarkan: <strong>{{ $siswa->created_at->format('d M Y H:i') }}</strong><br>
        Update terakhir: <strong>{{ $siswa->updated_at->format('d M Y H:i') }}</strong>
      </p>

      <!-- Tombol Status -->
      <div class="flex flex-wrap gap-3 mt-4 sm:mt-0">

        <form action="{{ route('admin.pendaftaran.updateStatus', [$siswa->id, 'status' => 'diterima']) }}" method="POST"
              onsubmit="return confirm('Yakin ingin menandai sebagai DITERIMA?')">
          @csrf
          @method('PATCH')
          <button type="submit"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-emerald-500 to-green-600 text-white shadow-md hover:shadow-lg hover:scale-[1.03] active:scale-95 transition-all">
            <i class="fa-solid fa-circle-check"></i> Diterima
          </button>
        </form>

        <form action="{{ route('admin.pendaftaran.updateStatus', [$siswa->id, 'status' => 'ditolak']) }}" method="POST"
              onsubmit="return confirm('Yakin ingin menandai sebagai DITOLAK?')">
          @csrf
          @method('PATCH')
          <button type="submit"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-rose-500 to-red-600 text-white shadow-md hover:shadow-lg hover:scale-[1.03] active:scale-95 transition-all">
            <i class="fa-solid fa-circle-xmark"></i> Ditolak
          </button>
        </form>

        <form action="{{ route('admin.pendaftaran.updateStatus', [$siswa->id, 'status' => 'menunggu']) }}" method="POST"
              onsubmit="return confirm('Kembalikan status menjadi MENUNGGU?')">
          @csrf
          @method('PATCH')
          <button type="submit"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-slate-400 to-gray-500 text-white shadow-md hover:shadow-lg hover:scale-[1.03] active:scale-95 transition-all">
            <i class="fa-solid fa-hourglass-half"></i> Menunggu
          </button>
        </form>

      </div>

    </div>
  </div>
</div>
@endsection