@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3 pb-2">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h6 class="mb-1 text-dark font-weight-bold">Detail Rekap Pelanggaran</h6>
                        <p class="text-sm mb-0 text-secondary">
                            <strong>NIK:</strong> {{ $row['nik'] }} | 
                            <strong>Nama:</strong> {{ $row['nama_karyawan'] }} | 
                            <strong>Departemen:</strong> {{ $row['departemen'] }} | 
                            <strong>Grup:</strong> {{ $row['nama_grup'] }}
                        </p>
                    </div>
                    <button type="button" class="btn btn-secondary btn-sm mb-0" onclick="goBackToList()">
                        <i class="fas fa-circle-left me-1"></i>
                        Kembali
                    </button>
                </div>
            </div>
        </div>

        @if($is_ua_visible ?? true)
        {{-- Card 1: List Unsafe Action --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                @php
                    $totalUaDitolak = 0;
                    $totalUaSelesai = 0;
                    foreach (($row['ua_list'] ?? []) as $uaItem) {
                        if (($uaItem['status'] ?? '') === 'ditolak') {
                            $totalUaDitolak++;
                        } elseif (($uaItem['status'] ?? '') === 'selesai') {
                            $totalUaSelesai++;
                        }
                    }
                @endphp

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                    <h6 class="text-dark font-weight-bold mb-0">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                        List Unsafe Action
                    </h6>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="badge bg-danger text-white" title="Total Unsafe Action ditolak">
                            <i class="fas fa-times-circle me-1"></i> Total Ditolak: {{ $totalUaDitolak }}
                        </span>
                        <span class="badge bg-primary text-white" title="Total Unsafe Action selesai">
                            <i class="fas fa-check-circle me-1"></i> Total Selesai: {{ $totalUaSelesai }}
                        </span>
                        <div class="d-flex align-items-center gap-2 ms-2">
                            <label class="text-sm text-dark mb-0" for="uaStatusFilter">Filter Status:</label>
                            <select id="uaStatusFilter" class="form-select form-select-sm" style="width: 150px;">
                                <option value="">Semua Status</option>
                                <option value="Ditolak">Ditolak</option>
                                <option value="Selesai">Selesai</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr class="horizontal dark mt-0">
                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0" id="uaTable">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 150px;">Action</th>
                                <th>No</th>
                                <th>Tanggal Kejadian</th>
                                <th>Lokasi</th>
                                <th>Jenis Pelanggaran</th>
                                <th>Deskripsi Pelanggaran</th>
                                <th>Catatan</th>
                                <th>Catatan Tambahan</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($row['ua_list'] ?? [] as $idx => $ua)
                                <tr data-status="{{ $ua['status'] }}">
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ url('/rptsp/viewua/' . ($ua['id'] ?? 0)) }}?return={{ urlencode(request()->fullUrl()) }}" class="btn btn-primary btn-sm mb-0" style="background: #028284; border-color: #028284; color: #fff; min-width: 70px;" title="Lihat Detail UA">
                                                <i class="fas fa-eye me-1"></i>View
                                            </a>
                                            <button type="button" class="btn btn-info btn-sm mb-0" style="min-width: 70px;" onclick="previewUA({{ $ua['id'] ?? 0 }})" title="Preview Surat UA">
                                                <i class="fas fa-file-pdf me-1"></i>Preview
                                            </button>
                                        </div>
                                    </td>
                                    <td>{{ $idx + 1 }}</td>
                                    <td>{{ $ua['tanggal_kejadian'] }}</td>
                                    <td>{{ $ua['lokasi'] }}</td>
                                    <td>{{ $ua['nama_pelanggaran'] ?? '-' }}</td>
                                    <td>{{ $ua['deskripsi_pelanggaran'] }}</td>
                                    <td>{{ $ua['catatan'] }}</td>
                                    <td>
                                        @if(($ua['status'] ?? '') === 'ditolak')
                                            {{ $ua['alasan_penolakan'] ?: '-' }}
                                        @elseif(($ua['status'] ?? '') === 'selesai')
                                            {{ $ua['catatan_system'] ?: '-' }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if(($ua['status'] ?? '') === 'ditolak')
                                            <span class="badge bg-danger text-white">Ditolak</span>
                                        @else
                                            <span class="badge bg-primary text-white">Selesai</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @endif

        {{-- Card 2: List Surat Peringatan --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <h6 class="text-dark font-weight-bold mb-3">
                    <i class="fas fa-file-alt text-danger me-2"></i>
                    List Surat Peringatan
                </h6>
                <hr class="horizontal dark mt-0">
                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0" id="spTable">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 150px;">Action</th>
                                <th>No</th>
                                <th>Tanggal Surat</th>
                                <th>Nomor Surat</th>
                                <th>Jenis Surat</th>
                                <th>PKB</th>
                                <th>Keterangan HRD</th>
                                <th>Status Akhir</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($row['sp_list'] ?? [] as $idx => $history)
                                @php
                                    $isForceClosed = ($history['status'] ?? '') === 'force_closed';
                                @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ url('/rptsp/view/' . ($history['id'] ?? 0)) }}?from=detail" class="btn btn-primary btn-sm mb-0" style="background: #028284; border-color: #028284; color: #fff; min-width: 70px;" title="Lihat Form Surat">
                                                <i class="fas fa-eye me-1"></i>View
                                            </a>
                                            <button type="button" class="btn btn-info btn-sm mb-0" style="min-width: 70px;" onclick="previewSP('{{ \App\Helpers\Function_Helper::encryptUrlId($history['id'] ?? 0) }}', '{{ $history['surat_type'] ?? 'sp' }}')" title="Preview Surat">
                                                <i class="fas fa-file-pdf me-1"></i>Preview
                                            </button>
                                        </div>
                                    </td>
                                    <td>{{ $idx + 1 }}</td>
                                    <td>{{ $history['tanggal_sp'] }}</td>
                                    <td>{{ $history['nomor_surat'] ?? '-' }}</td>
                                    
                                    <td>{{ $history['surat'] }}</td>
                                    
                                    <td class="text-sm">{{ $history['pkb'] ?? '-' }}</td>
                                    <td class="text-sm">{{ $history['keterangan_hrd'] ?? '-' }}</td>
                                    <td>
                                        @if($isForceClosed)
                                            <span class="badge bg-dark">Ditutup Sepihak</span>
                                            @if(!empty($history['ditutup_at']))
                                                <br><small class="text-muted">{{ date('d M Y H:i', strtotime($history['ditutup_at'])) }}</small>
                                            @endif
                                        @else
                                            <span class="badge bg-primary">Selesai</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @if($is_st_visible ?? (($is_hrd ?? false) || ($is_spv ?? false)))
            {{-- Card 3: List Surat Teguran --}}
            <div class="card shadow-sm mb-3">
                <div class="card-body p-3">
                    <h6 class="text-dark font-weight-bold mb-3">
                        <i class="fas fa-file-alt text-warning me-2"></i>
                        List Surat Teguran
                    </h6>
                    <hr class="horizontal dark mt-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="stTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 150px;">Action</th>
                                    <th>No</th>
                                    <th>Tanggal Surat</th>
                                    <th>Nomor Surat</th>
                                    <th>Jenis Surat</th>
                                    
                                    <th>PKB</th>
                                    <th>Keterangan HRD</th>
                                    <th>Status Akhir</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($row['st_list'] ?? [] as $idx => $history)
                                    @php
                                        $isForceClosed = ($history['status'] ?? '') === 'force_closed';
                                    @endphp
                                    <tr>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="{{ url('/rptsp/view/' . ($history['id'] ?? 0)) }}?from=detail" class="btn btn-primary btn-sm mb-0" style="background: #028284; border-color: #028284; color: #fff; min-width: 70px;" title="Lihat Form Surat">
                                                    <i class="fas fa-eye me-1"></i>View
                                                </a>
                                                <button type="button" class="btn btn-info btn-sm mb-0" style="min-width: 70px;" onclick="previewSP('{{ \App\Helpers\Function_Helper::encryptUrlId($history['id'] ?? 0) }}', '{{ $history['surat_type'] ?? 'st' }}')" title="Preview Surat">
                                                    <i class="fas fa-file-pdf me-1"></i>Preview
                                                </button>
                                            </div>
                                        </td>
                                        <td>{{ $idx + 1 }}</td>
                                        <td>{{ $history['tanggal_sp'] }}</td>
                                        <td>{{ $history['nomor_surat'] ?? '-' }}</td>
                                        <td>{{ $history['surat'] }}</td>
                                        <td class="text-sm">{{ $history['pkb'] ?? '-' }}</td>
                                        <td class="text-sm">{{ $history['keterangan_hrd'] ?? '-' }}</td>
                                        <td>
                                            @if($isForceClosed)
                                                <span class="badge bg-dark">Ditutup Sepihak</span>
                                                @if(!empty($history['ditutup_at']))
                                                    <br><small class="text-muted">{{ date('d M Y H:i', strtotime($history['ditutup_at'])) }}</small>
                                                @endif
                                            @else
                                                <span class="badge bg-primary">Selesai</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    {{-- DataTables akan menampilkan pesan zeroRecords --}}
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Preview Modal --}}
    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">Preview Surat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="previewFrame" style="width: 100%; height: 600px; border: none;"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-sm" id="downloadPdfBtn" onclick="downloadCurrentPdf()">
                        <i class="fas fa-download me-1"></i>Download
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function previewUA(id) {
                if (!id) {
                    alert('ID Unsafe Action tidak valid');
                    return;
                }

                // Show loading modal first
                $('#previewModal').modal('show');
                $('#previewFrame').attr('src', '');
                
                // Fetch PDF using AJAX with blob response (POST method like trspua/show.blade.php)
                $.ajax({
                    url: '{{ url("/trspua/cetakUnsafeAction") }}',
                    type: 'POST',
                    data: {
                        id: id,
                        print_type: 'ua',
                        _token: '{{ csrf_token() }}'
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(blob) {
                        // Create object URL from blob and set as iframe source
                        const url = window.URL.createObjectURL(blob);
                        $('#previewFrame').attr('src', url);
                        
                        // Store URL for download button
                        $('#downloadPdfBtn').data('pdf-url', url);
                        $('#downloadPdfBtn').data('pdf-id', id);
                    },
                    error: function(xhr) {
                        alert('Gagal memuat preview PDF');
                        $('#previewModal').modal('hide');
                        console.error('Preview error:', xhr);
                    }
                });
            }

            function previewSP(id, printType = 'sp') {
                if (!id) {
                    alert('ID surat tidak valid');
                    return;
                }

                // Show loading modal first
                $('#previewModal').modal('show');
                $('#previewFrame').attr('src', '');
                
                // Fetch PDF using AJAX with blob response (POST method like List Kirim SP)
                $.ajax({
                    url: '{{ url("/trssp/cetaksp") }}',
                    type: 'POST',
                    data: {
                        id: id,
                        print_type: printType,
                        _token: '{{ csrf_token() }}'
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(blob) {
                        // Create object URL from blob and set as iframe source
                        const url = window.URL.createObjectURL(blob);
                        $('#previewFrame').attr('src', url);
                        
                        // Store URL for download button
                        $('#downloadPdfBtn').data('pdf-url', url);
                        $('#downloadPdfBtn').data('pdf-id', id);
                    },
                    error: function(xhr) {
                        alert('Gagal memuat preview PDF');
                        $('#previewModal').modal('hide');
                        console.error('Preview error:', xhr);
                    }
                });
            }

            function downloadCurrentPdf() {
                const pdfUrl = $('#downloadPdfBtn').data('pdf-url');
                const pdfId = $('#downloadPdfBtn').data('pdf-id');
                
                if (!pdfUrl) {
                    alert('Tidak ada PDF untuk diunduh');
                    return;
                }
                
                // Create temporary link and trigger download
                const a = document.createElement('a');
                a.href = pdfUrl;
                a.download = 'SP-' + pdfId + '.pdf';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }

            function goBackToList() {
                // PRIORITY 1: Check URL query parameter 'return' (MOST RELIABLE!)
                const urlParams = new URLSearchParams(window.location.search);
                const returnUrl = urlParams.get('return');
                
                if (returnUrl) {
                    window.location.href = decodeURIComponent(returnUrl);
                    return;
                }
                
                // PRIORITY 2: Check localStorage for saved List URL
                const savedListUrl = localStorage.getItem('rptsp_list_url');
                
                if (savedListUrl) {
                    window.location.href = savedListUrl;
                    return;
                }
                
                // PRIORITY 3: Check if referrer is the result page
                if (document.referrer && document.referrer.includes('/rptsp/result')) {
                    window.location.href = document.referrer;
                    return;
                }
                
                // PRIORITY 4: Last resort - go to filter page
                window.location.href = '{{ url("/rptsp") }}';
            }

            $(document).ready(function() {
                // Save current Detail URL to sessionStorage for reliable back navigation
                sessionStorage.setItem('rptsp_detail_url', window.location.href);
                
                // Destroy existing DataTables if already initialized
                if ($.fn.DataTable.isDataTable('#uaTable')) { $('#uaTable').DataTable().destroy(); }
                if ($.fn.DataTable.isDataTable('#spTable')) { $('#spTable').DataTable().destroy(); }
                if ($.fn.DataTable.isDataTable('#stTable')) { $('#stTable').DataTable().destroy(); }
                
                // Initialize DataTables for each card
                let uaTable = null;
                if ($('#uaTable').length) {
                    uaTable = $('#uaTable').DataTable({
                        lengthChange: false,
                        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)',
                            paginate: {
                                previous: 'Previous',
                                next: 'Next'
                            }
                        },
                        order: [[0, 'asc']],
                        searching: true,
                        pageLength: 10
                    });
                    // Filter UA table by status (Ditolak / Diterima) via data-status attribute
                    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                        // Hanya terapkan untuk tabel Unsafe Action
                        if (settings.nTable.id !== 'uaTable') {
                            return true;
                        }
                        const selected = $('#uaStatusFilter').val();
                        if (selected === '') {
                            return true;
                        }
                        const statusMap = { 'Ditolak': 'ditolak', 'Selesai': 'selesai' };
                        const rowStatus = $(settings.aoData[dataIndex].nTr).attr('data-status');
                        return rowStatus === (statusMap[selected] || '');
                    });

                    $('#uaStatusFilter').on('change', function() {
                        $('#uaTable').DataTable().draw();
                    });
                }

                let spTable = $('#spTable').DataTable({
                    lengthChange: false,
                    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)',
                        paginate: {
                            previous: 'Previous',
                            next: 'Next'
                        }
                    },
                    order: [[1, 'asc']],
                    searching: true,
                    pageLength: 10
                });

                let stTable = null;
                if ($('#stTable').length) {
                    stTable = $('#stTable').DataTable({
                        lengthChange: false,
                        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)',
                            paginate: {
                                previous: 'Previous',
                                next: 'Next'
                            }
                        },
                        order: [[1, 'asc']],
                        searching: true,
                        pageLength: 10
                    });
                }
            });
        </script>
    @endpush
@endsection