@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <!--Download Template -->
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="row px-4 py-2">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0"> <b>Download Template</b></h5>
                        </div>
                        <hr>
                        <div class="row px-4 py-2">
                            <code>*) wajib diisi</code>
                            <div class="mb-3 mt-3">
                                <label for="periode" class="form-label">Periode <code>*</code></label>
                                <select name="periode" id="periode" class="form-select">
                                    <option value="" selected disabled>Pilih Periode</option>
                                    @foreach ($periode as $p)
                                        <option value="{{ $p->value }}">{{ $p->value }} - {{ $p->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 mt-3">
                                <label for="level" class="form-label">Level <code>*</code></label>
                                <select name="level" id="level" class="form-select">
                                    <option value="" selected disabled>Pilih level</option>
                                    @foreach ($level as $l)
                                        <option value="{{ $l->id }}">{{ $l->id }} - {{ $l->deskripsi }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <button class="btn btn-primary mb-0 mt-3" id="downloadTemplate"><span
                                        class="font-weight-bold"><i class="fas fa-download me-1">
                                        </i>Download</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Upload Excel -->
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="row px-4 py-2">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0"><b>Upload Data MCU (Excel)</b></h5>
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseExcel"
                                role="button" aria-expanded="false" aria-controls="collapseExcel">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr>
                        <div class="collapse" id="collapseExcel">
                            <div class="row px-4 py-2">
                                <div class="nav-wrapper d-flex align-items-center">
                                    <!-- Button Group -->
                                    @if ($authorize->edit == '1')
                                        <button class="btn btn-primary mb-0 me-2" id="uploadFile">
                                            <span class="font-weight-bold"><i class="fas fa-upload me-1"></i>Upload</span>
                                        </button>
                                    @endif
                                    <button class="btn btn-warning mb-0 me-2" id="preview"><i class="fas fa-eye me-1">
                                        </i>Preview</button>
                                </div>
                                <div class="mb-3 mt-3">
                                    <input class="form-control" type="file" id="formFile" name="file">
                                </div>
                                <code>* Format File: xlsx, xls</code>
                                <div id="response-message"></div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="nav-wrapper">
                                    <div class="table-responsive">
                                        <table id="tbl-result-preview" class="table display">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    <th class="m-4">Periode</th>
                                                    <th>Level</th>
                                                    <th>NIK</th>
                                                    <th>Nama</th>
                                                    <th>Email</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-lg m-3">
                                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                    style="color: #ffc2cd;" class="fas fa-circle"></i> Data sudah ada</code>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!--Upload PDF -->
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="row px-4 py-2">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0"><b>Upload Hasil MCU (PDF)</b></h5>
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapsePdf" role="button"
                                aria-expanded="{{ count($pdf_null) > 0 ? 'true' : 'false' }}" aria-controls="collapsePdf">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr>
                    </div>
                    <div class="collapse {{ count($pdf_null) > 0 ? 'show' : '' }}" id="collapsePdf">
                        <div class="row px-4 py-2">
                            <div class="nav-wrapper">
                                <div class="table-responsive">
                                    <table id="tbl-pdf" class="table display">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th class="m-4">Periode</th>
                                                <th>Nama</th>
                                                <th>Level</th>
                                                <th>NIK</th>
                                                <th>Email</th>
                                                <th>File PDF</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        {{-- <tbody id="tableBody">
                                            @php
                                                $no = 1;
                                            @endphp
                                            @foreach ($pdf_null as $pdf)
                                                <tr>
                                                    <td>{{ $no++ }}</td>
                                                    <td>{{ $pdf->periode }}</td>
                                                    <td>{{ $pdf->level }}</td>
                                                    <td>{{ $pdf->nik }}</td>
                                                    <td>{{ $pdf->nama }}</td>
                                                    <td>{{ $pdf->email }}</td>
                                                    <td>
                                                        <input class="form-control" type="file"
                                                            id="pdfFile-{{ $pdf->nik }}" name="pdf_files[]">
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-primary upload-pdf"
                                                            data-nik="{{ $pdf->nik }}"
                                                            data-periode="{{ $pdf->periode }}">
                                                            <i class="fas fa-save me-1"></i> Simpan
                                                        </button>
                                                        @if ($authorize->delete == '1')
                                                            <button type="button" class="btn btn-danger" title="Hapus"
                                                                onclick="deleteData('{{ $pdf->nik }}', '{{ $pdf->periode }}')">
                                                                <i class="fas fa-trash"></i> Hapus
                                                            </button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody> --}}
                                        <tbody id="tableBody">
                                            @php $no = 1; @endphp
                                            @foreach ($pdf_null as $pdf)
                                                @php
                                                    // bikin key unik: nik + periode (periode disanitasi biar aman buat id)
                                                    $periodeKey = preg_replace('/[^0-9A-Za-z]/', '_', $pdf->periode);
                                                    $rowKey = $pdf->nik . '_' . $periodeKey;
                                                @endphp
                                                <tr>
                                                    <td>{{ $no++ }}</td>
                                                    <td>{{ $pdf->periode }}</td>
                                                    <td>{{ $pdf->nama }}</td>
                                                    <td>{{ $pdf->level }}</td>
                                                    <td>{{ $pdf->nik }}</td>
                                                    <td>{{ $pdf->email }}</td>
                                                    <td>
                                                        <input class="form-control" type="file"
                                                            id="pdfFile-{{ $rowKey }}" accept="application/pdf">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary upload-pdf"
                                                            data-file-id="pdfFile-{{ $rowKey }}"
                                                            data-nik="{{ $pdf->nik }}"
                                                            data-periode="{{ $pdf->periode }}">
                                                            <i class="fas fa-save me-1"></i> Simpan
                                                        </button>

                                                        @if ($authorize->delete == '1')
                                                            <button type="button" class="btn btn-danger" title="Hapus"
                                                                onclick="deleteData('{{ $pdf->nik }}', '{{ $pdf->periode }}')">
                                                                <i class="fas fa-trash"></i> Hapus
                                                            </button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--Kirim E-MAIL -->
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="row px-4 py-2">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0"><b>Kirim E-mail</b></h5>
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseEmail"
                                role="button" aria-expanded="false" aria-controls="collapseEmail"><i
                                    class="fa fa-angle-down me-1">
                                </i>
                            </a>
                        </div>
                        <hr>
                        <div class="collapse" id="collapseEmail">
                            <div class="row px-4 py-2">
                                <code>*) wajib diisi</code>
                                <div class="mb-3 mt-3">
                                    <label for="periode" class="form-label">Periode <code>*</code></label>
                                    <select name="periode-email" id="periode-email" class="form-select">
                                        <option value="" selected disabled>Pilih Periode</option>
                                        @foreach ($periode as $p)
                                            <option value="{{ $p->value }}">{{ $p->value }} -
                                                {{ $p->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3 mt-3">
                                    <label for="level" class="form-label">Level <code>*</code></label>
                                    <select name="level-email" id="level-email" class="form-select">
                                        <option value="" selected disabled>Pilih level</option>
                                        @foreach ($level as $l)
                                            <option value="{{ $l->id }}">{{ $l->id }} -
                                                {{ $l->deskripsi }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    @if ($authorize->edit == '1')
                                        <button class="btn btn-primary mb-0 mt-3" id="sendEmail">
                                            <span class="font-weight-bold">
                                                <i class="fas fa-envelope me-1"></i>Kirim E-mail
                                            </span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- modal setting email -->
    <div class="modal fade" id="modal-sendemail" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title text-white">Send Email MCU</h4>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="#" method="POST" id="form_email">
                    @csrf
                    <div class="modal-body">
                        <div class="bs-stepper linear">
                            <div class="bs-stepper-header" role="tablist">
                                <div class="step active" data-target="#header-part">
                                    <button type="button" class="step-trigger" role="tab"
                                        aria-controls="header-part" id="header-part-trigger" aria-selected="true">
                                        <span class="bs-stepper-circle">1</span>
                                        <span class="bs-stepper-label">Setting</span>
                                    </button>
                                </div>
                                <div class="line"></div>
                                <div class="step" data-target="#detail-part">
                                    <button type="button" class="step-trigger" role="tab"
                                        aria-controls="detail-part" id="detail-part-trigger" aria-selected="false"
                                        disabled="disabled">
                                        <span class="bs-stepper-circle">2</span>
                                        <span class="bs-stepper-label">Preview</span>
                                    </button>
                                </div>
                                <div class="line"></div>
                                <div class="step" data-target="#sending-part">
                                    <button type="button" class="step-trigger" role="tab"
                                        aria-controls="sending-part" id="sending-part-trigger" aria-selected="false"
                                        disabled="disabled">
                                        <span class="bs-stepper-circle">3</span>
                                        <span class="bs-stepper-label">Sending</span>
                                    </button>
                                </div>
                            </div>
                            <div class="bs-stepper-content">
                                <div id="header-part" class="content active dstepper-block" role="tabpanel"
                                    aria-labelledby="header-part-trigger">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="form-group">
                                                <label for="tmcu-subject">Subject</label>
                                                <input class="form-control" name="tmcu-subject" placeholder="Topic">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer p-0 mt-3">
                                        <a class="btn btn-default" id="tmcu_btn_preview">
                                            <i class="fas fa-arrow-circle-right"></i>
                                            Preview
                                        </a>
                                    </div>
                                </div>
                                <div id="detail-part" class="content" role="tabpanel"
                                    aria-labelledby="detail-part-trigger">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card-body">
                                                <div class="form-group">
                                                    <div class="mailbox-read-message" id="tmcu_body">
                                                        <div align="center">
                                                            <img src="https://spunindo.com/wp-content/uploads/2020/11/Logo-Spunindo.png"
                                                                alt="PT. MSJ" style="width:150px" border="0">
                                                        </div><br>
                                                        <div>
                                                            <table style="margin-top:30px;margin-bottom:30px;color:#1a1a1a"
                                                                align="center" class="bodyemail">
                                                                <tbody>
                                                                    <tr>
                                                                        <td colspan="2">
                                                                            <p>Salam Sehat <b class="tmcu-name">[NAMA]</b>,
                                                                            </p>
                                                                            <p id="dynamic-content"></p>
                                                                            <p>Sehat Selalu</p>
                                                                            <br><br>
                                                                            <b>Tim Kesehatan,</b>
                                                                            <br>PT. Multi Spunindo Jaya Tbk.
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer p-0 mt-3">
                                        <button type="button" class="btn btn-default" id="tmcu_btn_previous">
                                            <i class="fas fa-arrow-circle-left"></i>
                                            Previous
                                        </button>
                                        <button type="button" class="btn btn-primary" id="tmcu_btn_sendmail">
                                            <i class="fa fa-send-o me-1"></i>
                                            Send
                                        </button>
                                    </div>
                                </div>
                                <div id="sending-part" class="content" role="tabpanel"
                                    aria-labelledby="sending-part-trigger">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card-body text-center">
                                                <div class="form-group">
                                                    <input type="image" src="{{ asset('img/indicator.gif') }}"
                                                        style="width: 150px;" class="tmcu_load">
                                                    <h2><b class="tmcu-alert text-info">Please Wait !!!..</b></h2>
                                                    <b class="tmcu-alert-ok"></b> <b class="tmcu-alert-tot"></b>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer p-0 mt-3">
                                        <button type="button" class="btn btn-primary d-none" id="btn-done">
                                            <i class="fas fa-check-circle me-1"></i> Done
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('document').ready(function() {
            $("#modal-sendemail").modal({
                show: false,
                backdrop: 'static'
            });

        });
        $('#tbl-pdf').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
            order: [],
        });

        document.addEventListener('DOMContentLoaded', function() {
            //Setting Subjek E-Mail
            const levelSelect = document.getElementById('level-email'); // Dropdown level
            const subjectInput = document.querySelector('input[name="tmcu-subject"]'); // Input subjek email

            // Set default subject value
            subjectInput.value = "Hasil MCU";

            // Event listener untuk perubahan pada dropdown level
            levelSelect.addEventListener('change', function() {
                const selectedLevel = levelSelect.value; // Ambil ID level yang dipilih
                const selectedLevelText = levelSelect.options[levelSelect.selectedIndex].text.split(' - ')[
                    1]; // Ambil deskripsi level setelah '-'

                // Update subjek email dengan format "Hasil MCU [Deskripsi Level]"
                if (selectedLevelText) {
                    subjectInput.value = `Hasil MCU ${selectedLevelText}`; // Menambahkan deskripsi level
                } else {
                    subjectInput.value = "Hasil MCU"; // Set ke nilai default jika level belum dipilih
                }
            });
            // Inisialisasi Stepper setelah halaman dimuat
            const stepper = new Stepper(document.querySelector('.bs-stepper'));

            // Event untuk tombol Next
            document.querySelector('#tmcu_btn_preview').addEventListener('click', function() {
                stepper.next(); // Menggerakkan ke step berikutnya
            });

            // Event untuk tombol Previous
            document.querySelector('#tmcu_btn_previous').addEventListener('click', function() {
                stepper.previous(); // Menggerakkan ke step sebelumnya
            });

            document.getElementById('tmcu_btn_sendmail').addEventListener('click', function() {
                var successCount = 0;
                var failureCount = 0;
                var currentIndex = 0;
                var vtopic = $('input[name="tmcu-subject"]').val();
                var vperiode = $('#periode-email').val();
                var vlevel = $('#level-email').val();
                var vbody;
                var failedEmails = []; // Array untuk menyimpan email yang gagal terkirim
                var sentEmails = []; // Array untuk menyimpan email yang sudah terkirim
                const btnDone = document.getElementById('btn-done'); // Ambil tombol Done

                Swal.fire({
                    title: 'Are you sure send email?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: 'rgb(23, 162, 184)',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Send!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        stepper.next(); // Berpindah ke step berikutnya jika confirm

                        // Ajax Load data from ajax
                        $.ajax({
                            url: "{{ route('get.email') }}",
                            data: {
                                periode: vperiode,
                                level: vlevel,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "JSON",
                            type: 'POST',
                            success: function(response) {
                                var emails = [];
                                var nik = [];
                                var nama = [];
                                var alreadySentEmails = response
                                    .already_sent; // Menyimpan email yang sudah terkirim

                                // Mengecek jika email sudah terkirim, tampilkan alert
                                if (alreadySentEmails.length > 0) {
                                    // Ambil email yang sudah terkirim (email sudah terkirim merupakan array objek)
                                    var sentEmailsText = alreadySentEmails.map(email =>
                                        email.email).join(
                                        ', '); // Ambil properti email dan gabungkan

                                    // Jika jumlah email yang terkirim sama dengan total email yang ingin dikirim
                                    if (alreadySentEmails.length === response.emails
                                        .length) {
                                        // Semua email sudah terkirim
                                        Swal.fire({
                                            title: 'Semua email sudah terkirim!',
                                            text: 'Total email yang sudah terkirim: ' +
                                                alreadySentEmails.length,
                                            icon: 'info',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            window.location.href =
                                                "{{ url($url_menu) }}"; // Redirect ke halaman yang diinginkan
                                        });
                                    } else {
                                        // Sebagian email sudah terkirim, tampilkan email yang sudah terkirim
                                        Swal.fire({
                                            title: 'Sebagian email sudah terkirim!',
                                            text: 'Total email yang sudah terkirim: ' +
                                                alreadySentEmails.length +
                                                '\n' +
                                                'Email yang sudah terkirim: ' +
                                                sentEmailsText,
                                            icon: 'info',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            window.location.href =
                                                "{{ url($url_menu) }}"; // Redirect ke halaman yang diinginkan
                                        });
                                    }
                                }

                                // Lanjutkan jika ada email yang belum terkirim
                                for (var index in response.emails) {
                                    var email = response.emails[index];
                                    if (email.sts_email ==
                                        0) { // Hanya kirim email yang belum terkirim
                                        emails.push(email.email);
                                        nik.push(email.nik);
                                        nama.push(email.nama);
                                    }
                                }

                                var totalEmails = emails.length;
                                $('.tmcu-alert-tot').text('Total Emails = ' +
                                    totalEmails);
                                sendEmailWithDelay();

                                function sendEmailWithDelay() {
                                    if (currentIndex < totalEmails) {
                                        // Tampilkan nama dan email yang sedang diproses
                                        $('.tmcu-name').text(nama[
                                            currentIndex]); // Nama penerima
                                        $('.tmcu-nik').text(nik[
                                            currentIndex]); // NIK penerima

                                        // Tampilkan teks status proses
                                        $('.tmcu-alert').text(
                                            `Processing: ${nama[currentIndex]} (${emails[currentIndex]})`
                                        );

                                        vbody = $('#tmcu_body').html();
                                        vperiode = $('#periode-email').val();

                                        $.ajax({
                                            url: "{{ route('send.email') }}", // URL untuk mengirim email
                                            data: {
                                                email: emails[currentIndex],
                                                topic: vtopic,
                                                body: vbody,
                                                periode: vperiode,
                                                nama: nama[currentIndex],
                                                nik: nik[currentIndex],
                                                _token: '{{ csrf_token() }}'
                                            },
                                            dataType: "JSON",
                                            type: 'POST',
                                            success: function(data) {
                                                successCount++;
                                                $('.tmcu-alert-ok').text(
                                                    successCount +
                                                    ' emails sent successfully.'
                                                );

                                                if (successCount ===
                                                    totalEmails) {
                                                    $('.tmcu-alert-tot')
                                                        .css('display',
                                                            'none');
                                                    $('.tmcu_load').css(
                                                        'display',
                                                        'none');
                                                    $('.tmcu-alert').text(
                                                        'Finish !!!'
                                                    )
                                                    btnDone.classList
                                                        .remove('d-none');;
                                                }
                                            },
                                            error: function(jqXHR, textStatus,
                                                errorThrown) {
                                                failureCount++;
                                                failedEmails.push(emails[
                                                    currentIndex
                                                ]); // Menyimpan email yang gagal
                                                console.error(
                                                    'Failed to send email:',
                                                    emails[
                                                        currentIndex],
                                                    errorThrown);

                                                // Tetap lanjutkan pengiriman email
                                            },
                                            complete: function() {
                                                currentIndex++;
                                                // Update nama dan email berikutnya atau selesai
                                                if (currentIndex <
                                                    totalEmails) {
                                                    setTimeout(
                                                        sendEmailWithDelay,
                                                        10000
                                                    ); // Jeda 10 detik untuk email berikutnya
                                                } else {
                                                    if (failureCount > 0) {
                                                        Swal.fire({
                                                            title: `${failureCount} Email(s) failed to send!`,
                                                            text: `Failed emails: ${failedEmails.join(', ')}`,
                                                            icon: 'error',
                                                            confirmButtonText: 'OK'
                                                        });
                                                    }
                                                }
                                            }
                                        });
                                    } else {
                                        // Setelah semua email terkirim, tampilkan email yang gagal
                                        if (failureCount > 0) {
                                            Swal.fire({
                                                title: failureCount +
                                                    ' Email(s) failed to send!',
                                                text: 'Failed emails: ' +
                                                    failedEmails.join(', '),
                                                icon: 'error',
                                                confirmButtonText: 'OK'
                                            });
                                        }
                                    }
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                alert('Error getting data from Ajax');
                                $('.tmcu_load').css('display', 'none');
                                $('.tmcu-alert').text('Finish !!!');
                            }
                        });
                    }
                });
            });
            // Event listener untuk tombol Done
            document.getElementById('btn-done').addEventListener('click', function() {
                $('#modal-sendemail').modal('hide'); // Tutup modal
                location.reload(); // Refresh halaman
            });

            document.getElementById('downloadTemplate').addEventListener('click', function() {
                const periode = document.getElementById('periode').value;
                const level = document.getElementById('level').value;

                if (!periode || !level) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Oops!',
                        text: 'Periode dan Level harus dipilih!',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Jika validasi berhasil
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('download.template') }}";

                const csrfToken = document.querySelector('input[name="_token"]').value;
                const tokenInput = document.createElement('input');
                tokenInput.type = 'hidden';
                tokenInput.name = '_token';
                tokenInput.value = csrfToken;
                form.appendChild(tokenInput);

                const periodeInput = document.createElement('input');
                periodeInput.type = 'hidden';
                periodeInput.name = 'periode';
                periodeInput.value = periode;
                form.appendChild(periodeInput);

                const levelInput = document.createElement('input');
                levelInput.type = 'hidden';
                levelInput.name = 'level';
                levelInput.value = level;
                form.appendChild(levelInput);

                document.body.appendChild(form);
                form.submit();
            });

            document.getElementById('uploadFile').addEventListener('click', function() {
                const fileInput = document.getElementById('formFile');
                const file = fileInput.files[0];

                if (!file) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Pilih file terlebih dahulu!'
                    });
                    return;
                }

                // Menampilkan konfirmasi sebelum mengupload
                Swal.fire({
                    title: 'Konfirmasi',
                    text: "Apakah Anda Yakin Mengupload File Ini?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, upload!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Nonaktifkan tombol upload setelah klik
                        const uploadButton = document.getElementById('uploadFile');
                        uploadButton.disabled = true;

                        const formData = new FormData();
                        formData.append('file', file);
                        formData.append('_token', '{{ csrf_token() }}');

                        fetch("{{ route('upload.template') }}", {
                                method: 'POST',
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sukses',
                                    text: data.success
                                }).then(() => {
                                    // Menyegarkan halaman setelah upload berhasil
                                    location
                                        .reload(); // Refresh halaman untuk memuat data terbaru
                                });
                            })
                            .catch(err => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan!'
                                }).then(() => {
                                    // Mengaktifkan tombol upload kembali jika terjadi error
                                    uploadButton.disabled = false;
                                });
                            });
                    }
                });
            });

            // document.querySelectorAll('.upload-pdf').forEach(button => {
            //     button.addEventListener('click', function() {
            //         const nik = this.getAttribute('data-nik'); // Ambil NIK dari tombol
            //         const periode = this.getAttribute('data-periode'); // Ambil Periode dari tombol
            //         const pdfFile = document.getElementById(`pdfFile-${nik}`).files[
            //             0]; // Ambil file PDF yang dipilih untuk NIK tersebut

            //         if (!pdfFile) {
            //             Swal.fire({
            //                 icon: 'error',
            //                 title: 'Error',
            //                 text: 'Pilih file PDF terlebih dahulu!'
            //             });
            //             return;
            //         }

            //         const formData = new FormData();
            //         formData.append('pdf_file',
            //             pdfFile); // Menambahkan file PDF yang sesuai dengan NIK
            //         formData.append('nik', nik); // Menambahkan NIK yang sesuai
            //         formData.append('periode', periode); // Menambahkan Periode yang sesuai
            //         formData.append('_token', '{{ csrf_token() }}'); // Menambahkan CSRF Token

            //         // Kirim data dengan fetch API
            //         fetch("{{ route('uploadPdf') }}", {
            //                 method: 'POST',
            //                 body: formData
            //             })
            //             .then(response => response.json())
            //             .then(data => {
            //                 if (data.success) {
            //                     Swal.fire({
            //                         icon: 'success',
            //                         title: 'Sukses',
            //                         text: 'File PDF berhasil diupload!',
            //                         showConfirmButton: false, // Menyembunyikan tombol OK
            //                         timer: 2000 // Menutup otomatis setelah 2 detik (opsional)
            //                     });
            //                     location.reload();
            //                 } else {
            //                     Swal.fire({
            //                         icon: 'error',
            //                         title: 'Error',
            //                         text: 'Gagal mengupload file PDF!'
            //                     });
            //                 }
            //             })
            //             .catch(err => {
            //                 Swal.fire({
            //                     icon: 'error',
            //                     title: 'Error',
            //                     text: 'Terjadi kesalahan saat mengupload file!'
            //                 });
            //             });
            //     });
            // });

            document.addEventListener('click', function(e) {
                const btn = e.target.closest('.upload-pdf');
                if (!btn) return;

                const nik = btn.getAttribute('data-nik');
                const periode = btn.getAttribute('data-periode');
                const fileId = btn.getAttribute('data-file-id');

                const input = document.getElementById(fileId);
                const pdfFile = input?.files?.[0];

                if (!pdfFile) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Pilih file PDF terlebih dahulu!'
                    });
                    return;
                }

                // optional: validasi tipe file
                if (pdfFile.type !== 'application/pdf') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'File harus format PDF!'
                    });
                    input.value = '';
                    return;
                }

                const formData = new FormData();
                formData.append('pdf_file', pdfFile);
                formData.append('nik', nik);
                formData.append('periode', periode);
                formData.append('_token', '{{ csrf_token() }}');

                // biar gak double click
                btn.disabled = true;

                fetch("{{ route('uploadPdf') }}", {
                        method: 'POST',
                        body: formData
                    })
                    .then(async (response) => {
                        // kalau backend balik bukan json, biar kebaca errornya
                        const text = await response.text();
                        try {
                            return JSON.parse(text);
                        } catch (err) {
                            throw new Error(text);
                        }
                    })
                    .then((data) => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Sukses',
                                text: data.message || 'File PDF berhasil diupload!',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => location.reload());
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.message || 'Gagal mengupload file PDF!'
                            });
                            btn.disabled = false;
                        }
                    })
                    .catch((err) => {
                        console.error(err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan saat mengupload file!'
                        });
                        btn.disabled = false;
                    });
            });

            document.getElementById('preview').addEventListener('click', function() {
                const fileInput = document.getElementById('formFile');
                const file = fileInput.files[0];

                if (!file) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Pilih file terlebih dahulu!'
                    });
                    return;
                }

                const formData = new FormData();
                formData.append('file', file);
                formData.append('_token', '{{ csrf_token() }}');

                fetch("{{ route('preview') }}", {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        let tableBody = document.querySelector('#tbl-result-preview tbody');
                        tableBody.innerHTML = '';
                        data.forEach((row, index) => {
                            // Cek apakah baris sudah ada di database dan beri warna
                            const rowStyle = row.exists ? 'background-color: #ffc2cd;' :
                                ''; // Warna latar belakang merah muda untuk baris yang ada
                            tableBody.innerHTML += `
                            <tr style="${rowStyle}">
                                <td>${index + 1}</td>
                                <td>${row.periode}</td>
                                <td>${row.level}</td>
                                <td>${row.nik}</td>
                                <td>${row.nama}</td>
                                <td>${row.email}</td>
                            </tr>
                        `;
                        });
                    })
                    .catch(err => Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan!'
                    }));
            });

            document.getElementById('tmcu_btn_preview').addEventListener('click', function() {
                const periode = document.getElementById('periode-email').value;
                const level = document.getElementById('level-email').value;

                // Validate if periode and level are selected
                if (!periode || !level) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Oops!',
                        text: 'Periode dan Level harus dipilih!',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Fetch email content based on level
                fetch("{{ route('content.email') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute(
                                    'content')
                        },
                        body: JSON.stringify({
                            periode: periode,
                            level: level
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.content) {
                            // Replace the placeholder with dynamic content
                            document.getElementById('dynamic-content').innerHTML = data.content;

                            // Go to the next step in the stepper
                            const stepper = new Stepper(document.querySelector('.bs-stepper'));
                            stepper.next(); // Move to the preview step
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.error || 'Konten email tidak ditemukan.'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan saat mengambil konten email!'
                        });
                        console.error('Error:', error);
                    });
            });

            document.getElementById('sendEmail').addEventListener('click', function() {
                const periode = document.getElementById('periode-email').value;
                const level = document.getElementById('level-email').value;

                if (!periode || !level) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Oops!',
                        text: 'Periode dan Level harus dipilih!',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Menampilkan modal send email
                $('#modal-sendemail').modal('show');
            });

        });

        function deleteData(nik, periode) {
            Swal.fire({
                title: 'Apakah Anda yakin ingin menghapus data ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Mengirim request AJAX untuk menghapus data yang belum ada file PDF
                    $.ajax({
                        url: "{{ route('delete.dmcu') }}", // Route yang akan menangani penghapusan data
                        type: "POST",
                        data: {
                            nik: nik,
                            periode: periode,
                            _token: "{{ csrf_token() }}" // Jangan lupa kirim CSRF token
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sukses!',
                                    text: 'Data berhasil dihapus.',
                                    showConfirmButton: false, // Menyembunyikan tombol OK
                                    timer: 2000 // Menutup otomatis setelah 2 detik (opsional)
                                });
                                location.reload(); // Menyegarkan halaman setelah penghapusan
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: response.message ||
                                        'Terjadi kesalahan ssat menghapus data.'
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: 'Gagal menghapus data!'
                            });
                        }
                    });
                }
            });
        }

        // Toggle icons when collapsing
        $('#collapseExcel').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapseExcel').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapseExcel').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapseExcel').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        // Lakukan hal yang sama untuk collapse lainnya (seperti collapsePdf dan collapseEmail) jika dibutuhkan
        $('#collapsePdf').on('show.bs.collapse', function() {
            $('#collapsePdf').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapsePdf').on('hide.bs.collapse', function() {
            $('#collapsePdf').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        $('#collapseEmail').on('show.bs.collapse', function() {
            $('#collapseEmail').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapseEmail').on('hide.bs.collapse', function() {
            $('#collapseEmail').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });
    </script>
@endpush