{{-- resources/views/admin/kesiswaan/ppdb/_table.blade.php --}}

<style>
    .table-fixed {
        table-layout: fixed;
        width: 100%;
        word-wrap: break-word;
    }
    
    .table-fixed td {
        white-space: normal !important;
        overflow-wrap: break-word;
        vertical-align: top;
    }

    .btn-wa {
        font-size: 0.65rem !important;
        padding: 4px 2px !important;
    }
</style>

<div class="table-responsive" style="overflow-x: hidden;">
  <table class="table table-bordered table-striped table-hover align-middle mb-0 table-fixed">
    <thead class="table-dark text-center align-middle" style="font-size: 0.8rem;">
      <tr>
        <th rowspan="2" style="width: 8%;">No</th>
        <th rowspan="2" style="width: 36%; text-align: left; padding-left: 15px;">Biodata Lengkap Siswa</th>
        <th colspan="3" style="width: 45%;">Data Orang Tua / Wali</th>
        <th rowspan="2" style="width: 15%;">Aksi</th>
      </tr>
      <tr>
        <th style="width: 15%;">Ayah & HP</th>
        <th style="width: 15%;">Ibu & HP</th>
        <th style="width: 15%;">Wali & HP</th>
      </tr>
    </thead>
    <tbody>
      @forelse ($ppdbs as $ppdb)
        <tr>
          <td class="fw-bold">{{ $loop->iteration }}</td>
          
          <td class="text-start px-3 py-3">
              <div class="mb-2 border-bottom pb-2">
                  <div class="mb-1">
                      <span class="badge bg-success shadow-sm" title="No. Registrasi">{{ $ppdb->register }}</span>
                      @if($ppdb->jenkel === 'L') 
                          <span class="badge bg-primary px-2 shadow-sm ms-1">Putra</span>
                      @elseif($ppdb->jenkel === 'P') 
                          <span class="badge bg-danger px-2 shadow-sm ms-1">Putri</span>
                      @endif
                  </div>
                  <div class="text-dark fs-6 fw-bold mt-1">{{ $ppdb->name }}</div>
              </div>
              
              <ul class="list-unstyled mb-0 text-muted" style="font-size: 0.75rem; line-height: 1.8;">
                  <li>
                      <i class="fa fa-id-card fa-fw me-1 text-secondary"></i> NIS: <span class="text-dark fw-bold">{{ $ppdb->nis ?? '-' }}</span> 
                  </li>
                  <li>
                      <i class="fa fa-building fa-fw me-1 text-secondary"></i> Asal Sekolah: <span class="text-dark fw-bold">{{ $ppdb->sekolah_asal }}</span>
                  </li>
                  <li>
                      <i class="fa fa-calendar-alt fa-fw me-1 text-secondary"></i> TTL: <span class="text-dark fw-bold">{{ $ppdb->tmpt_lahir }}, {{ $ppdb->tgl_lahir->format('d F Y') }}</span>
                  </li>
                  
                  <li class="d-flex align-items-start mt-1 pt-1">
                      <i class="fa fa-map-marker-alt fa-fw me-1 mt-1 text-danger"></i>
                      <div class="text-dark">
                          @if($ppdb->alamat)
                              <div class="fw-bold">{{ $ppdb->alamat }}</div>
                              
                              @if($ppdb->rt || $ppdb->rw)
                                  <div>RT.{{ $ppdb->rt ?? '-' }} / RW.{{ $ppdb->rw ?? '-' }}</div>
                              @endif
                              
                              @if($ppdb->dusun)
                                  <div>Dusun {{ $ppdb->dusun }}</div>
                              @endif
                              
                              @if($ppdb->kelurahan || $ppdb->kecamatan)
                                  <div>
                                      {{ $ppdb->kelurahan ? 'Ds. '.$ppdb->kelurahan : '' }} 
                                      {{ $ppdb->kecamatan ? ', Kec. '.$ppdb->kecamatan : '' }}
                                  </div>
                              @endif
                              
                              <div class="fst-italic text-muted mt-1" style="font-size: 0.7rem;">
                                  {{ $ppdb->kota ?? '' }} {{ $ppdb->provinsi ? '- '.$ppdb->provinsi : '' }} {{ $ppdb->kode_pos }}
                              </div>
                          @else
                              <span>-</span>
                          @endif
                      </div>
                  </li>
                  
                  <li class="mt-2 pt-2 border-top border-light">
                      <i class="fa fa-clock fa-fw me-1 text-secondary"></i> Terdaftar: <span class="fst-italic">{{ $ppdb->created_at->format('d/m/Y H:i') }}</span>
                  </li>
              </ul>
          </td>
          
          <td style="font-size: 0.75rem;" class="text-center align-middle">
            <div class="fw-bold text-dark mb-1">{{ $ppdb->name_ayah }}</div>
            <a href="https://wa.me/{{ preg_replace('/^0/', '62', $ppdb->handphone_ayah) }}" target="_blank" class="btn btn-outline-success shadow-sm w-100 btn-wa">
                <i class="fab fa-whatsapp"></i> {{ $ppdb->handphone_ayah ?? '-' }}
            </a>
          </td>
          
          <td style="font-size: 0.75rem;" class="text-center align-middle">
            <div class="fw-bold text-dark mb-1">{{ $ppdb->name_ibu }}</div>
            <a href="https://wa.me/{{ preg_replace('/^0/', '62', $ppdb->handphone_ibu) }}" target="_blank" class="btn btn-outline-success shadow-sm w-100 btn-wa">
                <i class="fab fa-whatsapp"></i> {{ $ppdb->handphone_ibu ?? '-'}}
            </a>
          </td>
          
          <td style="font-size: 0.75rem;" class="text-center align-middle">
            <div class="fw-bold text-dark mb-1">{{ $ppdb->name_wali ?? '-' }}</div>
            @if($ppdb->handphone_wali)
            <a href="https://wa.me/{{ preg_replace('/^0/', '62', $ppdb->handphone_wali) }}" target="_blank" class="btn btn-outline-success shadow-sm w-100 btn-wa">
                <i class="fab fa-whatsapp"></i> {{ $ppdb->handphone_wali }}
            </a>
            @else <span class="text-muted d-block mt-1 text-center">-</span> @endif
          </td>
          
          <td class="text-center align-middle">
            <div class="d-flex flex-wrap gap-1 justify-content-center">
                <a href="{{ route('admin.ppdb.download-bukti', $ppdb->id) }}" class="btn btn-secondary btn-sm shadow-sm py-1 px-2" target="_blank" data-bs-toggle="tooltip" title="Download Bukti">
                  <i class="fa fa-download"></i>
                </a>
                <a href="{{ route('admin.ppdb.show', $ppdb->id) }}" class="btn btn-info btn-sm shadow-sm py-1 px-2" data-bs-toggle="tooltip" title="Lihat Detail">
                  <i class="fa fa-eye"></i>
                </a>
                <form action="{{ route('admin.ppdb.destroy', $ppdb->id) }}" method="POST" class="d-inline" data-confirm-delete="true" data-item-name="PPDB {{ $ppdb->name }}">
                  @csrf @method('DELETE')
                  @if(request('menu')) <input type="hidden" name="menu" value="{{ request('menu') }}"> @endif
                  <button type="submit" class="btn btn-danger btn-sm shadow-sm py-1 px-2" data-bs-toggle="tooltip" title="Hapus Data">
                    <i class="fa fa-trash"></i>
                  </button>
                </form>
            </div>
          </td>
        </tr>
      @empty
        <tr>
          <td colspan="6" class="text-center text-muted py-5 border-0">
            <i class="fa fa-folder-open fa-3x mb-3 opacity-50"></i>
            <h5>Belum Ada Data Pendaftar</h5>
          </td>
        </tr>
      @endforelse
    </tbody>
  </table>
  
</div>