@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? ''])
    <div class="container-fluid py-3">

        {{-- FILTER SECTION --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <div class="mb-2">
                    <h6 class="mb-0 text-dark font-weight-bold">Filter Surat Teguran / Peringatan</h6>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <label for="karyawan_filter" class="form-label text-sm font-weight-bold">Karyawan</label>
                        <input type="text" class="form-control" id="karyawan_filter" placeholder="Cari NIK atau nama karyawan...">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-sm font-weight-bold">&nbsp;</label>
                        <button class="btn btn-primary w-100 d-block" type="button" onclick="applyFilter()">
                            <i class="fas fa-search me-2"></i>Terapkan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABLE SECTION --}}
        <div class="card shadow-sm">
            <div class="card-body pt-3 pb-0">
                <div class="table-wrap-centered">
                    <div class="mb-2 mt-1">
                        <h6 class="text-dark font-weight-bold mb-1">
                            List Data Kirim Surat - <span id="spSummaryPeriod">Dalam Proses</span>
                        </h6>
                    </div>
                    <div class="mb-2">
                        <a href="{{ url('/trssp/tambah') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Tambah
                        </a>
                    </div>
                    <div id="spExportButtons" class="d-flex gap-2 flex-wrap mb-2"></div>
                </div>
            </div>
            <div class="card-body p-3 pt-0">
                <div class="table-responsive table-wrap-centered">
                    <table class="table table-hover align-items-center mb-0" id="spTable">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 140px;">Action</th>
                                <th style="width: 40px;">No</th>
                                <th>Tanggal Surat</th>
                                <th style="min-width: 150px;">Nomor Surat</th>
                                <th>NIK</th>
                                <th>Nama Karyawan</th>
                                <th>Departemen</th>
                                <th>Jenis Surat</th>
                                <th style="min-width: 250px;">PKB</th>
                                <th style="min-width: 200px;">Keterangan HRD</th>
                                <th style="min-width: 120px;">TTD HRD</th>
                                <th style="min-width: 120px;">TTD Head</th>
                                <th style="min-width: 120px;">TTD Karyawan</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            {{-- Data will be loaded via AJAX --}}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <strong>Note: </strong>
                    <span style="
                            display:inline-block;
                            width:10px;
                            height:10px;
                            border-radius:50%;
                            background:rgb(156, 243, 175);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Data perlu kirim email (Hijau)
                        &nbsp;|&nbsp;
                        <span style="
                            display:inline-block;
                            width:10px;
                            height:10px;
                            border-radius:50%;
                            background:rgb(247, 209, 255);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Email sudah terkirim / Dalam proses tanda tangan (Ungu)
                    </small>
                </div>
            </div>
        </div>

    </div>

    {{-- MODAL - Preview Surat --}}
    <div class="modal fade" id="previewSuratModal" tabindex="-1" aria-labelledby="previewSuratModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewSuratModalLabel">Preview Surat Teguran / Peringatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="previewLoadingState" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Memuat preview...</p>
                    </div>
                    <iframe id="previewSuratFrame" style="width: 100%; height: 600px; border: none; display: none;"></iframe>
                </div>
                <div class="modal-footer">
                    <a id="downloadPdfBtn" href="#" class="btn btn-success" download>
                        <i class="fas fa-download me-1"></i>Download PDF
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL - Hubungi Karyawan --}}
    <div class="modal fade" id="hubungiModal" tabindex="-1" aria-labelledby="hubungiModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title font-weight-bold text-dark mb-1" id="hubungiModalLabel">
                            Hubungi Penerima Surat
                        </h5>
                        <small class="text-secondary">Detail Kirim Email.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3">
                    <input type="hidden" id="hubungi_sp_id">
                    <div id="hubungiOptionGrid" class="hubungi-option-list"></div>
                </div>
                <div class="modal-footer py-2 border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .sp-action-dropdown {
            white-space: nowrap;
        }
        .sp-action-dropdown .dropdown-menu {
            min-width: 220px;
            padding: 0.5rem 0;
        }
        .sp-action-dropdown .dropdown-menu li {
            padding: 0.15rem 0;
        }
        .sp-action-dropdown .dropdown-menu .btn {
            width: calc(100% - 1rem);
        }
        .table-wrap-centered,
        #spTable_wrapper {
            max-width: 99%;
            margin: 0 auto;
        }
        .sp-new-row td {
            background: rgba(245, 54, 92, 0.10) !important;
        }
        .sp-needs-review td {
            background: rgba(245, 54, 92, 0.10) !important;
        }
        .sp-needs-attention td {
            background: rgba(255, 182, 193, 0.25) !important;
        }
        .sp-token-empty td {
            background: rgb(156, 243, 175, 0.5) !important;
        }
        .sp-token-filled td {
            background: rgb(247, 209, 255, 0.7) !important;
        }
        .hubungi-option-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .hubungi-row {
            border: 1px solid #d2d6da;
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: #fff;
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
        }
        .hubungi-name-label {
            font-size: 0.75rem;
            color: #8392ab;
            margin-bottom: 2px;
        }
        .hubungi-name-value {
            font-size: 0.95rem;
            font-weight: 700;
            color: #344767;
            margin: 0;
        }
        .hubungi-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
        }
        .hubungi-actions .btn {
            min-width: 108px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        /* Custom Badge Colors */
        .badge.bg-warning {
            background-color: #ffc107 !important;
            color: #fff !important;
        }
        .badge.bg-success {
            background-color: #28a745 !important;
            color: #fff !important;
        }
        .badge.bg-danger {
            background-color: #dc3545 !important;
            color: #fff !important;
        }
        @media (max-width: 767.98px) {
            .hubungi-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .hubungi-actions {
                width: 100%;
                justify-content: flex-start;
            }
            .hubungi-actions .btn {
                min-width: 96px;
            }
        }
    </style>

    @php
        $violationOptionJs = ($violation_options ?? collect())->map(function ($item) {
            return ['value' => $item->kode, 'label' => $item->nama];
        })->values()->all();
    @endphp
    <script>
        let spTable = null;
        let currentFilters = {
            keyword: ''
        };
        const violationOptions = @json($violationOptionJs);

        // Setup AJAX to always send CSRF token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            loadData();
        });

        function styleMsjButtons() {
            $('#spExportButtons .dt-button').addClass('btn btn-secondary');
            $('#spExportButtons .dt-button').removeClass('dt-button');
        }

        function applyFilter() {
            const keyword = (document.getElementById('karyawan_filter').value || '').trim();
            currentFilters = {
                keyword: keyword
            };
            loadData();
        }

        function normalizeViolationValue(value) {
            const raw = String(value || '').trim();
            const legacyMap = {
                unsafe_action: 'UA',
                unsafe_condition: 'UC',
                '5s': '5S',
                kedisiplinan: 'KD',
                kualitas_kerja: 'KK',
                etika_kerja: 'EK',
                pelanggaran_lainnya: 'pelanggaran_lainnya',
            };

            return legacyMap[raw.toLowerCase()] || raw;
        }

        function loadData() {
            if (spTable) {
                spTable.destroy();
                spTable = null;
            }

            updateSummaryPeriod();

            $('#spExportButtons').html('');
            $('#tableBody').html(`
                <tr>
                    <td colspan="13" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-sm text-secondary mt-3">Memuat data surat...</p>
                    </td>
                </tr>
            `);

            $.ajax({
                url: '{{ url("/trssp/ajax") }}',
                method: 'GET',
                data: {
                    all: 1,
                    keyword: currentFilters.keyword
                },
                success: function(response) {
                    if (response.success) {
                        renderTable(response.data);
                    } else {
                        alert('Response success=false: ' + (response.message || 'No message'));
                    }
                },
                error: function(xhr, status, error) {
                    alert('AJAX Error! Status: ' + xhr.status + '\nFirst 200 chars: ' + xhr.responseText.substring(0, 200));
                    $('#tableBody').html(`
                        <tr>
                            <td colspan="13" class="text-center py-5 text-danger">
                                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                <p>Gagal memuat data. Silakan coba lagi.</p>
                            </td>
                        </tr>
                    `);
                }
            });
        }

        function renderTable(data) {
            let html = '';

            if (data.length === 0) {
                html = `
                    <tr>
                        <td colspan="14" class="text-center py-5">
                            <i class="fas fa-inbox fa-3x mb-3 text-secondary opacity-5"></i>
                            <p class="text-secondary mb-0">Tidak ada data</p>
                        </td>
                    </tr>
                `;
                $('#tableBody').html(html);
                return;
            }

            data.forEach((item, index) => {
                const safeNama = String(item.nama).replace(/'/g, "\\'");
                const safeAtasanNama = String(item.atasan_nama || '-').replace(/'/g, "\\'");
                const safeEmail = String(item.email || '-').replace(/'/g, "\\'");
                const safeAtasanEmail = String(item.atasan_email || '-').replace(/'/g, "\\'");
                const hasAtasanEmail = String(item.atasan_email || '-').trim() !== '' && String(item.atasan_email || '-') !== '-';
                const hasKaryawanEmail = String(item.email || '-').trim() !== '' && String(item.email || '-') !== '-';
                const safeHrdNama = String(item.hrd_nama || '-').replace(/'/g, "\\'");
                const safeHrdEmail = String(item.hrd_email || '-').replace(/'/g, "\\'");
                const hasHrdEmail = String(item.hrd_email || '-').trim() !== '' && String(item.hrd_email || '-') !== '-';
                const hrdStatus = String(item.hrd_approval_status || 'pending').toLowerCase();
                const hasHrdToken = Boolean(item.hrd_approval_token);
                const atasanStatus = String(item.atasan_approval_status || 'pending').toLowerCase();
                const hasAtasanToken = Boolean(item.atasan_approval_token);
                const hasAtasanApprovedToken = hasAtasanToken && atasanStatus === 'approved';
                const hasAtasanPendingToken = hasAtasanToken && atasanStatus === 'pending';

                // Urutan approval: Head HRD -> Head Departemen/Atasan -> Karyawan
                let emailTarget = 'hrd';
                let emailTargetIsResend = false;

                if (hrdStatus === 'pending') {
                    emailTarget = 'hrd';
                    emailTargetIsResend = hasHrdToken;
                } else if (hasAtasanPendingToken) {
                    emailTarget = 'atasan';
                    emailTargetIsResend = true;
                } else if (hasAtasanApprovedToken) {
                    emailTarget = 'karyawan';
                    emailTargetIsResend = true;
                } else if (atasanStatus === 'approved') {
                    emailTarget = 'karyawan';
                    emailTargetIsResend = false;
                } else {
                    emailTarget = 'atasan';
                    emailTargetIsResend = false;
                }

                // Get workflow status and determine completion status FIRST
                const workflowStatus = item.workflow_status || 'Menunggu Tanda Tangan Head Department';
                const isCompleted = workflowStatus === 'Selesai';

                const emailTargetName = emailTarget === 'hrd' ? safeHrdNama : (emailTarget === 'atasan' ? safeAtasanNama : safeNama);
                const emailTargetEmail = emailTarget === 'hrd' ? safeHrdEmail : (emailTarget === 'atasan' ? safeAtasanEmail : safeEmail);
                const emailTargetHasEmail = emailTarget === 'hrd' ? hasHrdEmail : (emailTarget === 'atasan' ? hasAtasanEmail : hasKaryawanEmail);
                const disableSendEmail = isCompleted || !emailTargetHasEmail;

                const safeKeterangan = escapeHtml(String(item.keterangan_hrd || ''));
                const karyawanLabel = escapeHtml(String(item.karyawan_label || `${item.nama || '-'}`));
                const safeStLabelJs = String(item.st_label || '-').replace(/'/g, "\\'");
                const emailSent = Boolean(
                    item.hrd_email_sent_at || 
                    item.atasan_email_sent_at || 
                    item.karyawan_email_sent_at || 
                    item.atasan_approval_token || 
                    item.karyawan_approval_token
                );
                const hasApprovalToken = Boolean(item.atasan_approval_token || item.karyawan_approval_token);
                const lockedForApproval = Boolean(item.atasan_approval_token || item.karyawan_approval_token);
                const rowClass = emailSent ? 'sp-token-filled' : 'sp-token-empty';
                
                const karyawanStatus = String(item.karyawan_approval_status || 'pending').toLowerCase();
                const ttdHrdBadge = hrdStatus === 'approved'
                    ? '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>'
                    : '<i class="fas fa-hourglass-half text-warning" style="font-size: 1.2rem;"></i>';
                const ttdHeadBadge = atasanStatus === 'approved'
                    ? '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>'
                    : '<i class="fas fa-hourglass-half text-warning" style="font-size: 1.2rem;"></i>';
                const ttdKaryawanBadge = karyawanStatus === 'approved'
                    ? '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>'
                    : '<i class="fas fa-hourglass-half text-warning" style="font-size: 1.2rem;"></i>';
                
                // Check if row is newly created (within last 5 minutes) or not completed
                const isNew = item.created_at && isRecentlyCreated(item.created_at);
                const needsAttention = !isCompleted && !emailSent && (isNew || item.needs_review);
                const rowClassWithState = needsAttention ? `${rowClass} sp-needs-attention` : rowClass;
                
                // Format tanggal surat
                const tanggalSurat = item.tanggal_surat || item.tanggal_sp || '-';

                html += `
                    <tr class="${rowClassWithState}" data-row-id="${item.enc_id}" data-is-new="${isNew ? 'true' : 'false'}" data-completed="${isCompleted ? 'true' : 'false'}" data-approval-token="${lockedForApproval ? 'true' : 'false'}">
                        <td class="text-sm font-weight-normal">
                            <div class="d-flex gap-1 align-items-center flex-nowrap sp-action-dropdown">
                                <a class="btn btn-primary btn-sm mb-0 px-2" href="{{ url('/trssp/view') }}/${item.enc_id}"
                                    title="View Surat">
                                    <i class="fas fa-eye"> View</i>
                                </a>
                                <a class="btn btn-sm mb-0 px-2 ${lockedForApproval ? 'btn-secondary disabled' : 'btn-warning'}" href="javascript:void(0)" ${lockedForApproval ? 'aria-disabled="true" style="pointer-events:none; cursor:not-allowed; opacity:0.65;"' : `onclick="editSurat('${item.enc_id}')"`} title="${lockedForApproval ? 'Surat sudah dikirim approval, edit dinonaktifkan' : 'Edit'}">
                                    <i class="fas fa-edit"> Edit</i>
                                </a>
                                <a class="btn btn-sm mb-0 px-2 ${lockedForApproval ? 'btn-secondary disabled' : 'btn-danger'}" href="javascript:void(0)" ${lockedForApproval ? 'aria-disabled="true" style="pointer-events:none; cursor:not-allowed; opacity:0.65;"' : `onclick="hapusSurat('${item.enc_id}')"`} title="${lockedForApproval ? 'Surat sudah dikirim approval, hapus dinonaktifkan' : 'Hapus'}">
                                    <i class="fas fa-trash"> Hapus</i>
                                </a>
                                <a class="btn btn-sm mb-0 px-2 ${disableSendEmail ? 'btn-secondary' : 'btn-success'}" href="javascript:void(0)" ${disableSendEmail ? 'aria-disabled="true" style="pointer-events:none; cursor:not-allowed;"' : `onclick="confirmSendEmail('${item.enc_id}', '${emailTarget}', '${emailTargetName}', '${emailTargetEmail}', ${emailTargetIsResend ? 'true' : 'false'})"`} title="Kirim Email">
                                    <i class="fas fa-paper-plane"> Kirim Email</i>
                                </a>
                                
                                
                                
                            </div>
                        </td>
                        <td class="text-sm font-weight-normal">${index + 1}</td>
                        <td class="text-sm">${escapeHtml(String(tanggalSurat))}</td>
                        <td class="text-sm">${escapeHtml(String(item.nomor_surat || '-'))}</td>
                        <td class="text-sm font-weight-normal">${item.nik}</td>
                        <td class="text-sm">${karyawanLabel}</td>
                        <td class="text-sm">${item.departemen}</td>
                        <td class="text-sm">${escapeHtml(String(item.st_label && item.st_label !== '-' ? item.st_label : item.sp_label))}</td>
                        <td class="text-sm">${escapeHtml(String(item.pkb || '-'))}</td>
                        <td class="text-sm">${safeKeterangan || '-'}</td>
                        <td class="text-center text-sm">${ttdHrdBadge}</td>
                        <td class="text-center text-sm">${ttdHeadBadge}</td>
                        <td class="text-center text-sm">${ttdKaryawanBadge}</td>
                    </tr>
                `;

            });

            $('#tableBody').html(html);

            spTable = $('#spTable').DataTable({
                language: {
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },
                searching: false,
                responsive: true,
                pageLength: 10, // Show 10 data per page
                dom: 'Brtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                        autoFilter: true,
                        sheetName: 'Kirim Surat',
                        exportOptions: { columns: ':visible:not(:first-child)' } // Exclude Action column (first)
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: { columns: ':visible:not(:first-child)' } // Exclude Action column (first)
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                        exportOptions: { columns: ':visible:not(:first-child)' } // Exclude Action column (first)
                    }
                ]
            });

            spTable.buttons().container().appendTo('#spExportButtons');
            styleMsjButtons();
        }

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

        function openBulkSpModal(id, currentSpLevel = '-', historyCurrent = '-', currentStCount = 0, currentViolationType = '', currentViolationOther = '', currentLetterType = '-', tanggalSurat = '') {
            const selectedIds = [id];
            const draftTanggal = tanggalSurat || '';
            const normalizedViolationType = normalizeViolationValue(currentViolationType);
            const violationSelectOptions = [
                '<option value="">Pilih jenis pelanggaran</option>',
                ...violationOptions.map((item) => `<option value="${escapeHtml(item.value)}" ${normalizedViolationType === item.value ? 'selected' : ''}>${escapeHtml(item.label)}</option>`),
                '<option value="pelanggaran_lainnya" ' + (normalizedViolationType === 'pelanggaran_lainnya' ? 'selected' : '') + '>Pelanggaran Lainnya</option>'
            ];

            Swal.fire({
                title: 'Tambah Surat Teguran / Surat Peringatan',
                html: `
                    <div class="text-start">
                        <div class="mb-2 text-sm text-secondary">Riwayat Surat Teguran Karyawan: <span class="fw-bold">${Number(currentStCount || 0) > 0 ? 'Surat Teguran ' + escapeHtml(String(currentStCount)) : '-'}</span></div>
                        <label class="form-label">Jenis Pelanggaran <span class="text-danger">*</span></label>
                        <select id="bulk_violation_type" class="form-select mb-2">
                            ${violationSelectOptions.join('')}
                        </select>
                        <textarea id="bulk_violation_other" class="form-control mb-3" rows="2" placeholder="Isi jenis pelanggaran lainnya" style="display:${currentViolationType === 'pelanggaran_lainnya' ? 'block' : 'none'};">${escapeHtml(currentViolationOther || '')}</textarea>

                        <label class="form-label">Surat Teguran</label>
                        <select id="bulk_st_level" class="form-select mb-2">
                            <option value="" ${(Number(currentStCount || 0) <= 0) ? 'selected' : ''}>Pilih Surat Teguran</option>
                            <option value="NONE">Urungkan Surat Teguran</option>
                            <option value="ST 1" ${Number(currentStCount || 0) === 1 ? 'selected' : ''}>Surat Teguran 1</option>
                            <option value="ST 2" ${Number(currentStCount || 0) === 2 ? 'selected' : ''}>Surat Teguran 2</option>
                            <option value="ST 3" ${Number(currentStCount || 0) >= 3 ? 'selected' : ''}>Surat Teguran 3</option>
                        </select>

                        <label class="form-label">Surat Peringatan</label>
                        <select id="bulk_sp_level_new" class="form-select mb-3">
                            <option value="" ${(currentSpLevel === '-' || currentSpLevel === '') ? 'selected' : ''}>Pilih Surat Peringatan</option>
                            <option value="NONE">Urungkan Surat Peringatan</option>
                            <option value="SP 1" ${currentSpLevel === 'SP 1' ? 'selected' : ''}>Surat Peringatan 1</option>
                            <option value="SP 2" ${currentSpLevel === 'SP 2' ? 'selected' : ''}>Surat Peringatan 2</option>
                            <option value="SP 3" ${currentSpLevel === 'SP 3' ? 'selected' : ''}>Surat Peringatan 3</option>
                        </select>

                        <label class="form-label">Keterangan HRD <span class="text-danger">*</span></label>
                        <textarea id="bulk_sp_keterangan" class="form-control" rows="3" placeholder="Isi keterangan HRD"></textarea>
                    </div>
                `,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#8392ab',
                didOpen: () => {
                    const violationSelect = document.getElementById('bulk_violation_type');
                    const violationOther = document.getElementById('bulk_violation_other');
                    violationSelect.addEventListener('change', () => {
                        if (violationSelect.value === 'pelanggaran_lainnya') {
                            violationOther.style.display = 'block';
                        } else {
                            violationOther.style.display = 'none';
                            violationOther.value = '';
                        }
                    });
                },
                preConfirm: () => {
                    const violationType = document.getElementById('bulk_violation_type').value;
                    const violationOther = (document.getElementById('bulk_violation_other').value || '').trim();
                    const stLevel = document.getElementById('bulk_st_level').value;
                    const spLevel = document.getElementById('bulk_sp_level_new').value;
                    const keterangan = (document.getElementById('bulk_sp_keterangan').value || '').trim();

                    if (!violationType) {
                        Swal.showValidationMessage('Jenis pelanggaran wajib dipilih');
                        return false;
                    }

                    if (violationType === 'pelanggaran_lainnya' && !violationOther) {
                        Swal.showValidationMessage('Isi pelanggaran lainnya terlebih dahulu');
                        return false;
                    }

                    const hasSt = stLevel && stLevel !== 'NONE';
                    const hasSp = spLevel && spLevel !== 'NONE';
                    if (!hasSt && !hasSp) {
                        Swal.showValidationMessage('Minimal pilih salah satu: Surat Teguran atau Surat Peringatan');
                        return false;
                    }

                    if (!keterangan) {
                        Swal.showValidationMessage('Keterangan HRD wajib diisi');
                        return false;
                    }

                    return { violationType, violationOther, stLevel, spLevel, keterangan };
                }
            }).then((result) => {
                if (!result.isConfirmed || !result.value) {
                    return;
                }

                submitBulkSP(
                    selectedIds,
                    result.value.stLevel,
                    result.value.spLevel,
                    result.value.keterangan,
                    result.value.violationType,
                    result.value.violationOther,
                    draftTanggal
                );
            });
        }

        function submitBulkSP(ids, stLevel, spLevel, keterangan, violationType, violationOther, tanggalSurat) {
            $.ajax({
                url: '{{ url("/trssp/updatebulk") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    ids: ids,
                    tanggal_surat: tanggalSurat,
                    st_level: stLevel,
                    sp_level_new: spLevel,
                    keterangan: keterangan,
                    violation_type: violationType,
                    violation_other: violationOther
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            loadData();
                        });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Gagal mengupdate data surat terpilih.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg,
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function updateSummaryPeriod() {
            const periodElem = document.getElementById('spSummaryPeriod');
            const keyword = (document.getElementById('karyawan_filter').value || '').trim();
            periodElem.textContent = keyword ? `Filter Karyawan: ${keyword}` : 'Dalam Proses';
        }

        /**
         * Edit surat - redirect ke form SP
         */
        function editSurat(id, lockedForApproval = false) {
            const row = document.querySelector(`tr[data-row-id="${id}"]`);
            const isLocked = lockedForApproval || row?.dataset?.approvalToken === 'true';

            if (isLocked) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Surat Sudah Dikirim ke Approval',
                    text: 'Edit tidak dapat dilakukan karena surat sudah diproses approval.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            window.location.href = `{{ url('/trssp/edit') }}/${id}`;
        }

        /**
         * Hapus surat dengan konfirmasi
         */
        function hapusSurat(id, lockedForApproval = false) {
            const row = document.querySelector(`tr[data-row-id="${id}"]`);
            const isLocked = lockedForApproval || row?.dataset?.approvalToken === 'true';

            if (isLocked) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Surat Sudah Dikirim ke Approval',
                    text: 'Hapus tidak dapat dilakukan karena surat sudah diproses approval.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: 'Apakah Anda yakin ingin menghapus surat ini? Data yang sudah dihapus tidak dapat dikembalikan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#8392ab',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url("/trssp/deletehistory") }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id,
                            history_key: id
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: 'Surat berhasil dihapus',
                                    confirmButtonColor: '#028284'
                                }).then(() => {
                                    loadData();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message || 'Gagal menghapus surat',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Gagal menghapus surat. Silakan coba lagi.';
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: msg,
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        /**
         * Preview surat di modal dengan PDF viewer (EXACT sama seperti Rekap SP)
         */
        function previewSurat(id, stLabel = '-', spLabel = '-', violationType = '') {
            // Determine letter type
            let letterType = '';
            let letterTypeName = '';
            
            const hasST = stLabel && stLabel !== '-' && stLabel.trim() !== '';
            const hasSP = spLabel && spLabel !== '-' && spLabel.trim() !== '';
            
            if (hasSP) {
                letterType = 'sp';
                letterTypeName = `Surat Peringatan (${spLabel})`;
            } else if (hasST) {
                letterType = 'st';
                letterTypeName = `Surat Teguran (${stLabel})`;
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada surat',
                    text: 'Tidak ada surat yang dapat di-preview untuk data ini.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Reset modal state (EXACT sama seperti Rekap SP)
            $('#previewLoadingState').show();
            $('#previewSuratFrame').hide();

            // Open modal
            const modal = new bootstrap.Modal(document.getElementById('previewSuratModal'));
            modal.show();

            // Update modal title
            $('#previewSuratModalLabel').text(`Preview ${letterTypeName}`);

            // Use AJAX with blob (EXACT sama seperti Rekap SP)
            $.ajax({
                url: '{{ url("/trssp/cetaksp") }}',
                method: 'POST',
                data: {
                    id: id,
                    print_type: letterType,
                    _token: '{{ csrf_token() }}'
                },
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(blob) {
                    const url = window.URL.createObjectURL(blob);
                    $('#previewSuratFrame').attr('src', url);
                    $('#downloadPdfBtn').attr('href', url);
                    $('#downloadPdfBtn').attr('download', 'Surat_' + letterType.toUpperCase() + '_' + id + '.pdf');
                    
                    $('#previewLoadingState').hide();
                    $('#previewSuratFrame').show();
                },
                error: function(xhr) {
                    $('#previewLoadingState').html(`
                        <div class="text-center text-danger py-5">
                            <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                            <p>Gagal memuat preview. Silakan coba lagi.</p>
                        </div>
                    `);
                    console.error('Preview error:', xhr);
                }
            });

            // Hide loader when iframe loads (EXACT sama seperti Rekap SP)
            $('#previewSuratFrame').on('load', function() {
                $('#previewLoadingState').hide();
                $('#previewSuratFrame').show();
            });
        }

        function cetakSP(id, stLabel = '-', spLabel = '-', violationType = '') {
            // Determine available letter types
            let letterType = '';
            let letterTypeName = '';
            let infoHtml = '';
            
            const hasST = stLabel && stLabel !== '-' && stLabel.trim() !== '';
            const hasSP = spLabel && spLabel !== '-' && spLabel.trim() !== '';
            
            if (hasSP) {
                letterType = 'sp';
                letterTypeName = `Surat Peringatan (${spLabel})`;
            } else if (hasST) {
                letterType = 'st';
                letterTypeName = `Surat Teguran (${stLabel})`;
            } else {
                // No letter found
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada surat',
                    text: 'Tidak ada surat yang dapat dicetak untuk data ini.',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            
            infoHtml = `
                <div class="text-start">
                    <div class="alert alert-success mb-0">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-file-alt me-2" style="font-size: 1.5rem;"></i>
                            <div>
                                <strong class="d-block mb-1">Jenis Surat:</strong>
                                <span class="fs-5">${letterTypeName}</span>
                            </div>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">
                        <i class="fas fa-print me-1"></i>Klik Preview untuk melihat dan mencetak surat
                    </small>
                </div>
            `;

            Swal.fire({
                title: 'Cetak Surat',
                html: infoHtml,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-eye me-1"></i>Preview',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#8392ab',
                width: '500px'
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                // Open window AFTER user confirms
                const targetName = 'trssp_preview_' + id + '_' + Date.now();
                const previewWindow = window.open('', targetName);
                
                if (!previewWindow) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal membuka preview',
                        text: 'Browser memblokir tab baru. Izinkan pop-up lalu coba lagi.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url("/trssp/cetaksp") }}';
                form.target = targetName;

                const inputs = [
                    ['_token', '{{ csrf_token() }}'],
                    ['id', id],
                    ['print_type', letterType],
                    ['mode', 'inline'],
                    ['preview', '1'],
                ];

                inputs.forEach(([name, value]) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = name;
                    input.value = value;
                    form.appendChild(input);
                });

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

        function confirmSendEmail(id, recipient, recipientName, recipientEmail, isResend) {
            if (!recipientEmail || recipientEmail === '-') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Email belum tersedia',
                    text: 'Email penerima belum tersedia.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            const row = document.querySelector(`tr[data-row-id="${id}"]`);
            if (row && row.dataset.completed === 'true') {
                Swal.fire({
                    icon: 'info',
                    title: 'SP Sudah Selesai',
                    text: 'SP yang sudah selesai tidak bisa dikirim email lagi.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            const recipientLabel = recipient === 'hrd' ? 'Head HRD' : (recipient === 'karyawan' ? 'Karyawan' : 'Atasan');
            const title = isResend ? 'Sudah pernah mengirim email' : 'Kirim Email?';
            const message = isResend
                ? 'Sudah pernah mengirim email, apakah akan kirim email ulang?'
                : 'Email akan dikirim ke penerima berikut.';

            Swal.fire({
                icon: 'question',
                title,
                html: `${message}<br><br><b>${escapeHtml(recipientLabel)}</b><br><span class="text-dark">${escapeHtml(recipientName || recipientLabel)}</span><br><small class="text-secondary">${escapeHtml(recipientEmail)}</small>`,
                showCancelButton: true,
                confirmButtonText: isResend ? 'Ya, Kirim Ulang' : 'Ya, Kirim',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#8392ab',
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                $.ajax({
                    url: '{{ url("/trssp/hubungi") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        method: 'email',
                        recipient: recipient
                    },
                    beforeSend: function() {
                        Swal.fire({
                            title: 'Mengirim Email...',
                            html: '<div class="spinner-border text-primary mb-3"></div><p>Mohon tunggu...</p>',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false
                        });
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Email Terkirim',
                            text: response.message || 'Email berhasil dikirim.',
                            timer: 3000,
                            showConfirmButton: false
                        });
                        if (typeof loadData === 'function') {
                            loadData();
                        }
                    },
                    error: function(xhr) {
                        const msg = xhr.responseJSON?.message || 'Gagal mengirim email. Silakan coba lagi.';
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: msg,
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            });
        }

        function tutupSp(id) {
            Swal.fire({
                icon: 'warning',
                title: 'Tutup Surat?',
                text: 'Surat akan langsung ditandai ditutup dan tetap berlaku meskipun tidak mendapatkan persetujuan karyawan.',
                showCancelButton: true,
                confirmButtonText: 'Lanjut',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#8392ab',
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                // Show second dialog for closing notes
                Swal.fire({
                    title: 'Catatan Penutupan Surat',
                    html: `
                        <div class="text-start">
                            <label class="form-label">Catatan Penutupan <span class="text-danger">*</span></label>
                            <textarea id="catatan_penutupan" class="form-control" rows="4" placeholder="Masukkan catatan penutupan SP..."></textarea>
                        </div>
                    `,
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Tutup Surat',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#8392ab',
                    preConfirm: () => {
                        const catatan = document.getElementById('catatan_penutupan').value.trim();
                        if (!catatan) {
                            Swal.showValidationMessage('Catatan penutupan wajib diisi');
                            return false;
                        }
                        return { catatan_penutupan: catatan };
                    }
                }).then((result) => {
                    if (!result.isConfirmed || !result.value) {
                        return;
                    }

                    $.ajax({
                        url: '{{ url("/trssp/selesai") }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id,
                            catatan_penutupan: result.value.catatan_penutupan
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'SP Ditutup',
                                text: response.message || 'SP berhasil ditutup.',
                                timer: 3000,
                                showConfirmButton: false
                            }).then(() => {
                                loadData();
                            });
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Gagal menutup SP. Silakan coba lagi.';
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: msg,
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                });
            });
        }

        function isRecentlyCreated(createdAt) {
            if (!createdAt) return false;
            
            const createdTime = new Date(createdAt).getTime();
            const currentTime = new Date().getTime();
            const diffMinutes = (currentTime - createdTime) / (1000 * 60);
            
            // Return true if created within last 5 minutes
            return diffMinutes <= 5 && diffMinutes >= 0;
        }
    </script>
@endsection