@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col d-flex align-items-center justify-content-between">
                                {{-- alert --}}
                                @include('components.alert')
                                <div class="d-flex gap-2">
                                    @if ($authorize->excel == '1')
                                        <button type="button" class="btn btn-sm btn-success" style="white-space: nowrap;"
                                            onclick="bulkConvertTrn()">
                                            <i class="fas fa-exchange-alt me-1"></i> Bulk Convert TNA → TRN
                                        </button>
                                        @php
                                            $userRoles = array_map('trim', explode(',', Auth::user()->idroles ?? ''));
                                        @endphp
                                        @if (in_array('admins', $userRoles))
                                            <button type="button" class="btn btn-sm btn-warning"
                                                style="white-space: nowrap;" onclick="bulkMarkAsFinish()">
                                                <i class="fas fa-check-double me-1"></i> Bulk Mark Finish (Admins)
                                            </button>
                                        @endif
                                    @endif
                                    @if ($authorize->add == '1')
                                        <a href="{{ url($url_menu . '/add') }}" class="btn btn-sm btn-primary"
                                            style="white-space: nowrap;">
                                            <i class="fas fa-plus me-1"></i> Create TNA
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- Filter Section --}}
                        <div class="row px-4 py-2">
                            <div class="col-12">
                                <form id="filterForm" method="GET" action="{{ url($url_menu) }}">
                                    <div class="row g-2 align-items-end">
                                        <div class="col-sm-6 col-md-2">
                                            <label class="form-label small fw-bold mb-1">Period From</label>
                                            <input type="date" class="form-control form-control-sm" name="date_from"
                                                value="{{ $date_from }}" max="{{ $date_to }}">
                                        </div>
                                        <div class="col-sm-6 col-md-2">
                                            <label class="form-label small fw-bold mb-1">To</label>
                                            <input type="date" class="form-control form-control-sm" name="date_to"
                                                value="{{ $date_to }}" min="{{ $date_from }}"
                                                max="{{ now()->toDateString() }}">
                                        </div>
                                        <div class="col-sm-6 col-md-2">
                                            <label class="form-label small fw-bold mb-1">Status Approval</label>
                                            <select class="form-select form-select-sm" name="status">
                                                <option value="all">All Status</option>
                                                <option value="pending_hrd"
                                                    {{ request('status') == 'pending_hrd' ? 'selected' : '' }}>Pending HRD
                                                </option>
                                                <option value="pending_atasan"
                                                    {{ request('status') == 'pending_atasan' ? 'selected' : '' }}>Pending
                                                    Atasan</option>
                                                <option value="approved"
                                                    {{ request('status') == 'approved' ? 'selected' : '' }}>Approved
                                                </option>
                                                <option value="rejected_hrd"
                                                    {{ request('status') == 'rejected_hrd' ? 'selected' : '' }}>Rejected
                                                    (HRD)</option>
                                                <option value="rejected_atasan"
                                                    {{ request('status') == 'rejected_atasan' ? 'selected' : '' }}>Rejected
                                                    (Atasan)</option>
                                                <option value="finish"
                                                    {{ request('status') == 'finish' ? 'selected' : '' }}>Finish</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-6 col-md-2">
                                            <label class="form-label small fw-bold mb-1">Departemen</label>
                                            <select class="form-select form-select-sm" name="department">
                                                <option value="all">All</option>
                                                @foreach ($departments as $dept)
                                                    <option value="{{ $dept->nama }}"
                                                        {{ request('department') == $dept->nama ? 'selected' : '' }}>
                                                        {{ $dept->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-12 col-md-4 d-flex gap-2 align-items-end justify-content-end">
                                            <a href="{{ url($url_menu) }}" class="btn btn-sm btn-danger px-3"
                                                style="white-space: nowrap;">
                                                <i class="fas fa-sync me-1"></i> Reset
                                            </a>
                                            <button type="submit" class="btn btn-sm btn-primary px-3"
                                                style="white-space: nowrap;">
                                                <i class="fas fa-search me-1"></i> Search
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <hr class="horizontal dark mt-2 mb-0">
                        {{-- button approve dan rejct --}}
                        @if ($is_hrd_approver || $is_superior_approver)
                            <div class="row px-4 pt-3 pb-0 g-2">
                                <div class="col-md-4"></div>
                                <div class="col-md-4 d-flex justify-content-end align-items-center">
                                    <span class="badge bg-primary text-white" id="bulkSelectedCount">0</span>
                                    <label class="mb-0 me-2 small fw-bold">Data Selected</label>
                                </div>
                                <div class="col-md-2 d-flex justify-content-end align-items-center">
                                    <button type="button" class="btn btn-primary btn-sm mb-0 w-100" id="bulkApproveButton"
                                        disabled>
                                        <i class="fas fa-check-double me-1"></i> Approve Selected
                                    </button>
                                </div>
                                <div class="col-md-2 d-flex justify-content-end align-items-center">
                                    <button type="button" class="btn btn-danger btn-sm mb-0 w-100" id="bulkRejectButton"
                                        disabled>
                                        <i class="fas fa-times me-1"></i> Reject Selected
                                    </button>
                                </div>
                            </div>
                        @endif

                        <hr class="horizontal dark mt-2 mb-0">


                        {{-- Export & Import Buttons Row --}}
                        <div class="row px-4 pt-3 pb-0">
                            <div class="col-12">
                                <div class="d-flex flex-wrap align-items-center">

                                    {{-- Left: Export + Template + Import --}}
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="d-flex gap-1" id="export-buttons"></div>

                                        @if ($authorize->add == '1')
                                            <a href="{{ url('trstna/download-template') }}"
                                                class="btn btn-sm btn-outline-success" style="white-space: nowrap;">
                                                <i class="fas fa-file-download me-1"></i> Download Template
                                            </a>

                                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                                data-bs-target="#importModal" style="white-space: nowrap;">
                                                <i class="fas fa-file-import me-1"></i> Import
                                            </button>
                                        @endif
                                    </div>

                                    {{-- Right: Search --}}
                                    <div class="d-flex align-items-center gap-2 ms-auto">
                                        <label class="mb-0 small fw-bold text-nowrap">
                                            Search :
                                        </label>

                                        <input type="text" id="customSearch" class="form-control form-control-sm"
                                            style="width: 220px;" placeholder="Search...">
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            @if ($is_hrd_approver || $is_superior_approver)
                                                <th class="text-center no-export" width="42">
                                                    <span class="bulk-checkbox-wrap">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="selectAllHrdApproval" title="Select all pending TNA">
                                                        <i class="fas fa-check bulk-check-icon bulk-check-mark"></i>
                                                        <i class="fas fa-minus bulk-check-icon bulk-minus-mark"></i>
                                                    </span>
                                                </th>
                                            @endif
                                            <th class="text-center">Action</th>
                                            {{-- @if ($authorize->excel == '1')
                                                <th width="100">Convert TRN</th>
                                            @endif --}}
                                            <th class="text-center">Schedule</th>
                                            {{-- <th>Status</th> --}}
                                            <th class="text-center">ID TNA</th>
                                            <th class="text-center">Training</th>
                                            <th class="text-center">Departemen</th>
                                            <th class="text-center">Section</th>
                                            <th class="text-center">Date Estimation</th>
                                            <th class="text-center">Superior</th>
                                            <th class="text-center">Status Approval</th>
                                            <th class="text-center">Created At</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $detail)
                                            @php
                                                $primary = $detail->id;
                                                $encryptedId = encrypt($primary);
                                                $canConvert =
                                                    $detail->approval_hrd == 'approved' &&
                                                    $detail->approval_atasan == 'approved' &&
                                                    $detail->status != 'finish';
                                            @endphp
                                            <tr>
                                                @if ($is_hrd_approver || $is_superior_approver)
                                                    <td class="text-center">
                                                        @if (
                                                            ($is_hrd_approver && $detail->approval_hrd === 'pending') ||
                                                                ($is_superior_approver && $detail->bulk_superior_approvable))
                                                            <span class="bulk-checkbox-wrap">
                                                                <input type="checkbox"
                                                                    class="form-check-input hrd-approval-checkbox"
                                                                    value="{{ $encryptedId }}"
                                                                    data-tna-id="{{ $detail->id }}">
                                                                <i
                                                                    class="fas fa-check bulk-check-icon bulk-check-mark"></i>
                                                            </span>
                                                        @else
                                                            <i class="fas fa-minus text-muted"
                                                                title="Not eligible for HRD approval"></i>
                                                        @endif
                                                    </td>
                                                @endif
                                                <td class="text-sm font-weight-normal text-center no-export">
                                                    <div class="btn-group">
                                                        {{-- yg boleh mengisi hanya hrd dan yg diperbolehkan diisi cuma data-data yg belum memiliki tna_detail dan tna_schedule --}}
                                                        @if ($is_hrd_approver && $detail->needs_hrd_completion)
                                                            <button class="btn btn-warning btn-sm mb-0 px-3"
                                                                type="button" title="Complete TNA details and schedule"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . $encryptedId . '?mode=edit') }}'">
                                                                <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                                    Lengkapi Data</span>
                                                            </button>
                                                        @else
                                                            <button class="btn btn-primary btn-sm mb-0 px-3"
                                                                type="button"
                                                                title="{{ $detail->needs_hrd_completion ? 'Complete TNA details and schedule' : 'View TNA' }}"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . $encryptedId) }}'">
                                                                <i class="fas fa-eye"></i><span class="font-weight-bold">
                                                                    View</span>
                                                            </button>
                                                            @php
                                                                $canApproveFromList = $is_hrd_approver
                                                                    ? $detail->bulk_hrd_approvable
                                                                    : $detail->bulk_superior_approvable;
                                                                $showApproveButton = $is_hrd_approver
                                                                    ? $detail->approval_hrd === 'pending'
                                                                    : $detail->approval_atasan === 'pending';
                                                            @endphp
                                                            @if ($showApproveButton)
                                                                <button type="button"
                                                                    class="btn btn-sm {{ $canApproveFromList ? 'btn-success' : 'btn-secondary' }} mx-2 mb-0 w-90"
                                                                    title="{{ $canApproveFromList ? 'Approval' : 'Data belum lengkap' }}"
                                                                    @if ($canApproveFromList) onclick="{{ $is_hrd_approver ? "approveHrdFromList('$encryptedId')" : "bulkApproveSuperior(['$encryptedId'])" }}"
                                                                    @else
                                                                        disabled @endif>
                                                                    <i class="fas fa-check-circle"></i>
                                                                    <span class="font-weight-bold">
                                                                        {{ $is_hrd_approver ? 'Approval HRD' : 'Approval Supervisor' }}
                                                                    </span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    </div>
                                                    @if ($is_hrd_approver)
                                                        @if ($canConvert)
                                                            <button class="btn btn-success btn-sm mb-0 px-2"
                                                                type="button" title="Convert to TRN"
                                                                onclick="convertToTrn(@js($encryptedId), @js(session('username') ?? '-'))">
                                                                <i class="fas fa-exchange-alt"></i> Convert
                                                            </button>
                                                        @endif
                                                    @endif

                                                </td>

                                                <td class="text-sm font-weight-normal text-center">
                                                    <button class="btn btn-info btn-sm mb-0 px-2" type="button"
                                                        title="Lihat Schedule"
                                                        onclick="showScheduleModal(@js($detail->id), @js($detail->name_trn))">
                                                        <i class="fas fa-calendar"></i> {{ $detail->schedule_count }}
                                                    </button>
                                                </td>
                                                {{-- <td class="text-sm font-weight-normal">
                                                    @if ($detail->status == 'draft')
                                                        <span class="badge bg-secondary">Draft</span>
                                                    @elseif ($detail->status == 'aktif')
                                                        <span class="badge bg-primary">Aktif</span>
                                                    @elseif ($detail->status == 'finish')
                                                        <span class="badge bg-success">Finish</span>
                                                    @endif
                                                </td> --}}
                                                <td class="text-sm font-weight-bold text-center">{{ $detail->id }}</td>
                                                <td class="text-sm font-weight-normal text-center">{{ $detail->name_trn }}
                                                </td>
                                                <td class="text-sm font-weight-normal text-center">
                                                    {{ $detail->department ?: '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal text-center">
                                                    {{ $detail->section ?: '-' }}</td>
                                                <td class="text-sm font-weight-normal text-center">
                                                    {{ $detail->month_estimation ? \Carbon\Carbon::parse($detail->month_estimation)->format('d-m-Y') : '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal text-center">
                                                    @if ($detail->atasan_nik)
                                                        {{ $detail->atasan_name }}
                                                        <small
                                                            class="text-muted d-block">{{ $detail->atasan_nik }}</small>
                                                    @else
                                                        <span class="text-muted fst-italic small">HRD (fallback)</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm font-weight-normal text-center">
                                                    @if ($detail->approval_hrd == 'approved' && $detail->approval_atasan == 'approved')
                                                        <span class="badge bg-success"><i
                                                                class="fas fa-check me-1"></i>Approved</span>
                                                    @elseif ($detail->approval_hrd == 'rejected')
                                                        <span class="badge bg-danger"><i
                                                                class="fas fa-times me-1"></i>Rejected
                                                            (HRD)
                                                        </span>
                                                    @elseif ($detail->approval_atasan == 'rejected')
                                                        <span class="badge bg-danger"><i
                                                                class="fas fa-times me-1"></i>Rejected
                                                            (Supervisor)</span>
                                                    @elseif ($detail->approval_hrd == 'approved' && $detail->approval_atasan == 'pending')
                                                        <span class="badge bg-warning text-white">
                                                            <i class="fas fa-clock me-1"></i>Pending Supervisor
                                                            @if ($detail->can_approve_atasan)
                                                                <i class="fas fa-exclamation-circle ms-1"
                                                                    title="Waiting for your approval"></i>
                                                            @endif
                                                        </span>
                                                    @elseif ($detail->approval_hrd == 'pending')
                                                        <span class="badge bg-warning text-white"><i
                                                                class="fas fa-clock me-1"></i>Pending HRD</span>
                                                    @else
                                                        <span class="badge bg-secondary"><i
                                                                class="fas fa-hourglass me-1"></i>Pending</span>
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    {{ $detail->created_at ? \Carbon\Carbon::parse($detail->created_at)->format('d-m-Y H:i') : '-' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Schedule Detail Modal --}}
    <div class="modal fade" id="scheduleDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, #028284, #00b7bd); color: #fff;">
                    <div>
                        <h5 class="modal-title mb-0 text-white"><i class="fas fa-calendar-alt me-2"></i>TNA Schedule</h5>
                        <small id="scheduleModalSubtitle" class="text-white"></small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="scheduleModalBody"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Import Modal --}}
    @if ($authorize->add == '1')
        <div class="modal fade" id="importModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header" style="background: linear-gradient(135deg, #028284, #00b7bd); color: #fff;">
                        <h5 class="modal-title text-white"><i class="fas fa-file-import me-2"></i>Import Request TNA</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="importInstructions" class="mb-3 text-white p-2" style="background: linear-gradient(135deg, #028284, #00b7bd);">
                                <i class="fas fa-info-circle me-1"></i>
                                <strong>Instructions:</strong>
                                <ul class="mb-0 mt-1 small">
                                    <li>Download the template first</li>
                                    <li>Fill in the data according to the format provided in the <strong>Guide</strong>
                                        sheet
                                    </li>
                                    <li>Enter data starting from row 3; use the time column with the <strong>HH:MM</strong>
                                        format</li>
                                    <li>Trainer and institution type are required for each row in the
                                        <strong>Schedule</strong>
                                        sheet</li>
                                    <li>Internal trainers must use the NIK listed in the <strong>Employee Data</strong>
                                        sheet
                                    </li>
                                    <li>Enter participants using their <strong>full names</strong>, separated by commas; use
                                        NIK
                                        only when multiple participants have the same name</li>
                                </ul>
                            
                        </div>


                        <form id="importForm" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label fw-bold">Upload File Excel <span
                                        class="text-danger">*</span></label>
                                <div id="dropZone" class="border border-2 border-dashed rounded-3 p-4 text-center"
                                    style="border-color: #028284 !important; cursor: pointer; transition: all 0.2s;">
                                    <i class="fas fa-cloud-upload-alt fa-2x mb-2" style="color: #028284;"></i>
                                    <p class="mb-1 fw-bold">Drop file here or click to browse</p>
                                    <p class="mb-0 text-muted small">Format: .xlsx, .xls (Max 5MB)</p>
                                    <input type="file" name="import_file" id="importFile" accept=".xlsx,.xls"
                                        class="d-none">
                                </div>
                                <div id="fileInfo" class="d-none mt-2">
                                    <div class="d-flex align-items-center justify-content-between bg-light rounded p-2">
                                        <span class="small"><i class="fas fa-file-excel text-success me-1"></i> <span
                                                id="fileName"></span></span>
                                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                                            onclick="clearFile()">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="importPreview" class="d-none mt-3"></div>
                    </div>
                    <div class="modal-footer">
                        {{-- <a href="{{ url('trstna/download-template') }}" class="btn btn-outline-success me-auto">
                            <i class="fas fa-download me-1"></i> Download Template
                        </a> --}}
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i> Cancel
                        </button>
                        <button type="button" class="btn btn-info" id="btnImport" onclick="previewImport()" disabled>
                            <i class="fas fa-eye me-1"></i> Preview
                        </button>
                        <button type="button" class="btn btn-success d-none" id="btnConfirmImport"
                            onclick="executeImport()">
                            <i class="fas fa-check me-1"></i> Confirm Import
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($is_hrd_approver || $is_superior_approver)
        <style>
            #list_{{ $dmenu }} .form-check-input,
            #selectAllHrdApproval {
                width: 1.1rem;
                height: 1.1rem;
                cursor: pointer;
                border: 1px solid #028284;
            }

            .bulk-checkbox-wrap {
                position: relative;
                display: inline-flex;
                width: 1.1rem;
                height: 1.1rem;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
            }

            .bulk-checkbox-wrap .form-check-input {
                position: absolute;
                inset: 0;
                z-index: 1;
                margin: 0 !important;
            }

            .bulk-check-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 3;
                display: none;
                color: #fff !important;
                font-size: 0.65rem;
                line-height: 1;
                transform: translate(-50%, -50%);
                pointer-events: none;
            }

            .bulk-checkbox-wrap .form-check-input:checked:not(:indeterminate)~.bulk-check-mark,
            .bulk-checkbox-wrap .form-check-input:indeterminate~.bulk-minus-mark {
                display: block !important;
            }

            .bulk-checkbox-wrap .form-check-input:indeterminate~.bulk-check-mark {
                display: none !important;
            }

            #list_{{ $dmenu }} .form-check-input:checked,
            #selectAllHrdApproval:checked,
            #selectAllHrdApproval:indeterminate {
                background-color: #028284 !important;
                border-color: #028284 !important;
                background-image: none !important;
            }
        </style>
    @endif
