@extends('layouts.main')

@section('css')
<style>
  /* Kustomisasi Header Tabel Berwarna */
  .table-custom-header th {
      background-color: #0d6efd; /* Warna Biru Utama */
      color: #ffffff;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.5px;
      border-bottom: none !important;
  }
  
  /* Kustomisasi Input Form di dalam Tabel */
  table.dataTable tbody td input[type="number"], 
  table.dataTable tbody td input[type="text"] {
      width: 100%;
      min-width: 65px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 0.4rem 0.75rem;
      text-align: center;
      background-color: #f8fafc;
      color: #334155;
      font-weight: 600;
      transition: all 0.2s ease-in-out;
  }

  table.dataTable tbody td input:focus {
      border-color: #0d6efd;
      background-color: #ffffff;
      outline: none;
      box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
  }

  /* Menghilangkan panah atas-bawah (spinner) bawaan browser */
  table.dataTable tbody td input[type=number]::-webkit-inner-spin-button, 
  table.dataTable tbody td input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
  }
  table.dataTable tbody td input[type=number] {
      -moz-appearance: textfield;
  }

  /* Dark mode penyesuaian untuk tabel */
  .dark-mode-table th {
      background-color: #2b3035 !important;
      color: #f8f9fa !important;
      border-bottom-color: #495057 !important;
  }

  /* Kustomisasi Widget Info (Kelas, Wali Kelas, Tahun Pelajaran) */
  .widget-card {
      transition: all 0.3s ease;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.5);
  }
  .widget-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
  }
  .widget-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
  }
  
  /* Kombinasi Warna Pastel & Teks untuk Background Widget */
  .bg-soft-primary { background-color: #e0f2fe; color: #0284c7; }
  .bg-soft-success { background-color: #dcfce7; color: #166534; }
  .bg-soft-info { background-color: #cffafe; color: #0f766e; }
  
  /* Gradasi Warna untuk Ikon Widget */
  .icon-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); color: white; }
  .icon-gradient-success { background: linear-gradient(135deg, #198754 0%, #146c43 100%); color: white; }
  .icon-gradient-info { background: linear-gradient(135deg, #0dcaf0 0%, #0aacce 100%); color: white; }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header py-3">
  <div class="container-fluid">
    <div class="d-flex align-items-center mb-2">
      <a href="#" class="btn btn-white shadow-sm rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; border: 1px solid #dee2e6;" onclick="history.back()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-left text-primary" 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>
      <div>
        <h4 class="m-0 fw-bold text-dark">Input Ketidakhadiran</h4>
        <span class="text-muted small">Perbarui data presensi siswa untuk kelas ini</span>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <form action="{{ route('ketidakhadiran.update', $kelas->id) }}" method="POST" id="form-update-ketidakhadiran">
          @csrf
          @method('PUT')

          <div class="card shadow-sm border-0 rounded-3">
            
            {{-- Info Widget Section --}}
            <div class="card-header bg-white border-bottom p-4">
              <div class="row g-3">
                
                <!-- Widget Kelas -->
                <div class="col-md-4">
                  <div class="widget-card bg-soft-primary p-3 d-flex align-items-center shadow-sm h-100">
                    <div class="widget-icon icon-gradient-primary shadow-sm me-3">
                      {{-- Logika Penentuan Icon Berdasarkan Nama Kelas --}}
                      @php
                          $namaKelas = strtoupper($kelas->name);
                          $iconKelas = 'fas fa-chalkboard'; // Icon Default jika tidak cocok

                          if (str_contains($namaKelas, 'FARMASI')) {
                              $iconKelas = 'fas fa-pills'; // Icon Obat/Farmasi
                          } elseif (str_contains($namaKelas, 'TBSM')) {
                              $iconKelas = 'fas fa-motorcycle'; // Icon Motor/Mesin
                          } elseif (str_contains($namaKelas, 'TKJ')) {
                              $iconKelas = 'fas fa-network-wired'; // Icon Jaringan Komputer
                          }
                      @endphp
                      <i class="{{ $iconKelas }}"></i>
                    </div>
                    <div>
                      <p class="small mb-0 fw-bold text-uppercase" style="letter-spacing: 0.5px; opacity: 0.8;">Kelas</p>
                      <h5 class="mb-0 fw-bolder">{{ $kelas->name }}</h5>
                    </div>
                  </div>
                </div>

                <!-- Widget Wali Kelas -->
                <div class="col-md-4">
                  <div class="widget-card bg-soft-success p-3 d-flex align-items-center shadow-sm h-100">
                    <div class="widget-icon icon-gradient-success shadow-sm me-3">
                      <i class="fas fa-user-tie"></i>
                    </div>
                    <div>
                      <p class="small mb-0 fw-bold text-uppercase" style="letter-spacing: 0.5px; opacity: 0.8;">Wali Kelas</p>
                      <h5 class="mb-0 fw-bolder">{{ $kelas->wali_kelas() }}</h5>
                    </div>
                  </div>
                </div>

                <!-- Widget Tahun Pelajaran -->
                <div class="col-md-4">
                  <div class="widget-card bg-soft-info p-3 d-flex align-items-center shadow-sm h-100">
                    <div class="widget-icon icon-gradient-info shadow-sm me-3">
                      <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div>
                      <p class="small mb-0 fw-bold text-uppercase" style="letter-spacing: 0.5px; opacity: 0.8;">Tahun Pelajaran</p>
                      <h5 class="mb-0 fw-bolder">{{ $kelas->tapel->tahun_pelajaran() }}</h5>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="card-body p-0">
              @if ($siswa->count() < 1)
                {{-- Empty State --}}
                <div class="text-center py-5 m-4 bg-light rounded-3" style="border: 2px dashed #dee2e6;">
                  <i class="fas fa-users-slash fa-3x text-muted opacity-50 mb-3"></i>
                  <h6 class="fw-semibold text-secondary">Tidak Ada Siswa</h6>
                  <p class="text-muted small mb-0">Belum ada data siswa di kelas ini yang dapat diinput.</p>
                </div>
              @else
                <div class="table-responsive px-4 pb-4 pt-3">
                  <table id="myTableShow" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-custom-header {{ Auth::user()->dark_mode == '1' ? 'dark-mode-table' : '' }}">
                      <tr>
                        <th scope="col" width="5%" class="py-3 ps-2 rounded-start">No.</th>
                        <th scope="col" class="py-3" style="min-width: 150px">Nama Siswa</th>
                        <th scope="col" class="py-3">NIS</th>
                        <th scope="col" class="py-3 text-center">L/P</th>
                        <th scope="col" class="py-3 text-center" style="min-width: 80px">Sakit</th>
                        <th scope="col" class="py-3 text-center" style="min-width: 80px">Izin</th>
                        <th scope="col" class="py-3 pe-2 text-center rounded-end" style="min-width: 80px">Tanpa Keterangan</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              @endif
            </div>

            @if ($siswa->count() >= 1)
              <div class="card-footer bg-white border-top py-4 px-4 d-flex justify-content-between align-items-center flex-wrap">
                <div class="form-check mb-2 mb-md-0 d-flex align-items-center">
                  <input type="hidden" name="kelas_id" id="kelas_id" value="{{ $kelas->id }}">
                  <input type="checkbox" class="form-check-input me-2 shadow-sm" id="update-confirm" required style="width: 1.25rem; height: 1.25rem; cursor: pointer;">
                  <label class="form-check-label fw-medium text-dark ms-1" for="update-confirm" style="cursor: pointer; padding-top: 3px;">
                    Saya yakin data yang diinput sudah benar
                  </label>
                </div>
                <button type="submit" class="btn btn-primary px-4 shadow-sm fw-semibold" id="update-button">
                  <i class="fas fa-save me-1"></i> Simpan Pembaruan
                </button>
              </div>
            @endif
          </div>

        </form>
      </div>
    </div>
  </div>
</section>

@endsection

@section('js')

@include('partials.toast2')
 <script>
  $(document).ready(function() {
    $('#myTableShow').dataTable({
        processing: true,
        serveside: true,
        paginate: false,
        ajax: {
            url: '/ketidakhadiran/{{ $kelas->id }}',
        },
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: true,
                searchable: false,
                className: 'text-center'
            },
            {
                data: 'name',
                name: 'name',
                className: 'fw-medium'
            },
            {
                data: 'nis',
                name: 'nis'
            },
            {
                data: 'jk',
                name: 'jk',
                className: 'text-center'
            },
            {
                data: 'ketidakhadiran.sakit',
                name: 'ketidakhadiran.sakit',
                orderable: false,
                className: 'text-center'
            },
            {
                data: 'ketidakhadiran.izin',
                name: 'ketidakhadiran.izin',
                orderable: false,
                className: 'text-center'
            },
            {
                data: 'ketidakhadiran.tk',
                name: 'ketidakhadiran.tk',
                orderable: false,
                className: 'text-center'
            },
        ]
    });

    $('#form-update-ketidakhadiran').on('submit', function(e){
      e.preventDefault();
      if (document.getElementById('update-confirm').checked) {
        showLoader();
        $.ajax({
          url: '/ketidakhadiran/{{ $kelas->id }}',
          type: 'POST',
          data: new FormData(this),
          contentType: false,
          processData: false,

          success:function(response){
            hideLoader();
            if (response.failed){
              failedToast(response.failed);
            } else {
              $('#myTableShow').DataTable().ajax.reload();
              successToast(response.success);
            }
          }

        })
      } else {
        warningToast('Harap centang konfirmasi perubahan terlebih dahulu!');
      }
    });
  });
 </script>
@endsection