@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg d-flex justify-content-between align-items-center">
                    <div class="nav-wrapper">
                        {{-- Tombol Kembali --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($periode_dipilih)
                            {{-- Tombol Edit dan Simpan --}}
                            <button class="btn btn-warning mb-0 me-1" id="btn-edit">
                                <i class="fas fa-edit me-1"></i>
                                <span class="font-weight-bold">Edit</span>
                            </button>
                            <button type="submit" form="form-penilaian" class="btn btn-success mb-0" id="btn-simpan"
                                style="display: none;">
                                <i class="fas fa-save me-1"></i>
                                <span class="font-weight-bold">Simpan Penilaian</span>
                            </button>
                            <button type="button" class="btn btn-secondary mb-0" id="btn-reset-penilaian"
                                style="display: none;">
                                <i class="fas fa-rotate-left me-1"></i>
                                <span class="font-weight-bold">Reset</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <h5 class="card-title text-primary">{{ $user->firstname }} {{ $user->lastname }}</h5>
                        @php
                            $nilaiAkhir = $total_nilai_akhir;
                            $indeksAkhir = $indeks_nilai->first(function ($item) use ($nilaiAkhir) {
                                if ($nilaiAkhir === null) {
                                    return false;
                                }
                                preg_match_all('/\d+(?:\.\d+)?/', (string) $item->name, $angka);
                                return count($angka[0] ?? []) >= 2 &&
                                    $nilaiAkhir >= (float) $angka[0][0] &&
                                    $nilaiAkhir <= (float) $angka[0][1];
                            });
                        @endphp
                        <div class="card border mb-4" id="tren-penilaian">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">Tren Nilai Penilaian</h6>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-lg-8">
                                        <div style="height: 300px;">
                                            <canvas id="grafik-tren-penilaian"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 mt-3 mt-lg-0">
                                        <div class="card bg-light border-0 text-center">
                                            <div class="card-body">
                                                <small class="text-muted d-block">Total Nilai Akhir</small>
                                                <h2 class="text-primary mb-1">{{ $nilaiAkhir ?? '-' }}</h2>
                                                <span class="badge bg-success fs-6">Indeks:
                                                    {{ $indeksAkhir->value ?? '-' }}</span>
                                                {{-- @if ($nilaiAkhir !== null)
                                                    <small class="text-muted d-block mt-3">
                                                        {{ $jumlah_nilai_akhir }} ÷ {{ $banyak_nilai_akhir }} penilaian
                                                    </small>
                                                @endif --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
                        <script>
                            const grafikTren = document.getElementById('grafik-tren-penilaian');
                            if (grafikTren && typeof Chart !== 'undefined') {
                                new Chart(grafikTren.getContext('2d'), {
                                    type: 'line',
                                    data: {
                                        labels: @json($tren_penilaian->pluck('nama_periode')),
                                        datasets: [{
                                                label: 'Teknis',
                                                data: @json($tren_penilaian->pluck('teknis')),
                                                borderColor: '#028284',
                                                backgroundColor: '#02828422',
                                                tension: 0.3,
                                                spanGaps: true
                                            },
                                            {
                                                label: 'Nonteknis',
                                                data: @json($tren_penilaian->pluck('nonteknis')),
                                                borderColor: '#f59e0b',
                                                backgroundColor: '#f59e0b22',
                                                tension: 0.3,
                                                spanGaps: true
                                            }
                                        ]
                                    },
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        scales: {
                                            y: {
                                                min: 0,
                                                max: 100
                                            }
                                        }
                                    }
                                });
                            }
                        </script>
                        <form method="GET" action="{{ url()->current() }}" id="form-periode"
                            class="row g-3 align-items-end mb-4">
                            <div class="col-md-8">
                                <label for="filter-periode" class="form-control-label">Periode Penilaian</label>
                                <select name="periode" id="filter-periode" class="form-control" required>
                                    <option value="">-- Pilih periode --</option>
                                    @foreach ($daftar_periode as $nilaiPeriode => $namaPeriode)
                                        <option value="{{ $nilaiPeriode }}" @selected($periode_dipilih === $nilaiPeriode)>
                                            {{ $namaPeriode }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary mb-0" id="btn-tampilkan-periode">
                                    Tampilkan Periode
                                </button>
                            </div>
                        </form>

                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        @if ($periode_dipilih)
                            <form action="{{ url($url_menu . '/penilaian/store') }}" method="POST" id="form-penilaian">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                <input type="hidden" name="bulan" value="{{ $periode_bulan }}">
                                <input type="hidden" name="tahun" value="{{ $periode_tahun }}">

                                @foreach (['nonteknis' => 'NonTeknis', 'teknis' => 'Teknis', 'komentar' => 'Komentar'] as $tipeKey => $tipeLabel)
                                    @php
                                        $daftarPenilaian = $nama_penilaian[$tipeKey] ?? collect();
                                    @endphp

                                    @continue($daftarPenilaian->isEmpty())

                                    <h5 class="mt-4">{{ $tipeLabel }}</h5>

                                    @if ($tipeKey === 'komentar')
                                        @foreach ($daftarPenilaian as $penilaian)
                                            @php
                                                $existing = $penilaian_user[$penilaian->id] ?? null;
                                            @endphp
                                            <div class="mb-3">
                                                <label for="komentar-{{ $penilaian->id }}" class="form-control-label">
                                                    {{ $penilaian->nama_penilaian }}
                                                </label>
                                                <input type="hidden" name="nilai[{{ $penilaian->id }}]"
                                                    class="nilai-field" value="{{ $existing->penilaian ?? 0 }}" disabled>
                                                <textarea name="keterangan[{{ $penilaian->id }}]" id="komentar-{{ $penilaian->id }}"
                                                    class="form-control keterangan-field" rows="5" disabled>{{ $existing->keterangan ?? '' }}</textarea>
                                            </div>
                                        @endforeach
                                    @else
                                        @php
                                            $tipeNilaiAktif = $daftarPenilaian
                                                ->map(fn($item) => $penilaian_user[$item->id]->tipe_nilai ?? null)
                                                ->filter()
                                                ->first();
                                        @endphp
                                        <small class="d-block text-muted mb-1">
                                            Nilai wajib diisi dengan angka 0 sampai 100.
                                        </small>
                                        @if (($indeks_nilai ?? collect())->isNotEmpty())
                                            <small class="d-block text-muted mb-3">
                                                Indeks nilai:
                                                {{ $indeks_nilai->map(fn($item) => $item->value . ' = ' . $item->name)->implode(', ') }}.
                                            </small>
                                        @endif
                                        <div class="table-responsive">
                                            <table class="table table-hover table-striped assessment-table border"
                                                id="table-penilaian-{{ $tipeKey }}">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th>Nama Penilaian</th>
                                                        <th style="width: 20%;">Nilai</th>
                                                        <th style="width: 40%;">Keterangan</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $totalNilai = 0;
                                                        $jumlahDinilai = 0;
                                                    @endphp
                                                    @foreach ($daftarPenilaian as $penilaian)
                                                        @php
                                                            $existing = $penilaian_user[$penilaian->id] ?? null;
                                                            if ($existing && $existing->penilaian !== null) {
                                                                $totalNilai += $existing->penilaian;
                                                                $jumlahDinilai++;
                                                            }
                                                        @endphp
                                                        <tr>
                                                            <td>{{ $penilaian->nama_penilaian }}</td>
                                                            <td>
                                                                <input type="hidden" name="nilai[{{ $penilaian->id }}]"
                                                                    class="nilai-field nilai-tersimpan"
                                                                    value="{{ $existing->penilaian ?? '' }}" disabled>
                                                                <input type="number" class="form-control nilai-angka"
                                                                    value="{{ $existing->penilaian ?? '' }}"
                                                                    min="0" max="100" required disabled>
                                                            </td>
                                                            <td>
                                                                <input type="text"
                                                                    name="keterangan[{{ $penilaian->id }}]"
                                                                    class="form-control keterangan-field"
                                                                    value="{{ $existing->keterangan ?? '' }}" disabled>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        @php
                                            $rataRata =
                                                $jumlahDinilai > 0 ? round($totalNilai / $jumlahDinilai, 2) : null;
                                        @endphp
                                        <div class="row justify-content-end">
                                            <div class="col-md-5 col-lg-4">
                                                <div class="card border-0 shadow-sm mt-3 mb-2 bg-light">
                                                    <div
                                                        class="card-body py-2 px-3 d-flex align-items-center justify-content-between">
                                                        <span class="fw-semibold text-dark">Rata-rata Penilaian
                                                            {{ $tipeLabel }}:</span>
                                                        <span
                                                            class="rata-rata-output {{ $rataRata !== null ? 'badge bg-success fs-6 px-3 py-2' : 'text-muted fst-italic' }}"
                                                            data-table="table-penilaian-{{ $tipeKey }}">
                                                            {{ $rataRata ?? 'Belum ada penilaian' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </form>

                            @php
                                $labelNilai = function ($nilai) use ($indeks_nilai) {
                                    if ($nilai === null || $nilai === '') {
                                        return 'Belum dinilai';
                                    }

                                    $itemIndeks = $indeks_nilai->first(function ($item) use ($nilai) {
                                        preg_match_all('/\d+(?:\.\d+)?/', (string) $item->name, $angkaRentang);
                                        $angkaRentang = $angkaRentang[0] ?? [];

                                        if (count($angkaRentang) >= 2) {
                                            return (float) $nilai >= (float) $angkaRentang[0] &&
                                                (float) $nilai <= (float) $angkaRentang[1];
                                        }

                                        return false;
                                    });

                                    return $itemIndeks->value ?? '-';
                                };

                                $ringkasanNilai = [];
                                $detailNilai = [];
                                foreach (['teknis' => 'Teknis', 'nonteknis' => 'Nonteknis'] as $tipeKey => $tipeLabel) {
                                    $detailNilai[$tipeKey] = collect($nama_penilaian[$tipeKey] ?? [])->map(function (
                                        $item,
                                    ) use ($penilaian_user, $labelNilai) {
                                        $penilaian = $penilaian_user[$item->id] ?? null;
                                        $nilai = $penilaian->penilaian ?? null;

                                        return [
                                            'nama' => $item->nama_penilaian,
                                            'nilai' => $labelNilai($nilai),
                                            'indeks_penilaian' => $penilaian->indeks_penilaian ?? '-',
                                        ];
                                    });

                                    $nilai = collect($nama_penilaian[$tipeKey] ?? [])
                                        ->map(fn($item) => $penilaian_user[$item->id]->penilaian ?? null)
                                        ->filter(fn($value) => $value !== null && $value !== '')
                                        ->map(fn($value) => (float) $value);
                                    $ringkasanNilai[$tipeKey] = $nilai->isNotEmpty()
                                        ? $labelNilai(round($nilai->avg()))
                                        : null;
                                }

                                $ringkasanKomentar = collect($nama_penilaian['komentar'] ?? [])
                                    ->map(function ($item) use ($penilaian_user) {
                                        return [
                                            'label' => $item->nama_penilaian,
                                            'isi' => trim($penilaian_user[$item->id]->keterangan ?? ''),
                                        ];
                                    })
                                    ->filter(fn($komentar) => $komentar['isi'] !== '');

                                $namaPeserta = trim(($user->firstname ?? '') . ' ' . ($user->lastname ?? ''));
                                $teksSalinan = 'Nama Peserta Magang: ' . $namaPeserta . "\n";
                                $teksSalinan .= "Kesimpulan Penilaian\n";
                                $nomorDetail = 1;
                                foreach (['nonteknis' => 'Nonteknis', 'teknis' => 'Teknis'] as $tipeKey => $tipeLabel) {
                                    foreach ($detailNilai[$tipeKey] as $detail) {
                                        $teksSalinan .=
                                            $nomorDetail . '. ' . $detail['nama'] . ': ' . $detail['indeks_penilaian'] . "\n";
                                        $nomorDetail++;
                                    }
                                }
                                foreach ($ringkasanKomentar as $komentar) {
                                    $teksSalinan .= $komentar['label'] . ': ' . $komentar['isi'] . "\n";
                                }
                            @endphp

                            <div class="card border mt-4" id="kesimpulan-penilaian">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Kesimpulan Penilaian</h5>
                                    <button type="button" class="btn btn-primary btn-sm mb-0" id="btn-copy-kesimpulan">
                                        <i class="fas fa-copy me-1"></i> Salin
                                    </button>
                                </div>
                                <div class="card-body">
                                    <textarea id="teks-kesimpulan" class="d-none">{{ trim($teksSalinan) }}</textarea>
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped mb-3">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="width: 30%;">Nama Penilaian</th>
                                                    <th>Indeks Nilai</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (['nonteknis', 'teknis'] as $tipeKey)
                                                    @foreach ($detailNilai[$tipeKey] as $detail)
                                                        <tr>
                                                            <td>{{ $detail['nama'] }}</td>
                                                            <td>{{ $detail['indeks_penilaian'] }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endforeach
                                                @forelse ($ringkasanKomentar as $komentar)
                                                    <tr>
                                                        <td>{{ $komentar['label'] }}</td>
                                                        <td style="white-space: pre-wrap;">{{ $komentar['isi'] }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td>Komentar</td>
                                                        <td class="text-muted">Belum ada komentar</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <script>
                                document.getElementById('btn-copy-kesimpulan').addEventListener('click', async function() {
                                    const teks = document.getElementById('teks-kesimpulan').value;
                                    let berhasil = false;

                                    try {
                                        if (navigator.clipboard && window.isSecureContext) {
                                            await navigator.clipboard.writeText(teks);
                                            berhasil = true;
                                        }
                                    } catch (error) {
                                        berhasil = false;
                                    }

                                    if (!berhasil) {
                                        const textareaSalin = document.createElement('textarea');
                                        textareaSalin.value = teks;
                                        textareaSalin.style.position = 'fixed';
                                        textareaSalin.style.top = '0';
                                        textareaSalin.style.left = '0';
                                        textareaSalin.style.opacity = '0';
                                        document.body.appendChild(textareaSalin);
                                        textareaSalin.focus();
                                        textareaSalin.select();
                                        berhasil = document.execCommand('copy');
                                        textareaSalin.remove();
                                    }

                                    if (!berhasil) {
                                        alert('Salin otomatis tidak tersedia. Silakan salin isi tabel secara manual.');
                                        return;
                                    }

                                    const tombol = this;
                                    const teksAwal = tombol.innerHTML;
                                    tombol.innerHTML = '<i class="fas fa-check me-1"></i> Tersalin';
                                    setTimeout(() => tombol.innerHTML = teksAwal, 1800);
                                });

                                document.getElementById('btn-edit').addEventListener('click', function() {
                                    let nilaiFields = document.querySelectorAll('.nilai-field');
                                    let ketFields = document.querySelectorAll('.keterangan-field');

                                    nilaiFields.forEach(field => field.removeAttribute('disabled'));
                                    ketFields.forEach(field => field.removeAttribute('disabled'));
                                    document.querySelectorAll('.nilai-angka').forEach(field => {
                                        field.removeAttribute('disabled');
                                    });
                                    document.querySelectorAll('.nilai-mode').forEach(field => {
                                        field.removeAttribute('disabled');
                                    });

                                    document.querySelectorAll('.nilai-mode-wrapper').forEach(wrapper => {
                                        terapkanModeNilai(wrapper);
                                    });

                                    document.getElementById('btn-edit').style.display = 'none';
                                    document.getElementById('btn-simpan').style.display = 'inline-block';
                                    document.getElementById('btn-reset-penilaian').style.display = 'inline-block';
                                    document.getElementById('tren-penilaian').style.display = 'none';
                                    document.getElementById('kesimpulan-penilaian').style.display = 'none';
                                    document.getElementById('filter-periode').disabled = true;
                                    document.getElementById('btn-tampilkan-periode').style.display = 'none';
                                });

                                document.getElementById('btn-reset-penilaian').addEventListener('click', function() {
                                    window.location.reload();
                                });

                                document.getElementById('form-penilaian').addEventListener('submit', function(event) {
                                    const komentarPendek = Array.from(
                                        this.querySelectorAll('textarea[id^="komentar-"]')
                                    ).find(field => {
                                        const isi = field.value.trim();
                                        return isi === '' || isi.length < 20;
                                    });

                                    if (komentarPendek) {
                                        event.preventDefault();
                                        Swal.fire({
                                            icon: 'warning',
                                            title: 'Komentar belum valid',
                                            text: 'Komentar wajib diisi dan minimal 20 karakter.',
                                            confirmButtonText: 'OK',
                                            confirmButtonColor: '#028284'
                                        }).then(() => komentarPendek.focus());
                                    }
                                });

                                function nilaiHurufDariAngka(nilai) {
                                    if (nilai === '' || nilai === null) return '';

                                    nilai = Number(nilai);
                                    if (nilai >= 90) return '100';
                                    if (nilai >= 75) return '80';
                                    if (nilai >= 60) return '60';
                                    return '40';
                                }

                                function terapkanModeNilai(wrapper) {
                                    const table = document.getElementById(wrapper.dataset.table);
                                    const selectedMode = wrapper.querySelector('.nilai-mode:checked');

                                    if (!selectedMode) return;

                                    const mode = selectedMode.value;

                                    table.querySelectorAll('tbody tr').forEach(row => {
                                        const tersimpan = row.querySelector('.nilai-tersimpan');
                                        const angka = row.querySelector('.nilai-angka');
                                        const huruf = row.querySelector('.nilai-huruf');

                                        if (!tersimpan || !angka || !huruf) return;

                                        if (mode === 'huruf') {
                                            const nilaiHuruf = nilaiHurufDariAngka(tersimpan.value);
                                            huruf.value = nilaiHuruf;
                                            tersimpan.value = nilaiHuruf;
                                            angka.classList.add('d-none');
                                            angka.disabled = true;
                                            huruf.classList.remove('d-none');
                                            huruf.disabled = false;
                                        } else {
                                            angka.value = tersimpan.value;
                                            angka.classList.remove('d-none');
                                            angka.disabled = false;
                                            huruf.classList.add('d-none');
                                            huruf.disabled = true;
                                        }
                                    });

                                    hitungRataRata(table.id);
                                }

                                function hitungRataRata(tableId) {
                                    const table = document.getElementById(tableId);
                                    const output = document.querySelector(
                                        `.rata-rata-output[data-table="${tableId}"]`
                                    );

                                    if (!table || !output) return;

                                    const nilai = Array.from(table.querySelectorAll('.nilai-tersimpan'))
                                        .map(field => field.value.trim())
                                        .filter(value => value !== '')
                                        .map(Number)
                                        .filter(value => Number.isFinite(value));

                                    if (nilai.length === 0) {
                                        output.textContent = 'Belum ada penilaian';
                                        output.className = 'rata-rata-output text-muted fst-italic';
                                        return;
                                    }

                                    const total = nilai.reduce((jumlah, value) => jumlah + value, 0);
                                    const rataRata = Math.round((total / nilai.length) * 100) / 100;

                                    output.textContent = rataRata.toLocaleString('id-ID', {
                                        maximumFractionDigits: 2
                                    });
                                    output.className = 'rata-rata-output badge bg-success fs-6 px-3 py-2';
                                }

                                document.querySelectorAll('.nilai-mode').forEach(field => {
                                    field.addEventListener('change', function() {
                                        terapkanModeNilai(this.closest('.nilai-mode-wrapper'));
                                    });
                                });

                                document.querySelectorAll('.nilai-angka').forEach(field => {
                                    field.addEventListener('input', function() {
                                        this.closest('td').querySelector('.nilai-tersimpan').value = this.value;
                                        hitungRataRata(this.closest('table').id);
                                    });
                                });

                                document.querySelectorAll('.nilai-huruf').forEach(field => {
                                    field.addEventListener('change', function() {
                                        this.closest('td').querySelector('.nilai-tersimpan').value = this.value;
                                        hitungRataRata(this.closest('table').id);
                                    });
                                });

                                document.querySelectorAll('.rata-rata-output').forEach(output => {
                                    hitungRataRata(output.dataset.table);
                                });
                            </script>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Inisialisasi DataTable untuk Teknis dan NonTeknis
            ['teknis', 'nonteknis'].forEach(function(tipe) {
                let tableId = '#table-penilaian-' + tipe;
                if ($(tableId).length) {
                    $(tableId).DataTable({
                        paging: true,
                        pageLength: 10,
                        lengthMenu: [5, 10, 25, 50, 100],
                        searching: true,
                        ordering: true,
                        info: true,
                        responsive: true,
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                        buttons: [{
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                                className: 'btn btn-secondary',
                                title: 'Penilaian ' + tipe.charAt(0).toUpperCase() + tipe.slice(
                                    1)
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                                className: 'btn btn-secondary',
                                title: 'Penilaian ' + tipe.charAt(0).toUpperCase() + tipe.slice(
                                    1),
                                orientation: 'landscape',
                                pageSize: 'A4'
                            }
                        ],
                        initComplete: function() {
                            // Custom search bar
                            var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <input type="text" class="form-control me-2" placeholder="Search..." data-dt-search="${tableId}">
                        </div>
                    `;
                            $(tableId + '_filter').remove();
                            $(searchBarHtml).insertAfter(tableId + '_wrapper .dt-buttons');
                            // Sinkronisasi search input custom
                            $(document).on('input', `[data-dt-search='${tableId}']`,
                                function() {
                                    $(tableId).DataTable().search(this.value).draw();
                                });
                        }
                    });
                }
            });
            // Styling tombol DataTable
            $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        });
    </script>
@endpush