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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $isHrdAdmin = in_array('hrdadm', $users_rules ?? [], true);
        $exportColumns = $isHrdAdmin ? [2, 3, 4, 5, 7, 8, 9, 10] : [1, 2, 3, 4, 6, 7, 8, 9];
        $nonSortableColumns = $isHrdAdmin ? [0, 1] : [0];
    @endphp

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    {{-- Breadcrumb --}}
                    {{-- Filter Section --}}
                    <div class="card-body">
                        {{-- header trn list dan button create TNA --}}
                        <div class="col d-flex align-items-center justify-content-between mb-5">
                            <h5 class="mb-3">TRN List</h5>
                            <div class="d-flex gap-2">

                                @if (isset($authorize) && $authorize->add == '1')
                                    <button class="btn btn-primary mb-0 btn-sm"
                                        onclick="window.location='{{ url($url_menu . '/add') }}'">
                                        <i class="fas fa-plus me-1"></i><span class="font-weight-bold">Create TRN</span>
                                    </button>
                                @endif
                            </div>
                        </div>

                        <form id="filterForm" method="GET" action="{{ url($url_menu) }}">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Period From</label>
                                    <input type="date" class="form-control" id="period_from" name="period_from"
                                        value="{{ $period_from ?? date('Y-01-01') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">To</label>
                                    <input type="date" class="form-control" id="period_to" name="period_to"
                                        value="{{ $period_to ?? date('Y-12-31') }}">
                                </div>

                                <div class="col-md-2 d-flex align-items-end gap-2">
                                    <button type="button" class="btn btn-danger btn-sm flex-grow-2"
                                        onclick="window.location.href='{{ url($url_menu) }}'">
                                        <i class="fas fa-rotate-right me-1"></i> Reset
                                    </button>
                                    <button type="submit" class="btn btn-info btn-sm flex-grow-1"
                                        style="background-color: #008B8B;" id="btnSearch">
                                        <i class="fas fa-search me-1"></i> Search
                                    </button>
                                </div>
                            </div>
                        </form>


                    </div>

                    {{-- Daftar TRN Section --}}

                    @if ($isHrdAdmin)
                        <div class="mx-4 mt-3 p-3 approval-inbox">
                            <div class="approval-inbox-layout">
                                <div>
                                    <h6 class="mb-1"><i class="fas fa-inbox me-2"></i>Approval Inbox</h6>
                                    <small class="text-muted">Select multiple TRNs and process approvals
                                        simultaneously.</small>
                                </div>
                                <div class="approval-inbox-actions">
                                    <span class="badge bg-info approval-count" id="approvalSelectedCount">0
                                        selected</span>
                                    <button type="button" class="btn btn-sm btn-outline-info mb-0 bulk-trn-approve-button"
                                        disabled onclick="submitBulkApproval('diketahui')">
                                        <i class="fas fa-check me-1"></i> Approve (Acknowledge)
                                    </button>
                                    <button type="button" class="btn btn-sm btn-info mb-0 bulk-trn-approve-button" disabled
                                        onclick="submitBulkApproval('disetujui')">
                                        <i class="fas fa-check-double me-1"></i> Approval
                                    </button>
                                    <button type="button" class="btn btn-sm btn-warning mb-0 bulk-trn-approve-button"
                                        disabled onclick="submitBulkApproval('all')">
                                        <i class="fas fa-bolt me-1"></i> Approval All Steps
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger mb-0" id="bulkTrnRejectButton"
                                        disabled onclick="submitBulkRejection()">
                                        <i class="fas fa-times me-1"></i> Reject Selected
                                    </button>
                                </div>
                            </div>
                            <small class="d-block mt-2 text-muted"><i class="fas fa-info-circle me-1"></i>Use the checkbox
                                in the table header to select all TRNs based on the applied filters.</small>
                        </div>
                    @endif
                    {{-- Action Buttons --}}
                    <div class="row px-4 py-3">
                        <div class="col-12">
                            <div class="trn-file-toolbar">
                                <div id="trn-export-buttons"></div>
                                @if ($isHrdAdmin && isset($authorize) && $authorize->add == '1')
                                    <button type="button" class="btn btn-sm btn-outline-success trn-file-button mb-0"
                                        onclick="openDownloadTemplateModal()">
                                        <i class="fas fa-file-download me-1"></i><span class="font-weight-bold">Download
                                            Template</span>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-success trn-file-button mb-0"
                                        onclick="openImportDataModal()">
                                        <i class="fas fa-file-import me-1"></i><span class="font-weight-bold">Import</span>
                                    </button>
                                @endif
                                <div class="trn-table-search ms-auto">
                                    <label for="trnTableSearch" class="mb-0">Search :</label>
                                    <input type="search" id="trnTableSearch" class="form-control form-control-sm"
                                        placeholder="Search..." autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Table --}}
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_trstrn">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        @if ($isHrdAdmin)
                                            <th width="38" class="text-center">
                                                <input class="approval-checkbox" type="checkbox" id="selectAllApproval"
                                                    aria-label="Pilih semua TRN yang tampil">
                                            </th>
                                        @endif
                                        <th width="110" class="text-center">Action</th>
                                        <th>No</th>
                                        <th>ID TNA</th>
                                        <th>ID TRN</th>
                                        <th>TRN Name</th>
                                        <th>Schedule</th>
                                        <th style="display:none;">Place</th>
                                        <th style="display:none;">TRN Schedule</th>
                                        <th>Known</th>
                                        <th>Approved</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($trn_list as $trn)
                                        <tr data-known="{{ $trn->approval_diketahui }}"
                                            data-approved="{{ $trn->approval_disetujui }}"
                                            {{ $trn->isactive == 0 ? 'style=background-color:#ffe9ed;' : '' }}>
                                            @if ($isHrdAdmin)
                                                <td class="text-center">
                                                    @if ($trn->isactive == 1 && ($trn->approval_diketahui === 'P' || $trn->approval_disetujui === 'P'))
                                                        <input class="approval-checkbox approval-row-check"
                                                            type="checkbox" value="{{ $trn->id_trn }}"
                                                            data-approval-ready="{{ $trn->is_approval_ready ? '1' : '0' }}"
                                                            aria-label="Pilih TRN {{ $trn->id_trn }}">
                                                    @else
                                                        <i class="fas fa-minus text-muted"
                                                            title="{{ !$trn->is_approval_ready ? 'Lengkapi dahulu: ' . implode(', ', $trn->approval_incomplete_fields) : 'Tidak ada approval yang dapat diproses' }}"></i>
                                                    @endif
                                                </td>
                                            @endif
                                            <td class="text-sm font-weight-normal text-center">
                                                @php
                                                    $canEditTrn = isset($authorize) && $authorize->edit == '1';
                                                    $needsCompletion = !$trn->is_approval_ready && $canEditTrn;
                                                @endphp
                                                <div class="btn-group">
                                                    <button
                                                        class="btn {{ $needsCompletion ? 'btn-warning' : 'btn-primary' }} btn-sm mb-0 px-3"
                                                        type="button"
                                                        title="{{ $needsCompletion ? 'Lengkapi: ' . implode(', ', $trn->approval_incomplete_fields) : 'View Data' }}"
                                                        onclick="{{ $needsCompletion ? "editData('" . encrypt($trn->id_trn) . "')" : "viewDetail('" . encrypt($trn->id_trn) . "')" }}">
                                                        <i class="fas {{ $needsCompletion ? 'fa-edit' : 'fa-eye' }}"></i>
                                                        <span class="font-weight-bold">
                                                            {{ $needsCompletion ? 'Lengkapi Data' : 'View' }}
                                                        </span>
                                                    </button>
                                                    @unless ($needsCompletion)
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if ($canEditTrn && !$needsCompletion)
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    title="Edit Data"
                                                                    onclick="editData('{{ encrypt($trn->id_trn) }}')">
                                                                    <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                                        Edit</span>
                                                                </button>
                                                            @endif
                                                            {{-- @if (isset($authorize) && $authorize->approval == '1')
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                title="Approval Data"
                                                                onclick="viewApproval('{{ $trn->id_trn }}')">
                                                                <i class="fas fa-check-circle"></i><span
                                                                    class="font-weight-bold"> Approval</span>
                                                            </button>
                                                        @endif --}}
                                                            @if (isset($authorize) && $authorize->edit == '1')
                                                                @if ($trn->isactive == 1)
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                                        title="Non Aktifkan Data"
                                                                        onclick="toggleStatusData('{{ $trn->nama_trn }}', '{{ $trn->id_trn }}', 'destroy', false)">
                                                                        <i class="fas fa-random"></i><span
                                                                            class="font-weight-bold"> Deactivate</span>
                                                                    </button>
                                                                @elseif ($trn->isactive == 0)
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                        title="Aktifkan Data"
                                                                        onclick="toggleStatusData('{{ $trn->nama_trn }}', '{{ $trn->id_trn }}', 'destroy', true)">
                                                                        <i class="fas fa-random"></i><span
                                                                            class="font-weight-bold"> Activate</span>
                                                                    </button>
                                                                @endif
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                        </ul>
                                                    @endunless
                                                </div>
                                            </td>
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="text-sm font-weight-bold text-dark">{{ $trn->id_tna }}</td>
                                            <td class="text-sm font-weight-bold text-dark">{{ $trn->id_trn }}</td>
                                            <td class="text-sm font-weight-bold text-dark">{{ $trn->nama_trn ?? '-' }}
                                                @if (!$trn->is_approval_ready)
                                                    <div class="mt-1">
                                                        <span class="badge bg-secondary"
                                                            title="Lengkapi: {{ implode(', ', $trn->approval_incomplete_fields) }}">
                                                            <i class="fas fa-edit me-1"></i>Data belum lengkap
                                                        </span>
                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-secondary btn-sm py-1 px-2"
                                                    onclick="viewScheduleModal('{{ $trn->id_trn }}', '{{ $trn->nama_trn ?? 'Training' }}')">
                                                    <i class="fas fa-calendar me-1"></i> Schedule
                                                </button>
                                            </td>




                                            <td style="display:none;">{{ $trn->ruangan ?? '-' }}</td>
                                            <td style="display:none;">{{ $trn->all_jadwal_trn ?? '-' }}</td>
                                            <td class="text-sm font-weight-normal">
                                                @if ($trn->approval_diketahui == 'A')
                                                    <span class="badge badge-sm bg-success"><i
                                                            class="fas fa-check me-1"></i> Approved</span>
                                                @elseif($trn->approval_diketahui == 'R')
                                                    <span class="badge badge-sm bg-danger"><i
                                                            class="fas fa-times me-1"></i> Rejected</span>
                                                @else
                                                    <span class="badge badge-sm bg-warning"><i
                                                            class="fas fa-clock me-1"></i> Pending</span>
                                                @endif

                                            </td>
                                            <td class="text-sm font-weight-normal">
                                                @if ($trn->approval_disetujui == 'A')
                                                    <span class="badge badge-sm bg-success"><i
                                                            class="fas fa-check me-1"></i> Approved</span>
                                                @elseif($trn->approval_disetujui == 'R')
                                                    <span class="badge badge-sm bg-danger"><i
                                                            class="fas fa-times me-1"></i> Rejected</span>
                                                @else
                                                    <span class="badge badge-sm bg-warning"><i
                                                            class="fas fa-clock me-1"></i> Pending</span>
                                                @endif
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

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

    {{-- Download Template Modal --}}
    <div class="modal fade" id="downloadTemplateModal" tabindex="-1" aria-labelledby="downloadTemplateModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
            <div class="modal-content" style="border-radius: 15px;">
                <div class="modal-header" style="border-bottom: 1px solid #dee2e6;">
                    <h5 class="modal-title" id="downloadTemplateModalLabel">
                        <i class="fas fa-download me-2"></i> Download Template
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="downloadTemplateForm" method="GET" action="{{ route('trn.download.template') }}">
                    <div class="modal-body">
                        <div class="mb-3 text-white p-2" style="background: linear-gradient(135deg, #028284, #00b7bd);">
                            <i class="fas fa-info-circle me-1"></i>
                            <p>Select the TNA to be converted into a TRN. The template will automatically be populated with
                                the header, schedule, trainer, and participant data from the selected TNA.</p>
                        </div>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <input type="search" class="form-control" id="templateTnaSearch"
                                placeholder="Search ID TNA or Training Name">
                            <span class="badge bg-info text-nowrap" id="templateTnaSelectedCount">0 selected</span>
                        </div>
                        <div class="template-tna-list" id="templateTnaList">
                            <div class="text-center text-muted py-4"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success mb-0" id="downloadSelectedTna" disabled>
                            <i class="fas fa-download me-1"></i> Download Template
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Import Modal --}}
    @if ($authorize->add == '1')
        <div class="modal fade" id="importDataModal" 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 Data TRN</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>
                                <label for="importFile" id="importDropZone"
                                    class="border border-2 border-dashed rounded-3 p-4 text-center d-block"
                                    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 2MB)</p>
                                </label>
                                <input type="file" name="import_file" id="importFile" accept=".xlsx,.xls"
                                    class="d-none" required>
                                <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="importFileName"></span></span>
                                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                                            onclick="clearImportFile()">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="importPreviewResult" class="d-none mt-3"></div>
                    </div>
                    <div class="modal-footer">
                        <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

    {{-- Schedule Modal --}}
    <div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header trn-schedule-modal-header">
                    <div>
                        <h5 class="modal-title mb-0 text-white" id="scheduleModalLabel">
                            <i class="fas fa-calendar-alt me-2"></i>TRN Schedule
                        </h5>
                        <small id="trnScheduleModalSubtitle" class="text-white"></small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body" id="scheduleModalBody">
                    <div class="text-center py-5" id="scheduleLoadingState">
                        <div class="spinner-border spinner-border-sm text-info" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-muted mt-2 mb-0">Loading schedules...</p>
                    </div>

                    <div id="scheduleContent" style="display: none;">
                        <!-- Schedules will be loaded here -->
                    </div>

                    <div id="scheduleEmptyState" style="display: none;" class="text-center py-5">
                        <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                        <p class="text-muted mb-0">No schedules found</p>
                    </div>
                </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>
