@extends('admin.layout')

@section('content')

<h4>Data Absensi</h4>

{{-- PESAN BERHASIL --}}
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i data-feather="check-circle"></i>
    <span class="ms-1">{{ session('success') }}</span>

    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup">
    </button>
</div>
@endif

{{-- PESAN GAGAL --}}
@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i data-feather="alert-circle"></i>
    <span class="ms-1">{{ session('error') }}</span>

    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup">
    </button>
</div>
@endif

{{-- ERROR VALIDASI IMPORT --}}
@if (
$errors->has('id_blok') ||
$errors->has('id_matakuliah') ||
$errors->has('tanggal') ||
$errors->has('jam_masuk') ||
$errors->has('jam_keluar') ||
$errors->has('file_absensi')
)
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Import belum berhasil.</strong>

    <ul class="mb-0 mt-2">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>

    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup">
    </button>
</div>
@endif


{{-- ================================================= --}}
{{-- FILTER DATA ABSENSI --}}
{{-- ================================================= --}}
<form method="GET" class="mb-3 d-flex align-items-center gap-2 flex-wrap">

    {{-- BLOK --}}
    <select id="blok" name="id_blok" class="form-control" style="max-width: 200px;">

        <option value="">Pilih Blok</option>

        @foreach ($blok as $b)
        <option value="{{ $b->id }}" {{ request('id_blok') == $b->id ? 'selected' : '' }}>
            {{ $b->nama_blok }}
        </option>
        @endforeach

    </select>


    {{-- MATA KULIAH --}}
    <select id="matakuliah" name="id_matakuliah" class="form-control" style="max-width: 200px;">

        <option value="">Pilih Matakuliah</option>

        @foreach ($matakuliah as $mk)
        <option value="{{ $mk->id }}" {{ request('id_matakuliah') == $mk->id ? 'selected' : '' }}>
            {{ $mk->nama_mk }}
        </option>
        @endforeach

    </select>


    {{-- TANGGAL --}}
    <input type="date" name="tanggal" value="{{ request('tanggal') }}" class="form-control" style="max-width: 180px;">


    {{-- FILTER --}}
    <button type="submit" class="btn btn-custom" title="Filter">
        <i data-feather="filter"></i>
    </button>


    {{-- REFRESH --}}
    <a href="{{ url()->current() }}" class="btn btn-custom" title="Refresh">
        <i data-feather="refresh-cw"></i>
    </a>

    {{-- TANDAI SEMUA HADIR --}}
    @if (
    request()->filled('tanggal') &&
    request()->filled('id_blok') &&
    request()->filled('id_matakuliah')
    )

    {{--
        Tombol dibuat sebagai BUTTON biasa, bukan FORM.
        Alasannya: tombol ini berada di dalam FORM filter GET.
        FORM di dalam FORM (nested form) dapat membuat browser tidak
        mengirim POST ke route tandaiSemuaHadir dengan benar.
    --}}
    <button type="button" id="btnTandaiSemuaHadir" class="btn btn-success" title="Tandai Semua Hadir">
        <i data-feather="check-circle"></i>
    </button>

    @endif


    {{-- CEK DUPLIKAT --}}
    @if (
    request()->filled('tanggal') &&
    request()->filled('id_blok') &&
    request()->filled('id_matakuliah')
    )
    <button type="button" id="btnCekDuplikat" class="btn btn-warning" title="Cek Absensi Duplikat">
        <i data-feather="copy"></i>
    </button>

    <button type="button" id="btnBersihkanDuplikat" class="btn btn-danger" title="Bersihkan Semua Duplikat">
        <i data-feather="x-square"></i>
    </button>

    {{-- HAPUS SEMUA DATA SESUAI FILTER --}}
    <button type="button" id="btnHapusSemuaAbsensi" class="btn btn-danger" title="Hapus Semua Data Absensi">
        <i data-feather="trash"></i>
    </button>
    @endif


    {{-- TOMBOL TAMBAH --}}
    <button type="button" class="btn btn-custom" data-bs-toggle="modal" data-bs-target="#modalTambahAbsensi"
        title="Tambah Absensi dari Excel">
        <i data-feather="plus"></i>
    </button>


    {{-- DOWNLOAD --}}
    @if (
    request()->filled('tanggal') ||
    request()->filled('id_blok') ||
    request()->filled('id_matakuliah')
    )
    <a href="/admin/absensi/download?{{ http_build_query(request()->query()) }}" class="btn btn-success"
        title="Download Absensi">
        <i data-feather="download"></i>
    </a>
    @endif

</form>


{{-- ================================================= --}}
{{-- HASIL CEK DUPLIKAT --}}
{{-- ================================================= --}}
<div id="hasilDuplikat" class="mt-3"></div>


{{-- ================================================= --}}
{{-- BELUM MELAKUKAN FILTER --}}
{{-- ================================================= --}}
@if (
!request()->filled('tanggal') &&
!request()->filled('id_blok') &&
!request()->filled('id_matakuliah')
)
<div class="alert alert-info">
    Silakan lakukan filter terlebih dahulu
</div>
@endif


{{-- ================================================= --}}
{{-- HASIL FILTER --}}
{{-- ================================================= --}}
@if (
request()->filled('tanggal') ||
request()->filled('id_blok') ||
request()->filled('id_matakuliah')
)

