@extends('layouts.app')

@section('content')
    @php
        $months = [
            1 => 'Januari',
            2 => 'Februari',
            3 => 'Maret',
            4 => 'April',
            5 => 'Mei',
            6 => 'Juni',
            7 => 'Juli',
            8 => 'Agustus',
            9 => 'September',
            10 => 'Oktober',
            11 => 'November',
            12 => 'Desember',
        ];
        $filterBulan = request('bulan', '');
        $filterTahun = request('tahun', '');
        $titleSuffix = '';
        if ($filterBulan && $filterTahun) {
            $titleSuffix = ' - ' . ($months[(int)$filterBulan] ?? '') . ' ' . $filterTahun;
        } elseif ($filterBulan) {
            $titleSuffix = ' - ' . ($months[(int)$filterBulan] ?? '');
        } elseif ($filterTahun) {
            $titleSuffix = ' - ' . $filterTahun;
        } else {
            $titleSuffix = ' - Semua Data';
        }
    @endphp
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? ''])
    <div class="container-fluid py-3">

        {{-- 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 Persetujuan Unsafe Action{{ $titleSuffix }}
                        </h6>
                    </div>
                    <!-- <div class="mb-2">
                        <a href="{{ url('/trspua/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 Kejadian</th>
                                <th>Karyawan</th>
                                <th>Departemen</th>
                                <th>Jenis Pelanggaran</th>
                                <th>Lokasi</th>
                                <th>Deskripsi Pelanggaran</th>
                                <th>Catatan</th>
                                <th>Posted</th>
                                <th>TTD K3/HRD</th>
                                <th>TTD Karyawan</th>
                                <th>Pengaju</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            {{-- Data will be loaded via AJAX --}}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <strong>Note: </strong>
                       
                        <span style="
                            display:inline-block;
                            width:10px;
                            height:10px;
                            border-radius:50%;
                            background:rgb(170, 242, 255);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Data perlu di proses/menunggu approval
                        &nbsp;|&nbsp;
                        <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
                        &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>
                        Data masih dalam proses tanda tangan
                    </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 Form Unsafe Action</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>

    <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: rgb(247, 209, 255, 0.5) !important;
        }
        .sp-draft-row td {
            background: rgba(255, 228, 159, 0.9) !important;
        }
        .sp-menunggu-approval td {
            background: rgb(170, 242, 255,0.5) !important;
        }
        .sp-needs-email td {
            background: rgb(156, 243, 175,0.5) !important;
        }
        /* 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;
        }
    </style>

    <script>
        let spTable = null;
        let currentFilters = {
            keyword: ''
        };
        const currentUsername = '{{ $currentUsername ?? '' }}';

        // Get URL parameters for filtering
        const urlParams = new URLSearchParams(window.location.search);
        const urlStatus = urlParams.get('status') || '';
        const urlApprovalTokenNull = urlParams.get('approval_token_null') || '';
        const urlBulan = urlParams.get('bulan') || '';
        const urlTahun = urlParams.get('tahun') || '';

        // 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 loadData() {
            if (spTable) {
                spTable.destroy();
                spTable = null;
            }

            $('#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("/trspua/ajax") }}',
                method: 'GET',
                data: {
                    all: 1,
                    keyword: currentFilters.keyword,
                    status: urlStatus,
                    approval_token_null: urlApprovalTokenNull,
                    bulan: urlBulan,
                    tahun: urlTahun
                },
                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="13" 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 isDraft = String(item.status || '').toLowerCase() === 'draft';
                const isCompleted = String(item.status || '').toLowerCase() === 'selesai';
                const isPosted = !isDraft;
                const isNew = item.created_at && isRecentlyCreated(item.created_at);
                const needsAttention = !isCompleted || isNew;
                const isMenungguApproval = String(item.status || '').toLowerCase() === 'menunggu_approval';
                const isDisetujui = String(item.status || '').toLowerCase() === 'disetujui';
                const isMenungguTTD = String(item.status || '').toLowerCase() === 'menunggu_ttd_karyawan';
                
                // Check if approval_token is null AND status is disetujui (needs to send email) - GREEN
                const needsSendEmail = !item.approval_token && (isDisetujui || isMenungguTTD);
                
                // Check if status is disetujui AND approval_token is NOT null - PURPLE
                const needsSignature = (isDisetujui || isMenungguTTD) && item.approval_token;
                
                let rowClass = isDraft ? 'sp-draft-row' : (isMenungguApproval ? 'sp-menunggu-approval' : '');
                if (needsSendEmail) {
                    rowClass += ' sp-needs-email';
                } else if (needsSignature) {
                    rowClass += ' sp-needs-attention';
                }
                
                let postBadge = isPosted
                    ? '<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>';

                let ttdK3Badge = '';
                const isCreatorHrdOrK3 = item.creator_role && (item.creator_role.includes('hrd') || item.creator_role.includes('jisken'));
                const hasRefAndRank = isCreatorHrdOrK3 && (item.idreferensi !== undefined && item.idreferensi !== null && item.idreferensi !== '' && item.idreferensi != 0) && (item.idrank !== undefined && item.idrank !== null && item.idrank !== '' && item.idrank != 0);
                const isDisetujuiTtd = (item.nik_menyetujui !== undefined && item.nik_menyetujui !== null && item.nik_menyetujui !== '') || hasRefAndRank || item.status === 'disetujui' || item.status === 'selesai';
                if (isDisetujuiTtd) {
                    ttdK3Badge = '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>';
                } else if (item.status === 'ditolak') {
                    ttdK3Badge = '<i class="fas fa-times-circle text-danger" style="font-size: 1.2rem;"></i>';
                } else {
                    ttdK3Badge = '<i class="fas fa-hourglass-half text-warning" style="font-size: 1.2rem;"></i>';
                }

                let ttdKaryawanBadge = '';
                const isDitandatangani = (item.tanda_tangan !== undefined && item.tanda_tangan !== null && item.tanda_tangan !== '' && item.tanda_tangan !== 'null') || item.status === 'selesai';
                if (isDitandatangani) {
                    ttdKaryawanBadge = '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>';
                } else {
                    ttdKaryawanBadge = '<i class="fas fa-hourglass-half text-warning" style="font-size: 1.2rem;"></i>';
                }
                
                const tanggalKejadian = item.tanggal_kejadian || '-';

                // All users see the same buttons: View, Proses, Kirim Email
                const isSelesai = String(item.status || '').toLowerCase() === 'selesai';
                const isMenungguApprovalStatus = String(item.status || '').toLowerCase() === 'menunggu_approval';
                const isMenungguTtd = String(item.status || '').toLowerCase() === 'menunggu_ttd_karyawan';
                
                // Proses only enabled when menunggu_approval
                const canProses = isMenungguApprovalStatus;
                // Kirim Email only enabled when disetujui and not selesai
                const canSendEmail = (isDisetujui || isMenungguTtd) && !isSelesai;

                let actionHtml = `
                    <div class="d-flex gap-1 flex-nowrap">
                        <a class="btn btn-primary btn-sm mb-0 px-2" href="{{ url('/trspua/view') }}/${item.id}" title="View">
                            <i class="fas fa-eye"></i> View
                        </a>
                        <button type="button" class="btn btn-info btn-sm mb-0 px-2" onclick="prosesSurat('${item.id}')" ${canProses ? '' : 'disabled style="opacity:0.5;pointer-events:none;"'}>
                            <i class="fas fa-cogs"></i> Proses
                        </button>
                        <button type="button" class="btn btn-success btn-sm mb-0 px-2" onclick="kirimEmailApproval('${item.id}')" ${canSendEmail ? '' : 'disabled style="opacity:0.5;pointer-events:none;"'}>
                            <i class="fas fa-paper-plane"></i> Kirim Email
                        </button>
                    </div>
                `;

                html += `
                    <tr class="${rowClass}" data-row-id="${item.id}" data-is-new="${isNew ? 'true' : 'false'}" data-completed="${isCompleted ? 'true' : 'false'}">
                        <td class="text-sm font-weight-normal">${actionHtml}</td>
                        <td class="text-sm font-weight-normal">${index + 1}</td>
                        <td class="text-sm">${escapeHtml(String(tanggalKejadian))}</td>
                        <td class="text-sm font-weight-normal">${item.nik} - ${item.nama_lengkap}</td>
                        <td class="text-sm font-weight-normal">${item.nama_departemen}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(String(item.nama_pelanggaran || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.lokasi || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.deskripsi_pelanggaran || '-')).substring(0, 50)}${(item.deskripsi_pelanggaran || '').length > 50 ? '...' : ''}</td>
                        <td class="text-sm">${escapeHtml(String(item.catatan || '-')).substring(0, 30)}${(item.catatan || '').length > 30 ? '...' : ''}</td>
                        <td class="text-sm text-center">${postBadge}</td>
                        <td class="text-sm text-center">${ttdK3Badge}</td>
                        <td class="text-sm text-center">${ttdKaryawanBadge}</td>
                        <td class="text-sm font-weight-normal">${item.user_create} - ${item.nama_pengaju} - ${item.departemen_pengaju}</td>
                        <td class="text-sm">${escapeHtml(String(item.created_at || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.updated_at || '-'))}</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,
                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: 'Unsafe Action',
                        exportOptions: { columns: ':visible:not(:first-child)' }
                    },
                    {
                        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)' }
                    },
                    {
                        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)' }
                    }
                ]
            });

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

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

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

        function postSurat(id) {
            Swal.fire({
                title: 'Konfirmasi Posting',
                text: "Apakah Anda yakin ingin memposting surat ini?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Post',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    doPost(id);
                }
            });
        }

        function doPost(id) {
            $.ajax({
                url: '{{ url("/trspua/post") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message || 'Unsafe Action berhasil dipost',
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            loadData();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Gagal mempost',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Gagal mempost. Silakan coba lagi.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg,
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function prosesSurat(id) {
            window.location.href = `{{ url('/trspua/process') }}/${id}`;
        }

        function kirimSurat(id) {
            Swal.fire({
                icon: 'info',
                title: 'Kirim Surat',
                text: 'Fungsi kirim surat sedang dikembangkan'
            });
        }

        function kirimEmailApproval(id) {
            $.ajax({
                url: '{{ url("/trspua/ajax") }}',
                method: 'GET',
                data: { id: id, all: 1 },
                success: function(ajaxResponse) {
                    let item = null;
                    if (ajaxResponse && ajaxResponse.success && ajaxResponse.data && ajaxResponse.data.length) {
                        item = ajaxResponse.data.find(function(d) { return String(d.id) === String(id); }) || ajaxResponse.data[0];
                    }

                    if (item) {
                        const rowNik = item.nik || '-';
                        const rowNama = item.nama_lengkap || item.nama || '-';
                        const rowEmail = item.email || '-';
                        
                        // Check if approval_token exists (already sent)
                        if (item.approval_token) {
                            // Format the updated_at time
                            let sentTime = '-';
                            if (item.updated_at) {
                                const date = new Date(item.updated_at);
                                sentTime = date.toLocaleString('id-ID', {
                                    day: '2-digit',
                                    month: 'long',
                                    year: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit'
                                });
                            }
                            
                            Swal.fire({
                                title: 'Kirim Ulang?',
                                html:
                                    'Anda sudah pernah mengirimkan email pada karyawan ini.<br>' +
                                    '<strong>Nama:</strong> ' + rowNama + '<br>' +
                                    '<strong>NIK:</strong> ' + rowNik + '<br>' +
                                    '<strong>Email:</strong> ' + rowEmail + '<br>' +
                                    '<strong>Waktu Pengiriman:</strong> ' + sentTime,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#028284',
                                cancelButtonColor: '#6c757d',
                                confirmButtonText: 'Ya, Kirim Ulang',
                                cancelButtonText: 'Batal'
                            }).then(function(confirmationResult) {
                                if (confirmationResult.isConfirmed) {
                                    performSendEmail(id);
                                }
                            });
                        } else {
                            // First time sending
                            Swal.fire({
                                title: 'Kirim Email?',
                                html:
                                    'Email akan dikirim ke karyawan dibawah ini untuk mendapatkan tanda tangan <br>'+
                                    '<strong>Nama:</strong> ' + rowNama + '<br>' +
                                    '<strong>NIK:</strong> ' + rowNik + '<br>' +
                                    '<strong>Email:</strong> ' + rowEmail,
                                icon: 'question',
                                showCancelButton: true,
                                confirmButtonColor: '#028284',
                                cancelButtonColor: '#6c757d',
                                confirmButtonText: 'Ya, Kirim',
                                cancelButtonText: 'Batal'
                            }).then(function(confirmationResult) {
                                if (confirmationResult.isConfirmed) {
                                    performSendEmail(id);
                                }
                            });
                        }
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Data surat tidak ditemukan',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat data surat',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function performSendEmail(id) {
            const loadingSwal = Swal.fire({
                title: 'Mengirim Email...',
                text: 'Mohon tunggu sebentar',
                icon: 'info',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ url("/trspua/hubungi") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(response) {
                    loadingSwal.close();
                    if (response.success) {
                        const recipientText = response.recipient_name && response.recipient_email
                            ? 'Email berhasil dikirim ke ' + response.recipient_name + ' (' + response.recipient_email + ')'
                            : (response.message || 'Email approval berhasil dikirim');
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: recipientText,
                            confirmButtonColor: '#028284'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Gagal mengirim email',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    loadingSwal.close();
                    const msg = xhr.responseJSON?.message || 'Gagal mengirim email. Silakan coba lagi.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg,
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function hapusSurat(id) {
            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("/trspua/delete") }}',
                        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'
                            });
                        }
                    });
                }
            });
        }

        function previewSurat(id) {
            const letterType = 'ua';
            const letterTypeName = 'Form Unsafe Action';
            
            $('#previewLoadingState').show();
            $('#previewSuratFrame').hide();
            
            const modal = new bootstrap.Modal(document.getElementById('previewSuratModal'));
            modal.show();
            
            $('#previewSuratModalLabel').text(`Preview ${letterTypeName}`);
            
            $.ajax({
                url: '{{ url("/trspua/cetakUnsafeAction") }}',
                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', 'Unsafe_Action_' + 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);
                }
            });
            
            $('#previewSuratFrame').on('load', function() {
                $('#previewLoadingState').hide();
                $('#previewSuratFrame').show();
            });
        }

        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;
                }

                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("/trspua/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 diffMinutes <= 5 && diffMinutes >= 0;
        }
    </script>
@endsection