@extends('siswa.layouts.app')

@section('title', 'Angket Pemilihan Mapel')

@section('content')
<section class="section">
      <div class="section-header">
    <h1>Angket Pemilihan Mapel Lanjutan</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active"><a href="{{ route('siswa.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item">Angket</div>
    </div>
  </div>


  <div class="section-body">
    <div class="buttons mb-4">
      <a href="{{ route('siswa.angket.info') }}" class="btn btn-info">
        <i class="fas fa-info-circle mr-1"></i> Info
      </a>
      <a href="{{ route('siswa.angket.create') }}" class="btn btn-primary">
        <i class="fas fa-plus mr-1"></i> Pilih Mapel
      </a>
      <a href="{{ route('siswa.angket.hasil') }}" class="btn btn-success">
        <i class="fas fa-chart-bar mr-1"></i> Cek Hasil
      </a>
    </div>

    @if($angket)
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h4 class="card-title mb-2">Pilihan Anda</h4>
        <p class="mb-0"><strong>Paket Pertama:</strong> {{ $siswa->angket->paket_pertama->nama_paket ?? '-' }}</p>
        <p class="mb-0"><strong>Paket Kedua:</strong> {{ $siswa->angket->paket_kedua->nama_paket ?? '-' }}</p>
        <p class="mb-0"><strong>Paket Ketiga:</strong>{{ $siswa->angket->paket_ketiga->nama_paket ?? '-' }}</p>

      </div>
    </div>
    @else
    <div class="alert alert-warning">
      Anda belum memilih paket mata pelajaran. Silakan klik <strong>Pilih Mapel</strong> untuk mulai memilih.
    </div>
    @endif

    <h4 class="section-title mt-5 mb-3">Kuota Pemenuhan</h4>
    <div class="row">
      @foreach ($paketMapels as $paket)
        @php
          $kuota = max($paket->kuota, 1);
          $terisi = $paket->jumlah_peminat;
          $persen = round(($terisi / $kuota) * 100);
        @endphp
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
          <div class="card h-100 shadow-sm">
            <div class="card-body">
              <h5 class="card-title">{{ $paket->nama_paket }}</h5>
              <p class="text-muted mb-2">
                Kuota: {{ $paket->kuota }} | Terisi: {{ $terisi }}
              </p>
              <div class="progress" style="height: 20px;">
                <div
                  class="progress-bar {{ $persen >= 100 ? 'bg-danger' : 'bg-success' }}"
                  role="progressbar"
                  style="width: {{ $persen }}%;"
                  aria-valuenow="{{ $persen }}"
                  aria-valuemin="0"
                  aria-valuemax="100">
                  {{ $persen }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</section>
@endsection