<div class="card-box">

    <div class="table-responsive">

        <table class="table table-modern" id="datatable">

            <thead>
                <tr class="text-center">

                    <th>No</th>

                    <th>NIM</th>

                    <th>Mahasiswa</th>

                    <th>Mata Kuliah</th>

                    <th>Tanggal</th>

                    <th>Jam Masuk</th>

                    <th>Jam Keluar</th>

                    <th>Foto Masuk</th>

                    <th>Foto Keluar</th>

                    <th>Status</th>

                    {{-- KOLOM BARU --}}
                    <th>Persentase</th>

                    <th>Aksi</th>

                </tr>
            </thead>


            <tbody>

                @forelse($data as $d)

                <tr class="text-center">

                    {{-- NO --}}
                    <td>
                        {{ $loop->iteration }}
                    </td>


                    {{-- NIM --}}
                    <td>
                        {{ $d->nim }}
                    </td>


                    {{-- NAMA MAHASISWA --}}
                    <td>
                        {{ $d->nama_mahasiswa }}
                    </td>


                    {{-- MATA KULIAH --}}
                    <td>
                        {{ $d->nama_mk }}
                    </td>


                    {{-- TANGGAL --}}
                    <td>
                        {{ $d->tanggal }}
                    </td>


                    {{-- JAM MASUK --}}
                    <td>
                        {{ $d->waktu_masuk ?? '-' }}
                    </td>


                    {{-- JAM KELUAR --}}
                    <td>
                        {{ $d->waktu_keluar ?? '-' }}
                    </td>


                    {{-- ================================================= --}}
                    {{-- FOTO MASUK --}}
                    {{-- ================================================= --}}
                    <td>

                        @if ($d->foto_masuk)

                        @if (
                        filter_var(
                        $d->foto_masuk,
                        FILTER_VALIDATE_URL
                        )
                        )

                        {{-- FOTO ONLINE: LINK GOOGLE DRIVE --}}
                        <a href="{{ $d->foto_masuk }}" target="_blank" rel="noopener noreferrer"
                            class="btn btn-sm btn-outline-primary">
                            🔗 Lihat Foto
                        </a>

                        @else

                        {{-- FOTO OFFLINE: FILE DI SERVER --}}
                        <img src="{{ asset('upload/absensi/' . $d->foto_masuk) }}" width="50" height="50" style="
                                        cursor: pointer;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    " onclick="
                                        showImage(
                                            '{{ asset('upload/absensi/' . $d->foto_masuk) }}'
                                        )
                                    " alt="Foto Masuk">

                        @endif

                        @else

                        -

                        @endif

                    </td>


                    {{-- ================================================= --}}
                    {{-- FOTO KELUAR --}}
                    {{-- ================================================= --}}
                    <td>

                        @if ($d->foto_keluar)

                        @if (
                        filter_var(
                        $d->foto_keluar,
                        FILTER_VALIDATE_URL
                        )
                        )

                        {{-- FOTO ONLINE: LINK GOOGLE DRIVE --}}
                        <a href="{{ $d->foto_keluar }}" target="_blank" rel="noopener noreferrer"
                            class="btn btn-sm btn-outline-primary">
                            🔗 Lihat Foto
                        </a>

                        @else

                        {{-- FOTO OFFLINE: FILE DI SERVER --}}
                        <img src="{{ asset('upload/absensi/' . $d->foto_keluar) }}" width="50" height="50" style="
                                        cursor: pointer;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    " onclick="
                                        showImage(
                                            '{{ asset('upload/absensi/' . $d->foto_keluar) }}'
                                        )
                                    " alt="Foto Keluar">

                        @endif

                        @else

                        -

                        @endif

                    </td>


                    {{-- ================================================= --}}
                    {{-- STATUS --}}
                    {{-- ================================================= --}}
                    <td>

                        @php
                        /*
                        * Status mengikuti nilai yang tersimpan
                        * di database.
                        *
                        * hadir = Hadir
                        * proses = Proses
                        */
                        $status = $d->status ?? 'proses';
                        @endphp

                        <span class="badge
                            {{ $status == 'hadir'
                                ? 'bg-success'
                                : 'bg-warning text-dark'
                            }}">
                            {{ ucfirst($status) }}
                        </span>

                    </td>


                    {{-- ================================================= --}}
                    {{-- PERSENTASE KEHADIRAN --}}
                    {{-- ================================================= --}}
                    <td>

                        @php
                        $persentase = $d->persentase ?? 0;
                        $jumlahHadir = $d->jumlah_hadir ?? 0;
                        $totalMk = $d->total_mk ?? 0;
                        @endphp

                        <span class="badge bg-primary" style="font-size: 13px;">
                            {{ number_format(
                                $persentase,
                                2,
                                ',',
                                '.'
                            ) }}%
                        </span>

                        <div class="small text-muted mt-1" style="white-space: nowrap;">
                            {{ $jumlahHadir }}
                            /
                            {{ $totalMk }}
                            MK
                        </div>

                    </td>


                    {{-- ================================================= --}}
                    {{-- AKSI --}}
                    {{-- ================================================= --}}
                    <td>

                        <form action="{{ secure_url('/admin/absensi/' . $d->id) }}" method="POST" onsubmit="
                                return confirm(
                                    'Yakin ingin menghapus data absensi {{ $d->nama_mahasiswa }}?'
                                )
                            ">

                            @csrf

                            @method('DELETE')

                            <button type="submit" class="btn btn-danger btn-sm" title="Hapus">
                                <i data-feather="trash-2"></i>
                            </button>

                        </form>

                    </td>

                </tr>

                @empty

                <tr>

                    {{-- SEKARANG 12 KOLOM --}}
                    <td colspan="12" class="text-center">
                        Tidak ada data
                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

@endif


{{-- ================================================= --}}
{{-- MODAL PREVIEW FOTO --}}
{{-- ================================================= --}}
<div class="modal fade" id="modalImage" tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Foto Absensi
                </h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup">
                </button>

            </div>


            <div class="modal-body text-center">

                <img id="previewImage" src="" class="img-fluid" alt="Foto Absensi">

            </div>

        </div>

    </div>

</div>


{{-- ================================================= --}}
{{-- MODAL TAMBAH ABSENSI --}}
{{-- ================================================= --}}
<div class="modal fade" id="modalTambahAbsensi" tabindex="-1" aria-labelledby="modalTambahAbsensiLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <div>

                    <h5 class="modal-title" id="modalTambahAbsensiLabel">
                        Tambah Data Absensi
                    </h5>

                    <small class="text-muted">
                        Pilih blok, mata kuliah, tanggal, dan file Excel.
                    </small>

                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup">
                </button>

            </div>


            <form action="{{ secure_url('/admin/absensi/import') }}" method="POST" enctype="multipart/form-data"
                id="formImportAbsensi">

                @csrf


                <div class="modal-body">

                    {{-- BLOK IMPORT --}}
                    <div class="mb-3">

                        <label for="import_blok" class="form-label fw-semibold">
                            Blok
                            <span class="text-danger">*</span>
                        </label>

                        <select id="import_blok" name="id_blok"
                            class="form-control @error('id_blok') is-invalid @enderror" required>

                            <option value="">
                                Pilih Blok
                            </option>

                            @foreach ($blok as $b)

                            <option value="{{ $b->id }}" {{ old('id_blok') == $b->id ? 'selected' : '' }}>
                                {{ $b->nama_blok }}
                            </option>

                            @endforeach

                        </select>

                        @error('id_blok')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>


                    {{-- MATA KULIAH IMPORT --}}
                    <div class="mb-3">

                        <label for="import_matakuliah" class="form-label fw-semibold">
                            Mata Kuliah
                            <span class="text-danger">*</span>
                        </label>

                        <select id="import_matakuliah" name="id_matakuliah"
                            class="form-control @error('id_matakuliah') is-invalid @enderror" required disabled>

                            <option value="">
                                Pilih blok terlebih dahulu
                            </option>

                        </select>

                        <div id="loadingImportMatakuliah" class="form-text d-none">
                            Memuat mata kuliah...
                        </div>

                        @error('id_matakuliah')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>


                    {{-- TANGGAL IMPORT --}}
                    <div class="mb-3">

                        <label for="import_tanggal" class="form-label fw-semibold">
                            Tanggal
                            <span class="text-danger">*</span>
                        </label>

                        <input type="date" id="import_tanggal" name="tanggal"
                            value="{{ old('tanggal', date('Y-m-d')) }}"
                            class="form-control @error('tanggal') is-invalid @enderror" required>

                        @error('tanggal')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>


                    {{-- JAM --}}
                    <div class="row">

                        <div class="col-md-6 mb-3">

                            <label for="import_jam_masuk" class="form-label fw-semibold">
                                Jam Masuk
                                <span class="text-danger">*</span>
                            </label>

                            <input type="time" id="import_jam_masuk" name="jam_masuk" value="{{ old('jam_masuk') }}"
                                class="form-control @error('jam_masuk') is-invalid @enderror" required>

                            @error('jam_masuk')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror

                        </div>


                        <div class="col-md-6 mb-3">

                            <label for="import_jam_keluar" class="form-label fw-semibold">
                                Jam Keluar
                                <span class="text-danger">*</span>
                            </label>

                            <input type="time" id="import_jam_keluar" name="jam_keluar" value="{{ old('jam_keluar') }}"
                                class="form-control @error('jam_keluar') is-invalid @enderror" required>

                            @error('jam_keluar')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror

                        </div>

                    </div>


                    <hr>


                    {{-- INFORMASI FORMAT EXCEL --}}
                    <div class="alert alert-info">

                        <div class="d-flex align-items-start gap-2">

                            <i data-feather="info"></i>

                            <div>

                                <strong>Format file Excel</strong>

                                <div class="mt-1">
                                    File Excel hanya perlu berisi kolom:
                                    <strong>NIM</strong> dan
                                    <strong>Nama Lengkap</strong>.
                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- FILE EXCEL --}}
                    <div class="mb-3">

                        <label for="file_absensi" class="form-label fw-semibold">
                            Pilih File Excel
                            <span class="text-danger">*</span>
                        </label>

                        <input type="file" id="file_absensi" name="file_absensi"
                            class="form-control @error('file_absensi') is-invalid @enderror" accept=".xlsx,.xls,.csv"
                            required>

                        <div class="form-text">
                            Format XLSX, XLS, atau CSV.
                            Ukuran maksimal 5 MB.
                        </div>

                        @error('file_absensi')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>


                    {{-- NAMA FILE TERPILIH --}}
                    <div id="fileAbsensiTerpilih" class="alert alert-light border d-none mb-0">

                        <div class="d-flex align-items-center gap-2">

                            <i data-feather="file-text"></i>

                            <span id="namaFileAbsensi"></span>

                        </div>

                    </div>

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        Batal
                    </button>

                    <button type="submit" class="btn btn-custom" id="btnImportAbsensi">

                        <i data-feather="upload"></i>

                        <span>Import Absensi</span>

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection


