@extends('layouts.main')

@section('css')
<style>
  /* Styling Card & Badge Modern */
  .card {
    border: none;
    box-shadow: 0 0.5rem 1.25rem rgba(18, 38, 63, 0.04);
    border-radius: 0.75rem;
  }
  .info-badge-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 0.75rem;
    transition: all 0.2s ease-in-out;
  }
  .info-badge-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
  }
  .icon-box {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    flex-shrink: 0;
  }
  .table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.025);
  }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header py-4">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-12 d-flex align-items-center">
        <a href="#" class="btn btn-light border shadow-sm me-3 d-flex align-items-center justify-content-center text-primary" style="width: 42px; height: 42px; border-radius: 50% !important;" onclick="history.back()">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
          </svg>
        </a>
        <h4 class="m-0 fw-bold text-dark">
          Cetak Rapor <span class="text-primary ms-1">{{ $kelas->name }}</span>
        </h4>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    
    {{-- Identitas Kelas --}}
    <div class="row mb-4">
      <div class="col-md-4 mb-3 mb-md-0">
        <div class="info-badge-card p-3 h-100 d-flex align-items-center">
          <div class="icon-box text-primary me-3" style="background-color: rgba(13, 110, 253, 0.1);">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
              <path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1z"/>
            </svg>
          </div>
          <div class="overflow-hidden">
            <span class="d-block text-muted text-uppercase fw-bold" style="font-size: 0.7rem; letter-spacing: 0.5px;">Nama Kelas</span>
            <span class="fs-6 fw-bold text-dark text-truncate d-block">{{ $kelas->name }}</span>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-3 mb-md-0">
        <div class="info-badge-card p-3 h-100 d-flex align-items-center">
          <div class="icon-box text-success me-3" style="background-color: rgba(25, 135, 84, 0.1);">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
            </svg>
          </div>
          <div class="overflow-hidden">
            <span class="d-block text-muted text-uppercase fw-bold" style="font-size: 0.7rem; letter-spacing: 0.5px;">Wali Kelas</span>
            <span class="fs-6 fw-bold text-dark text-truncate d-block" title="{{ $kelas->wali_kelas() }}">{{ $kelas->wali_kelas() }}</span>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="info-badge-card p-3 h-100 d-flex align-items-center">
          <div class="icon-box text-warning me-3" style="background-color: rgba(255, 193, 7, 0.12);">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
            </svg>
          </div>
          <div class="overflow-hidden">
            <span class="d-block text-muted text-uppercase fw-bold" style="font-size: 0.7rem; letter-spacing: 0.5px;">Tahun Pelajaran</span>
            <span class="fs-6 fw-bold text-dark text-truncate d-block">{{ $kelas->tapel->tahun_pelajaran() }}</span>
          </div>
        </div>
      </div>
    </div>

    {{-- Tabel, Filter, dan Tombol Cetak Massal --}}
    <div class="row">
      <div class="col-12">
        <div class="card shadow-sm">
          <div class="card-header bg-white border-bottom py-3 px-4 d-flex flex-wrap justify-content-between align-items-center">
            <h5 class="m-0 fw-bold text-dark fs-6 d-flex align-items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-primary me-2" viewBox="0 0 16 16">
                <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM5.216 14A2.238 2.238 0 0 1 5 13c0-1.353.68-2.35 1.13-2.97C4.852 9.613 3.838 9 2.4 9c-1.4 0-2 .6-2 2s.6 2 2 2h2.816zM2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z"/>
              </svg>
              Daftar Siswa Kelas
            </h5>
            
            <div class="d-flex align-items-center mt-2 mt-sm-0 gap-3">
              {{-- Dropdown Kertas --}}
              <div class="d-flex align-items-center">
                <label for="paper-select" class="form-label text-muted small fw-semibold mb-0 me-2 text-nowrap">Kertas:</label>
                <select name="paper-select" class="form-select form-select-sm shadow-none border-secondary-subtle" id="paper-select" style="width: 100px; border-radius: 6px;">
                  @foreach (['F4', 'A4'] as $item)
                    <option value="{{ $item == 'F4' ? 'Folio' : 'A4' }}">{{ $item }}</option>
                  @endforeach
                </select>
              </div>

              {{-- Tombol Cetak Massal (Dropdown) --}}
              <div class="dropdown">
                <button class="btn btn-sm text-white shadow-sm d-flex align-items-center justify-content-center dropdown-toggle" 
                        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 
                        style="background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); border: none; border-radius: 6px; font-weight: 600; padding: 0.35rem 1rem;">
                  <i class="fas fa-print me-2"></i> Cetak 1 Kelas
                </button>
                
                <ul class="dropdown-menu dropdown-menu-right shadow border-0" style="border-radius: 8px; margin-top: 8px;">
                  <li><h6 class="dropdown-header fw-bold text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">Cetak Massal PDF</h6></li>
                  <li>
                    <a class="dropdown-item d-flex align-items-center py-2 btn-cetak-massal" href="javascript:void(0)" data-jenis="kelengkapan" data-kelas="{{ $kelas->id }}">
                      <i class="fas fa-id-badge text-warning me-3" style="width: 16px;"></i> Identitas Semua Siswa
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item d-flex align-items-center py-2 btn-cetak-massal" href="javascript:void(0)" data-jenis="semester" data-kelas="{{ $kelas->id }}">
                      <i class="fas fa-book-reader text-info me-3" style="width: 16px;"></i> Akademik Semua Siswa
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item d-flex align-items-center py-2 btn-cetak-massal" href="javascript:void(0)" data-jenis="p5" data-kelas="{{ $kelas->id }}">
                      <i class="fas fa-leaf text-success me-3" style="width: 16px;"></i> Projek (P5) Semua Siswa
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="card-body px-4 pb-4 pt-3">
            @if ($siswa->count() < 1)
              <div class="alert alert-light border text-center py-5 text-muted rounded-4" role="alert">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-inbox text-secondary opacity-50 mb-2" viewBox="0 0 16 16">
                  <path d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562A.5.5 0 0 0 1.884 12h12.232a.5.5 0 0 0 .498-.438L14.934 9zm-13.563 4.293A1 1 0 0 1 2.41 12h11.18a1 1 0 0 1 .98 1.147l-.35 2.8A1 1 0 0 1 13.24 17H2.76a1 1 0 0 1-.99-.853l-.35-2.8z"/>
                </svg>
                <p class="mb-0">Data siswa untuk kelas ini masih kosong!</p>
              </div>
            @else
              <div class="table-responsive">
                <table id="myTable" class="table table-hover align-middle mb-0 w-100">
                  <thead class="{{ Auth::user()->dark_mode == '1' ? 'table-light' : 'table-dark' }}">
                    <tr>
                      <th scope="col" class="py-3 ps-3" style="width: 5%;">No.</th>
                      <th scope="col" class="py-3" style="width: 20%;">NIS/NISN</th>
                      <th scope="col" class="py-3" style="width: 45%;">Nama Siswa</th>
                      <th scope="col" class="py-3 text-center" style="width: 10%;">L/P</th>
                      <th scope="col" class="py-3 text-center" style="width: 20%;">Aksi</th>
                    </tr>
                  </thead>
                </table>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('js')
 <!-- CDN SweetAlert2 -->
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

 <script>
  $(document).ready(function(){
    // Cek apakah ada session warning dari Controller
    @if(session('warning'))
      let pesanAsli = "{{ session('warning') }}";
      
      // Bersihkan teks awalan dari controller
      let bersihTeks = pesanAsli
          .replace('Cetak massal dibatalkan. Siswa berikut memiliki TP kurang dari 4: ', '')
          .replace('Rapor tidak bisa dicetak. Mata Pelajaran berikut memiliki pencapaian TP kurang dari 4: ', '')
          .replace(/\.$/, '');
      
      let itemArray = bersihTeks.split(',');
      let rowsHtml = '';
      
      itemArray.forEach((item, index) => {
          let parts = item.trim().split(' pada ');
          let namaSiswa = parts[0] || item.trim();
          let keterangan = parts[1] || 'Kurang dari 4 TP';
          
          rowsHtml += `
              <tr style="border-bottom: 1px solid #f1f5f9;">
                  <td style="padding: 10px; text-align: center; color: #64748b; font-size: 0.85rem;">${index + 1}</td>
                  <td style="padding: 10px; font-weight: 600; color: #1e293b; font-size: 0.88rem; text-align: left;">${namaSiswa}</td>
                  <td style="padding: 10px; color: #dc2626; font-weight: 500; font-size: 0.85rem; text-align: left;">${keterangan}</td>
              </tr>
          `;
      });

      Swal.fire({
          icon: 'warning',
          title: '<span style="color: #d97706; font-weight: 800; font-size: 1.3rem;">PENCAPAIAN TP BELUM MEMENUHI</span>',
          html: `
              <div style="font-size: 0.9rem; color: #475569; margin-bottom: 12px; text-align: left;">
                  Rapor tidak dapat dicetak karena daftar siswa berikut memiliki pencapaian Tujuan Pembelajaran (TP) kurang dari 4:
              </div>
              <div style="border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; max-height: 260px; overflow-y: auto;">
                  <table style="width: 100%; border-collapse: collapse; background: #ffffff;">
                      <thead style="background: #f8fafc; position: sticky; top: 0; border-bottom: 2px solid #e2e8f0; z-index: 10;">
                          <tr>
                              <th style="padding: 10px; text-align: center; font-size: 0.75rem; color: #475569; width: 10%;">No</th>
                              <th style="padding: 10px; text-align: left; font-size: 0.75rem; color: #475569; width: 50%;">Nama Siswa</th>
                              <th style="padding: 10px; text-align: left; font-size: 0.75rem; color: #475569; width: 40%;">Keterangan / Mapel</th>
                          </tr>
                      </thead>
                      <tbody>
                          ${rowsHtml}
                      </tbody>
                  </table>
              </div>
              <div style="margin-top: 12px; font-size: 0.8rem; color: #94a3b8; text-align: center;">
                  Silakan periksa dan lengkapi nilai siswa di atas melalui menu penilaian.
              </div>
          `,
          confirmButtonText: '<i class="fas fa-check-circle me-1"></i> Saya Mengerti',
          confirmButtonColor: '#f59e0b',
          background: '#ffffff',
          backdrop: `rgba(15, 23, 42, 0.8)`,
          allowOutsideClick: false,
          allowEscapeKey: false,
          width: '650px'
      });
    @endif

    $('#myTable').DataTable({
      processing: true,
      serverside: true,
      ordering: false,
      ajax: {
        url: '/cetakrapor/{{ $kelas->id }}',
      },
      columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: true, searchable: false, className: 'ps-3'},
        {data: 'nis-nisn', name: 'nis-nisn'},
        {data: 'name', name: 'name'},
        {data: 'jk', name: 'jk', className: 'text-center'},
        {data: 'aksi', name: 'aksi', className: 'text-center'},
      ],
    });

    // Tombol Cetak Per Siswa
    $('body').on('click', '.kelengkapan-button', function(){
      window.open('/cetakrapor/kelengkapan/' + $(this).data('id') + '/' +$('#paper-select').val(), '_blank');
    });
    $('body').on('click', '.semester-button', function(){
      window.open('/cetakrapor/semester/' + $(this).data('id') + '/' +$('#paper-select').val(), '_blank');
    });
    $('body').on('click', '.p5-button', function(){
      window.open('/cetakrapor/p5/' + $(this).data('id') + '/' +$('#paper-select').val(), '_blank');
    });

    // Tombol Cetak Massal (1 Kelas)
    $('body').on('click', '.btn-cetak-massal', function(e){
      e.preventDefault();
      let jenis = $(this).data('jenis');
      let kelasId = $(this).data('kelas');
      let paper = $('#paper-select').val();
      
      window.open('/cetakrapor/' + jenis + '-kelas/' + kelasId + '/' + paper, '_blank');
    });

  });
 </script>
@endsection