@extends('layout.admin')
@section('content')
<main id="main" class="main">
  <div class="pagetitle">
    <h1>Daftar Mahasiswa Mengajukan Banding</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
        <li class="breadcrumb-item active">Banding RPL</li>
      </ol>
    </nav>
  </div>
  
  <section class="section">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body pt-3">
            <h5 class="card-title text-center mb-4">Mahasiswa Banding</h5>

            <style>
                .transition-hover {
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .transition-hover:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
                    border-left: 4px solid #ef4444 !important;
                }
                .custom-card-row {
                    border: 1px solid rgba(0,0,0,0.06) !important;
                    border-left: 4px solid transparent !important;
                    border-radius: 12px;
                }
                .avatar-badge {
                    width: 42px;
                    height: 42px;
                    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
                    color: white;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    font-size: 14px;
                    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
                }
                .btn-pill {
                    border-radius: 50px;
                    font-weight: 600;
                    font-size: 12px;
                }
                .font-weight-600 {
                    font-weight: 600;
                }
                .font-weight-500 {
                    font-weight: 500;
                }
            </style>
            
            <div class="custom-card-list">
              @forelse($mahasiswa_banding as $camaba_id => $banding_group)
                @php $camaba = $banding_group->first()->calon_mahasiswa; @endphp
                
                @if($camaba)
                  <div class="custom-card-row row align-items-center bg-white p-3 mb-3 mx-0 shadow-sm transition-hover">
                      <!-- Avatar & Name -->
                      <div class="col-md-4 d-flex align-items-center">
                          <div class="avatar-badge me-3">
                              {{ strtoupper(substr($camaba->nama ?? 'B', 0, 2)) }}
                          </div>
                          <div>
                              <h6 class="mb-0 font-weight-bold text-dark">{{ $camaba->nama ?? '-' }}</h6>
                              <small class="text-muted">No. {{ $loop->iteration }}</small>
                          </div>
                      </div>
                      <!-- NIM -->
                      <div class="col-md-5">
                          <span class="badge bg-light text-danger px-3 py-2 rounded-pill font-weight-500">
                              <i class="bi bi-person-badge me-1"></i> NIM: {{ $camaba->nim ?? '-' }}
                          </span>
                      </div>
                      <!-- Actions -->
                      <div class="col-md-3 text-end d-flex justify-content-end align-items-center">
                          <a href="{{ route('admin.detail-banding-mahasiswa', $camaba->id) }}" class="btn btn-sm btn-pill btn-outline-danger px-4">
                              Lihat Detail Banding <i class="bi bi-arrow-right-short ms-1"></i>
                          </a>
                      </div>
                  </div>
                @endif
              @empty
                <div class="text-center py-5">
                  <i class="bi bi-check2-circle text-success fs-1"></i>
                  <p class="text-muted mt-2 mb-0">Tidak ada mahasiswa yang mengajukan banding.</p>
                </div>
              @endforelse
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
</main>
@endsection