@extends('layouts.app')

  @section('title', 'Siswa')
  @section('content')
      <div id="alert-container" class="alert-container"></div>

      <div class="main-content">
          <div class="container-fluid">
              <!-- Page Header -->
              <div class="page-header">
                  <div class="row align-items-end">
                      <div class="col-lg-8">
                          <div class="page-header-title">
                              <i class="ik ik-user bg-blue"></i>
                              <div class="d-inline">
                                  <h5>Siswa</h5>
                                  <span>Manajemen Data Siswa</span>
                              </div>
                          </div>
                      </div>
                      <div class="col-lg-4">
                          <nav class="breadcrumb-container" aria-label="breadcrumb">
                              <ol class="breadcrumb">
                                  <li class="breadcrumb-item">
                                      <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                                  </li>
                                  <li class="breadcrumb-item active" aria-current="page">Siswa</li>
                              </ol>
                          </nav>
                      </div>
                  </div>
              </div>

              <!-- Tabel Siswa -->
              <div class="row" style="margin-bottom: 16px">
                  <div class="col-md-12">
                      <div class="card">
                          <div class="card-header d-flex justify-content-between">
                              <div class="row" style="width: 70%;">
                                  <div class="col-sm-4">
                                      <select name="tahun_ajar_id" id="filterTahunAjar" class="form-control">
                                          <option value="">-- Pilih Tahun Ajaran --</option>
                                          @foreach ($tahunAjaranList as $ta)
                                              <option value="{{ $ta->id }}"
                                                  {{ (request()->get('tahun_ajar_id') ? request()->get('tahun_ajar_id') : ($activeTahunAjar ? $activeTahunAjar->id : '')) == $ta->id ? 'selected' : '' }}>
                                                  {{ $ta->tahun }}
                                              </option>
                                          @endforeach
                                      </select>
                                  </div>
                                  <div class="col-sm-3">
                                      <select name="kelas_id" id="filterKelas" class="form-control">
                                          <option value="">-- Semua Kelas --</option>
                                          @foreach ($kelasList as $kelasItem)
                                              <option value="{{ $kelasItem->id }}"
                                                  {{ request()->get('kelas_id') == $kelasItem->id ? 'selected' : '' }}>
                                                  {{ $kelasItem->nama_kelas }}
                                              </option>
                                          @endforeach

                                      </select>
                                  </div>
                              </div>
                              <div style="text-align: right">


                                  <!-- Tombol Tambah Siswa -->
                                  <button type="button" class="btn btn-primary m-1" id="btnTambahSiswa">
                                      <i class="ik ik-plus"></i> Tambah Siswa
                                  </button>

                              </div>
                          </div>
                          <div class="card-body">
                              <table id="data_table"
                                  class="table table-hover table-striped table-bordered nowrap dataTable">
                                  <thead>
                                      <tr>
                                          <!-- Kolom centang -->
                                          <th>No</th>
                                          <th>No Induk</th>
                                          <th>Nama</th>
                                          <th>Kelas</th>
                                          <th>Status</th>
                                          <th>Aksi</th>

                                      </tr>
                                  </thead>

                                <tbody>
@foreach ($siswa as $item)
    <tr id="siswa-row-{{ $item->id }}">
        <td>{{ $loop->iteration }}</td>
        <td>{{ $item->no_induk }}</td>
        <td>{{ $item->nama }}</td>

        {{-- Kelas --}}
        <td class="kelas">
            {{ $item->kelas->nama_kelas ?? '-' }}
        </td>

        {{-- Status --}}
        <td class="wali-kelas">
            @php($st = strtolower($item->status ?? ''))
            @switch($st)
                @case('aktif')
                    <span class="badge badge-success">Aktif</span>
                    @break
                @case('berhenti')
                    <span class="badge badge-danger">Berhenti</span>
                    @break
                @default
                    {{ $st ? ucfirst($st) : '-' }}
            @endswitch
        </td>

        {{-- Aksi --}}
        <td>
            <a  href="#"
                class="editSiswa"
                data-id="{{ $item->id }}"
                data-no_induk="{{ $item->no_induk }}"
                data-nisn="{{ $item->nisn }}"
                data-nama="{{ $item->nama }}"
                data-nama_panggilan="{{ $item->nama_panggilan }}"
                data-nik="{{ $item->nik }}"
                data-jenis_kelamin="{{ $item->jenis_kelamin }}"
                data-tempat_lahir="{{ $item->tempat_lahir }}"
                data-anak_ke="{{ $item->anak_ke }}"
                data-nama_ayah="{{ $item->nama_ayah }}"
                data-pekerjaan_ayah="{{ $item->pekerjaan_ayah }}"
                data-nama_ibu="{{ $item->nama_ibu }}"
                data-pekerjaan_ibu="{{ $item->pekerjaan_ibu }}"
                data-alamat="{{ $item->alamat }}"
                data-asal_sekolah="{{ $item->asal_sekolah }}"
                data-alamat_sekolah="{{ $item->alamat_sekolah }}"
                data-telpon="{{ $item->telpon }}"
                data-kelas_id="{{ $item->kelas->id ?? '' }}"
                data-status="{{ $item->status ?? '' }}">
                <i class="ik ik-edit f-16 mr-15 text-green"></i>
            </a>

            <a href="#" class="hapusSiswa" data-id="{{ $item->id }}">
                <i class="ik ik-trash-2 f-16 text-red" style="display:none"></i>
            </a>
        </td>
    </tr>
