@extends('layout.super_admin')
@section('content')
<main id="main" class="main">
  <div class="pagetitle">
    <h1>Daftar Mahasiswa Mengajukan Banding (Semua Jurusan)</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/super/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>
            
            <form method="GET" action="{{ route('super.daftar-banding') }}" id="filterForm" class="row g-3 justify-content-center mb-4">
              <div class="col-md-5">
                <label for="jurusan_filter" class="form-label font-weight-bold text-dark small">FILTER JURUSAN / PRODI</label>
                <select name="jurusan_id" id="jurusan_filter" class="form-select form-select-sm shadow-sm rounded-pill px-3">
                  <option value="">Semua Jurusan</option>
                  @foreach($jurusans as $jurusan)
                    <option value="{{ $jurusan->id }}" {{ request('jurusan_id') == $jurusan->id ? 'selected' : '' }}>
                      {{ $jurusan->nama_jurusan }}
                    </option>
                  @endforeach
                </select>
              </div>
            </form>

            <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>
                      <!-- Jurusan -->
                      <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-mortarboard me-1"></i> {{ $camaba->jurusan->nama_jurusan ?? '-' }}
                          </span>
                      </div>
                      <!-- Actions -->
                      <div class="col-md-3 text-end d-flex justify-content-end align-items-center">
                          <a href="{{ route('super.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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('jurusan_filter').addEventListener('change', function() {
        document.getElementById('filterForm').submit();
    });
});
</script>
@endsection