@endsection

@push('js')
    <script>
        const schedulesByTna = @json($table_detail->mapWithKeys(fn($item) => [$item->id => $item->schedule_details ?? []]));

        function escapeScheduleText(value) {
            return $('<div>').text(value == null ? '' : String(value)).html();
        }

        function showScheduleModal(tnaId, trainingName) {
            const schedules = schedulesByTna[tnaId] || [];
            $('#scheduleModalSubtitle').text(`${tnaId} · ${trainingName}`);

            if (!schedules.length) {
                $('#scheduleModalBody').html(`
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-calendar-times fa-3x mb-3 opacity-5"></i>
                        <p class="mb-0">No schedule has been set for this TNA yet.</p>
                    </div>
                `);
            } else {
                const scheduleCards = schedules.map(function(schedule, index) {
                    const parsedDate = new Date(`${schedule.date}T00:00:00`);
                    const formattedDate = Number.isNaN(parsedDate.getTime()) ? schedule.date :
                        new Intl.DateTimeFormat('id-ID', {
                            weekday: 'long',
                            day: '2-digit',
                            month: 'long',
                            year: 'numeric'
                        }).format(parsedDate);

                    const participantBadges = (schedule.participants || []).length ?
                        schedule.participants.map(participant => `
                            <span class="badge bg-info text-white me-1 mb-1">
                                ${escapeScheduleText(participant.name)} (${escapeScheduleText(participant.nik)})
                            </span>
                        `).join('') : '<span class="text-muted small">Tidak ada peserta.</span>';
                    const timeRange = schedule.start_time && schedule.end_time ?
                        `${escapeScheduleText(schedule.start_time)} - ${escapeScheduleText(schedule.end_time)}` :
                        '-';
                    const institutionLabel = schedule.institution_name === 'external' ? 'External' : 'Internal';
                    const trainerNik = schedule.trainer_nik ?
                        `<span class="text-muted ms-1">(${escapeScheduleText(schedule.trainer_nik)})</span>` : '';
                    const trainerName = schedule.trainer_name ?
                        `${escapeScheduleText(schedule.trainer_name)} ${trainerNik}` : '-';

                    return `
                        <div class="card border shadow-none mb-3">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                                    <div>
                                        <span class="text-xs text-uppercase text-muted fw-bold">Schedule ${index + 1}</span>
                                        <h6 class="mb-0 mt-1"><i class="fas fa-calendar-day me-2 text-primary"></i>${escapeScheduleText(formattedDate)}</h6>
                                    </div>
                                    <span class="badge ${schedule.status === 'selesai' ? 'bg-success' : 'bg-primary'}">${schedule.status === 'selesai' ? 'Completed' : 'Active'}</span>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">Time</div>
                                        <div class="text-sm"><i class="fas fa-clock me-2 text-primary"></i>${timeRange}</div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">Trainer</div>
                                        <div class="text-sm"><i class="fas fa-chalkboard-teacher me-2 text-primary"></i>${trainerName}</div>
                                        <span class="badge bg-light text-dark mt-1">${institutionLabel}</span>
                                    </div>
                                </div>
                                <div class="text-sm fw-bold mb-2">Participants (${(schedule.participants || []).length})</div>
                                <div>${participantBadges}</div>
                            </div>
                        </div>
                    `;
                }).join('');

                $('#scheduleModalBody').html(scheduleCards);
            }

            bootstrap.Modal.getOrCreateInstance(document.getElementById('scheduleDetailModal')).show();
        }

        $(document).ready(function() {
            // Check if DataTable already initialized, destroy first
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            // Initialize DataTable
            var table = $('#list_{{ $dmenu }}').DataTable({
                "language": {
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Data tidak ditemukan",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                order: [],
                columnDefs: [
                    @if ($is_hrd_approver || $is_superior_approver)
                        {
                            targets: 0,
                            orderable: false,
                            searchable: false
                        }
                    @endif
                ],
                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: 'Form TNA',
                        exportOptions: {
                            columns: ':visible:not(:first-child):not(:nth-child(2)):not(:nth-child(3))'
                        },
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                        exportOptions: {
                            columns: ':visible:not(:first-child):not(:nth-child(2)):not(:nth-child(3))'
                        },
                    },
                    {
                        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):not(:nth-child(2)):not(:nth-child(3))'
                        },
                    },
                ]
            });

            // Move export buttons to custom container
            table.buttons().container().appendTo('#export-buttons');

            // Style the buttons
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // Custom search functionality
            $('#customSearch').on('keyup', function() {
                table.search(this.value).draw();
            });

            @if ($is_hrd_approver || $is_superior_approver)
                function selectedHrdCheckboxes() {
                    return table.$('.hrd-approval-checkbox:checked');
                }

                function refreshBulkApprovalState() {
                    const selected = selectedHrdCheckboxes().length;
                    const appliedRows = $(table.rows({
                        search: 'applied'
                    }).nodes());
                    const eligible = appliedRows.find('.hrd-approval-checkbox').length;
                    const visibleSelected = appliedRows.find('.hrd-approval-checkbox:checked').length;
                    $('#bulkSelectedCount').text(selected);
                    $('#bulkApproveButton, #bulkRejectButton').prop('disabled', selected === 0);
                    $('#selectAllHrdApproval').prop('checked', eligible > 0 && visibleSelected === eligible);
                    $('#selectAllHrdApproval').prop('indeterminate', visibleSelected > 0 && visibleSelected <
                        eligible);
                }

                $('#selectAllHrdApproval').on('click', function(event) {
                    event.stopPropagation();
                });
                $('#selectAllHrdApproval').on('change', function() {
                    $(table.rows({
                            search: 'applied'
                        }).nodes())
                        .find('.hrd-approval-checkbox')
                        .prop('checked', this.checked);
                    $(this).prop('indeterminate', false);
                    refreshBulkApprovalState();
                });
                $('#list_{{ $dmenu }}').on('change', '.hrd-approval-checkbox', refreshBulkApprovalState);
                $('#bulkApproveButton').on('click', function() {
                    const ids = table.$('.hrd-approval-checkbox:checked').map(function() {
                        return this.value;
                    }).get();
                    if (ids.length) {
                        @if ($is_hrd_approver)
                            bulkApproveHrd(ids);
                        @else
                            bulkApproveSuperior(ids);
                        @endif
                    }
                });
                $('#bulkRejectButton').on('click', function() {
                    const ids = table.$('.hrd-approval-checkbox:checked').map(function() {
                        return this.value;
                    }).get();
                    if (!ids.length) return;
                    @if ($is_hrd_approver)
                        bulkRejectHrd(ids);
                    @else
                        bulkRejectSuperior(ids);
                    @endif
                });

                table.on('draw', refreshBulkApprovalState);
                refreshBulkApprovalState();
            @endif

            // Check authorize button datatables
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>733</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>733</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>734</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>734</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>735</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/traing/trstna/list.blade.php</b> on line <b>735</b><br />
        });

        function approveHrdFromList(id) {
            bulkApproveHrd([id], true);
        }

        function rejectHrdFromList(id) {
            Swal.fire({
                title: 'Reject HRD Approval',
                text: 'Please provide the reason for rejecting this TNA.',
                input: 'textarea',
                inputLabel: 'Rejection Reason',
                inputPlaceholder: 'Enter rejection reason...',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Reject',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: function(value) {
                    if (!value || !value.trim()) return 'Rejection reason is required!';
                }
            }).then(function(result) {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Processing rejection...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ url('trstna/reject-hrd') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        reason: result.value.trim()
                    },
                    success: function(response) {
                        Swal.fire('Rejected', response.message, 'success').then(function() {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire('Rejection Failed', response.error || response.message ||
                            'Terjadi kesalahan.', 'error');
                    }
                });
            });
        }

        function bulkApproveHrd(ids, singleApproval) {
            singleApproval = singleApproval === true;
            Swal.fire({
                title: singleApproval ? 'Approve this TNA?' : 'Approve ' + ids.length + ' TNA?',
                html: singleApproval ?
                    '<p class="mb-1">This TNA will be approved at the <strong>HRD Approval</strong> stage.</p>' :
                    '<p class="mb-1">Semua TNA terpilih akan disetujui pada tahap <strong>HRD Approval</strong>.</p><small class="text-muted">TNA yang statusnya berubah atau datanya belum lengkap akan dilewati.</small>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: singleApproval ?
                    '<i class="fas fa-check me-1"></i>Approve HRD' :
                    '<i class="fas fa-check-double me-1"></i>Approve Selected',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#2dce89'
            }).then(function(result) {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Processing approval...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ url('trstna/bulk-approve-hrd') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids
                    },
                    success: function(response) {
                        const skipped = response.skipped || [];
                        let skippedHtml = '';
                        if (skipped.length) {
                            skippedHtml =
                                '<div class="text-start mt-3"><strong>Skipped:</strong><ul class="mb-0">' +
                                skipped.map(function(item) {
                                    return '<li>' + $('<div>').text(item.id + ': ' + item.reason)
                                        .html() + '</li>';
                                }).join('') + '</ul></div>';
                        }
                        Swal.fire({
                            title: singleApproval ? 'HRD Approval Complete' :
                                'Bulk Approval Complete',
                            html: '<p>' + $('<div>').text(response.message).html() + '</p>' +
                                skippedHtml,
                            icon: skipped.length ? 'warning' : 'success',
                            confirmButtonColor: '#028284'
                        }).then(function() {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire('Approval Failed', response.message || response.error ||
                            'Terjadi kesalahan.', 'error');
                    }
                });
            });
        }

        function bulkApproveSuperior(ids) {
            Swal.fire({
                title: 'Approve ' + ids.length + ' TNA?',
                text: 'All selected TNA will be approved at the Supervisor Approval stage.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-check-double me-1"></i>Approve Selected',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#2dce89'
            }).then(function(result) {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Processing approval...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ url('trstna/bulk-approve-atasan') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids
                    },
                    success: function(response) {
                        const skipped = response.skipped || [];
                        let skippedHtml = '';
                        if (skipped.length) {
                            skippedHtml =
                                '<div class="text-start mt-3"><strong>Skipped:</strong><ul class="mb-0">' +
                                skipped.map(function(item) {
                                    return '<li>' + $('<div>').text(item.id + ': ' + item.reason)
                                        .html() + '</li>';
                                }).join('') + '</ul></div>';
                        }
                        Swal.fire({
                            title: 'Bulk Supervisor Approval Complete',
                            html: '<p>' + $('<div>').text(response.message).html() + '</p>' +
                                skippedHtml,
                            icon: skipped.length ? 'warning' : 'success',
                            confirmButtonColor: '#028284'
                        }).then(function() {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire('Approval Failed', response.message || response.error ||
                            'Terjadi kesalahan.', 'error');
                    }
                });
            });
        }

        function bulkRejectHrd(ids) {
            Swal.fire({
                title: 'Reject ' + ids.length + ' TNA?',
                text: 'The same rejection reason will be applied to all selected TNA.',
                input: 'textarea',
                inputLabel: 'Rejection Reason',
                inputPlaceholder: 'Enter rejection reason...',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-times me-1"></i>Reject Selected',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: function(value) {
                    if (!value || !value.trim()) return 'Rejection reason is required!';
                }
            }).then(function(result) {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Processing rejection...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ url('trstna/bulk-reject-hrd') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids,
                        reason: result.value.trim()
                    },
                    success: function(response) {
                        const skipped = response.skipped || [];
                        let skippedHtml = '';
                        if (skipped.length) {
                            skippedHtml =
                                '<div class="text-start mt-3"><strong>Skipped:</strong><ul class="mb-0">' +
                                skipped.map(function(item) {
                                    return '<li>' + $('<div>').text(item.id + ': ' + item.reason)
                                        .html() + '</li>';
                                }).join('') + '</ul></div>';
                        }
                        Swal.fire({
                            title: 'Bulk Rejection Complete',
                            html: '<p>' + $('<div>').text(response.message).html() + '</p>' +
                                skippedHtml,
                            icon: skipped.length ? 'warning' : 'success',
                            confirmButtonColor: '#028284'
                        }).then(function() {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire('Rejection Failed', response.message || response.error ||
                            'Terjadi kesalahan.', 'error');
                    }
                });
            });
        }

        function bulkRejectSuperior(ids) {
            Swal.fire({
                title: 'Reject ' + ids.length + ' TNA?',
                text: 'The same Supervisor rejection reason will be applied to all selected TNA.',
                input: 'textarea',
                inputLabel: 'Rejection Reason',
                inputPlaceholder: 'Enter rejection reason...',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-times me-1"></i>Reject Selected',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: function(value) {
                    if (!value || !value.trim()) return 'Rejection reason is required!';
                }
            }).then(function(result) {
                if (!result.isConfirmed) return;
                Swal.fire({
                    title: 'Processing rejection...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });
                $.ajax({
                    url: '{{ url('trstna/bulk-reject-atasan') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids,
                        reason: result.value.trim()
                    },
                    success: function(response) {
                        const skipped = response.skipped || [];
                        let skippedHtml = '';
                        if (skipped.length) {
                            skippedHtml =
                                '<div class="text-start mt-3"><strong>Skipped:</strong><ul class="mb-0">' +
                                skipped.map(function(item) {
                                    return '<li>' + $('<div>').text(item.id + ': ' + item.reason)
                                        .html() + '</li>';
                                }).join('') + '</ul></div>';
                        }
                        Swal.fire({
                            title: 'Bulk Supervisor Rejection Complete',
                            html: '<p>' + $('<div>').text(response.message).html() + '</p>' +
                                skippedHtml,
                            icon: skipped.length ? 'warning' : 'success',
                            confirmButtonColor: '#028284'
                        }).then(function() {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire('Rejection Failed', response.message || response.error ||
                            'Terjadi kesalahan.', 'error');
                    }
                });
            });
        }

        // Convert to TRN function
        function convertToTrn(id, nikDiusulkan) {
            Swal.fire({
                title: 'Convert TNA to TRN',
                html: `
                    <div class="text-start">
                        <p class="mb-2">You will be redirected to the TRN form with the TNA data automatically filled in.</p>
                        <ul class="mb-0 ps-3">
                            <li>TNA ID and Training Name will be pre-filled</li>
                            <li>Schedule data from TNA will be transferred to the TRN form</li>
                        </ul>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Convert',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#2ecc71'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location = '{{ url('trstrn/add') }}?from_tna=' +
                        encodeURIComponent(id) +
                        '&req_convert=' +
                        encodeURIComponent(nikDiusulkan) +
                        '&is_convert_flow=true';
                }
            });
        }

        // =============================================
        // IMPORT FUNCTIONS
        // =============================================

        // Drop zone functionality
        var dropZone = document.getElementById('dropZone');
        var importFile = document.getElementById('importFile');

        if (dropZone) {
            dropZone.addEventListener('click', function() {
                importFile.click();
            });

            dropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                dropZone.style.backgroundColor = 'rgba(2, 130, 132, 0.1)';
                dropZone.style.borderColor = '#028284';
            });

            dropZone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                dropZone.style.backgroundColor = '';
            });

            dropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                dropZone.style.backgroundColor = '';
                var files = e.dataTransfer.files;
                if (files.length > 0) {
                    importFile.files = files;
                    showFileInfo(files[0]);
                }
            });

            importFile.addEventListener('change', function() {
                if (this.files.length > 0) {
                    showFileInfo(this.files[0]);
                }
            });
        }

        function showFileInfo(file) {
            var validTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-excel'
            ];
            if (!validTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls)$/i)) {
                Swal.fire({
                    title: 'Error!',
                    text: 'File harus berformat .xlsx atau .xls!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            if (file.size > 5 * 1024 * 1024) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Ukuran file maksimal 5MB!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            $('#fileName').text(file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)');
            $('#fileInfo').removeClass('d-none');
            $('#dropZone').addClass('d-none');
            $('#importInstructions').removeClass('d-none').show();
            $('#btnImport').prop('disabled', false);
            $('#btnConfirmImport, #importPreview').addClass('d-none');
        }

        function clearFile() {
            $('#importFile').val('');
            $('#fileInfo').addClass('d-none');
            $('#dropZone').removeClass('d-none');
            $('#btnImport').prop('disabled', true);
            $('#btnConfirmImport, #importPreview').addClass('d-none');
        }

        function previewImport() {
            var formData = new FormData($('#importForm')[0]);

            if (!$('#importFile')[0].files.length) {
                return;
            }

            $('#btnImport')
                .prop('disabled', true)
                .html('<i class="fas fa-spinner fa-spin me-1"></i> Reading...');

            $.ajax({
                url: '{{ url('trstna/import-preview') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function(response) {

                    // ========================================================
                    // 1. DETEKSI ROW YANG ERROR
                    // ========================================================

                    var scheduleErrorRows = new Set();
                    var tnaErrorRows = new Set();
                    var tnaErrorRefs = new Set();

                    (response.errors || []).forEach(function(error) {

                        /*
                         * Contoh:
                         * Schedule row 5: durasi training minimal 30 menit
                         */
                        var scheduleMatch = error.match(/Schedule row\s+(\d+)/i);

                        if (scheduleMatch) {
                            scheduleErrorRows.add(
                                parseInt(scheduleMatch[1], 10)
                            );
                        }

                        /*
                         * Contoh:
                         * TNA row 3: Participant NIK wajib diisi
                         */
                        var tnaRowMatch = error.match(/TNA row\s+(\d+)/i);

                        if (tnaRowMatch) {
                            tnaErrorRows.add(
                                parseInt(tnaRowMatch[1], 10)
                            );
                        }

                        /*
                         * Contoh:
                         * TNA No 1: participant xxxx belum dialokasikan
                         */
                        var tnaRefMatch = error.match(/TNA No\s+(\d+)/i);

                        if (tnaRefMatch) {
                            tnaErrorRefs.add(
                                String(parseInt(tnaRefMatch[1], 10))
                            );
                        }
                    });


                    // ========================================================
                    // 2. GROUP SCHEDULE BERDASARKAN NO TNA
                    // ========================================================

                    var schedulesByRef = {};

                    (response.schedules || []).forEach(function(schedule) {

                        if (!schedulesByRef[schedule.ref]) {
                            schedulesByRef[schedule.ref] = [];
                        }

                        schedulesByRef[schedule.ref].push(schedule);
                    });


                    // ========================================================
                    // 3. GENERATE CARD TNA
                    // ========================================================

                    var cards = (response.tna || []).map(function(tna) {

                        var schedules = schedulesByRef[tna.ref] || [];

                        // Apakah TNA ini mempunyai error langsung?
                        var tnaHasError =
                            tnaErrorRows.has(parseInt(tna.row, 10)) ||
                            tnaErrorRefs.has(String(tna.ref));


                        // ====================================================
                        // GENERATE ROW SCHEDULE
                        // ====================================================

                        var rows = schedules.map(function(s) {

                            /*
                             * Cek apakah row Schedule ini terdapat
                             * dalam daftar error.
                             */
                            var hasError = scheduleErrorRows.has(
                                parseInt(s.row, 10)
                            );

                            /*
                             * Background soft red jika error.
                             */
                            var rowStyle = hasError ?
                                'background-color: #fdeaea;' :
                                '';

                            var rowClass = hasError ?
                                'schedule-row-error' :
                                '';

                            var trainer =
                                escapeScheduleText(s.trainerName || '-') +
                                (
                                    s.trainerNik ?
                                    ' (' +
                                    escapeScheduleText(s.trainerNik) +
                                    ')' :
                                    ''
                                );

                            return `
                        <tr
                            class="${rowClass}"
                            style="${rowStyle}"
                            data-row="${s.row}"
                        >
                            <td class="text-center">
                                ${escapeScheduleText(s.date || '-')}
                            </td>

                            <td class="text-center">
                                ${escapeScheduleText(s.start || '-')}
                                -
                                ${escapeScheduleText(s.end || '-')}
                            </td>

                            <td>
                                ${trainer}

                                <br>

                                <small>
                                    ${escapeScheduleText(s.institution || '-')}
                                </small>
                            </td>

                            <td class="text-center">
                                ${
                                    (s.participants || [])
                                        .map(escapeScheduleText)
                                        .join(', ')
                                }
                            </td>
                        </tr>
                    `;

                        }).join('');


                        if (!rows) {
                            rows = `
                        <tr>
                            <td
                                colspan="4"
                                class="text-danger"
                            >
                                Tidak ada schedule.
                            </td>
                        </tr>
                    `;
                        }


                        // ====================================================
                        // WARNA CARD TNA JIKA TNA ERROR
                        // ====================================================

                        var cardStyle = tnaHasError ?
                            'background-color: #fff5f5; border-color: #f5b5b5 !important;' :
                            '';

                        return `
                    <div
                        class="card border shadow-none mb-3"
                        style="${cardStyle}"
                    >
                        <div class="card-body p-3">

                            <h6 class="mb-1">
                                TNA No
                                ${escapeScheduleText(tna.ref)}
                                ·
                                ${escapeScheduleText(tna.training_name)}
                            </h6>

                            <div class="small text-muted mb-2">
                                Requestor:
                                ${escapeScheduleText(tna.requestor_nik)}
                                ·
                                Estimated:
                                ${escapeScheduleText(tna.estimated_date || '-')}
                            </div>

                            <div class="table-responsive">

                                <table class="table table-sm table-bordered mb-0">

                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Trainer</th>
                                            <th>Participants</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        ${rows}
                                    </tbody>

                                </table>

                            </div>
                        </div>
                    </div>
                `;
                    }).join('');


                    // ========================================================
                    // 4. LIST ERROR
                    // ========================================================

                    var errors = (response.errors || []).map(function(error) {

                        return `
                    <li>
                        ${escapeScheduleText(error)}
                    </li>
                `;

                    }).join('');


                    // ========================================================
                    // 5. TAMPILKAN PREVIEW
                    // ========================================================

                    $('#importPreview')
                        .html(
                            `
                    <div class="d-flex justify-content-between align-items-center mb-2">

                        <h6 class="mb-0">
                            Import Preview
                        </h6>

                        <span class="badge ${
                            response.success
                                ? 'bg-success'
                                : 'bg-danger'
                        }">

                            ${response.summary.tna} TNA
                            ·
                            ${response.summary.schedules} Schedule

                        </span>
                    </div>

                    ${
                        errors

                            ? `
                                                                    <div class="alert alert-danger text-white">

                                                                        <strong>
                                                                            Data cannot be imported:
                                                                        </strong>

                                                                        <ul class="mb-0 mt-2">
                                                                            ${errors}
                                                                        </ul>

                                                                    </div>
                                                                `

                            : `
                                                                    <div class="alert alert-success">
                                                                        Data is valid. Please cross-check the data, then click Confirm Import.
                                                                    </div>
                                                                `
                    }

                    ${cards}
                    `
                        )
                        .removeClass('d-none');


                    // ========================================================
                    // 6. STYLE HEADER TABLE
                    // ========================================================

                    $('#importPreview table thead')
                        .addClass('thead-light')
                        .css(
                            'background-color',
                            '#00b7bd4f'
                        );

                    $('#importPreview table thead th')
                        .addClass('text-center');


                    // ========================================================
                    // 7. CONFIRM BUTTON
                    // ========================================================

                    $('#btnConfirmImport')
                        .toggleClass(
                            'd-none',
                            !response.success
                        );
                },


                // ============================================================
                // AJAX ERROR
                // ============================================================
                error: function(xhr) {

                    Swal.fire({
                        title: 'Preview gagal',
                        text: xhr.responseJSON?.message ||
                            'File tidak dapat dibaca.',
                        icon: 'error'
                    });
                },


                // ============================================================
                // COMPLETE
                // ============================================================
                complete: function() {

                    $('#btnImport')
                        .prop('disabled', false)
                        .html(
                            '<i class="fas fa-eye me-1"></i> Preview'
                        );
                }
            });
        }

        function executeImport() {
            var formData = new FormData($('#importForm')[0]);

            if (!$('#importFile')[0].files.length) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Please select a file first!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Show loading
            Swal.fire({
                title: 'Importing...',
                html: '<p>Processing data, please wait...</p>',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ url('trstna/import') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    var errorHtml = '';
                    if (response.errors && response.errors.length > 0) {
                        errorHtml =
                            '<div style="max-height: 200px; overflow-y: auto; text-align: left; margin-top: 10px;">';
                        errorHtml += '<table class="table table-sm table-bordered" style="font-size: 12px;">';
                        errorHtml += '<thead><tr><th>Detail Error</th></tr></thead><tbody>';
                        response.errors.forEach(function(err) {
                            errorHtml += '<tr><td class="text-danger">' + err + '</td></tr>';
                        });
                        errorHtml += '</tbody></table></div>';
                    }

                    Swal.fire({
                        title: response.success ? 'Import Successful!' : 'Import Failed!',
                        html: '<p>' + response.message + '</p>' +
                            '<div class="d-flex justify-content-center gap-3 mb-2">' +
                            '<span class="badge bg-success px-3 py-2"><i class="fas fa-check me-1"></i>Success: ' +
                            (response.imported || 0) + '</span>' +
                            '<span class="badge bg-danger px-3 py-2"><i class="fas fa-times me-1"></i>Failed: ' +
                            (response.failed || 0) + '</span>' +
                            '</div>' + errorHtml,
                        icon: response.success ? 'success' : 'error',
                        confirmButtonColor: '#028284',
                        width: response.errors && response.errors.length > 0 ? '600px' : undefined
                    }).then(() => {
                        if (response.success) {
                            $('#importModal').modal('hide');
                            location.reload();
                        }
                    });
                },
                error: function(xhr) {
                    var errorMsg = 'Something Wrong!';
                    if (xhr.responseJSON) {
                        errorMsg = xhr.responseJSON.message || errorMsg;
                        if (xhr.responseJSON.errors) {
                            errorMsg += '<br><br><ul style="text-align:left;">';
                            xhr.responseJSON.errors.forEach(function(err) {
                                errorMsg += '<li>' + err + '</li>';
                            });
                            errorMsg += '</ul>';
                        }
                    }
                    Swal.fire({
                        title: 'Error!',
                        html: errorMsg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Keep import instructions visible throughout modal lifecycle
        $('#importModal').on('show.bs.modal', function() {
            $('#importInstructions').removeClass('d-none').show();
        });

        // Reset modal on close
        $('#importModal').on('hidden.bs.modal', function() {
            clearFile();
            $('#importInstructions').removeClass('d-none').show();
        });

        // Bulk Convert TNA → TRN with confirmation
        function bulkConvertTrn() {
            Swal.fire({
                title: 'Bulk Convert TNA → TRN',
                html: '<p>All <strong>fully approved TNAs</strong> that have not yet been converted will be automatically converted into <strong>TRNs simultaneously</strong>.</p>' +
                    '<p class="text-danger"><strong>Attention:</strong> After conversion, the TNA status will be changed to <strong>Finished</strong>.</p>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-exchange-alt me-1"></i> Convert Now',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#8392AB'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing, please wait...',
                        html: 'TNA is being converted to TRN. Please wait...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: '{{ url('trstna/export-for-trn') }}',
                        type: 'GET',
                        success: function(response) {
                            var convertedHtml = '';
                            if (response.converted && response.converted.length > 0) {
                                convertedHtml =
                                    '<div style="max-height:180px;overflow-y:auto;text-align:left;margin-top:10px;">' +
                                    '<table class="table table-sm table-bordered" style="font-size:12px;">' +
                                    '<thead><tr><th>TNA</th><th>TRN</th></tr></thead><tbody>';
                                response.converted.forEach(function(item) {
                                    convertedHtml += '<tr><td>' + item.tna +
                                        '</td><td class="text-success fw-bold">' + item.trn +
                                        '</td></tr>';
                                });
                                convertedHtml += '</tbody></table></div>';
                            }
                            Swal.fire({
                                title: 'Success!',
                                html: '<p>' + response.message + '</p>' + convertedHtml,
                                icon: 'success',
                                confirmButtonColor: '#028284',
                                width: response.converted && response.converted.length > 0 ?
                                    '600px' : undefined
                            }).then(() => location.reload());
                        },
                        error: function(xhr) {
                            var msg = 'Terjadi kesalahan.';
                            if (xhr.responseJSON) {
                                msg = xhr.responseJSON.message || msg;
                            }
                            Swal.fire({
                                title: xhr.status === 404 ? 'Tidak Ada Data' : 'Error',
                                text: msg,
                                icon: xhr.status === 404 ? 'info' : 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }
        // Bulk Mark Finish (Admins Bypass) - 2 Tahap: Preview → Confirm
        function bulkMarkAsFinish() {
            // Tahap 1: Ambil preview data
            $.ajax({
                url: '{{ route('trstna.preview.bulk.finish') }}',
                type: 'GET',
                success: function(response) {
                    if (!response.success || !response.data || response.data.length === 0) {
                        Swal.fire({
                            title: 'Tidak Ada Data',
                            text: response.message ||
                                'Tidak ada TNA yang memiliki TRN dan belum finish.',
                            icon: 'info',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    // Build tabel preview
                    var tableHtml = '<div style="max-height:400px;overflow-y:auto;text-align:left;">' +
                        '<table class="table table-sm table-bordered" style="font-size:12px;margin-bottom:0;">' +
                        '<thead class="table-light"><tr>' +
                        '<th>TNA ID</th>' +
                        '<th>Topik</th>' +
                        '<th>Status</th>' +
                        '<th>TRN ID</th>' +
                        '</tr></thead><tbody>';

                    response.data.forEach(function(item) {
                        tableHtml += '<tr>' +
                            '<td><strong>' + item.tna_id + '</strong></td>' +
                            '<td>' + (item.tna_description || '-') + '</td>' +
                            '<td><span class="badge bg-info">' + item.tna_status + '</span></td>' +
                            '<td><strong class="text-success">' + item.trn_id + '</strong></td>' +
                            '</tr>';
                    });

                    tableHtml += '</tbody></table></div>';

                    // Tahap 2: Tampilkan preview & confirm
                    Swal.fire({
                        title: 'Preview: ' + response.data.length + ' TNA akan di-Bypass',
                        html: '<p class="mb-3">Berikut adalah daftar TNA yang akan diubah status ke <strong>Finish</strong>:</p>' +
                            tableHtml +
                            '<p class="text-warning mt-3"><small><i class="fas fa-exclamation-triangle me-1"></i>Pastikan semua data sudah benar sebelum melanjutkan!</small></p>',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-check-double me-1"></i> Bypass Now',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#fb8c00',
                        cancelButtonColor: '#8392AB',
                        width: '700px'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Tahap 3: Eksekusi bypass
                            Swal.fire({
                                title: 'Processing...',
                                html: 'Sedang memproses ' + response.data.length +
                                    ' TNA. Tunggu...',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            $.ajax({
                                url: '{{ route('trstna.bulk.mark.finish') }}',
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    Swal.fire({
                                        title: 'Success!',
                                        text: response.message,
                                        icon: 'success',
                                        confirmButtonColor: '#028284'
                                    }).then(() => location.reload());
                                },
                                error: function(xhr) {
                                    var msg = 'Terjadi kesalahan.';
                                    if (xhr.responseJSON) {
                                        msg = xhr.responseJSON.message || msg;
                                    }
                                    Swal.fire({
                                        title: 'Error',
                                        text: msg,
                                        icon: 'error',
                                        confirmButtonColor: '#028284'
                                    });
                                }
                            });
                        }
                    });
                },
                error: function(xhr) {
                    var msg = 'Gagal mengambil data preview.';
                    if (xhr.responseJSON) {
                        msg = xhr.responseJSON.message || msg;
                    }
                    Swal.fire({
                        title: xhr.status === 404 ? 'Tidak Ada Data' : 'Error',
                        text: msg,
                        icon: xhr.status === 404 ? 'info' : 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    </script>
@endpush