@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">
                            Daftar BAK/BAP - <span id="bakSummaryPeriod">Semua Data</span>
                        </h6>
                    </div>
                    <div class="mb-2">
                        <a href="{{ url('/trsbak/tambah') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Tambah
                        </a>
                    </div>
                    <div id="bakExportButtons" 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="bakTable">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 140px;">Action</th>
                                <th style="width: 40px;">No</th>
                                <th>Nomor</th>
                                <th>Karyawan</th>
                                <th>Departemen</th>
                                <th>Referensi Hukuman</th>
                                <th>Kejadian</th>
                                <th>Tanggal Kejadian</th>
                                <th>Lokasi</th>
                                
                                <th>Status</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,.9);
                            vertical-align:middle;
                            margin-right:4px;
                        "></span>
                        Data belum dipost
                    </small>
                </div>
            </div>
        </div>

    </div>

    <style>
        .bak-action-dropdown {
            white-space: nowrap;
        }
        .bak-action-dropdown .dropdown-menu {
            min-width: 220px;
            padding: 0.5rem 0;
        }
        .bak-action-dropdown .dropdown-menu li {
            padding: 0.15rem 0;
        }
        .bak-action-dropdown .dropdown-menu .btn {
            width: calc(100% - 1rem);
        }
        .table-wrap-centered,
        #bakTable_wrapper {
            max-width: 99%;
            margin: 0 auto;
        }
        .bak-draft-row td {
            background: rgba(128, 0, 128, 0.5) !important;
        }
        .bak-needs-attention td {
            background: rgb(247, 209, 255,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 bakTable = 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() {
            $('#bakExportButtons .dt-button').addClass('btn btn-secondary');
            $('#bakExportButtons .dt-button').removeClass('dt-button');
        }

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

            $('#bakExportButtons').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 BAK/BAP...</p>
                    </td>
                </tr>
            `);

            $.ajax({
                url: '{{ url("/trsbak/ajax") }}',
                method: 'GET',
                data: {
                    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 rowClass = isDraft ? 'bak-draft-row' : '';
                
                let statusBadge = '';
                if (item.status == 'disetujui') {
                    statusBadge = '<span class="badge bg-success">Disetujui</span>';
                } else if (item.status == 'menunggu-approval') {
                    statusBadge = '<span class="badge bg-secondary">Menunggu Approval</span>';
                } else if (item.status == 'draft') {
                    statusBadge = '<span class="badge bg-secondary">Draft</span>';
                } else {
                    statusBadge = '<span class="badge bg-secondary">' + escapeHtml(String(item.status)) + '</span>';
                }

                const tanggalKejadian = item.tanggal_kejadian || '-';

                html += `
                    <tr class="${rowClass}" data-row-id="${item.id}">
                        <td class="text-sm font-weight-normal">
                            <div class="btn-group bak-action-dropdown">
                                <a class="btn btn-primary btn-sm mb-0 px-3" href="{{ url('/trsbak/view') }}/${item.id}" title="Lihat Detail">
                                    <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" href="javascript:void(0)" onclick="hapusSurat('${item.id}')">
                                            <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(item.nomor || '-'))}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(String(item.nik))} - ${escapeHtml(String(item.nama))}</td>
                        <td class="text-sm">${escapeHtml(String(item.dept || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.referensi_hukuman || '-'))}</td>
                        <td class="text-sm">${escapeHtml(String(item.kejadian || '-')).substring(0, 50)}${(item.kejadian || '').length > 50 ? '...' : ''}</td>
                        <td class="text-sm">${escapeHtml(String(tanggalKejadian))}</td>
                        <td class="text-sm">${escapeHtml(String(item.lokasi || '-'))}</td>
        
                        <td class="text-sm">${statusBadge}</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);

            bakTable = $('#bakTable').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: 'BAK BAP',
                        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)' }
                    }
                ]
            });

            bakTable.buttons().container().appendTo('#bakExportButtons');
            styleMsjButtons();
        }

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

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

        function postSurat(id) {
            Swal.fire({
                title: 'Pilih Departemen Tujuan',
                html: `
                    <div class="d-flex flex-column gap-3" style="text-align: left;">
                        <button type="button" class="btn btn-primary btn-lg w-100" id="swalPersonalia">
                            <i class="fas fa-building me-2"></i>Kirim ke Personalia
                        </button>
                        <button type="button" class="btn btn-secondary btn-lg w-100" id="swalJishuken">
                            <i class="fas fa-users me-2"></i>Kirim ke Jishuken
                        </button>
                    </div>
                `,
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: 'Batal',
                cancelButtonColor: '#d33',
                customClass: {
                    popup: 'swal-wide'
                }
            });

            setTimeout(() => {
                document.getElementById('swalPersonalia').addEventListener('click', function() {
                    Swal.close();
                    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, 'Personalia');
                        }
                    });
                });
                document.getElementById('swalJishuken').addEventListener('click', function() {
                    Swal.close();
                    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, 'Jishuken');
                        }
                    });
                });
            }, 100);
        }

        function doPost(id, dptTujuan) {
            $.ajax({
                url: '{{ url("/trsbak/post") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    dpt_tujuan: dptTujuan
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message || 'BAK/BAP 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 BAK/BAP 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("/trsbak/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: 'BAK/BAP berhasil dihapus',
                                    confirmButtonColor: '#028284'
                                }).then(() => {
                                    loadData();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message || 'Gagal menghapus',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Gagal menghapus. Silakan coba lagi.';
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: msg,
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }
    </script>
@endsection