@extends('layouts.main')

@section('css')
  <link href="https://cdn.datatables.net/v/bs4/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/kt-2.11.0/datatables.min.css" rel="stylesheet">
  <!-- Include Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  
  <style>
    /* =========================================
       1. STYLING HEADER & TOMBOL KEMBALI
       ========================================= */
    .btn-back-modern {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 50%;
      color: #64748b;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-back-modern:hover {
      background: linear-gradient(135deg, #107c41 0%, #1da85f 100%);
      border-color: transparent;
      color: #ffffff;
      transform: translateX(-4px);
      box-shadow: 0 6px 12px rgba(16, 124, 65, 0.25);
    }
    
    .text-gradient-vibrant {
      background: linear-gradient(135deg, #107c41 0%, #22c55e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 900;
    }

    /* =========================================
       2. STYLING INFO KELAS (CALLOUT MODERN)
       ========================================= */
    .modern-info-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 5px solid #107c41; /* Hijau Excel */
      border-radius: 1rem;
      padding: 1.25rem 1.5rem;
      box-shadow: 0 10px 25px rgba(16, 124, 65, 0.05);
    }
    
    .info-box-item {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .info-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 0.85rem;
      font-size: 1.3rem;
    }
    /* Ikon dengan warna yang lebih pop (Hijau & Oranye Emas) */
    .icon-excel-green { background-color: #dcfce7; color: #15803d; }
    .icon-orange { background-color: #ffedd5; color: #ea580c; }

    .info-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 700;
      margin-bottom: 0.15rem;
    }
    .info-value {
      font-size: 1.15rem;
      color: #0f172a;
      font-weight: 800;
      margin-bottom: 0;
    }

    /* =========================================
       3. STYLING TOMBOL DATATABLES (EXCEL/PDF)
       ========================================= */
    .dt-buttons .btn {
      font-size: 0.85rem;
      border-radius: 0.5rem;
      padding: 0.5rem 1.2rem;
      font-weight: 600;
      border: none;
      color: #ffffff;
      transition: all 0.2s ease;
      margin-right: 0.5rem;
      margin-bottom: 1rem;
    }
    
    .dt-buttons .buttons-excel {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
    }
    .dt-buttons .buttons-excel:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
    }

    .dt-buttons .buttons-pdf {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    }
    .dt-buttons .buttons-pdf:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
    }

    /* =========================================
       4. STYLING CARD & TABEL UTAMA (HIJAU EXCEL)
       ========================================= */
    .card {
      border: none;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
      border-radius: 1rem;
      background-color: #ffffff;
      overflow: hidden;
    }
    
    /* Header Hijau Elektrik Khas Excel */
    .table-vibrant-header { 
      background: linear-gradient(135deg, #107c41 0%, #1da85f 100%) !important; 
      color: #ffffff !important; 
    }
    .table-vibrant-sub { 
      background: #128f4a !important; 
      color: #ffffff !important; 
    }
    
    /* Kolom Nilai dengan Gradien Kuning Keemasan (Kontras cantik dengan Hijau) */
    .bg-vibrant-nilai { 
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; 
      color: #78350f !important; 
    }

    .table th { font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; vertical-align: middle !important; border: none !important; }
    .table td { vertical-align: middle !important; border-color: #f8fafc !important; }
    
    /* Hover Efek Nuansa Hijau Muda */
    .table-hover tbody tr { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
    .table-hover tbody tr:hover { 
      background-color: #f0fdf4 !important; /* Soft Green Background */
      transform: scale(1.002); 
      box-shadow: 0 4px 12px rgba(16, 124, 65, 0.08); 
      z-index: 10;
      position: relative;
    }

    /* Badge Ranking 1 Spesial */
    .badge-rank-one { 
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); 
      color: #78350f; 
      font-weight: 800; 
      border: none; 
      box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35); 
    }
    .clean-star { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
  </style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header py-4">
  <div class="container-fluid">
    <div class="d-flex align-items-center">
      <!-- Tombol Kembali Modern -->
      <a href="#" onclick="history.back()" class="btn-back-modern me-3 text-decoration-none" title="Kembali">
        <i class="bi bi-arrow-left fs-5"></i>
      </a>
      <!-- Judul dengan Text Gradient Hidup -->
      <h3 class="m-0 fw-bold text-dark">
        Leger <span class="text-gradient-vibrant">{{ $kelas->name }}</span>
      </h3>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header px-4 pt-4 bg-transparent border-0">
            <!-- Callout Informasi Kelas Modern -->
            <div class="modern-info-card">
              <div class="row g-3">
                <div class="col-md-6 col-lg-4">
                  <div class="info-box-item">
                    <div class="info-icon icon-excel-green shadow-sm">
                      <i class="bi bi-bookmark-star-fill"></i>
                    </div>
                    <div>
                      <div class="info-label">Nama Kelas</div>
                      <div class="info-value">{{ $kelas->name }}</div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 border-start-md">
                  <div class="info-box-item">
                    <div class="info-icon icon-orange shadow-sm">
                      <i class="bi bi-person-badge-fill"></i>
                    </div>
                    <div>
                      <div class="info-label">Wali Kelas</div>
                      <div class="info-value">{{ $kelas->wali_kelas() }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- /.card-header -->
          <div class="card-body px-4 pb-4">
            @if (!$nilaiSiswa || $pembelajarans->count() < 1)
              <div class="alert alert-light text-center border py-4 rounded-3 text-muted">
                <i class="bi bi-info-circle me-2"></i> Data masih kosong!
              </div>
            @else
              <div class="table-responsive">
                <table id="myTable" class="table table-hover align-middle mb-0 fs-14">
                  <thead>
                    <tr class="table-vibrant-header {{ Auth::user()->dark_mode == '1' ? 'bg-light text-dark' : '' }}">
                      <th rowspan="2" class="text-center">No.</th>
                      <th rowspan="2">NIS</th>
                      <th rowspan="2" style="min-width: 200px">NAMA</th>
                      <th rowspan="2" class="text-center">L/P</th>
                      <th colspan="{{ count($pembelajarans) }}" class="text-center bg-vibrant-nilai fw-bold shadow-sm">NILAI MATA PELAJARAN</th>
                      <th rowspan="2" class="text-center">TOTAL</th>
                      <th rowspan="2" class="text-center">RATA-RATA</th>
                      <th rowspan="2" class="text-center">RANKING</th>
                    </tr>
                    <tr class="table-vibrant-sub">
                      @foreach($pembelajarans as $pembelajaran)
                          <th class="text-center" title="{{ $pembelajaran->mapel->name ?? '' }}">{{ $pembelajaran->mapel->singkatan }}</th>
                      @endforeach
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($nilaiSiswa as $siswa)
                      <tr>
                          <td class="text-center text-muted fw-semibold">{{ $loop->iteration }}</td>
                          <td><span class="badge bg-light text-dark border px-2 py-1">{{ $siswa['siswa']->nis }}</span></td>
                          <td class="fw-bold text-dark">{{ $siswa['siswa']->name }}</td>
                          <td class="text-center">
                            <span class="badge {{ $siswa['siswa']->jk == 'L' ? 'bg-primary-subtle text-primary border border-primary-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle' }}">
                              {{ $siswa['siswa']->jk }}
                            </span>
                          </td>
                          @foreach($pembelajarans as $pembelajaran)
                              <td class="text-center fw-semibold text-secondary">{{ $siswa[$pembelajaran->id] }}</td>
                          @endforeach
                          <td class="text-center fw-bold text-dark">{{ $siswa['totalNilai'] }}</td>
                          <td class="text-center fw-bold" style="color: #107c41;">{{ $siswa['rataRata'] }}</td>
                          <td class="text-center">
                            @if($siswa['peringkat'] == 1)
                              <span class="badge badge-rank-one rounded-pill px-3 py-1">
                                <i class="bi bi-star-fill clean-star me-1"></i> {{ $siswa['peringkat'] }}
                              </span>
                            @else
                              <span class="badge bg-light text-secondary border rounded-pill px-3 py-1">
                                {{ $siswa['peringkat'] }}
                              </span>
                            @endif
                          </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
  </div>
</section>

@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/kt-2.11.0/datatables.min.js"></script>

 <script>
  $(document).ready(function(){
    $('#myTable').DataTable({
      paginate: false,
      ordering: true,
      // searching: false,
      dom: 'Bfrtip',
        buttons: [
            { extend: 'excel', text: '<i class="bi bi-file-earmark-excel-fill me-1"></i> Excel' },
            { extend: 'pdf', text: '<i class="bi bi-file-earmark-pdf-fill me-1"></i> PDF' },
        ]
    });
  })
 </script>
@endsection