@extends('layouts.app')

@section('content')
    @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 Pengajuan Unsafe Action
                        </h6>
                    </div>
                    <div class="mb-2">
                        <a href="{{ url('/trstdk/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>Departement</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>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(247, 209, 255);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Data masih dalam proses

                        &nbsp;|&nbsp;

                        <span style="
                            display:inline-block;
                            width:10px;
                            height:10px;
                            border-radius:50%;
                            background:rgba(244,196,75);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Data belum dipost
                    </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.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: ''
        };

        // 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="14" 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("/trstdk/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="14" 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 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 rowClass = isDraft ? 'sp-draft-row' : (needsAttention ? '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 || '-';

                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">
                            <div class="btn-group sp-action-dropdown">
                                <a class="btn btn-primary btn-sm mb-0 px-3" href="{{ url('/trstdk/view') }}/${item.id}" title="Lihat Form SP">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </a>
                                <button type="button" class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item text-success ${isDraft ? '' : 'disabled'}" href="javascript:void(0)" onclick="${isDraft ? `postSurat('${item.id}')` : ''}" style="${isDraft ? '' : 'pointer-events: none; opacity: 0.5;'}">
                                            <i class="fas fa-paper-plane me-2"></i>Post
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-warning ${isDraft ? '' : 'disabled'}" href="javascript:void(0)" onclick="${isDraft ? `editSurat('${item.id}')` : ''}" style="${isDraft ? '' : 'pointer-events: none; opacity: 0.5;'}">
                                            <i class="fas fa-edit me-2"></i>Edit
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-danger ${isDraft ? '' : 'disabled'}" href="javascript:void(0)" onclick="${isDraft ? `hapusSurat('${item.id}')` : ''}" style="${isDraft ? '' : 'pointer-events: none; opacity: 0.5;'}">
                                            <i class="fas fa-trash me-2"></i>Hapus
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </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}</td>
                        <td class="text-sm">${escapeHtml(String(item.dept || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.pelanggaran_nama || '-'))}</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">${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('/trstdk/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("/trstdk/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 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("/trstdk/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("/trstdk/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("/trstdk/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