@endsection

@push('css')
    <style>
        #scheduleModal .schedule-card {
            border: 1px solid #dee2e6;
            border-radius: 10px;
            margin-bottom: 1rem;
            box-shadow: none;
        }

        #scheduleModal .modal-content {
            overflow: hidden;
            border: 0;
            border-radius: 15px;
        }

        #scheduleModal .trn-schedule-modal-header {
            color: #fff;
            border-bottom: 0;
            background: linear-gradient(135deg, #028284, #00b7bd);
        }

        #scheduleModal .schedule-participants {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
        }

        #scheduleModal .schedule-participant-badge {
            padding: .45rem .65rem;
            font-weight: 500;
            white-space: normal;
            text-align: left;
        }

        .template-tna-list {
            max-height: 360px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: .75rem;
        }

        .template-tna-item {
            display: flex;
            align-items: center;
            gap: .75rem;
            margin: 0;
            padding: .8rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid #eef0f2;
        }

        .template-tna-item:last-child {
            border-bottom: 0;
        }

        .template-tna-item:hover {
            background: #f5fbfb;
        }

        #scheduleModal .schedule-card:last-child {
            margin-bottom: 0;
        }

        #scheduleModal .schedule-card h6 {
            font-weight: 600;
            color: #344767;
        }

        #scheduleModal .form-control:disabled,
        #scheduleModal .form-control[readonly] {
            background-color: #e9ecef;
            opacity: 1;
            cursor: not-allowed;
        }

        #scheduleModal .select2-container--default .select2-selection--multiple[aria-disabled="true"] {
            background-color: #e9ecef;
            cursor: not-allowed;
        }

        .select2-container--default .select2-selection--multiple {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            min-height: 40px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #4A90E2;
            border: none;
            color: white;
            padding: 3px 10px;
            border-radius: 5px;
            font-size: 14px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: white;
            margin-right: 5px;
        }

        .approval-inbox {
            border: 1px solid #b9e1e3;
            border-radius: 12px;
            background: #f5fbfb;
        }

        .approval-inbox-layout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .approval-inbox-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .approval-inbox-actions .btn {
            min-height: 34px;
            white-space: nowrap;
        }

        .approval-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 72px;
            min-height: 28px;
        }

        .approval-filter {
            width: 100%;
            min-height: 40px;
        }

        .filter-actions {
            min-height: 40px;
        }

        .filter-actions .btn {
            min-height: 40px;
            margin: 0;
            white-space: nowrap;
        }

        .trn-file-toolbar,
        #trn-export-buttons .dt-buttons {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .4rem;
        }

        #trn-export-buttons .dt-buttons {
            margin: 0;
        }

        #trn-export-buttons .btn,
        .trn-file-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 96px;
            min-height: 38px;
            margin: 0 !important;
            padding: .5rem 1rem !important;
            border-radius: .5rem !important;
            white-space: nowrap;
        }

        .trn-file-button.btn-outline-success {
            background: #fff;
            color: #2dce89;
            border-color: #2dce89;
        }

        .trn-table-search {
            display: flex;
            align-items: center;
            gap: .5rem;
            white-space: nowrap;
        }

        .trn-table-search label {
            color: #344767;
            font-size: .875rem;
            font-weight: 600;
        }

        .trn-table-search input {
            width: 220px;
            min-height: 38px;
        }

        .approval-checkbox {
            width: 18px;
            height: 18px;
            margin: 0;
            vertical-align: middle;
            cursor: pointer;
            accent-color: #008b8b;
            -webkit-appearance: checkbox !important;
            appearance: checkbox !important;
            opacity: 1 !important;
        }

        #list_trstrn thead th,
        #list_trstrn tbody td {
            vertical-align: middle !important;
        }

        #list_trstrn thead th {
            white-space: nowrap;
        }

        #list_trstrn tbody tr {
            min-height: 58px;
        }

        #list_trstrn tbody td:first-child,
        #list_trstrn tbody td:nth-child(2),
        #list_trstrn tbody td:nth-child(3),
        #list_trstrn tbody td:nth-child(4) {
            white-space: nowrap;
        }

        #list_trstrn .btn-group,
        #list_trstrn td>.btn {
            vertical-align: middle;
        }

        @media (max-width: 991.98px) {
            .approval-inbox-layout {
                align-items: flex-start;
                flex-direction: column;
            }

            .approval-inbox-actions {
                justify-content: flex-start;
                width: 100%;
            }

            .trn-table-search {
                width: 100%;
                margin-left: 0 !important;
            }

            .trn-table-search input {
                flex: 1;
                width: auto;
            }
        }
    </style>
