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

@section('content')
    @include('report.rptest.partials.rptest-style')
    @include('layouts.navbars.auth.topnav', ['title' => 'Report'])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card mx-1">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Test Report</h5>
                        <a href="{{ url($url_menu ?? 'rptest') }}" class="btn btn-outline-secondary btn-sm mb-0">
                            <i class="fas fa-arrow-left me-1"></i> Kembali ke Daftar
                        </a>
                    </div>
                    <div class="px-4">
                        @include('components.alert')
                    </div>
                    <div class="row px-3 px-md-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                <ul class="nav nav-tabs" id="lamaranTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active position-relative" id="test1-tab"
                                            data-bs-toggle="tab" data-bs-target="#test1" type="button" role="tab"
                                            aria-controls="test1" aria-selected="true">
                                            Report Test 1
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="test2-tab" data-bs-toggle="tab"
                                            data-bs-target="#test2" type="button" role="tab" aria-controls="test2"
                                            aria-selected="false">
                                            Report Test 2
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="test3-tab" data-bs-toggle="tab"
                                            data-bs-target="#test3" type="button" role="tab" aria-controls="test3"
                                            aria-selected="false">
                                            Report Test 3
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="test4-tab" data-bs-toggle="tab"
                                            data-bs-target="#test4" type="button" role="tab" aria-controls="test4"
                                            aria-selected="false">
                                            Report Test 4
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="psikogram-tab" data-bs-toggle="tab"
                                            data-bs-target="#psikogram" type="button" role="tab"
                                            aria-controls="psikogram" aria-selected="false">
                                            Report Psikogram
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row px-3 px-md-4 py-2">
                        <div class="tab-content" id="lamaranTabContent">
                            <div class="tab-pane fade show active" id="test1" role="tabpanel"
                                aria-labelledby="test1-tab">
                                @include('report.rptest.partials.test1')
                            </div>
                            <div class="tab-pane fade" id="test2" role="tabpanel" aria-labelledby="test2-tab">
                                @include('report.rptest.partials.test2')
                            </div>
                            <div class="tab-pane fade" id="test3" role="tabpanel" aria-labelledby="test3-tab">
                                @include('report.rptest.partials.test3')
                            </div>
                            <div class="tab-pane fade" id="test4" role="tabpanel" aria-labelledby="test4-tab">
                                @include('report.rptest.partials.test4')
                            </div>
                            <div class="tab-pane fade" id="psikogram" role="tabpanel" aria-labelledby="psikogram-tab">
                                @include('report.rptest.partials.psikogram')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#lamaranTab').on('shown.bs.tab', function(e) {
                const target = $(e.target).attr('aria-controls');
                let testType = 'test1';

                if (target === 'test2') {
                    testType = 'test2';
                } else if (target === 'test3') {
                    testType = 'test3';
                } else if (target === 'test4') {
                    testType = 'test4';
                }
            });
        });

        function openPrintWindow() {
            if (typeof updateTest1PrintImage === 'function') updateTest1PrintImage();
            if (typeof updateTest2PrintImages === 'function') updateTest2PrintImages();
            if (typeof updatePsikogramPrintImages === 'function') updatePsikogramPrintImages();

            const activeNav = document.querySelector('#lamaranTab .nav-link.active');
            const targetId = activeNav ? (activeNav.getAttribute('data-bs-target') || ('#' + activeNav.getAttribute('aria-controls'))) : '#test1';
            const activePane = document.querySelector(targetId) || document.querySelector('.tab-pane.active');

            if (!activePane) return;

            const printContent = activePane.querySelector('.print-only');
            if (!printContent) return;

            const printWin = window.open('', '_blank');
            if (!printWin) {
                alert('Pop-up terblokir! Mohon izinkan pop-up untuk membuka halaman cetak.');
                return;
            }

            const styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
                .map(el => el.outerHTML)
                .join('\n');

            const html = `
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Cetak Report - {{ $applicant->nama ?? 'Pelamar' }}</title>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                    ${styles}
                    <style>
                        body {
                            background: #f4f6f9 !important;
                            font-family: Arial, Helvetica, sans-serif !important;
                            padding: 20px 0 !important;
                            margin: 0 !important;
                            color: #333 !important;
                        }
                        .print-toolbar {
                            position: sticky;
                            top: 0;
                            z-index: 9999;
                            background: #ffffff;
                            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                            padding: 12px 24px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 20px;
                            border-bottom: 1px solid #e0e0e0;
                        }
                        .print-paper {
                            background: #ffffff;
                            width: 210mm;
                            min-height: 297mm;
                            margin: 0 auto;
                            padding: 15mm 18mm;
                            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
                            border-radius: 4px;
                            box-sizing: border-box;
                        }
                        .print-paper .print-only {
                            display: block !important;
                        }
                        .btn-print-action {
                            padding: 8px 18px;
                            font-weight: 600;
                            font-size: 14px;
                            border-radius: 6px;
                            cursor: pointer;
                            border: none;
                            transition: all 0.2s ease;
                        }
                        .btn-print-now {
                            background: #028284;
                            color: #ffffff;
                        }
                        .btn-print-now:hover {
                            background: #016567;
                        }
                        .btn-print-close {
                            background: #6c757d;
                            color: #ffffff;
                            margin-left: 8px;
                        }
                        .btn-print-close:hover {
                            background: #5a6268;
                        }
                        @media print {
                            .print-toolbar { display: none !important; }
                            body { background: #fff !important; padding: 0 !important; }
                            .print-paper {
                                width: 100% !important;
                                margin: 0 !important;
                                padding: 0 !important;
                                box-shadow: none !important;
                                border-radius: 0 !important;
                            }
                        }
                        /* ── Explicit Table & Header Borders for Print Preview ── */
                        .table-print-formal {
                            border-collapse: collapse !important;
                            font-size: 11px !important;
                            width: 100% !important;
                            border: 1px solid #016567 !important;
                            margin-bottom: 10px !important;
                        }
                        .table-print-formal th {
                            background-color: #028284 !important;
                            color: #ffffff !important;
                            text-align: center !important;
                            padding: 6px 8px !important;
                            font-weight: 700 !important;
                            border: 1px solid #016567 !important;
                            font-size: 11px !important;
                        }
                        .table-print-formal td {
                            text-align: center !important;
                            padding: 5px 8px !important;
                            border: 1px solid #cccccc !important;
                            font-size: 10.5px !important;
                            color: #333333 !important;
                        }
                        .table-print-formal tbody tr:nth-child(even) td {
                            background-color: #f8f9fa !important;
                        }
                        .table-print-formal tbody tr:nth-child(odd) td {
                            background-color: #ffffff !important;
                        }
                        .print-karakter-table {
                            border: 1px solid #016567 !important;
                            border-collapse: collapse !important;
                            font-size: 10.5px !important;
                            width: 100% !important;
                        }
                        .print-karakter-table th {
                            background-color: #028284 !important;
                            color: #ffffff !important;
                            padding: 6px !important;
                            text-align: center !important;
                            border: 1px solid #016567 !important;
                            font-weight: 700 !important;
                        }
                        .print-karakter-table td {
                            padding: 6px 8px !important;
                            border: 1px solid #cccccc !important;
                            vertical-align: top !important;
                            color: #333333 !important;
                        }
                        .print-section-title {
                            font-size: 13px !important;
                            font-weight: 700 !important;
                            text-align: center !important;
                            margin-bottom: 12px !important;
                            padding: 6px 0 !important;
                            border-bottom: 2px solid #028284 !important;
                            color: #028284 !important;
                        }
                    </style>
                </head>
                <body class="is-print-preview">
                    <div class="print-toolbar">
                        <div style="font-weight: bold; color: #333; font-size: 15px; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-file-alt" style="color: #028284;"></i> Preview Dokumen Cetak
                        </div>
                        <div>
                            <button class="btn-print-action btn-print-now" onclick="window.print()">
                                <i class="fas fa-print me-1"></i> Cetak / Print
                            </button>
                            <button class="btn-print-action btn-print-close" onclick="window.close()">
                                Tutup
                            </button>
                        </div>
                    </div>
                    <div class="print-paper">
                        ${printContent.outerHTML}
                    </div>
                    <style>
                        /* Mandatory Print Table & Element Overrides (must load after external links) */
                        table.table-print-formal, table.print-karakter-table {
                            border-collapse: collapse !important;
                            width: 100% !important;
                            border: 1px solid #016567 !important;
                            margin-bottom: 10px !important;
                        }
                        table.table-print-formal th, table.print-karakter-table th {
                            background-color: #028284 !important;
                            color: #ffffff !important;
                            text-align: center !important;
                            padding: 6px 8px !important;
                            font-weight: 700 !important;
                            border: 1px solid #016567 !important;
                            font-size: 11px !important;
                        }
                        table.table-print-formal td, table.print-karakter-table td {
                            text-align: center !important;
                            padding: 5px 8px !important;
                            border: 1px solid #cccccc !important;
                            font-size: 10.5px !important;
                            color: #333333 !important;
                        }
                        table.table-print-formal tbody tr:nth-child(even) td {
                            background-color: #f8f9fa !important;
                        }
                        table.table-print-formal tbody tr:nth-child(odd) td {
                            background-color: #ffffff !important;
                        }
                        table.print-info-table {
                            font-size: 11px !important;
                            line-height: 1.6 !important;
                            width: 100% !important;
                        }
                        table.print-info-table td {
                            border: none !important;
                            padding: 2px 0 !important;
                            color: #333333 !important;
                        }
                    </style>
                </body>
                </html>
            `;

            printWin.document.open();
            printWin.document.write(html);
            printWin.document.close();
            printWin.focus();
        }

        window.addEventListener('beforeprint', function() {
            document.querySelectorAll('.tab-pane').forEach(function(pane) {
                pane.classList.remove('print-active');
            });
            let activePane = document.querySelector('.tab-pane.active') || document.querySelector('.tab-pane.show');
            const activeNav = document.querySelector('.nav-link.active');
            if (activeNav) {
                const targetId = activeNav.getAttribute('data-bs-target') || ('#' + activeNav.getAttribute('aria-controls'));
                if (targetId) {
                    const pane = document.querySelector(targetId);
                    if (pane) activePane = pane;
                }
            }
            if (activePane) {
                activePane.classList.add('print-active');
            }

            if (typeof updateTest1PrintImage === 'function') updateTest1PrintImage();
            if (typeof updateTest2PrintImages === 'function') updateTest2PrintImages();
            if (typeof updatePsikogramPrintImages === 'function') updatePsikogramPrintImages();
        });

        window.addEventListener('afterprint', function() {
            document.querySelectorAll('.tab-pane').forEach(function(pane) {
                pane.classList.remove('print-active');
            });
        });
    </script>
@endpush