{{-- ================================================= --}}
{{-- SCRIPT --}}
{{-- ================================================= --}}
@section('scripts')

<script>
    document.addEventListener("DOMContentLoaded", function() {

        /*
         |--------------------------------------------------------------------------
         | TANDAI SEMUA HADIR
         |--------------------------------------------------------------------------
         | Tombol berada di dalam FORM filter GET, jadi kita tidak membuat
         | FORM POST di dalamnya. Sebagai gantinya, JS membuat FORM POST
         | sementara langsung di <body>, lalu mengirimkannya secara normal.
         |
         | Keuntungannya:
         | - Tidak ada nested form.
         | - Tidak perlu mengubah controller.
         | - Controller lama yang melakukan redirect()->back() tetap bekerja.
         | - Setelah berhasil, halaman kembali ke filter yang sama.
         |--------------------------------------------------------------------------
        */

        const btnTandaiSemuaHadir =
            document.getElementById('btnTandaiSemuaHadir');

        if (btnTandaiSemuaHadir) {

            btnTandaiSemuaHadir.addEventListener('click', function() {

                const blokElement =
                    document.getElementById('blok');

                const matakuliahElement =
                    document.getElementById('matakuliah');

                const tanggalElement =
                    document.querySelector('input[name="tanggal"]');

                const idBlok =
                    blokElement ? blokElement.value : '';

                const idMatakuliah =
                    matakuliahElement ?
                    matakuliahElement.value :
                    '';

                const tanggal =
                    tanggalElement ?
                    tanggalElement.value :
                    '';

                if (!idBlok || !idMatakuliah || !tanggal) {

                    alert(
                        'Pilih Blok, Mata Kuliah, dan Tanggal terlebih dahulu.'
                    );

                    return;
                }

                const yakin = confirm(
                    'Yakin ingin mengubah SEMUA absensi pada filter ini menjadi HADIR?\n\n' +
                    'Filter yang digunakan:\n' +
                    'Tanggal: ' + tanggal + '\n' +
                    'Blok: ' + idBlok + '\n' +
                    'Mata Kuliah: ' + idMatakuliah
                );

                if (!yakin) {
                    return;
                }

                const tombolAsli =
                    btnTandaiSemuaHadir.innerHTML;

                btnTandaiSemuaHadir.disabled = true;

                btnTandaiSemuaHadir.innerHTML = `
                    <span
                        class="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true">
                    </span>
                `;

                /*
                 * Buat FORM sementara di body.
                 * Ini penting agar tidak terjadi FORM di dalam FORM filter.
                 */
                const form =
                    document.createElement('form');

                form.method = 'POST';

                form.action = "/admin/absensi/tandai-semua-hadir";

                form.style.display = 'none';

                /*
                 * CSRF
                 */
                const csrf =
                    document.createElement('input');

                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = "{{ csrf_token() }}";

                form.appendChild(csrf);

                /*
                 * TANGGAL
                 */
                const inputTanggal =
                    document.createElement('input');

                inputTanggal.type = 'hidden';
                inputTanggal.name = 'tanggal';
                inputTanggal.value = tanggal;

                form.appendChild(inputTanggal);

                /*
                 * BLOK
                 */
                const inputBlok =
                    document.createElement('input');

                inputBlok.type = 'hidden';
                inputBlok.name = 'id_blok';
                inputBlok.value = idBlok;

                form.appendChild(inputBlok);

                /*
                 * MATA KULIAH
                 */
                const inputMatakuliah =
                    document.createElement('input');

                inputMatakuliah.type = 'hidden';
                inputMatakuliah.name = 'id_matakuliah';
                inputMatakuliah.value = idMatakuliah;

                form.appendChild(inputMatakuliah);

                document.body.appendChild(form);

                /*
                 * Kirim POST ke controller.
                 * Controller lama tetap bisa menggunakan:
                 * redirect()->back()->with('success', ...)
                 */
                form.submit();

            });

        }


        /*
        |--------------------------------------------------------------------------
        | HAPUS SEMUA DATA ABSENSI SESUAI FILTER
        |--------------------------------------------------------------------------
        | Hanya data dengan:
        | - Tanggal yang dipilih
        | - Blok yang dipilih
        | - Mata Kuliah yang dipilih
        | yang akan dihapus.
        |
        | Form POST dibuat sementara di <body> agar tidak terjadi
        | nested form karena tombol berada di dalam FORM filter GET.
        |--------------------------------------------------------------------------
        */

        const btnHapusSemuaAbsensi =
            document.getElementById('btnHapusSemuaAbsensi');

        if (btnHapusSemuaAbsensi) {

            btnHapusSemuaAbsensi.addEventListener('click', function() {

                const blokElement =
                    document.getElementById('blok');

                const matakuliahElement =
                    document.getElementById('matakuliah');

                const tanggalElement =
                    document.querySelector(
                        'input[name="tanggal"]'
                    );

                const idBlok =
                    blokElement ?
                    blokElement.value :
                    '';

                const idMatakuliah =
                    matakuliahElement ?
                    matakuliahElement.value :
                    '';

                const tanggal =
                    tanggalElement ?
                    tanggalElement.value :
                    '';

                // =================================================
                // VALIDASI FILTER
                // =================================================

                if (
                    !idBlok ||
                    !idMatakuliah ||
                    !tanggal
                ) {

                    alert(
                        'Pilih Blok, Mata Kuliah, dan Tanggal terlebih dahulu.'
                    );

                    return;
                }

                // =================================================
                // KONFIRMASI
                // =================================================

                const yakin = confirm(
                    'PERINGATAN!\n\n' +
                    'SEMUA data absensi pada filter berikut akan DIHAPUS:\n\n' +
                    'Tanggal: ' + tanggal + '\n' +
                    'Blok ID: ' + idBlok + '\n' +
                    'Mata Kuliah ID: ' + idMatakuliah + '\n\n' +
                    'Data yang sudah dihapus tidak dapat dikembalikan.\n\n' +
                    'Apakah Anda yakin ingin melanjutkan?'
                );

                if (!yakin) {
                    return;
                }

                // =================================================
                // SIMPAN TAMPILAN TOMBOL
                // =================================================

                const originalHtml =
                    btnHapusSemuaAbsensi.innerHTML;

                btnHapusSemuaAbsensi.disabled = true;

                btnHapusSemuaAbsensi.innerHTML = `
                    <span
                        class="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true">
                    </span>
                `;

                // =================================================
                // BUAT FORM POST SEMENTARA
                // =================================================

                const form =
                    document.createElement('form');

                form.method = 'POST';

                form.action =
                    "/admin/absensi/hapus-semua";

                form.style.display = 'none';

                // =================================================
                // CSRF
                // =================================================

                const csrf =
                    document.createElement('input');

                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = "{{ csrf_token() }}";

                form.appendChild(csrf);

                // =================================================
                // TANGGAL
                // =================================================

                const inputTanggal =
                    document.createElement('input');

                inputTanggal.type = 'hidden';
                inputTanggal.name = 'tanggal';
                inputTanggal.value = tanggal;

                form.appendChild(inputTanggal);

                // =================================================
                // BLOK
                // =================================================

                const inputBlok =
                    document.createElement('input');

                inputBlok.type = 'hidden';
                inputBlok.name = 'id_blok';
                inputBlok.value = idBlok;

                form.appendChild(inputBlok);

                // =================================================
                // MATA KULIAH
                // =================================================

                const inputMatakuliah =
                    document.createElement('input');

                inputMatakuliah.type = 'hidden';
                inputMatakuliah.name = 'id_matakuliah';
                inputMatakuliah.value = idMatakuliah;

                form.appendChild(inputMatakuliah);

                document.body.appendChild(form);

                // =================================================
                // KIRIM POST
                // =================================================

                form.submit();

            });

        }


        /*
        |--------------------------------------------------------------------------
        | CEK ABSENSI DUPLIKAT
        |--------------------------------------------------------------------------
        | Definisi duplikat:
        | NIM + Blok + Mata Kuliah + Tanggal harus sama.
        |--------------------------------------------------------------------------
        */
        const btnCekDuplikat = document.getElementById('btnCekDuplikat');
        const btnBersihkanDuplikat =
            document.getElementById('btnBersihkanDuplikat');
        const hasilDuplikat = document.getElementById('hasilDuplikat');

        // Jumlah kelompok duplikat yang sedang ditampilkan.
        // Scope-nya di luar handler klik agar dapat dipakai oleh
        // handler hapus AJAX tanpa reload.
        let jumlahKelompokTampil = 0;

        if (btnCekDuplikat && hasilDuplikat) {

            btnCekDuplikat.addEventListener('click', async function() {

                const blokElement = document.getElementById('blok');
                const matakuliahElement = document.getElementById('matakuliah');
                const tanggalElement = document.querySelector(
                    'input[name="tanggal"]'
                );

                const idBlok = blokElement ? blokElement.value : '';
                const idMatakuliah = matakuliahElement ?
                    matakuliahElement.value :
                    '';
                const tanggal = tanggalElement ?
                    tanggalElement.value :
                    '';

                // =====================================================
                // VALIDASI FILTER
                // =====================================================

                if (!idBlok || !idMatakuliah || !tanggal) {

                    hasilDuplikat.innerHTML = `
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <i data-feather="alert-triangle"></i>
                            <span class="ms-1">
                                Pilih Blok, Mata Kuliah, dan Tanggal terlebih dahulu.
                            </span>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="alert"
                                    aria-label="Tutup">
                            </button>
                        </div>
                    `;

                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }

                    return;
                }

                // =====================================================
                // SIMPAN TAMPILAN TOMBOL
                // =====================================================

                const originalHtml = btnCekDuplikat.innerHTML;

                btnCekDuplikat.disabled = true;

                btnCekDuplikat.innerHTML = `
                    <span
                        class="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true">
                    </span>
                `;

                hasilDuplikat.innerHTML = `
                    <div class="alert alert-info">
                        <span
                            class="spinner-border spinner-border-sm me-2"
                            role="status"
                            aria-hidden="true">
                        </span>
                        Sedang mengecek data duplikat...
                    </div>
                `;

                // =====================================================
                // PARAMETER
                // =====================================================

                const params = new URLSearchParams();

                params.append('id_blok', idBlok);
                params.append('id_matakuliah', idMatakuliah);
                params.append('tanggal', tanggal);

                // =====================================================
                // URL ABSOLUT DARI ORIGIN YANG SEDANG DIBUKA
                // Tidak menggunakan route() Laravel agar tidak terkena
                // masalah http/https atau APP_URL.
                // =====================================================

                const url =
                    window.location.origin +
                    '/admin/absensi/duplikat?' +
                    params.toString();

                console.log('Cek duplikat URL:', url);

                try {

                    const response = await fetch(url, {
                        method: 'GET',
                        credentials: 'same-origin',
                        cache: 'no-store',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    console.log(
                        'Status cek duplikat:',
                        response.status,
                        response.statusText
                    );

                    // =================================================
                    // AMBIL RESPONSE SEBAGAI TEXT TERLEBIH DAHULU
                    // Supaya kalau server mengirim HTML error/login,
                    // kita bisa mengetahui isinya.
                    // =================================================

                    const responseText = await response.text();

                    console.log(
                        'Response cek duplikat:',
                        responseText
                    );

                    if (!response.ok) {

                        let message =
                            `Server mengembalikan HTTP ${response.status}.`;

                        try {

                            const errorData =
                                JSON.parse(responseText);

                            if (errorData.message) {
                                message = errorData.message;
                            }

                            if (errorData.errors) {

                                const errorMessages =
                                    Object.values(errorData.errors)
                                    .flat()
                                    .join(' ');

                                if (errorMessages) {
                                    message = errorMessages;
                                }
                            }

                        } catch (e) {

                            // Response bukan JSON.
                            // Ambil sebagian isi response untuk membantu
                            // mengetahui apakah redirect/login/error server.
                            const cleanText =
                                responseText
                                .replace(/<[^>]*>/g, ' ')
                                .replace(/\s+/g, ' ')
                                .trim();

                            if (cleanText) {
                                message =
                                    `HTTP ${response.status}: ` +
                                    cleanText.substring(0, 300);
                            }
                        }

                        throw new Error(message);
                    }

                    // =================================================
                    // RESPONSE HARUS JSON
                    // =================================================

                    let data;

                    try {

                        data = JSON.parse(responseText);

                    } catch (e) {

                        throw new Error(
                            'Server tidak mengembalikan JSON. ' +
                            'Periksa route/controller duplikat.'
                        );
                    }

                    console.log(
                        'Data duplikat:',
                        data
                    );

                    if (!data.success) {

                        throw new Error(
                            data.message ||
                            'Gagal mengecek data duplikat.'
                        );
                    }

                    const duplikat =
                        Array.isArray(data.duplikat) ?
                        data.duplikat : [];

                    // Simpan jumlah kelompok yang sedang ditampilkan.
                    jumlahKelompokTampil = duplikat.length;

                    // =================================================
                    // TIDAK ADA DUPLIKAT
                    // =================================================

                    if (duplikat.length === 0) {

                        hasilDuplikat.innerHTML = `
                            <div class="alert alert-success alert-dismissible fade show"
                                 role="alert">

                                <i data-feather="check-circle"></i>

                                <span class="ms-1">
                                    Tidak ditemukan data absensi duplikat
                                    pada filter ini.
                                </span>

                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="alert"
                                        aria-label="Tutup">
                                </button>

                            </div>
                        `;

                    } else {

                        // =================================================
                        // ADA DUPLIKAT
                        // =================================================

                        let html = `
                            <div class="card-box">

                                <div class="d-flex
                                            justify-content-between
                                            align-items-center
                                            mb-3
                                            gap-2
                                            flex-wrap">

                                    <div>

                                        <h5 class="mb-1 text-danger">

                                            <i data-feather="copy"></i>

                                            Data Absensi Duplikat

                                        </h5>

                                        <small class="text-muted">

                                            Duplikat berdasarkan
                                            NIM + Blok + Mata Kuliah + Tanggal.

                                        </small>

                                    </div>

                                    <div class="text-end">

                                        <span id="jumlahKelompokDuplikat" class="badge bg-danger">
                                            ${jumlahKelompokTampil}
                                            kelompok duplikat
                                        </span>

                                        ${
                                            data.jumlah_data
                                                ? `
                                                <div class="small text-muted mt-1">
                                                    ${data.jumlah_data}
                                                    data terdeteksi
                                                </div>
                                                `
                                                : ''
                                        }

                                    </div>

                                </div>

                                <div class="table-responsive">

                                    <table class="table table-bordered
                                                  table-modern
                                                  align-middle">

                                        <thead>

                                            <tr class="text-center">

                                                <th>No</th>

                                                <th>NIM</th>

                                                <th>Mahasiswa</th>

                                                <th>Blok</th>

                                                <th>Mata Kuliah</th>

                                                <th>Tanggal</th>

                                                <th>Jumlah</th>

                                                <th>Detail</th>

                                            </tr>

                                        </thead>

                                        <tbody>
                        `;

                        duplikat.forEach(function(group, index) {

                            const items =
                                Array.isArray(group.data) ?
                                group.data : [];

                            const nim =
                                escapeHtml(
                                    group.nim ?? '-'
                                );

                            const nama =
                                escapeHtml(
                                    group.nama_mahasiswa ?? '-'
                                );

                            const blok =
                                escapeHtml(
                                    group.nama_blok ?? '-'
                                );

                            const mk =
                                escapeHtml(
                                    group.nama_mk ?? '-'
                                );

                            const tanggalGroup =
                                escapeHtml(
                                    group.tanggal ?? '-'
                                );

                            let detailHtml = '';

                            items.forEach(function(item, itemIndex) {

                                const statusClass =
                                    item.status === 'hadir' ?
                                    'bg-success' :
                                    'bg-warning text-dark';

                                const statusText =
                                    item.status === 'hadir' ?
                                    'Hadir' :
                                    'Proses';

                                detailHtml += `

                                    <div class="duplikat-item border rounded p-2 mb-2"
                                         data-absensi-id="${escapeHtml(item.id ?? '')}">

                                        <div class="d-flex
                                                    justify-content-between
                                                    align-items-center
                                                    gap-2
                                                    flex-wrap">

                                            <div>

                                                <strong>
                                                    Data #${itemIndex + 1}
                                                </strong>

                                                <div class="small text-muted">

                                                    ID Absensi:
                                                    ${escapeHtml(item.id ?? '-')}

                                                    |

                                                    Masuk:
                                                    ${escapeHtml(
                                                        item.waktu_masuk ?? '-'
                                                    )}

                                                    |

                                                    Keluar:
                                                    ${escapeHtml(
                                                        item.waktu_keluar ?? '-'
                                                    )}

                                                </div>

                                                <span class="badge ${statusClass}">
                                                    ${statusText}
                                                </span>

                                            </div>

                                            <form
                                                action="javascript:void(0)"
                                                method="POST"
                                                class="d-inline formHapusDuplikat"
                                                data-id="${escapeHtml(item.id ?? '')}"
                                            >

                                                <button
                                                    type="submit"
                                                    class="btn btn-danger btn-sm"
                                                    title="Hapus Data Ini"
                                                >

                                                    <i data-feather="trash-2"></i>

                                                </button>

                                            </form>

                                        </div>

                                    </div>

                                `;
                            });

                            html += `

                                <tr class="baris-duplikat" data-group-index="${index}">

                                    <td class="nomor-duplikat text-center">
                                        ${index + 1}
                                    </td>

                                    <td class="text-center">
                                        ${nim}
                                    </td>

                                    <td>
                                        ${nama}
                                    </td>

                                    <td>
                                        ${blok}
                                    </td>

                                    <td>
                                        ${mk}
                                    </td>

                                    <td class="text-center">
                                        ${tanggalGroup}
                                    </td>

                                    <td class="text-center">

                                        <span class="badge bg-danger">
                                            ${items.length} data
                                        </span>

                                    </td>

                                    <td style="min-width: 350px;">
                                        ${detailHtml}
                                    </td>

                                </tr>

                            `;
                        });

                        html += `

                                        </tbody>

                                    </table>

                                </div>

                                <div class="alert alert-warning mb-0 mt-3">

                                    <i data-feather="alert-triangle"></i>

                                    <span class="ms-1">

                                        Silakan hapus data yang tidak diperlukan
                                        agar setiap kombinasi

                                        <strong>
                                            NIM + Blok + Mata Kuliah + Tanggal
                                        </strong>

                                        hanya memiliki satu data absensi.

                                    </span>

                                </div>

                            </div>
                        `;

                        hasilDuplikat.innerHTML = html;
                    }

                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }

                } catch (error) {

                    console.error(
                        'Error cek duplikat:',
                        error
                    );

                    hasilDuplikat.innerHTML = `

                        <div class="alert alert-danger
                                    alert-dismissible
                                    fade show"
                             role="alert">

                            <i data-feather="alert-circle"></i>

                            <span class="ms-1">

                                ${escapeHtml(
                                    error.message ||
                                    'Gagal mengambil data duplikat.'
                                )}

                            </span>

                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="alert"
                                    aria-label="Tutup">
                            </button>

                        </div>

                    `;

                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }

                } finally {

                    btnCekDuplikat.disabled = false;

                    btnCekDuplikat.innerHTML =
                        originalHtml;

                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                }
            });
        }


        /*
        |--------------------------------------------------------------------------
        | BERSIHKAN SEMUA DUPLIKAT
        |--------------------------------------------------------------------------
        | Aturan:
        | 1. Jika ada HADIR -> pertahankan HADIR, hapus semua PROSES.
        | 2. Jika semua PROSES -> pertahankan 1 PROSES, hapus sisanya.
        | 3. Jika ada >1 HADIR -> jangan hapus data HADIR otomatis.
        |    Kelompok tersebut masuk pemeriksaan manual.
        |--------------------------------------------------------------------------
        */

        if (btnBersihkanDuplikat && hasilDuplikat) {

            btnBersihkanDuplikat.addEventListener(
                'click',
                async function() {

                    const blokElement =
                        document.getElementById('blok');

                    const matakuliahElement =
                        document.getElementById('matakuliah');

                    const tanggalElement =
                        document.querySelector(
                            'input[name="tanggal"]'
                        );

                    const idBlok =
                        blokElement ?
                        blokElement.value :
                        '';

                    const idMatakuliah =
                        matakuliahElement ?
                        matakuliahElement.value :
                        '';

                    const tanggal =
                        tanggalElement ?
                        tanggalElement.value :
                        '';

                    if (!idBlok || !idMatakuliah || !tanggal) {

                        alert(
                            'Pilih Blok, Mata Kuliah, dan Tanggal terlebih dahulu.'
                        );

                        return;
                    }

                    const yakin = confirm(
                        'Sistem akan membersihkan semua duplikat pada filter ini.\n\n' +
                        'Aturan:\n' +
                        '• Jika ada HADIR, data HADIR dipertahankan dan PROSES dihapus.\n' +
                        '• Jika semuanya PROSES, hanya 1 PROSES yang dipertahankan.\n' +
                        '• Jika ada lebih dari 1 HADIR, data HADIR tidak dihapus otomatis.\n\n' +
                        'Lanjutkan?'
                    );

                    if (!yakin) {
                        return;
                    }

                    const originalHtml =
                        btnBersihkanDuplikat.innerHTML;

                    btnBersihkanDuplikat.disabled = true;

                    btnBersihkanDuplikat.innerHTML = `
                        <span
                            class="spinner-border spinner-border-sm"
                            role="status"
                            aria-hidden="true">
                        </span>
                    `;

                    const params = new URLSearchParams();

                    params.append('id_blok', idBlok);
                    params.append(
                        'id_matakuliah',
                        idMatakuliah
                    );
                    params.append('tanggal', tanggal);

                    const url =
                        window.location.origin +
                        '/admin/absensi/bersihkan-duplikat?' +
                        params.toString();

                    try {

                        const csrfToken =
                            document.querySelector(
                                'meta[name="csrf-token"]'
                            )?.getAttribute('content') ||
                            '{{ csrf_token() }}';

                        const response = await fetch(url, {
                            method: 'POST',
                            credentials: 'same-origin',
                            cache: 'no-store',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken
                            }
                        });

                        const responseText =
                            await response.text();

                        let result = {};

                        try {
                            result = responseText ?
                                JSON.parse(responseText) : {};
                        } catch (e) {
                            result = {};
                        }

                        if (!response.ok) {

                            throw new Error(
                                result.message ||
                                `Gagal membersihkan duplikat. HTTP ${response.status}.`
                            );
                        }

                        if (!result.success) {

                            throw new Error(
                                result.message ||
                                'Gagal membersihkan duplikat.'
                            );
                        }

                        const deletedIds =
                            Array.isArray(
                                result.deleted_ids
                            ) ?
                            result.deleted_ids.map(
                                id => String(id)
                            ) : [];

                        // =================================================
                        // HAPUS ELEMEN YANG SUDAH DIHAPUS DARI DATABASE
                        // TANPA CEK ULANG.
                        // =================================================

                        deletedIds.forEach(function(id) {

                            const item =
                                hasilDuplikat.querySelector(
                                    `.duplikat-item[data-absensi-id="${CSS.escape(id)}"]`
                                );

                            if (item) {
                                item.remove();
                            }
                        });

                        // =================================================
                        // RAPATKAN KELOMPOK YANG SUDAH BUKAN DUPLIKAT
                        // =================================================

                        hasilDuplikat
                            .querySelectorAll(
                                'tr.baris-duplikat'
                            )
                            .forEach(function(row) {

                                const items =
                                    row.querySelectorAll(
                                        '.duplikat-item'
                                    );

                                if (items.length < 2) {
                                    row.remove();
                                } else {

                                    const badge =
                                        row.querySelector(
                                            'td:nth-child(7) .badge'
                                        );

                                    if (badge) {
                                        badge.textContent =
                                            `${items.length} data`;
                                    }

                                    items.forEach(
                                        function(item, itemIndex) {

                                            const label =
                                                item.querySelector(
                                                    'strong'
                                                );

                                            if (label) {
                                                label.textContent =
                                                    `Data #${itemIndex + 1}`;
                                            }
                                        }
                                    );
                                }
                            });

                        // =================================================
                        // HITUNG ULANG JUMLAH KELOMPOK YANG MASIH TAMPIL
                        // =================================================

                        jumlahKelompokTampil =
                            hasilDuplikat.querySelectorAll(
                                'tr.baris-duplikat'
                            ).length;

                        const badgeKelompok =
                            document.getElementById(
                                'jumlahKelompokDuplikat'
                            );

                        if (badgeKelompok) {

                            badgeKelompok.textContent =
                                `${jumlahKelompokTampil} kelompok duplikat`;
                        }

                        // =================================================
                        // TAMPILKAN RINGKASAN
                        // =================================================

                        const manual =
                            Number(
                                result.jumlah_manual || 0
                            );

                        const dihapus =
                            Number(
                                result.jumlah_dihapus || 0
                            );

                        const dipertahankan =
                            Number(
                                result.jumlah_dipertahankan || 0
                            );

                        const summaryHtml = `

                            <div id="ringkasanBersihkanDuplikat"
                                 class="alert alert-success alert-dismissible fade show">

                                <strong>
                                    <i data-feather="check-circle"></i>
                                    Pembersihan duplikat selesai.
                                </strong>

                                <div class="mt-2">
                                    ${result.jumlah_kelompok || 0}
                                    kelompok diperiksa.
                                </div>

                                <div>
                                    <strong>${dihapus}</strong>
                                    data dihapus.
                                </div>

                                <div>
                                    <strong>${dipertahankan}</strong>
                                    data dipertahankan.
                                </div>

                                ${
                                    manual > 0
                                        ? `
                                        <div class="mt-2 text-danger">
                                            <strong>
                                                ${manual}
                                                kelompok
                                            </strong>
                                            memiliki lebih dari satu
                                            data berstatus HADIR dan
                                            perlu diperiksa manual.
                                        </div>
                                        `
                                        : `
                                        <div class="mt-2">
                                            Tidak ada kelompok yang
                                            memerlukan pemeriksaan manual.
                                        </div>
                                        `
                                }

                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="alert"
                                        aria-label="Tutup">
                                </button>

                            </div>

                        `;

                        const oldSummary =
                            document.getElementById(
                                'ringkasanBersihkanDuplikat'
                            );

                        if (oldSummary) {
                            oldSummary.remove();
                        }

                        hasilDuplikat.insertAdjacentHTML(
                            'afterbegin',
                            summaryHtml
                        );

                        if (typeof feather !== 'undefined') {
                            feather.replace();
                        }

                        // Jika tidak ada lagi kelompok duplikat
                        // yang perlu ditampilkan.
                        if (jumlahKelompokTampil === 0) {

                            const tabel =
                                hasilDuplikat.querySelector(
                                    'table'
                                );

                            if (tabel) {
                                tabel.remove();
                            }

                            const card =
                                hasilDuplikat.querySelector(
                                    '.card-box'
                                );

                            if (card) {
                                card.innerHTML += `
                                    <div class="alert alert-success mb-0">
                                        <i data-feather="check-circle"></i>
                                        Semua duplikat yang aman untuk
                                        dibersihkan sudah berhasil ditangani.
                                    </div>
                                `;
                            }
                        }

                    } catch (error) {

                        console.error(
                            'Error bersihkan duplikat:',
                            error
                        );

                        alert(
                            error.message ||
                            'Gagal membersihkan data duplikat.'
                        );

                    } finally {

                        btnBersihkanDuplikat.disabled = false;

                        btnBersihkanDuplikat.innerHTML =
                            originalHtml;

                        if (typeof feather !== 'undefined') {
                            feather.replace();
                        }
                    }
                }
            );
        }


        /*
        |--------------------------------------------------------------------------
        | HAPUS DATA DUPLIKAT TANPA RELOAD / TANPA CEK ULANG
        |--------------------------------------------------------------------------
        */

        if (hasilDuplikat) {

            hasilDuplikat.addEventListener('submit', async function(event) {

                const form = event.target.closest(
                    'form.formHapusDuplikat'
                );

                if (!form) {
                    return;
                }

                event.preventDefault();

                const konfirmasi = confirm(
                    'Yakin ingin menghapus data absensi duplikat ini?'
                );

                if (!konfirmasi) {
                    return;
                }

                const tombol = form.querySelector(
                    'button[type="submit"]'
                );

                const itemDuplikat = form.closest(
                    '.duplikat-item'
                );

                const barisDuplikat = form.closest(
                    'tr.baris-duplikat'
                );

                const idAbsensi = form.dataset.id;

                if (!idAbsensi) {
                    alert('ID absensi tidak ditemukan.');
                    return;
                }

                const htmlTombolAsli = tombol ?
                    tombol.innerHTML :
                    '';

                if (tombol) {

                    tombol.disabled = true;

                    tombol.innerHTML = `
                        <span
                            class="spinner-border spinner-border-sm"
                            role="status"
                            aria-hidden="true">
                        </span>
                    `;
                }

                try {

                    const url =
                        window.location.origin +
                        '/admin/absensi/' +
                        encodeURIComponent(idAbsensi);

                    const csrfToken =
                        document.querySelector(
                            'meta[name="csrf-token"]'
                        )?.getAttribute('content') ||
                        '{{ csrf_token() }}';

                    const response = await fetch(url, {
                        method: 'DELETE',
                        credentials: 'same-origin',
                        cache: 'no-store',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });

                    const responseText =
                        await response.text();

                    let result = {};

                    try {
                        result = responseText ?
                            JSON.parse(responseText) : {};
                    } catch (e) {
                        result = {};
                    }

                    if (!response.ok) {

                        throw new Error(
                            result.message ||
                            `Gagal menghapus data. HTTP ${response.status}.`
                        );
                    }

                    if (result.success === false) {

                        throw new Error(
                            result.message ||
                            'Data gagal dihapus.'
                        );
                    }

                    // =====================================================
                    // HAPUS ITEM DARI TAMPILAN SAJA
                    // Tidak reload halaman.
                    // Tidak menjalankan cek duplikat lagi.
                    // =====================================================

                    if (itemDuplikat) {
                        itemDuplikat.remove();
                    }

                    // Hitung ulang item yang tersisa dalam kelompok.
                    const itemTersisa =
                        barisDuplikat ?
                        barisDuplikat.querySelectorAll(
                            '.duplikat-item'
                        ).length :
                        0;

                    // Jika tinggal 1 data, maka kelompok tersebut
                    // sudah bukan duplikat lagi. Hapus seluruh baris.
                    if (barisDuplikat && itemTersisa < 2) {

                        barisDuplikat.remove();

                        jumlahKelompokTampil =
                            Math.max(
                                0,
                                jumlahKelompokTampil - 1
                            );

                        const badgeKelompok =
                            document.getElementById(
                                'jumlahKelompokDuplikat'
                            );

                        if (badgeKelompok) {

                            badgeKelompok.textContent =
                                `${jumlahKelompokTampil} kelompok duplikat`;
                        }

                        // Nomor kelompok dirapikan kembali.
                        document
                            .querySelectorAll(
                                '#hasilDuplikat .baris-duplikat'
                            )
                            .forEach(function(row, rowIndex) {

                                const nomor =
                                    row.querySelector(
                                        '.nomor-duplikat'
                                    );

                                if (nomor) {
                                    nomor.textContent =
                                        rowIndex + 1;
                                }
                            });
                    }

                    // Jika semua kelompok sudah terhapus,
                    // tampilkan pesan sukses tanpa melakukan request baru.
                    if (jumlahKelompokTampil === 0) {

                        hasilDuplikat.innerHTML = `
                            <div class="alert alert-success alert-dismissible fade show"
                                 role="alert">

                                <i data-feather="check-circle"></i>

                                <span class="ms-1">
                                    Semua data duplikat pada filter ini
                                    sudah berhasil dihapus.
                                </span>

                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="alert"
                                        aria-label="Tutup">
                                </button>

                            </div>
                        `;

                        if (typeof feather !== 'undefined') {
                            feather.replace();
                        }
                    } else {

                        // Perbarui angka "N data" pada kelompok yang tersisa.
                        if (barisDuplikat) {

                            const badgeJumlah =
                                barisDuplikat.querySelector(
                                    'td:nth-child(7) .badge'
                                );

                            if (badgeJumlah) {
                                badgeJumlah.textContent =
                                    `${itemTersisa} data`;
                            }

                            // Rapikan nomor Data #1, Data #2, dst.
                            barisDuplikat
                                .querySelectorAll(
                                    '.duplikat-item'
                                )
                                .forEach(function(item, itemIndex) {

                                    const label =
                                        item.querySelector(
                                            'strong'
                                        );

                                    if (label) {
                                        label.textContent =
                                            `Data #${itemIndex + 1}`;
                                    }
                                });
                        }

                        if (typeof feather !== 'undefined') {
                            feather.replace();
                        }
                    }

                } catch (error) {

                    console.error(
                        'Error hapus duplikat:',
                        error
                    );

                    alert(
                        error.message ||
                        'Data gagal dihapus.'
                    );

                    if (tombol) {

                        tombol.disabled = false;

                        tombol.innerHTML =
                            htmlTombolAsli;
                    }

                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                }

            });
        }


        /*
        |--------------------------------------------------------------------------
        | FUNGSI ESCAPE HTML
        |--------------------------------------------------------------------------
        */

        function escapeHtml(value) {

            return String(value)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }


        /*
        |--------------------------------------------------------------------------
        | DROPDOWN FILTER
        |--------------------------------------------------------------------------
        */

        const blokFilter =
            document.getElementById("blok");

        const matakuliahFilter =
            document.getElementById("matakuliah");


        if (
            blokFilter &&
            matakuliahFilter
        ) {

            blokFilter.addEventListener(
                "change",
                function() {

                    const idBlok =
                        this.value;


                    matakuliahFilter.innerHTML =
                        '<option value="">Loading...</option>';


                    if (!idBlok) {

                        matakuliahFilter.innerHTML =
                            '<option value="">Pilih Matakuliah</option>';

                        return;
                    }


                    fetch(
                            `/admin/absensi/get-matakuliah/${idBlok}`, {
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            }
                        )

                        .then(response => {

                            if (!response.ok) {

                                throw new Error(
                                    "Gagal mengambil mata kuliah."
                                );

                            }

                            return response.json();

                        })

                        .then(data => {

                            matakuliahFilter.innerHTML =
                                '<option value="">Pilih Matakuliah</option>';


                            data.forEach(item => {

                                const option =
                                    document.createElement(
                                        'option'
                                    );

                                option.value =
                                    item.id;

                                option.textContent =
                                    item.nama_mk;

                                matakuliahFilter.appendChild(
                                    option
                                );

                            });

                        })

                        .catch(error => {

                            console.error(error);

                            matakuliahFilter.innerHTML =
                                '<option value="">Gagal memuat data</option>';

                        });

                }
            );

        }


        /*
        |--------------------------------------------------------------------------
        | DROPDOWN IMPORT ABSENSI
        |--------------------------------------------------------------------------
        */

        const blokImport =
            document.getElementById(
                "import_blok"
            );

        const matakuliahImport =
            document.getElementById(
                "import_matakuliah"
            );

        const loadingImport =
            document.getElementById(
                "loadingImportMatakuliah"
            );


        const oldMatakuliah =
            @json(old('id_matakuliah'));


        function loadImportMatakuliah(
            idBlok,
            selectedId = null
        ) {

            if (!idBlok) {

                matakuliahImport.innerHTML =
                    '<option value="">Pilih blok terlebih dahulu</option>';

                matakuliahImport.disabled =
                    true;

                return;
            }


            matakuliahImport.innerHTML =
                '<option value="">Loading...</option>';

            matakuliahImport.disabled =
                true;


            loadingImport.classList.remove(
                'd-none'
            );


            fetch(
                    `/admin/absensi/get-matakuliah/${idBlok}`, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }
                )

                .then(response => {

                    if (!response.ok) {

                        throw new Error(
                            "Gagal mengambil data mata kuliah."
                        );

                    }

                    return response.json();

                })

                .then(data => {

                    matakuliahImport.innerHTML =
                        '<option value="">Pilih Mata Kuliah</option>';


                    data.forEach(item => {

                        const option =
                            document.createElement(
                                'option'
                            );

                        option.value =
                            item.id;

                        option.textContent =
                            item.nama_mk;


                        if (
                            selectedId &&
                            String(selectedId) ===
                            String(item.id)
                        ) {

                            option.selected =
                                true;

                        }


                        matakuliahImport.appendChild(
                            option
                        );

                    });


                    if (data.length > 0) {

                        matakuliahImport.disabled =
                            false;

                    } else {

                        matakuliahImport.innerHTML =
                            '<option value="">Tidak ada mata kuliah</option>';

                        matakuliahImport.disabled =
                            true;

                    }

                })

                .catch(error => {

                    console.error(error);

                    matakuliahImport.innerHTML =
                        '<option value="">Gagal memuat mata kuliah</option>';

                    matakuliahImport.disabled =
                        true;

                })

                .finally(() => {

                    loadingImport.classList.add(
                        'd-none'
                    );

                });

        }


        if (
            blokImport &&
            matakuliahImport
        ) {

            blokImport.addEventListener(
                "change",
                function() {

                    loadImportMatakuliah(
                        this.value
                    );

                }
            );


            /*
             * Memuat kembali pilihan lama
             * jika sebelumnya terjadi error validasi.
             */

            if (blokImport.value) {

                loadImportMatakuliah(
                    blokImport.value,
                    oldMatakuliah
                );

            }

        }


        /*
        |--------------------------------------------------------------------------
        | MENAMPILKAN NAMA FILE
        |--------------------------------------------------------------------------
        */

        const inputFile =
            document.getElementById(
                'file_absensi'
            );

        const fileTerpilih =
            document.getElementById(
                'fileAbsensiTerpilih'
            );

        const namaFile =
            document.getElementById(
                'namaFileAbsensi'
            );


        if (
            inputFile &&
            fileTerpilih &&
            namaFile
        ) {

            inputFile.addEventListener(
                'change',
                function() {

                    if (
                        this.files &&
                        this.files.length > 0
                    ) {

                        namaFile.textContent =
                            this.files[0].name;

                        fileTerpilih.classList.remove(
                            'd-none'
                        );

                    } else {

                        namaFile.textContent =
                            '';

                        fileTerpilih.classList.add(
                            'd-none'
                        );

                    }

                }
            );

        }


        /*
        |--------------------------------------------------------------------------
        | LOADING SAAT IMPORT
        |--------------------------------------------------------------------------
        */

        const formImport =
            document.getElementById(
                'formImportAbsensi'
            );

        const btnImport =
            document.getElementById(
                'btnImportAbsensi'
            );


        if (
            formImport &&
            btnImport
        ) {

            formImport.addEventListener(
                'submit',
                function() {

                    btnImport.disabled =
                        true;


                    btnImport.innerHTML = `
                    <span
                        class="spinner-border spinner-border-sm"
                        role="status">
                    </span>

                    <span>
                        Sedang Mengimpor...
                    </span>
                `;

                }
            );

        }


        /*
        |--------------------------------------------------------------------------
        | BUKA MODAL KEMBALI JIKA VALIDASI GAGAL
        |--------------------------------------------------------------------------
        */

        @if(count($errors))

        const modalTambahElement =
            document.getElementById(
                'modalTambahAbsensi'
            );


        if (
            modalTambahElement &&
            typeof bootstrap !== 'undefined'
        ) {

            const modalTambah =
                new bootstrap.Modal(
                    modalTambahElement
                );

            modalTambah.show();

        }

        @endif


        /*
        |--------------------------------------------------------------------------
        | REFRESH FEATHER ICON
        |--------------------------------------------------------------------------
        */

        if (
            typeof feather !== 'undefined'
        ) {

            feather.replace();

        }

    });
</script>


<script>
    function showImage(src) {

        const img =
            document.getElementById(
                'previewImage'
            );


        img.src =
            src;


        const modal =
            new bootstrap.Modal(
                document.getElementById(
                    'modalImage'
                )
            );


        modal.show();

    }
</script>


<script>
    $(document).ready(function() {

        $('#datatable').DataTable({

            pageLength: 10,

            lengthMenu: [
                10,
                25,
                50,
                100,
                200,
                250,
                300,
                450
            ],

            language: {

                search: "🔍 Cari:",

                lengthMenu: "Tampilkan _MENU_ data",

                zeroRecords: "Data tidak ditemukan",

                info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",

                paginate: {

                    next: "›",

                    previous: "‹"

                }

            }

        });


        if (
            typeof feather !== 'undefined'
        ) {

            feather.replace();

        }

    });
</script>

@endsection