@endpush

@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            const exportColumns = {!! json_encode($exportColumns) !!};
            // Initialize Select2 for ID TNA
            if (typeof $.fn.select2 !== 'undefined') {
                $('#id_tna').select2({
                    placeholder: "Pilih ID TNA",
                    allowClear: true,
                    width: '100%'
                });
            }

            // Function to generate filename based on filter
            function generateFileName() {
                // Cek apakah ada query parameters di URL
                const urlParams = new URLSearchParams(window.location.search);
                const hasFilter = urlParams.has('period_from') || urlParams.has('period_to');

                // Jika masih /trstrn tanpa parameter filter, return ALL
                if (!hasFilter) {
                    return 'DATA_TRN_ALL';
                } else {
                    // Sudah ada filter di URL, hitung berdasarkan bulan dan tahun
                    const periodFrom = $('#period_from').val();
                    const monthNames = ['JANUARI', 'FEBRUARI', 'MARET', 'APRIL', 'MEI', 'JUNI',
                        'JULI', 'AGUSTUS', 'SEPTEMBER', 'OKTOBER', 'NOVEMBER', 'DESEMBER'
                    ];
                    const date = new Date(periodFrom);
                    const monthName = monthNames[date.getMonth()];
                    const year = date.getFullYear();

                    return 'DATA_TRN_' + monthName + '_' + year;
                }
            }

            // Destroy existing DataTable if it exists
            if ($.fn.DataTable.isDataTable('#list_trstrn')) {
                $('#list_trstrn').DataTable().destroy();
            }

            // Filter approval dihapus: tampil semua data pending tanpa filter client-side

            // Initialize DataTables
            try {
                const trnTable = $('#list_trstrn').DataTable({
                    order: [],
                    "language": {
                        "search": "Search :",
                        "lengthMenu": "Show _MENU_ rows",
                        "zeroRecords": "Sorry - No data found",
                        "info": "Data _START_ - _END_ of _TOTAL_",
                        "infoEmpty": "Data not found",
                        "infoFiltered": "(filtered from _MAX_ data)"
                    },
                    responsive: true,
                    columnDefs: [{
                        targets: {!! json_encode($nonSortableColumns) !!},
                        orderable: false
                    }],
                    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',
                            filename: function() {
                                return generateFileName();
                            },
                            autoFilter: true,
                            sheetName: 'TRN Data',
                            customize: function(xlsx) {
                                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                // Loop over the cells in column Status
                                sheet.querySelectorAll('row c[r^="I"]').forEach((row) => {
                                    let cell = row.querySelector('is t');
                                    if (cell && cell.textContent === 'Not Active') {
                                        row.setAttribute('s', '10'); //red background
                                    }
                                });
                            },
                            exportOptions: {
                                columns: exportColumns
                            },
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                            filename: function() {
                                return generateFileName();
                            },
                            exportOptions: {
                                columns: exportColumns
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                            title: function() {
                                return generateFileName().replace(/_/g, ' ');
                            },
                            exportOptions: {
                                columns: exportColumns
                            },
                        },
                    ]
                });

                trnTable.buttons().container().appendTo('#trn-export-buttons');
                $('#trnTableSearch').on('input', function() {
                    trnTable.search(this.value).draw();
                });

                @if ($isHrdAdmin)
                    $('#selectAllApproval').on('change', function() {
                        const checked = this.checked;
                        $(trnTable.rows({
                            search: 'applied'
                        }).nodes()).each(function() {
                            $(this).find('.approval-row-check').prop('checked', checked);
                        });
                        updateApprovalSelectedCount();
                    });

                    $('#list_trstrn').on('change', '.approval-row-check', updateApprovalSelectedCount);
                    trnTable.on('draw', updateApprovalSelectedCount);
                @endif
            } catch (error) {
                console.error('Error initializing DataTable:', error);
                // DataTable init failed, table will still show but without DataTables features
            }

            // Set color button datatables
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // Check authorize button datatables
            @if (isset($authorize))
                @if ($authorize->excel == '0')
                    $('.buttons-excel').remove();
                @endif
                @if ($authorize->pdf == '0')
                    $('.buttons-pdf').remove();
                @endif
                @if ($authorize->print == '0')
                    $('.buttons-print').remove();
                @endif
            @endif

            let validatedImportGuard = {
                name: '',
                size: 0,
                valid: false
            };
            $('#importFile').on('change', function() {
                const file = this.files[0];
                validatedImportGuard = {
                    name: '',
                    size: 0,
                    valid: false
                };
                $('#fileInfo').toggleClass('d-none', !file);
                $('#importDropZone').toggleClass('d-none', Boolean(file));
                $('#importFileName').text(file ? `${file.name} (${(file.size / 1024).toFixed(1)} KB)` : '');
                $('#btnImport').prop('disabled', !file);
                $('#importPreviewResult').addClass('d-none').empty();
                $('#btnConfirmImport').addClass('d-none').prop('disabled', true);
            });

            // Preview workbook
            window.previewImport = function() {
                const input = $('#importFile')[0];
                if (!input.files.length) {
                    Swal.fire('Error', 'Silakan pilih file terlebih dahulu', 'error');
                    return;
                }
                if (input.files[0].size / 1024 / 1024 > 2) {
                    Swal.fire('Error', 'Ukuran file terlalu besar. Maksimal 2MB', 'error');
                    return;
                }
                $('#btnImport').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Reading...');
                $.ajax({
                    url: '{{ route('trn.preview.import') }}',
                    type: 'POST',
                    data: new FormData($('#importForm')[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        const errors = response.errors || [];
                        const summary = response.summary || { trn: 0 };
                        const trnItems = response.trn || [];
                        const isValid = response.success === true && errors.length === 0 &&
                            Number(summary.trn || 0) > 0;
                        $('#btnImport').prop('disabled', false);
                        const escapeScheduleText = value => $('<div>').text(value == null ||
                            value === '' ? '-' : value).html();
                        const schedulesByRef = {};
                        (response.schedules || []).forEach(schedule => {
                            (schedulesByRef[schedule.ref] ||= []).push(schedule);
                        });
                        const cards = trnItems.map(item => {
                            let rows = (schedulesByRef[item.refNumber] || []).map(schedule => {
                                const trainer = escapeScheduleText(schedule
                                        .trainer) +
                                    (schedule.trainerNik ? ' (' +
                                        escapeScheduleText(schedule
                                        .trainerNik) + ')' : '');
                                const participants = (schedule.participants ||
                                []).map(escapeScheduleText).join(', ');
                                return `<tr>
                                    <td class="text-center">${escapeScheduleText(schedule.date)}</td>
                                    <td class="text-center">${escapeScheduleText(schedule.start)} - ${escapeScheduleText(schedule.end)}</td>
                                    <td>${trainer}<br><small>${escapeScheduleText(schedule.institution)}</small></td>
                                    <td class="text-center">${participants || '-'}</td>
                                </tr>`;
                            }).join('');
                            if (!rows) rows =
                                '<tr><td colspan="4" class="text-danger">Tidak ada schedule.</td></tr>';

                            return `<div class="card border shadow-none mb-3">
                                <div class="card-body p-3">
                                    <h6 class="mb-1">TRN No ${escapeScheduleText(item.refNumber)} · ${escapeScheduleText(item.training_name)} ·  ${escapeScheduleText(item.id_tna)}</h6>
                                    <div class="small text-muted mb-2">Cost: Rp ${Number(item.cost || 0).toLocaleString('id-ID')} · Target: ${escapeScheduleText(item.target_trn)}</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('');
                        const errorsHtml = errors.map(error =>
                            `<li>${escapeScheduleText(error)}</li>`
                        ).join('');

                        $('#importPreviewResult').html(`
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Import Preview</h6>
                                <span class="badge ${isValid ? 'bg-success' : 'bg-danger'}">
                                    ${Number(summary.trn || 0)} TRN
                                </span>
                            </div>
                            ${errorsHtml ? `
                                <div class="alert alert-danger text-white">
                                    <strong>Data cannot be imported:</strong>
                                    <ul class="mb-0 mt-2">${errorsHtml}</ul>
                                </div>
                            ` : `
                                <div class="alert alert-success">
                                    Data is valid. Please cross-check the data, then click Confirm Import.
                                </div>
                            `}
                            ${cards || '<div class="text-muted p-2">No valid TRN data.</div>'}
                        `).removeClass('d-none');
                        $('#importPreviewResult table thead').css('background-color', '#00b7bd4f');
                        $('#importPreviewResult table thead th').addClass('text-center');
                        const file = $('#importFile')[0] && $('#importFile')[0].files[0];
                        validatedImportGuard = {
                            name: file ? file.name : '',
                            size: file ? file.size : 0,
                            valid: isValid
                        };
                        $('#btnConfirmImport').toggleClass('d-none', !isValid).prop('disabled', !isValid);
                        $('#btnImport')
                        .prop('disabled', false)
                        .html(
                            '<i class="fas fa-eye me-1"></i> Preview'
                        );
                    },
                    error: function(xhr) {
                        $('#btnImport').prop('disabled', false);
                        validatedImportGuard = {
                            name: '',
                            size: 0,
                            valid: false
                        };
                        $('#btnConfirmImport').addClass('d-none').prop('disabled', true);
                        const msg = xhr.responseJSON?.message || 'Gagal membaca file.';
                        const errorsHtml = (xhr.responseJSON?.errors || [msg]).map(e =>
                            `<li>${$('<div>').text(e).html()}</li>`
                        ).join('');
                        $('#importPreviewResult').html(`
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Import Preview</h6>
                                <span class="badge bg-danger">Error</span>
                            </div>
                            <div class="alert alert-danger text-white">
                                <strong>Failed to read file:</strong>
                                <ul class="mb-0 mt-2">${errorsHtml}</ul>
                            </div>
                        `).removeClass('d-none');
                        Swal.fire('Error', msg, 'error');
                    }
                });
            };

            // Show row errors returned by both failed imports and validation responses.
            function showImportErrors(response, fallbackMessage) {
                const message = response.message || fallbackMessage;
                const errors = Array.isArray(response.errors) ? response.errors :
                    Object.values(response.errors || {}).flat();
                const errorsHtml = errors.map(error => `<li>${escapeHtml(error)}</li>`).join('');
                Swal.fire({
                    title: 'Import failed',
                    icon: 'error',
                    width: 800,
                    html: `<p>${escapeHtml(message)}</p>${errorsHtml ?
                        `<div class="text-start" style="max-height: 320px; overflow-y: auto;"><ul>${errorsHtml}</ul></div>` : ''}`
                });
            }

            // Confirm Import
            window.executeImport = function() {
                const file = $('#importFile')[0]?.files[0];
                if (!validatedImportGuard.valid || !file || file.name !== validatedImportGuard.name || file.size !== validatedImportGuard.size) {
                    Swal.fire('Failed', 'Data not valid or file has changed. Run Preview again until data is valid.', 'warning');
                    $('#btnConfirmImport').addClass('d-none').prop('disabled', true);
                    return;
                }
                $('#btnConfirmImport').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Importing...');
                $.ajax({
                    url: '{{ route('trn.import') }}',
                    type: 'POST',
                    data: new FormData($('#importForm')[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#importDataModal').modal('hide');
                            Swal.fire('Success', response.message || 'Import successful.', 'success').then(() => location.reload());
                        } else {
                            $('#btnConfirmImport').prop('disabled', false).html('<i class="fas fa-check me-1"></i> Confirm Import');
                            showImportErrors(response, 'Import failed.');
                        }
                    },
                    error: function(xhr) {
                        $('#btnConfirmImport').prop('disabled', false).html('<i class="fas fa-check me-1"></i> Confirm Import');
                        const response = xhr.responseJSON || {};
                        showImportErrors(response, 'An error occurred during import.');
                    }
                });
            };
            // Reset form when modal is closed
            $('#importDataModal').on('hidden.bs.modal', function() {
                $('#importForm')[0].reset();
                validatedImportGuard = {
                    name: '',
                    size: 0,
                    valid: false
                };
                $('#importPreviewResult').addClass('d-none').empty();
                $('#fileInfo').addClass('d-none');
                $('#importDropZone').removeClass('d-none');
                $('#importFileName').empty();
                $('#btnImport').prop('disabled', true);
                $('#btnConfirmImport').addClass('d-none').prop('disabled', true).html('<i class="fas fa-check me-1"></i> Confirm Import');
            });
        });

        function clearImportFile() {
            $('#importFile').val('').trigger('change');
        }

        // Drag and drop functionality
        const importDropZone = document.getElementById('importDropZone');
        const importFileInput = document.getElementById('importFile');

        if (importDropZone && importFileInput) {
            importDropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                importDropZone.style.backgroundColor = 'rgba(2, 130, 132, 0.1)';
            });
            importDropZone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                importDropZone.style.backgroundColor = '';
            });
            importDropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                importDropZone.style.backgroundColor = '';
                if (e.dataTransfer.files.length) {
                    importFileInput.files = e.dataTransfer.files;
                    $(importFileInput).trigger('change');
                }
            });
        }

        let templateTnaLoaded = false;
        let templateTnaLoading = false;

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function renderTemplateTnaList(items) {
            const $list = $('#templateTnaList');
            if (!items.length) {
                $list.html(
                    '<div class="text-center text-muted py-4">There are no fully approved TNA records that have not yet been converted.</div>'
                    );
                return;
            }
            let html = '';
            items.forEach(function(item) {
                const safeId = escapeHtml(item.id);
                const safeName = escapeHtml(item.name_trn || '-');
                const search = escapeHtml(String(item.id + ' ' + (item.name_trn || '')).toLowerCase());
                let estimasi = '-';
                if (item.month_estimation) {
                    const d = new Date(item.month_estimation);
                    if (!Number.isNaN(d.getTime())) {
                        const dd = String(d.getDate()).padStart(2, '0');
                        const mm = String(d.getMonth() + 1).padStart(2, '0');
                        estimasi = dd + '-' + mm + '-' + d.getFullYear();
                    } else {
                        estimasi = escapeHtml(item.month_estimation);
                    }
                }
                html += '<label class="template-tna-item" data-search="' + search + '">' +
                    '<input type="checkbox" class="approval-checkbox template-tna-check" name="tna_ids[]" value="' +
                    safeId + '">' +
                    '<span><strong>' + safeId + '</strong> . ' + safeName +
                    '<small class="d-block text-muted">Estimasi: ' + escapeHtml(estimasi) + '</small></span>' +
                    '</label>';
            });
            $list.html(html);
            $('#templateTnaSelectedCount').text('0 selected');
            $('#downloadSelectedTna').prop('disabled', true);
        }

        function loadTemplateTnaList(forceReload) {
            if (templateTnaLoading) return;
            if (templateTnaLoaded && !forceReload) return;
            templateTnaLoading = true;
            const $list = $('#templateTnaList');
            $list.html(
                '<div class="text-center text-muted py-4"><div class="spinner-border spinner-border-sm me-2"></div>Loading TNA data...</div>'
                );
            $.ajax({
                url: '{{ route('trn.template.tna.list') }}',
                type: 'GET',
                success: function(res) {
                    templateTnaLoaded = true;
                    renderTemplateTnaList(res.data || []);
                },
                error: function(xhr) {
                    let msg = 'Gagal memuat data TNA.';
                    if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                    $list.html('<div class="text-center text-danger py-4">' + escapeHtml(msg) +
                        ' <button type="button" class="btn btn-sm btn-outline-primary ms-2" onclick="loadTemplateTnaList(true)">Coba lagi</button></div>'
                        );
                },
                complete: function() {
                    templateTnaLoading = false;
                }
            });
        }

        function openDownloadTemplateModal() {
            $('#templateTnaSearch').val('');
            $('#downloadTemplateModal').modal('show');
            loadTemplateTnaList(false);
        }

        // Refresh list each time modal shown if previously failed/empty
        $('#downloadTemplateModal').on('shown.bs.modal', function() {
            if (!templateTnaLoaded && !templateTnaLoading) loadTemplateTnaList(false);
            $('.template-tna-item').show();
        });

        $(document).on('input', '#templateTnaSearch', function() {
            const keyword = String(this.value || '').toLowerCase().trim();
            $('.template-tna-item').each(function() {
                $(this).toggle(!keyword || String($(this).data('search')).includes(keyword));
            });
        });

        $(document).on('change', '.template-tna-check', function() {
            const selected = $('.template-tna-check:checked').length;
            $('#templateTnaSelectedCount').text(selected + ' selected');
            $('#downloadSelectedTna').prop('disabled', selected === 0);
        });

        $(document).on('submit', '#downloadTemplateForm', function(event) {
            if (!$('.template-tna-check:checked').length) {
                event.preventDefault();
                Swal.fire('Choose TNA', 'Please select at least one TNA to generate the template.', 'info');
            }
        });

        function openImportDataModal() {
            $('#importDataModal').modal('show');
        }

        function viewDetail(id) {
            window.location = '{{ url($url_menu) }}/detail/' + id;
        }

        function viewScheduleModal(idTrn, namaTrn) {
            $('#trnScheduleModalSubtitle').text(idTrn + ' · ' + (namaTrn || 'Training'));
            $('#scheduleLoadingState').show();
            $('#scheduleContent').hide();
            $('#scheduleEmptyState').hide();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('scheduleModal')).show();

            $.ajax({
                url: '{{ url($url_menu) }}/schedules/' + idTrn,
                type: 'GET',
                success: function(response) {
                    $('#scheduleLoadingState').hide();
                    if (response.success && response.data.length > 0) {
                        const html = response.data.map(function(schedule, index) {
                            const parsedDate = new Date(schedule.jadwal_trn + 'T00:00:00');
                            const formattedDate = Number.isNaN(parsedDate.getTime()) ? schedule
                                .jadwal_trn :
                                new Intl.DateTimeFormat('id-ID', {
                                    weekday: 'long',
                                    day: '2-digit',
                                    month: 'long',
                                    year: 'numeric'
                                }).format(parsedDate);
                            const timeStart = schedule.time_start ? String(schedule.time_start).slice(0,
                                5) : null;
                            const timeEnd = schedule.time_end ? String(schedule.time_end).slice(0, 5) :
                                null;
                            const timeRange = timeStart && timeEnd ? timeStart + ' - ' + timeEnd : '-';
                            const participants = schedule.participant_details || [];
                            const participantBadges = participants.length ? participants.map(function(
                                participant) {
                                return `<span class="badge bg-info text-white schedule-participant-badge">${escapeApprovalText(participant.name)} (${escapeApprovalText(participant.nik)})</span>`;
                            }).join('') : '<span class="text-muted small">Tidak ada peserta.</span>';
                            const trainerNik = schedule.trainer_nik ?
                                ` <span class="text-muted">(${escapeApprovalText(schedule.trainer_nik)})</span>` :
                                '';
                            const trainer = schedule.trainer_name ? escapeApprovalText(schedule
                                .trainer_name) + trainerNik : '-';
                            const institution = schedule.institution_name ? escapeApprovalText(schedule
                                .institution_name.charAt(0).toUpperCase() + schedule
                                .institution_name.slice(1)) : '-';
                            const place = escapeApprovalText(schedule.place || '-');
                            const status = String(schedule.isactive) === '1' ? 'Active' : 'Completed';
                            const statusClass = String(schedule.isactive) === '1' ? 'bg-primary' :
                                'bg-success';

                            return `<div class="card schedule-card">
                                        <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>${escapeApprovalText(formattedDate)}</h6>
                                                </div>
                                                <span class="badge ${statusClass}">${status}</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-5"><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>${trainer}</div><span class="badge bg-light text-dark mt-1">${institution}</span></div>
                                                <div class="col-md-3"><div class="text-xs text-uppercase text-muted fw-bold mb-1">Place</div><div class="text-sm"><i class="fas fa-map-marker-alt me-2 text-primary"></i>${place}</div></div>
                                            </div>
                                            <div class="text-sm fw-bold mb-2">Participants (${participants.length})</div>
                                            <div class="schedule-participants">${participantBadges}</div>
                                        </div>
                                    </div>`;
                        }).join('');
                        $('#scheduleContent').html(html).show();
                    } else {
                        $('#scheduleEmptyState').show();
                    }
                },
                error: function(xhr) {
                    $('#scheduleLoadingState').hide();
                    $('#scheduleContent').html(`
                                <div class="text-center py-5">
                                    <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                                    <p class="text-danger mb-0">Failed to load schedules</p>
                                </div>`).show();
                }
            });
        }

        function editData(id) {
            window.location = '{{ url($url_menu) }}/edit/' + id;
        }

        function toggleStatusData(name, id, action, isActivate) {
            Swal.fire({
                title: 'Konfirmasi',
                text: isActivate ?
                    `Apakah Anda Yakin Aktifkan Data "${name}" ini?` :
                    `Apakah Anda Yakin Non Aktifkan Data "${name}" ini?`,
                icon: isActivate ? 'question' : 'warning',
                showCancelButton: true,
                confirmButtonText: isActivate ? 'Ya, Aktifkan' : 'Ya, Non Aktifkan',
                cancelButtonText: 'Batal',
                confirmButtonColor: isActivate ? '#28a745' : '#E63946',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Execute AJAX
                    $.ajax({
                        url: '{{ url($url_menu) }}/' + action + '/' + id,
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#4CAF50'
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                const serverMessage = response && response.message ?
                                    response.message :
                                    'Respon server tidak menyertakan detail error';

                                Swal.fire({
                                    title: 'Error',
                                    text: 'Gagal ' + (isActivate ? 'mengaktifkan' :
                                        'menonaktifkan') + ' data: ' + serverMessage,
                                    icon: 'error',
                                    confirmButtonColor: '#DC3545'
                                });
                            }
                        },
                        error: function(xhr) {
                            let errorMessage = 'Terjadi kesalahan saat ' + (isActivate ?
                                'mengaktifkan' : 'menonaktifkan') + ' data';

                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage += ': ' + xhr.responseJSON.message;
                            }

                            Swal.fire({
                                title: 'Error',
                                text: errorMessage,
                                icon: 'error',
                                confirmButtonColor: '#DC3545'
                            });
                        }
                    });
                }
            });
        }

        function viewApproval(id) {
            window.location.href = '{{ url($url_menu) }}/approval/' + id;
        }

        function updateApprovalSelectedCount() {
            const table = $('#list_trstrn').DataTable();
            const selectedChecks = $(table.rows().nodes()).find('.approval-row-check:checked');
            const count = selectedChecks.length;
            const allSelectedReady = count > 0 && selectedChecks.toArray().every(checkbox =>
                checkbox.dataset.approvalReady === '1');
            const filteredChecks = $(table.rows({
                search: 'applied'
            }).nodes()).find('.approval-row-check');
            const filteredChecked = filteredChecks.filter(':checked').length;
            $('#selectAllApproval')
                .prop('checked', filteredChecks.length > 0 && filteredChecked === filteredChecks.length)
                .prop('indeterminate', filteredChecked > 0 && filteredChecked < filteredChecks.length);
            $('#approvalSelectedCount').text(count + ' dipilih');
            $('.bulk-trn-approve-button').prop('disabled', !allSelectedReady);
            $('#bulkTrnRejectButton').prop('disabled', count === 0);
        }

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

        async function submitBulkApproval(stage) {
            const table = $('#list_trstrn').DataTable();
            const ids = $(table.rows().nodes()).find('.approval-row-check:checked').map(function() {
                return this.value;
            }).get();
            if (!ids.length) {
                Swal.fire('No selection has been made yet.', 'Please select at least one TRN to process.', 'info');
                return;
            }

            const labels = {
                diketahui: 'Acknowledge',
                disetujui: 'Approval',
                all: 'All Steps'
            };
            const options = {
                title: 'Approve ' + labels[stage] + '?',
                html: `<b>${ids.length} TRN</b> will be processed. Any data that do not follow the required approval sequence will be skipped.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, process',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#008B8B'
            };

            if (stage === 'all') {
                options.input = 'textarea';
                options.inputLabel = 'Note approved all';
                options.inputPlaceholder = 'Enter the reasons for both approval stages at once.';
                options.inputValidator = value => !value || !value.trim() ? 'Note Required' : undefined;
            }

            const confirmation = await Swal.fire(options);
            if (!confirmation.isConfirmed) return;

            $.ajax({
                url: '{{ route('trn.approval.bulk') }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    ids,
                    stage,
                    override_reason: stage === 'all' ? confirmation.value : null
                },
                success: function(response) {
                    let detail = response.message;
                    if (response.skipped && response.skipped.length) {
                        detail += '<div class="text-start mt-3"><small>' + response.skipped.map(item =>
                                `<b>${escapeApprovalText(item.id)}</b>: ${escapeApprovalText(item.reason)}`)
                            .join('<br>') + '</small></div>';
                    }
                    Swal.fire({
                            title: 'Selesai',
                            html: detail,
                            icon: 'success',
                            confirmButtonColor: '#008B8B'
                        })
                        .then(() => location.reload());
                },
                error: function(xhr) {
                    const response = xhr.responseJSON || {};
                    Swal.fire('Tidak dapat diproses', response.message ||
                        'Terjadi kesalahan saat memproses approval.', 'error');
                }
            });
        }

        async function submitBulkRejection() {
            const table = $('#list_trstrn').DataTable();
            const ids = $(table.rows().nodes()).find('.approval-row-check:checked').map(function() {
                return this.value;
            }).get();
            if (!ids.length) {
                Swal.fire('Belum ada pilihan', 'Pilih minimal satu TRN yang akan ditolak.', 'info');
                return;
            }

            const confirmation = await Swal.fire({
                title: 'Reject selected TRN?',
                html: `<b>${ids.length} TRN</b> akan ditolak pada tahap approval yang sedang pending.`,
                input: 'textarea',
                inputLabel: 'Alasan penolakan',
                inputPlaceholder: 'Masukkan alasan penolakan...',
                inputValidator: value => !value || !value.trim() ? 'Alasan penolakan wajib diisi.' : undefined,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Reject',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545'
            });
            if (!confirmation.isConfirmed) return;

            $.ajax({
                url: '{{ route('trn.approval.bulk') }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    ids,
                    stage: 'reject',
                    override_reason: confirmation.value.trim()
                },
                success: function(response) {
                    let detail = response.message;
                    if (response.skipped && response.skipped.length) {
                        detail += '<div class="text-start mt-3"><small>' + response.skipped.map(item =>
                            `<b>${escapeApprovalText(item.id)}</b>: ${escapeApprovalText(item.reason)}`
                        ).join('<br>') + '</small></div>';
                    }
                    Swal.fire('Selesai', detail, 'success').then(() => location.reload());
                },
                error: function(xhr) {
                    const response = xhr.responseJSON || {};
                    Swal.fire('Tidak dapat diproses', response.message ||
                        'Terjadi kesalahan saat melakukan bulk reject.', 'error');
                }
            });
        }
    </script>
@endpush