@endforeach
</tbody>


                              </table>
                          </div>
                      </div>
                  </div>
              </div>

              <!-- Modal Tambah Siswa -->
              <div class="modal fade" id="modalTambahSiswa" tabindex="-1" role="dialog"
                  aria-labelledby="modalTambahSiswaLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="modalTambahSiswaLabel">Tambah Siswa</h5>
                              <button type="button" class="close" data-dismiss="modal">
                                  <span>&times;</span>
                              </button>
                          </div>
                          <!-- Nav tabs untuk input Manual dan Import/Export Excel -->
                          <ul class="nav nav-tabs" id="tambahSiswaTab" role="tablist">
                              <li class="nav-item">
                                  <a class="nav-link active" id="manual-tab" data-toggle="tab" href="#manual" role="tab"
                                      aria-controls="manual" aria-selected="true">Manual</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" id="excel-tab" data-toggle="tab" href="#excel" role="tab"
                                      aria-controls="excel" aria-selected="false">Import / Export Excel</a>
                              </li>
                          </ul>
                          <div class="tab-content" id="tambahSiswaTabContent">
                              <!-- Tab Manual -->
                              <div class="tab-pane fade show active" id="manual" role="tabpanel"
                                  aria-labelledby="manual-tab">
                                  <form id="formTambahSiswa" method="POST" action="{{ route('siswa.store') }}">
                                      @csrf
                                      <div class="modal-header"></div>
                                      <div class="modal-body">
                                          <!-- Baris 1: No Induk & NISN -->
                                          <div class="form-row">
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_no_induk">No Induk</label>
                                                  <input type="text" name="no_induk" id="tambah_no_induk"
                                                      class="form-control numeric-only" required maxlength="20"
                                                      oninvalid="this.setCustomValidity('No induk tidak boleh kosong.')"
                                                      oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                              </div>
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_nisn">NISN</label>
                                                  <input type="text" name="nisn" id="tambah_nisn"
                                                      class="form-control numeric-only" required maxlength="20"
                                                      oninvalid="this.setCustomValidity('NISN tidak boleh kosong.')"
                                                      oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                              </div>
                                          </div>

                                          <!-- Baris 2: Nama Siswa -->
                                          <div class="form-group">
                                              <label for="tambah_nama">Nama Siswa</label>
                                              <input type="text" name="nama" id="tambah_nama" class="form-control"
                                                  required maxlength="100">
                                          </div>

                                          <!-- Baris 3: Nama Panggilan -->
                                          <div class="form-group">
                                              <label for="tambah_nama_panggilan">Nama Panggilan</label>
                                              <input type="text" name="nama_panggilan" id="tambah_nama_panggilan"
                                                  class="form-control" maxlength="50">
                                          </div>

                                          <!-- Baris 4: NIK -->
                                          <div class="form-group">
                                              <label for="tambah_nik">NIK</label>
                                              <input type="text" name="nik" id="tambah_nik"
                                                  class="form-control numeric-only" required maxlength="16"
                                                  oninvalid="this.setCustomValidity('NIK tidak boleh kosong.')"
                                                  oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                          </div>

                                          <!-- Baris 5: Jenis Kelamin & Tempat Lahir -->
                                          <div class="form-row">
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_jenis_kelamin">Jenis Kelamin</label>
                                                  <select name="jenis_kelamin" id="tambah_jenis_kelamin"
                                                      class="form-control" required>
                                                      <option value="">-- Pilih Jenis Kelamin --</option>
                                                      <option value="L">Laki-laki</option>
                                                      <option value="P">Perempuan</option>
                                                  </select>
                                              </div>
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_tempat_lahir">Tempat Lahir</label>
                                                  <input type="text" name="tempat_lahir" id="tambah_tempat_lahir"
                                                      class="form-control" maxlength="50">
                                              </div>
                                          </div>

                                          <!-- Baris 6: Anak Ke -->
                                          <div class="form-group">
                                              <label for="tambah_anak_ke">Anak Ke</label>
                                              <input type="number" name="anak_ke" id="tambah_anak_ke"
                                                  class="form-control numeric-only"
                                                  oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                          </div>

                                          <!-- Baris 7: Nama Ayah & Pekerjaan Ayah -->
                                          <div class="form-row">
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_nama_ayah">Nama Ayah</label>
                                                  <input type="text" name="nama_ayah" id="tambah_nama_ayah"
                                                      class="form-control" maxlength="100">
                                              </div>
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_pekerjaan_ayah">Pekerjaan Ayah</label>
                                                  <input type="text" name="pekerjaan_ayah" id="tambah_pekerjaan_ayah"
                                                      class="form-control" maxlength="100">
                                              </div>
                                          </div>

                                          <!-- Baris 8: Nama Ibu & Pekerjaan Ibu -->
                                          <div class="form-row">
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_nama_ibu">Nama Ibu</label>
                                                  <input type="text" name="nama_ibu" id="tambah_nama_ibu"
                                                      class="form-control" maxlength="100">
                                              </div>
                                              <div class="form-group col-md-6">
                                                  <label for="tambah_pekerjaan_ibu">Pekerjaan Ibu</label>
                                                  <input type="text" name="pekerjaan_ibu" id="tambah_pekerjaan_ibu"
                                                      class="form-control" maxlength="100">
                                              </div>
                                          </div>

                                          <!-- Baris 9: Alamat -->
                                          <div class="form-group">
                                              <label for="tambah_alamat">Alamat</label>
                                              <textarea name="alamat" id="tambah_alamat" class="form-control" rows="2"></textarea>
                                          </div>

                                          <!-- Baris 10: Asal Sekolah -->
                                          <div class="form-group">
                                              <label for="tambah_asal_sekolah">Asal Sekolah</label>
                                              <input type="text" name="asal_sekolah" id="tambah_asal_sekolah"
                                                  class="form-control" maxlength="100">
                                          </div>

                                          <!-- Baris 11: Alamat Sekolah -->
                                          <div class="form-group">
                                              <label for="tambah_alamat_sekolah">Alamat Sekolah</label>
                                              <textarea name="alamat_sekolah" id="tambah_alamat_sekolah" class="form-control" rows="2"></textarea>
                                          </div>

                                          <!-- Baris 12: Telpon -->
                                          <div class="form-group">
                                              <label for="tambah_telpon">Telpon</label>
                                              <input type="text" name="telpon" id="tambah_telpon"
                                                  class="form-control numeric-only" maxlength="20"
                                                  oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                          </div>

                                          <!-- Baris 13: Status (Tambahan) -->
                                          <div class="form-group">
                                            <label for="tambah_status">Status</label>
                                            <select name="status" id="tambah_status" class="form-control" required disabled>
                                                <option value="aktif" selected>Aktif</option>
                                            </select>
                                             <!-- Hidden input untuk mengirim nilai status -->
                                            <input type="hidden" name="status" id="tambah_status" value="aktif">
                                        </div>



                                          <!-- Tambahkan input hidden untuk tahun ajar -->
                                          <input type="hidden" name="tahun_ajar_id" value="{{ $tahunAjarId }}">

                                          <!-- Baris 14: Dropdown Kelas -->
                                          <div class="form-group">
                                              <label for="tambah_kelas_id">Kelas</label>
                                              <select name="kelas_id" id="tambah_kelas_id" class="form-control" required
                                                  oninvalid="this.setCustomValidity('Kelas tidak boleh kosong.')"
                                                  oninput="this.setCustomValidity('')">
                                                  <option value="">-- Pilih Kelas --</option>
                                                  @foreach ($kelasList as $kelasItem)
                                                      <option value="{{ $kelasItem->id }}">{{ $kelasItem->nama_kelas }}
                                                      </option>
                                                  @endforeach
                                              </select>
                                                <!-- Hidden input untuk mengirim nilai kelas_id -->
                                                <input type="hidden" name="kelas_id" id="tambah_kelas" value="">
                                          </div>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-secondary"
                                              data-dismiss="modal">Batal</button>
                                          <button type="submit" class="btn btn-primary">Simpan Siswa</button>
                                      </div>
                                  </form>
                              </div>

                              <!-- Tab Excel -->
                              <div class="tab-pane fade" id="excel" role="tabpanel" aria-labelledby="excel-tab">
                                  <form id="formImportExcel" enctype="multipart/form-data"
                                      action="{{ route('siswa.importExcel') }}">
                                      @csrf
                                      <div class="modal-body">
                                          <div class="mb-3">
                                           <a href="{{ route('siswa.downloadTemplate', ['kelas_id' => request()->get('kelas_id'), 'tahun_ajar_id' => request()->get('tahun_ajar_id')]) }}" class="btn btn-info">
                                                <i class="ik ik-download"></i> Download Template Excel
                                            </a>


                                          </div>
                                          <div class="alert alert-info">
                                              <strong>Catatan:</strong> Silakan unduh template dan isi dengan data sesuai
                                              format berikut:
                                              <ul>
                                                  <li>No Induk</li>
                                                  <li>NISN</li>
                                                  <li>Nama</li>
                                                  <li>Nama Panggilan</li>
                                                  <li>NIK</li>
                                                  <li>Jenis Kelamin (L/P)</li>
                                                  <li>Tempat Lahir</li>
                                                  <li>...</li>
                                                  <li>Kelas ID</li>
                                              </ul>
                                          </div>

                                          <!-- Input hidden untuk tahun ajaran -->
                                          <input type="hidden" name="tahun_ajar_id" value="{{ $tahunAjarId }}">
                                          
                                        <!-- Tambahkan input hidden untuk kelas_id -->
                                        <input type="hidden" name="kelas_id" value="{{ request()->get('kelas_id') }}">

                                          <div class="form-group">
                                              <label>Upload File Excel</label>
                                              <input type="file" name="excel_file" class="form-control-file"
                                                  accept=".xls,.xlsx" required>
                                          </div>
                                      </div>
                                      <div class="modal-footer">
                                          <!-- Tombol Batal -->
                                          <button type="button" class="btn btn-secondary"
                                              data-dismiss="modal">Batal</button>

                                          <!-- Tombol Import (AJAX) -->
                                          <button type="submit" class="btn btn-primary" id="btnImportExcel">
                                              <i class="ik ik-upload"></i> Import Excel
                                          </button>

                                          <!-- Tombol Export -->
                                          <!--<a href="{{ route('siswa.exportExcel') }}" class="btn btn-success">-->
                                          <!--    <i class="ik ik-download"></i> Export Excel-->
                                          <!--</a>-->
                                      </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

              <!-- Modal Konfirmasi Duplikat -->
              <div class="modal fade" id="confirmImportModal" tabindex="-1" role="dialog"
                  aria-labelledby="confirmImportModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title">Konfirmasi Import</h5>
                              <button type="button" class="close" data-dismiss="modal">
                                  <span>&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              <p><strong>Ditemukan data duplikat:</strong></p>
                              <div id="duplicateListText" style="max-height:200px; overflow-y:auto;"></div>
                              <hr>
                              <p>Apakah Anda ingin menimpa (update) data tersebut?</p>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" id="confirmSkipBtn">Tidak</button>
                              <button type="button" class="btn btn-primary" id="confirmOverrideBtn">Ya, timpa</button>
                          </div>
                      </div>
                  </div>
              </div>

              <!-- Modal Edit Siswa -->
              <div class="modal fade" id="modalEditSiswa" tabindex="-1" role="dialog"
                  aria-labelledby="modalEditSiswaLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                      <div class="modal-content">
                          <form id="formEditSiswa" method="POST">
                              @csrf
                              @method('PUT')
                              <div class="modal-header">
                                  <h5 class="modal-title" id="modalEditSiswaLabel">Edit Data Siswa</h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                      <span aria-hidden="true">&times;</span>
                                  </button>
                              </div>
                              <div class="modal-body">
                                  <input type="hidden" name="siswa_id" id="siswa_id">

                                  <div class="form-row">
                                      <div class="form-group col-md-6">
                                          <label for="edit_no_induk">No Induk</label>
                                          <input type="text" name="no_induk" id="edit_no_induk"
                                              class="form-control numeric-only" required maxlength="20"
                                              oninvalid="this.setCustomValidity('No induk tidak boleh kosong.')"
                                              oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="edit_nisn">NISN</label>
                                          <input type="text" name="nisn" id="edit_nisn"
                                              class="form-control numeric-only" required maxlength="20"
                                              oninvalid="this.setCustomValidity('NISN tidak boleh kosong.')"
                                              oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                      </div>
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_nama">Nama Siswa</label>
                                      <input type="text" name="nama" id="edit_nama" class="form-control" required
                                          maxlength="100">
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_nama_panggilan">Nama Panggilan</label>
                                      <input type="text" name="nama_panggilan" id="edit_nama_panggilan"
                                          class="form-control" maxlength="50">
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_nik">NIK</label>
                                      <input type="text" name="nik" id="edit_nik"
                                          class="form-control numeric-only" required maxlength="16"
                                          oninvalid="this.setCustomValidity('NIK tidak boleh kosong.')"
                                          oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '')">
                                  </div>

                                  <div class="form-row">
                                      <div class="form-group col-md-6">
                                          <label for="edit_jenis_kelamin">Jenis Kelamin</label>
                                          <select name="jenis_kelamin" id="edit_jenis_kelamin" class="form-control"
                                              required>
                                              <option value="">-- Pilih Jenis Kelamin --</option>
                                              <option value="L">Laki-laki</option>
                                              <option value="P">Perempuan</option>
                                          </select>
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="edit_tempat_lahir">Tempat Lahir</label>
                                          <input type="text" name="tempat_lahir" id="edit_tempat_lahir"
                                              class="form-control" maxlength="50">
                                      </div>
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_anak_ke">Anak Ke</label>
                                      <input type="number" name="anak_ke" id="edit_anak_ke"
                                          class="form-control numeric-only"
                                          oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                  </div>

                                  <div class="form-row">
                                      <div class="form-group col-md-6">
                                          <label for="edit_nama_ayah">Nama Ayah</label>
                                          <input type="text" name="nama_ayah" id="edit_nama_ayah"
                                              class="form-control" maxlength="100">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="edit_pekerjaan_ayah">Pekerjaan Ayah</label>
                                          <input type="text" name="pekerjaan_ayah" id="edit_pekerjaan_ayah"
                                              class="form-control" maxlength="100">
                                      </div>
                                  </div>

                                  <div class="form-row">
                                      <div class="form-group col-md-6">
                                          <label for="edit_nama_ibu">Nama Ibu</label>
                                          <input type="text" name="nama_ibu" id="edit_nama_ibu" class="form-control"
                                              maxlength="100">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="edit_pekerjaan_ibu">Pekerjaan Ibu</label>
                                          <input type="text" name="pekerjaan_ibu" id="edit_pekerjaan_ibu"
                                              class="form-control" maxlength="100">
                                      </div>
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_alamat">Alamat</label>
                                      <textarea name="alamat" id="edit_alamat" class="form-control" rows="2"></textarea>
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_asal_sekolah">Asal Sekolah</label>
                                      <input type="text" name="asal_sekolah" id="edit_asal_sekolah"
                                          class="form-control" maxlength="100">
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_alamat_sekolah">Alamat Sekolah</label>
                                      <textarea name="alamat_sekolah" id="edit_alamat_sekolah" class="form-control" rows="2"></textarea>
                                  </div>

                                  <div class="form-group">
                                      <label for="edit_telpon">Telpon</label>
                                      <input type="text" name="telpon" id="edit_telpon"
                                          class="form-control numeric-only" maxlength="20"
                                          oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                  </div>
                                  <input type="hidden" name="tahun_ajar_id" value="{{ $tahunAjarId }}">


                                  <!-- Dropdown Kelas -->
                                  <div class="form-group">
                                      <label for="edit_kelas_id">Kelas</label>
                                      <select name="kelas_id" id="edit_kelas_id" class="form-control" required
                                          oninvalid="this.setCustomValidity('Kelas tidak boleh kosong.')">
                                          <option value="">-- Pilih Kelas --</option>
                                          @foreach ($kelasList as $kelasItem)
                                              <option value="{{ $kelasItem->id }}">{{ $kelasItem->nama_kelas }}</option>
                                          @endforeach
                                      </select>
                                  </div>
                                <!-- Tambahan Field Status -->
                                <div class="form-group">
                                    <label for="edit_status">Status</label>
                                    <select name="status" id="edit_status" class="form-control" required>
                                        <option value="">-- Pilih Status --</option>
                                        @foreach ($statuses as $status)
                                            <option value="{{ $status }}">{{ $status }}</option>
                                        @endforeach
                                    </select>
                                </div>
                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                  <button type="submit" class="btn btn-primary">Update Siswa</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>

              <!-- Modal Konfirmasi Hapus -->
              <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
                  aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Hapus</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              Apakah Anda yakin ingin menghapus data ini?
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                              <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Hapus</button>
                          </div>
                      </div>
                  </div>
              </div>
              
              
              {{-- modal eror --}}
              <div class="modal fade" id="modalError" tabindex="-1" role="dialog" aria-labelledby="modalErrorLabel"
                  aria-hidden="true">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="modalErrorLabel">Pemberitahuan Validasi</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              <!-- Pesan error akan diupdate di sini -->
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                          </div>
                      </div>
                  </div>
              </div>

          </div>
      </div>
  @endsection

  @section('script')
      <script>
          // ========================================================================
          // Fungsi untuk menampilkan alert Bootstrap
          // ========================================================================
          function showBootstrapAlert(message) {
              var alertHtml = '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                  '<strong>Perhatian!</strong> ' + message +
                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                  '<span aria-hidden="true">&times;</span></button></div>';
              $('#alert-container').append(alertHtml);
              setTimeout(function() {
                  $('.custom-alert').fadeOut(500, function() {
                      $(this).remove();
                  });
              }, 3000);
          }

          $(document).ready(function() {
              var container = document.querySelector('.some-scrollbar');
              if (container) {
                  new PerfectScrollbar(container);
              }
              // Global variable untuk menyimpan ID yang terpilih (dari seluruh halaman)
              var selectedIds = {};


              // Inisialisasi DataTable
              if ($.fn.DataTable.isDataTable('#data_table')) {
                  $('#data_table').DataTable().destroy();
              }
              var table = $('#data_table').DataTable({
                  stateSave: true,
                  paging: true,
                  searching: true,
                  ordering: true,
                  autoWidth: false,
                  retrieve: true, // Pastikan DataTables tidak menduplikasi elemen
                  columnDefs: [{
                          orderable: false,
                          targets: 0
                      } // Pastikan kolom checkbox tidak ikut diurutkan
                  ],
                  fixedHeader: false, // Cegah DataTables membuat header duplikat
                  scrollX: false, // Matikan scroll horizontal jika tidak perlu
                  drawCallback: function(settings) {
                      var api = this.api();
                      var pageInfo = api.page.info();

                      api.column(0, {
                          page: 'current'
                      }).nodes().each(function(cell, i) {
                          cell.innerHTML = pageInfo.start + i + 1;
                      });

                      // Sinkronisasi checkbox per halaman
                      api.rows({
                          page: 'current'
                      }).nodes().each(function(row) {
                          var $checkbox = $(row).find('.select-item');
                          var id = $checkbox.val();
                          $checkbox.prop('checked', !!selectedIds[id]);
                      });

                      // Periksa apakah semua checkbox di halaman ini tercentang
                      var allChecked = api.rows({
                          page: 'current'
                      }).nodes().toArray().every(row => {
                          return $(row).find('.select-item').prop('checked');
                      });

                      $('#selectAll').prop('checked', allChecked);
                      toggleButtonVisibility();
                  }
              });

              $('#data_table_filter input').addClass('form-control form-control-sm');
              $('#data_table_length select').addClass('form-control form-control-sm');


              // Fungsi menampilkan/menyembunyikan tombol
              function toggleButtonVisibility() {
                  if (Object.keys(selectedIds).length > 0) {
                      // Ada data yang tercentang
                      $('#btnTambahSiswa').hide();
                      $('#bulkStatusGroup').show();
                      $('.editSiswa').addClass('disabled-link');
                  } else {
                      // Tidak ada data yang tercentang
                      $('#bulkStatusGroup').hide();
                      $('#btnTambahSiswa').show();
                      $('.editSiswa').removeClass('disabled-link');
                  }
              }


              // Pastikan kode ini dijalankan dalam $(document).ready()
              $("#filterTahunAjar, #filterKelas").on("change", function() {
                  var tahunAjarId = $("#filterTahunAjar").val();
                  var kelasId = $("#filterKelas").val();

                  var queryString = "?";
                  if (tahunAjarId) {
                      queryString += "tahun_ajar_id=" + tahunAjarId;
                  }
                  if (kelasId) {
                      // Tambahkan & kalo queryString sudah ada param
                      queryString += (tahunAjarId ? "&" : "") + "kelas_id=" + kelasId;
                  }

                  // Redirect ke URL baru dengan filter
                  window.location.href = window.location.pathname + queryString;
              });


              $('#formTambahSiswa').submit(function(e) {
                  e.preventDefault(); // cegah submit default
                  var form = $(this);
                  var url = form.attr('action');

                $.ajax({
                      url: url,
                      type: 'POST',
                      data: form.serialize(),
                      success: function(response) {
                          if (response.success) {
                              $('#modalTambahSiswa').modal('hide');
                              alert(response.message);
                              window.location.reload();
                          } else {
                              // Kalau response error tapi status 200 (optional)
                              alert(response.message || 'Terjadi kesalahan.');
                          }
                      },
                      error: function(xhr) {
                          if (xhr.status === 422) {
                              let response = xhr.responseJSON;
                              // Misal, ambil error untuk no_induk, atau gabungin semua error
                              let errorMessages = '';
                              $.each(response.errors, function(index, errorMessage) {
                                  errorMessages += errorMessage + "<br>";
                              });
                              $("#modalError .modal-body").html(errorMessages);
                              $("#modalError").modal('show');
                          } else {
                              alert('Terjadi kesalahan pada server.');
                          }
                      }
                  });

              });

              $('#btnTambahSiswa').click(function(e) {
                  e.preventDefault();
                   var selectedKelas = $('#filterKelas').val();
                    if (!selectedKelas) {
                        showBootstrapAlert("Harus pilih kelas terlebih dahulu");
                        return; // stop lanjut AJAX call
                    }
                  $.ajax({
                      url: '/siswa/checkPreAddStudent',
                      type: 'GET',
                      dataType: 'json',
                      success: function(response) {
                          console.log('Response:', response);
                          if (response.success) {
                                 // Set value dropdown tampilan dan hidden input
                                $("#tambah_kelas_id").val(selectedKelas).prop('disabled', true);
                                $("#tambah_kelas").val(selectedKelas); // Ini yang akan dikirim ke server
                                $('#modalTambahSiswa').modal('show');
                              
                          } else {
                              showBootstrapAlert(response.message);
                          }
                      },
                      error: function(xhr, status, error) {
                          console.error('AJAX Error:', error, xhr.responseText);
                          let msg = 'Error, coba lagi nanti!';
                          if (xhr.responseJSON && xhr.responseJSON.message) {
                              msg = xhr.responseJSON.message;
                          }
                          showBootstrapAlert(msg);
                      }
                  });
              });






              // Event checkbox individual
              $(document).on('click', '.select-item', function() {
                  var id = $(this).val();
                  if ($(this).prop('checked')) {
                      selectedIds[id] = true;
                  } else {
                      delete selectedIds[id];
                  }

                  // Cek apakah semua baris di halaman saat ini tercentang
                  var allChecked = true;
                  table.rows({
                      page: 'current'
                  }).nodes().each(function(row) {
                      if (!$(row).find('.select-item').prop('checked')) {
                          allChecked = false;
                      }
                  });
                  // Update header checkbox
                  $('#selectAll').prop('checked', allChecked);

                  toggleButtonVisibility();
              });

              // Event checkbox header "Select All"
              $(document).on('click', '#selectAll', function() {
                  var isChecked = $(this).prop('checked');

                  // Loop setiap checkbox di halaman aktif DataTable
                  $('#data_table tbody .select-item').each(function() {
                      $(this).prop('checked', isChecked);
                      var id = $(this).val();

                      if (isChecked) {
                          selectedIds[id] = true;
                      } else {
                          delete selectedIds[id];
                      }
                  });

                  toggleButtonVisibility();
              });


              // Event keyboard ESC untuk menghapus semua centang
              $(document).on('keyup', function(e) {
                  if (e.which === 27) { // Escape key
                      $('.select-item').prop('checked', false);
                      $('#selectAll').prop('checked', false);
                      selectedIds = {};
                      toggleButtonVisibility();
                  }
              });

              var deleteMode = ''; // 'single' atau 'mass'
              var deleteId = null;
              var deleteIds = [];

              // Hapus single
              $('#data_table').on('click', '.hapusSiswa', function(e) {
                  e.preventDefault();
                  if ($('.select-item:checked').length > 0) {
                      showBootstrapAlert('Selesaikan pilihan baris yang aktif terlebih dahulu.');
                      return;
                  }
                  deleteMode = 'single';
                  deleteId = $(this).data('id');
                  $('#deleteConfirmModal').modal('show');
              });



              // Konfirmasi Hapus (baik single maupun massal)
              $('#confirmDeleteBtn').on('click', function() {
                  if (deleteMode === 'single' && deleteId) {
                      // Hapus single
                      $.ajax({
                          url: '/siswa/' + deleteId,
                          type: 'DELETE',
                          data: {
                              _token: '{{ csrf_token() }}'
                          },
                          success: function(response) {
                              if (response.success) {
                                  var row = $('#data_table')
                                      .find('a.hapusSiswa[data-id="' + deleteId + '"]')
                                      .closest('tr');
                                  row.fadeOut(400, "swing", function() {
                                      table.row(row).remove().draw(false);
                                      $('#selectAll').prop('checked', false);
                                      delete selectedIds[deleteId];
                                      toggleButtonVisibility();
                                  });
                              } else {
                                  showBootstrapAlert('Gagal menghapus data.');
                              }
                          },
                          error: function() {
                              showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                          }
                      });
                  } else if (deleteMode === 'mass' && deleteIds.length > 0) {
                      // Hapus massal
                      $.ajax({
                          url: '/siswa/hapus-massal',
                          type: 'POST',
                          data: {
                              ids: deleteIds,
                              _token: '{{ csrf_token() }}'
                          },
                          success: function(response) {
                              if (response.success) {
                                  $('.select-item:checked').each(function() {
                                      var row = $(this).closest('tr');
                                      row.fadeOut(400, "swing", function() {
                                          table.row(row).remove().draw(false);
                                      });
                                  });
                                  $('#selectAll').prop('checked', false);
                                  selectedIds = {};
                                  toggleButtonVisibility();
                              } else {
                                  showBootstrapAlert('Gagal menghapus data.');
                              }
                          },
                          error: function() {
                              showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                          }
                      });
                  }
                  $('#deleteConfirmModal').modal('hide');
              });

              // Bulk Update Status
              $('.bulk-status').on('click', function(e) {
                  e.preventDefault();
                  var newStatus = $(this).data('status');
                  var ids = Object.keys(selectedIds);
                  if (ids.length === 0) {
                      showBootstrapAlert('Pilih minimal satu data untuk diubah statusnya.');
                      return;
                  }
                  $.ajax({
                      url: '/siswa/update-status-massal',
                      type: 'POST',
                      data: {
                          ids: ids,
                          status: newStatus,
                          _token: '{{ csrf_token() }}'
                      },
                      success: function(response) {
                          if (response.success) {
                              // Update kolom status di baris terpilih
                              $('.select-item:checked').each(function() {
                                  var row = $(this).closest('tr');
                                  row.find('td').eq(5).text(newStatus);
                              });
                              // Reset centang
                              $('#selectAll').prop('checked', false);
                              $('.select-item').prop('checked', false);
                              selectedIds = {};
                              toggleButtonVisibility();
                              showBootstrapAlert(response.message);
                          } else {
                              showBootstrapAlert('Gagal mengubah status data.');
                          }
                      },
                      error: function() {
                          showBootstrapAlert('Terjadi kesalahan saat mengubah status data.');
                      }
                  });
              });

              // Edit Siswa (buka modal & isi form edit)
              $(document).on('click', '.editSiswa', function(e) {
                  e.preventDefault();
                  if ($(this).hasClass('disabled-link')) return; // Jangan proses jika link di-disable

                  var btn = $(this);
                  $('#siswa_id').val(btn.data('id'));
                  $('#edit_no_induk').val(btn.data('no_induk'));
                  $('#edit_nisn').val(btn.data('nisn'));
                  $('#edit_nama').val(btn.data('nama'));
                  $('#edit_nama_panggilan').val(btn.data('nama_panggilan'));
                  $('#edit_nik').val(btn.data('nik'));
                  $('#edit_jenis_kelamin').val(btn.data('jenis_kelamin'));
                  $('#edit_tempat_lahir').val(btn.data('tempat_lahir'));
                  $('#edit_anak_ke').val(btn.data('anak_ke'));
                  $('#edit_nama_ayah').val(btn.data('nama_ayah'));
                  $('#edit_pekerjaan_ayah').val(btn.data('pekerjaan_ayah'));
                  $('#edit_nama_ibu').val(btn.data('nama_ibu'));
                  $('#edit_pekerjaan_ibu').val(btn.data('pekerjaan_ibu'));
                  $('#edit_alamat').val(btn.data('alamat'));
                  $('#edit_asal_sekolah').val(btn.data('asal_sekolah'));
                  $('#edit_alamat_sekolah').val(btn.data('alamat_sekolah'));
                  $('#edit_telpon').val(btn.data('telpon'));
                  $('#edit_kelas_id').val(btn.data('kelas_id'));
                  // Set nilai status dari data attribute
                  $('#edit_status').val(btn.data('status'));
                  var updateUrl = "{{ url('siswa') }}/" + btn.data('id');
                  $('#formEditSiswa').attr('action', updateUrl);
                  $('#modalEditSiswa').modal('show');
              });

              // Submit form Edit Siswa (AJAX)
              $('#formEditSiswa').submit(function(e) {
                  e.preventDefault();
                  var form = $(this);
                  var url = form.attr('action');

                  $.ajax({
                      url: url,
                      type: 'POST',
                      headers: {
                          'X-Requested-With': 'XMLHttpRequest'
                      },
                      data: form.serialize(),
                      success: function(response) {
                          if (response.success) {
                              var siswa = response.siswa;
                              var row = $('#siswa-row-' + siswa.id);

                              // Update tampilan di baris tabel
                              row.find('td').eq(1).text(siswa.no_induk);
                              row.find('.nama').text(siswa.nama);
                              row.find('.jenis_kelamin').text(siswa.jenis_kelamin);
                              row.find('.kelas').text(siswa.kelas && siswa.kelas.nama_kelas ?
                                  siswa.kelas.nama_kelas : '-');
                              row.find('.status').text(siswa.status ? siswa.status : '-');

                              // Perbarui data pada link edit
                              var editLink = row.find('.editSiswa');
                              editLink.data('no_induk', siswa.no_induk);
                              editLink.data('nisn', siswa.nisn);
                              editLink.data('nama', siswa.nama);
                              editLink.data('nama_panggilan', siswa.nama_panggilan);
                              editLink.data('nik', siswa.nik);
                              editLink.data('jenis_kelamin', siswa.jenis_kelamin);
                              editLink.data('tempat_lahir', siswa.tempat_lahir);
                              editLink.data('anak_ke', siswa.anak_ke);
                              editLink.data('nama_ayah', siswa.nama_ayah);
                              editLink.data('pekerjaan_ayah', siswa.pekerjaan_ayah);
                              editLink.data('nama_ibu', siswa.nama_ibu);
                              editLink.data('pekerjaan_ibu', siswa.pekerjaan_ibu);
                              editLink.data('alamat', siswa.alamat);
                              editLink.data('asal_sekolah', siswa.asal_sekolah);
                              editLink.data('alamat_sekolah', siswa.alamat_sekolah);
                              editLink.data('telpon', siswa.telpon);
                              editLink.data('kelas_id', siswa.kelas ? siswa.kelas.id : '');

                              $('#modalEditSiswa').modal('hide');
                              alert('Data siswa berhasil diperbarui.');
                              window.location.reload();
                          } else {
                              alert(response.message ||
                                  'Terjadi kesalahan saat memperbarui data.');
                          }
                      },
                      error: function(xhr) {
                          console.log("Error response:", xhr.responseText);
                          alert('Terjadi kesalahan pada server.');
                      }
                  });
              });

              // Import Excel (AJAX)
              $('#formImportExcel').on('submit', function(e) {
                  e.preventDefault();
                  let formData = new FormData(this);
                  formData.append('override_duplicates', 'false');
                  formData.append('skip_confirmed', 'false');

                  $.ajax({
                      url: $(this).attr('action'),
                      method: 'POST',
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function(response) {
                        if (!response.success && response.duplicates) {
                            let htmlDuplicates = '';
                            response.duplicates.forEach(function(item) {
                                htmlDuplicates += `&bull; NIK: ${item.nik}, Nama: ${item.nama}<br>`;
                            });
                            $('#duplicateListText').html(htmlDuplicates);
                            $('#confirmImportModal').modal('show');
                        } else if (response.success) {
                            showBootstrapAlert(response.message);
                            setTimeout(function(){
                                window.location.reload();
                            }, 3000);
                        } else {
                            showBootstrapAlert(response.message || 'Terjadi kesalahan.');
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        showBootstrapAlert('Terjadi kesalahan server.');
                    }

                  });
              });

              // Jika user klik "Ya, timpa" (override)
              $('#confirmOverrideBtn').on('click', function() {
                  $('#confirmImportModal').modal('hide');
                  sendImportRequest(true);
              });

              // Jika user klik "Tidak" (skip)
              $('#confirmSkipBtn').on('click', function() {
                  $('#confirmImportModal').modal('hide');
                  sendImportRequest(false, true);
              });

              function sendImportRequest(isOverride, isSkip = false) {
                  let formData = new FormData($('#formImportExcel')[0]);
                  formData.append('override_duplicates', isOverride ? 'true' : 'false');
                  formData.append('skip_confirmed', isSkip ? 'true' : 'false');

                  $.ajax({
                      url: $('#formImportExcel').attr('action'),
                      method: 'POST',
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function(resp) {
                          if (resp.success) {
                              alert(resp.message);
                              window.location.reload();
                          } else if (resp.duplicates) {
                              let htmlDuplicates = '';
                              resp.duplicates.forEach(function(item) {
                                  htmlDuplicates +=
                                      `&bull; NIK: ${item.nik}, Nama: ${item.nama}<br>`;
                              });
                              $('#duplicateListText').html(htmlDuplicates);
                              $('#confirmImportModal').modal('show');
                          } else {
                              alert(resp.message || 'Terjadi kesalahan.');
                          }
                      },
                      error: function(xhr) {
                          console.log(xhr.responseText);
                          alert('Terjadi kesalahan server.');
                      }
                  });
              }

              // Cegah pengetikan karakter non-digit di input numeric-only
              $(document).on('keypress', '.numeric-only', function(e) {
                  var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                  var maxLength = $(this).attr('maxlength');
                  if (maxLength && $(this).val().length >= maxLength) {
                      e.preventDefault();
                      showBootstrapAlert('Input tidak boleh lebih dari ' + maxLength + ' digit.');
                      return;
                  }
                  // izinkan tombol backspace, tab, panah kiri/kanan, delete
                  if ($.inArray(charCode, [8, 9, 37, 39, 46]) !== -1) {
                      return;
                  }
                  // hanya digit 0-9
                  if (charCode < 48 || charCode > 57) {
                      e.preventDefault();
                      showBootstrapAlert('Input harus berupa angka.');
                  }
              });
          });
      </script>


      <style>
          .pagination .page-item {
              padding: 0px;
          }


          .card .card-body .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
              margin-left: 5px;
              min-width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              background-color: #f4f4f4;
              color: #212121;
              border-radius: 30px;
              -webkit-border-radius: 30px;
          }

          .alert-container {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 9999 !important;
                max-width: 350px;
            }


          .custom-alert {
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
              font-size: 14px;
              padding: 10px 15px;
          }

          /* Atur lebar kolom centang, nomor, dan aksi */
          #data_table th:first-child,
          #data_table td:first-child {
              width: 80px !important;
              text-align: center !important;
              padding: 5px !important;
          }

          #data_table th:last-child,
          #data_table td:last-child {
              width: 80px !important;
              text-align: center !important;
          }

          /* CSS untuk menonaktifkan link edit saat centang aktif */
          .disabled-link {
              pointer-events: none;
              opacity: 0.6;
          }

          .dataTables_scrollHead {
              pointer-events: auto !important;
          }
      </style>
  @endsection