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

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

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            {{-- Kembali Button --}}
            <div class="card mb-4" style="border-radius: 15px; overflow: hidden;">
                <div class="card-body">
                    <button type="button" class="btn btn-secondary btn-sm px-4 me-2" onclick="location.href='{{ url($url_menu) }}'">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </button>
                </div>
            </div>

            {{-- Detail TRN Section --}}
            <div class="card mb-4" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header pb-0">
                    <h6 class="mb-2">Detail TRN</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Left Column - Detail TRN --}}
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <td class="text-sm" style="width: 150px;">Training Name</td>
                                        <td class="text-sm">: {{ $trn->nama_trn }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Provider</td>
                                        <td class="text-sm">: {{ $trn->provider ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Place</td>
                                        <td class="text-sm">: {{ $trn->ruangan ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Proposed</td>
                                        <td class="text-sm">: {{ $trn->diusulkan_nama ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Known</td>
                                        <td class="text-sm">: {{ $trn->diketahui_nama ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approved</td>
                                        <td class="text-sm">: {{ $trn->disetujui_nama ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approval Known</td>
                                        <td class="text-sm">:
                                            @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>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approval Approved</td>
                                        <td class="text-sm">:
                                            @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>
                                </tbody>
                            </table>
                        </div>

                        {{-- Right Column - Data TNA --}}
                        <div class="col-md-6">
                            <div class="card" style="background-color: #f8f9fa; border: 1px solid #dee2e6;">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0">Data TNA</h6>
                                        @if ($can_manage_schedule ?? false)
                                        <button type="button" class="btn btn-sm btn-primary" style="color: white; padding: 10px 30px; font-size: 13px;" onclick="editTnaData()">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                        @endif
                                    </div>
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <td class="text-sm">Departement</td>
                                                <td class="text-sm">: {{ $trn->department ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Section</td>
                                                <td class="text-sm">: {{ $trn->section ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Superior</td>
                                                <td class="text-sm">: {{ $trn->superior_name ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Training Type</td>
                                                <td class="text-sm">: {{ $trn->type_training ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">With Score</td>
                                                <td class="text-sm">: {{ $trn->with_score ? 'Yes' : 'No' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Add Schedule Button --}}
                    <div class="row mt-3">
                        <div class="col-12">
                            {{-- check authorize edit --}}
                            @if ($can_manage_schedule ?? false)
                            <button type="button" class="btn btn-sm me-2" style="background-color: #008B8B; color: white;" onclick="addSchedule()">
                                <i class="fas fa-plus me-1"></i> Add Schedule
                            </button>
                            <button type="button" class="btn btn-sm" style="background-color: #008B8B; color: white;" onclick="openAddParticipantsModal()">
                                <i class="fas fa-users me-1"></i> Add Participant
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="openParticipantMovementModal()">
                                <i class="fas fa-people-arrows me-1"></i> Transfer / Reschedule Participant
                            </button>
                            @endif
                        </div>
                    </div>

                    {{-- Schedule Table --}}
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table display" id="detail_schedules">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            @if ($can_manage_schedule ?? false)
                                            <th>Manage</th>
                                            @endif
                                            <th>Schedule</th>
                                            <th>Participants</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($schedules as $schedule)
                                        <tr>
                                            @if ($can_manage_schedule ?? false)
                                            <td>
                                                <button type="button" class="btn btn-info btn-sm" style="background-color: #008B8B;" onclick="reschedule('{{ $schedule->id }}')">
                                                    <i class="fas fa-calendar me-1"></i> Edit Schedule
                                                </button>
                                            </td>
                                            @endif
                                            <td class="text-sm">{{ date('l, d F Y', strtotime($schedule->jadwal_trn)) }}</td>
                                            <td class="text-sm">{{ $schedule->jumlah_participant ?? 0 }} Participants</td>
                                            <td>
                                                @if($schedule->isactive == '1')
                                                <span class="badge badge-sm bg-primary">Active</span>
                                                @else
                                                <span class="badge badge-sm bg-success">Completed</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td @if ($can_manage_schedule ?? false)colspan="3"@else colspan="2"@endif class="text-center py-4">
                                                <i class="fas fa-calendar-times fa-2x text-muted mb-2 d-block"></i>
                                                <p class="text-muted mb-0">No schedules available</p>
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    @if (($participant_movements ?? collect())->isNotEmpty())
                    <div class="row mt-4">
                        <div class="col-12">
                            <h6 class="mb-3"><i class="fas fa-history me-2 text-primary"></i>Participant Movement History</h6>
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead><tr><th>Participant</th><th>Action</th><th>From</th><th>To</th><th>Reason</th><th>Processed By</th></tr></thead>
                                    <tbody>
                                        @foreach ($participant_movements as $movement)
                                        <tr>
                                            <td class="text-sm"><strong>{{ $movement->nama ?? '-' }}</strong><br><small>{{ $movement->nik }}</small></td>
                                            <td><span class="badge {{ $movement->movement_type === 'transfer' ? 'bg-info' : 'bg-warning text-dark' }}">{{ ucfirst($movement->movement_type) }}</span></td>
                                            <td class="text-sm">{{ $movement->source_trn_id }}<br><small>{{ date('d M Y', strtotime($movement->source_date)) }}</small></td>
                                            <td class="text-sm">{{ $movement->target_trn_id }}<br><small>{{ date('d M Y', strtotime($movement->target_date)) }}</small></td>
                                            <td class="text-sm text-wrap" style="max-width:260px">{{ $movement->alasan }}</td>
                                            <td class="text-sm">{{ $movement->user_create ?? '-' }}<br><small>{{ date('d M Y H:i', strtotime($movement->created_at)) }}</small></td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Transfer / Reschedule Participant Modal --}}
<div class="modal fade" id="participantMovementModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-1">Transfer / Reschedule Participant</h5>
                    <p class="text-sm text-muted mb-0">Aksi ditentukan otomatis dari tanggal schedule asal.</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Participant dan TRN Asal <span class="text-danger">*</span></label>
                    <select class="form-control" id="movement_source_participant" style="width:100%"></select>
                    <small class="text-muted" id="movementActionHelp"></small>
                </div>
                <div class="mb-3">
                    <label class="form-label">Schedule Tujuan di {{ $trn->id }} <span class="text-danger">*</span></label>
                    <select class="form-control" id="movement_target_schedule" style="width:100%"></select>
                </div>
                <div class="mb-0">
                    <label class="form-label">Alasan <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="movement_reason" rows="3" maxlength="1000"
                        placeholder="Jelaskan alasan pemindahan participant"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="submitParticipantMovementBtn" onclick="submitParticipantMovement()">
                    <i class="fas fa-check me-1"></i>Proses
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Reschedule Modal --}}
<div class="modal fade" id="rescheduleModal" tabindex="-1" aria-labelledby="rescheduleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="border-bottom: 1px solid #dee2e6;">
                <h5 class="modal-title" id="rescheduleModalLabel">Edit Schedule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="rescheduleForm">
                    @csrf
                    <input type="hidden" id="schedule_id" name="id">
                    <input type="hidden" id="schedule_id_trs_trn" name="id_trs_trn" value="{{ $trn->id }}">

                    {{-- Schedule Section --}}
                    <div class="card mb-3" style="border: 1px solid #dee2e6; border-radius: 10px;">
                        <div class="card-body">
                            <h6 class="mb-3" style="font-weight: 600;">Schedule</h6>

                            {{-- Date Field --}}
                            <div class="mb-3">
                                <label class="form-label">Date</label>
                                <input type="date" class="form-control" id="modal_jadwal_trn" name="jadwal_trn" required>
                            </div>

                            {{-- Participant TNA Field --}}
                            <div class="mb-3">
                                <label class="form-label">Current Participants <small class="text-muted">(readonly)</small></label>
                                <select name="participants[]" id="modal_participants" class="form-control select2" multiple="multiple" required disabled>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #dee2e6;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                </button>
                <button  class="btn btn-success" onclick="submitReschedule()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>




{{-- Add Schedule Modal --}}
<div class="modal fade" id="addScheduleModal" tabindex="-1" aria-labelledby="addScheduleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="border-bottom: 1px solid #dee2e6;">
                <h5 class="modal-title" id="addScheduleModalLabel">Add Schedule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addScheduleForm">
                    @csrf
                    <input type="hidden" id="add_schedule_id_trs_trn" name="id_trs_trn" value="{{ $trn->id }}">

                    {{-- Schedule Section --}}
                    <div class="card mb-3" style="border: 1px solid #dee2e6; border-radius: 10px;">
                        <div class="card-body">
                            <h6 class="mb-3" style="font-weight: 600;">Schedule</h6>

                            {{-- Date Field --}}
                            <div class="mb-3">
                                <label class="form-label">Date</label>
                                <input type="date" class="form-control" id="add_modal_jadwal_trn" name="jadwal_trn" required>
                            </div>

                            {{-- Participant TNA Field --}}
                            <div class="mb-3">
                                <label class="form-label">Participants (all active employees)</label>
                                <select name="participants[]" id="add_modal_participants" class="form-control select2" multiple="multiple" required>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #dee2e6;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button class="btn btn-success" onclick="submitAddSchedule()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>


{{-- Edit TNA Modal --}}
<div class="modal fade" id="editTnaModal" tabindex="-1" aria-labelledby="editTnaModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="border-bottom: 1px solid #dee2e6;">
                <h5 class="modal-title" id="editTnaModalLabel">Edit Data TNA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editTnaForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tnaReadOnly1" class="form-label">Department</label>
                            <input type="text" id="tnaReadOnly1" class="form-control" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="tnaReadOnly2" class="form-label">Section</label>
                            <input type="text" id="tnaReadOnly2" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tnaReadOnly4" class="form-label">Requestor Name</label>
                            <input type="text" id="tnaReadOnly4" class="form-control" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="tnaReadOnly3" class="form-label">Superior</label>
                            <input type="text" id="tnaReadOnly3" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tnaTrainingType" class="form-label">Training Type <span class="text-danger">*</span></label>
                            <select id="tnaTrainingType" class="form-control">
                                <option value="reguler">Reguler</option>
                                <option value="academy">Academy</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="tnaWithScore" class="form-label">With Score <span class="text-danger">*</span></label>
                            <select id="tnaWithScore" class="form-control">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" id="tnaTnaId">
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #dee2e6;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" onclick="submitEditTnaData()">
                    <i class="fas fa-save me-1"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Add Participants Modal --}}
<div class="modal fade" id="editParticipantsModal" tabindex="-1" aria-labelledby="editParticipantsModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="border-bottom: 1px solid #dee2e6;">
                <h5 class="modal-title" id="editParticipantsModalLabel">
                    <i class="fas fa-users me-2"></i>Manage Participant
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editParticipantsForm">
                    @csrf
                    <input type="hidden" id="edit_schedule_id" name="schedule_id">
                    <input type="hidden" id="edit_schedule_id_trs_trn" name="id_trs_trn" value="{{ $trn->id }}">
                    
                    {{-- Schedule Select (Optional) --}}
                    <div class="mb-3">
                        <label class="form-label">Schedule Tujuan <span class="text-danger">*</span></label>
                        <select id="scheduleFilter" name="schedule_id" class="form-control select2">
                            <option value="">-- Pilih Schedule --</option>
                            @foreach($schedules as $sch)
                                @if($sch->isactive == '1')
                                <option value="{{ $sch->id }}">{{ date('l, d F Y', strtotime($sch->jadwal_trn)) }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    {{-- Department Filter --}}
                    <div class="mb-3">
                        <label class="form-label">Filter by Department</label>
                        <select id="deptFilter" class="form-control select2">
                            <option value="all">All Departments</option>
                        </select>
                    </div>

                    {{-- Participant Select --}}
                    <div class="mb-3">
                        <label class="form-label">
                            Participants <span id="selectedCount" class="text-muted small">(0 selected)</span>
                        </label>
                        <select id="editParticipantsSelect" name="participants[]" class="form-control select2" multiple="multiple" required>
                        </select>
                    </div>
                    
                </form>
            </div>
                <div class="modal-footer" style="border-top: 1px solid #dee2e6;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button class="btn btn-success" onclick="submitUpdateParticipants()">
                        <i class="fas fa-save me-1"></i> Save
                    </button>
                </div>
        </div>
    </div>
</div>

{{-- Loading Modal --}}
<div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 15px; border: none; background-color: rgb(255, 255, 255);">
            <div class="modal-body text-center py-5">
                <div class="mb-4">
                    <div class="spinner-border" style="color: #008B8B;" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <p class="text-muted mb-0">Processing...</p>
            </div>
        </div>
    </div>
</div>

@endsection


@push('css')
<style>
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #d2d6da;
        border-radius: 0.5rem;
        min-height: 40px;
    }

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

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #495057;
        padding: 8px 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 5px;
        right: 8px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #008B8B;
        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;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffcccc;
    }

    #loadingModal .modal-content {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    #loadingModal .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    }
</style>
@endpush

@push('js')
<script>
    var participantsDataForModal = [];
    var allParticipantsOptions = '';

    $(document).ready(function() {
        // Initialize select2 for modal
        if (typeof $.fn.select2 !== 'undefined') {
            // Initialize department filter select2
            $('#deptFilter').select2({
                placeholder: "Select department...",
                allowClear: false,
                width: '100%',
                closeOnSelect: true,
                minimumResultsForSearch: Infinity,
                dropdownParent: $('#editParticipantsModal')
            });
            
            $('#modal_participants').select2({
                placeholder: "Select Participant",
                allowClear: true,
                width: '100%',
                closeOnSelect: false,
                dropdownParent: $('#rescheduleModal')
            });
            
            $('#add_modal_participants').select2({
                placeholder: "Select Participant",
                allowClear: true,
                width: '100%',
                closeOnSelect: false,
                dropdownParent: $('#addScheduleModal')
            });

            // Initialize select2 for edit participants modal
            $('#editParticipantsSelect').select2({
                placeholder: "Select participants...",
                allowClear: true,
                width: '100%',
                closeOnSelect: false,
                dropdownParent: $('#editParticipantsModal')
            });

            $('#scheduleFilter').select2({
                placeholder: "Select schedule...",
                allowClear: true,
                width: '100%',
                closeOnSelect: true,
                minimumResultsForSearch: Infinity,
                dropdownParent: $('#editParticipantsModal')
            });
        }

        // Initialize DataTables for schedule table - ONLY if there's actual data
        const scheduleRows = $('#detail_schedules tbody tr:not(:has(td[class*="text-center"]))').length;
        
        if (scheduleRows > 0) {
            if ($.fn.DataTable.isDataTable('#detail_schedules')) {
                $('#detail_schedules').DataTable().destroy();
            }

            try {
                const hasRescheduleColumn = $('#detail_schedules thead th').length === 3;
                const scheduleDateColumnIndex = hasRescheduleColumn ? 1 : 0;

                $('#detail_schedules').DataTable({
                    "language": {
                        "search": "Search :",
                        "lengthMenu": "Show _MENU_ rows",
                        "zeroRecords": "Schedule not found",
                        "info": "Data _START_ - _END_ of _TOTAL_",
                        "infoEmpty": "Schedule not found",
                        "infoFiltered": "(filtered from _MAX_ data)"
                    },
                    responsive: true,
                    order: [[scheduleDateColumnIndex, 'desc']]
                });
            } catch (error) {
                console.error('Error initializing DataTable for schedules:', error);
                // Table will show but without DataTables features
            }
        }

        // Department filter change handler
        $('#deptFilter').on('change', function() {
            var selectedDept = $(this).val();
            filterParticipantsByDeptAndSection();
        });

        // Update selected count on change
        $('#editParticipantsSelect').on('change', function() {
            updateSelectedCount();
            hideSelectedOptions();
        });

        // Reset filter when modal is opened
        $('#editParticipantsModal').on('show.bs.modal', function() {
            $('#deptFilter').val('all');
            hideSelectedOptions();
        });
    });

    function openAddParticipantsModal() {
        // Reset form
        $('#editParticipantsForm')[0].reset();
        $('#scheduleFilter').val('').trigger('change');

        // Load all active employees and exclude participants already allocated in this TRN.
        $.ajax({
            url: '{{ url("trstrn/all-employees") }}',
            type: 'GET',
            success: function(response) {
                if (response.success && response.data) {
                    participantsDataForModal = response.data;
                    
                    // Get participants already used in this TRN.
                    let currentParticipants = [];
                    $.ajax({
                        url: '{{ url("trstrn/get-all-schedule-participants") }}',
                        type: 'GET',
                        data: {
                            id_trs_trn: '{{ $trn->id }}'
                        },
                        success: function(tnaResponse) {
                            if (tnaResponse.success && tnaResponse.data) {
                                currentParticipants = tnaResponse.data.map(String);
                            }
                            
                            // Filter employees already assigned to any schedule in this TRN.
                            let filteredEmployees = response.data.filter(emp => !currentParticipants.includes(String(emp.value)));
                            
                            // Build options with department information.
                            let options = '';
                            filteredEmployees.forEach(function(participant) {
                                options += `<option value="${participant.value}" data-dept="${participant.dept}">${participant.name}</option>`;
                            });
                            
                            allParticipantsOptions = options;
                            $('#editParticipantsSelect').html(options);
                            
                            // Build department filter with names - only for filtered employees
                            let deptMap = {};
                            filteredEmployees.forEach(function(participant) {
                                if (participant.dept && !deptMap[participant.dept]) {
                                    deptMap[participant.dept] = participant.dept_name;
                                }
                            });
                            
                            let deptOptions = '<option value="all">All Departments</option>';
                            Object.keys(deptMap).sort().forEach(function(deptId) {
                                deptOptions += `<option value="${deptId}">${deptMap[deptId]}</option>`;
                            });
                            $('#deptFilter').html(deptOptions);
                            
                            // Reset filters
                            $('#deptFilter').val('all');
                            
                            initParticipantsSelect2();
                            updateSelectedCount();
                        },
                        error: function() {
                            // If error getting TNA participants, just show all employees
                            let options = '';
                            response.data.forEach(function(participant) {
                                options += `<option value="${participant.value}" data-dept="${participant.dept}">${participant.name}</option>`;
                            });
                            
                            allParticipantsOptions = options;
                            $('#editParticipantsSelect').html(options);
                            
                            // Build department filter with names
                            let deptMap = {};
                            response.data.forEach(function(participant) {
                                if (participant.dept && !deptMap[participant.dept]) {
                                    deptMap[participant.dept] = participant.dept_name;
                                }
                            });
                            
                            let deptOptions = '<option value="all">All Departments</option>';
                            Object.keys(deptMap).sort().forEach(function(deptId) {
                                deptOptions += `<option value="${deptId}">${deptMap[deptId]}</option>`;
                            });
                            $('#deptFilter').html(deptOptions);
                            
                            // Reset filters
                            $('#deptFilter').val('all');
                            
                            initParticipantsSelect2();
                            updateSelectedCount();
                        }
                    });
                }
            },
            error: function(xhr) {
                console.log('Error loading employees:', xhr);
                Swal.fire({
                    title: 'Error',
                    text: 'Error loading employees',
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
        
        // Show modal
        $('#editParticipantsModal').modal('show');
    }

    function initParticipantsSelect2() {
        if ($('#editParticipantsSelect').hasClass('select2-hidden-accessible')) {
            $('#editParticipantsSelect').select2('destroy');
        }
        $('#editParticipantsSelect').select2({
            placeholder: "Select participants...",
            allowClear: true,
            width: '100%',
            closeOnSelect: false,
            dropdownParent: $('#editParticipantsModal')
        });
        hideSelectedOptions();
    }

    function filterParticipantsByDeptAndSection() {
        var selectedDept = $('#deptFilter').val();
        var currentSelected = $('#editParticipantsSelect').val() || [];

        // Destroy Select2 first
        if ($('#editParticipantsSelect').hasClass('select2-hidden-accessible')) {
            $('#editParticipantsSelect').select2('destroy');
        }

        // Restore all options first
        $('#editParticipantsSelect').html(allParticipantsOptions);

        if (selectedDept !== 'all') {
            // Filter options by department - remove options that don't match
            $('#editParticipantsSelect').find('option').each(function() {
                var optDept = $(this).data('dept');
                if (optDept != selectedDept) {
                    $(this).remove();
                }
            });
        }

        // Hide selected options
        var selectedValues = currentSelected;
        $('#editParticipantsSelect').find('option').each(function() {
            if (selectedValues.includes($(this).val())) {
                $(this).hide();
            }
        });

        // Re-select previously selected values that are still in the filtered list
        $('#editParticipantsSelect').val(currentSelected);
        initParticipantsSelect2();
    }

    function hideSelectedOptions() {
        var selectedValues = $('#editParticipantsSelect').val() || [];
        $('#editParticipantsSelect').find('option').each(function() {
            if (selectedValues.includes($(this).val())) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    }

    function updateSelectedCount() {
        var count = ($('#editParticipantsSelect').val() || []).length;
        $('#selectedCount').text('(' + count + ' selected)');
    }


    function submitUpdateParticipants() {
        var participants = $('#editParticipantsSelect').val();
        var scheduleId = $('#scheduleFilter').val();

        if (!participants || participants.length == 0) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Choose at least 1 participant',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }
        if (!scheduleId) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Schedule tujuan wajib dipilih',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        // Show loading modal
        $('#loadingModal').modal('show');

        // Disable update participant modal
        $('#editParticipantsModal').modal('hide');

        // Submit via AJAX
        $.ajax({
            url: '{{ url("trstrn/update-participants") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id_trs_trn: '{{ $trn->id }}',
                participants: participants,
                schedule_id: scheduleId || null
            },
            success: function(response) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                if (response.success) {
                    $('#editParticipantsModal').modal('hide');
                    
                    Swal.fire({
                        title: 'Success',
                        text: 'Participant Updated',
                        icon: 'success',
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to save participant: ' + response.message,
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Error response:', xhr);
                let message = 'Error occurred while saving the participant';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                
                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }

    function getUsedParticipants() {
        const usedNiks = new Set();
        
        // Get all currently selected participants from existing schedules in the table
        $('#detail_schedules tbody tr').each(function() {
            // Parse from table - if there's participant data stored
            // For now, we rely on the API to provide this info
        });
        
        return usedNiks;
    }

    function addSchedule() {
        // Reset form
        $('#addScheduleForm')[0].reset();
        $('#add_modal_participants').val([]).trigger('change');
        
        // Admin HRD may use any active employee for a schedule outside the TNA plan.
        const tnaId = '{{ $trn->id_trs_tna_header }}';
        if (tnaId) {
            $.ajax({
                url: '{{ url("trstrn/all-employees") }}',
                type: 'GET',
                data: {},
                success: function(response) {
                    if (response.success && response.data) {
                        // Get all already used participants from other schedules
                        let usedParticipants = new Set();
                        
                        $.ajax({
                            url: '{{ url("trstrn/get-all-schedule-participants") }}',
                            type: 'GET',
                            data: {
                                id_trs_trn: '{{ $trn->id }}'
                            },
                            success: function(usedResponse) {
                                if (usedResponse.success && usedResponse.data) {
                                    usedParticipants = new Set(usedResponse.data.map(String));
                                }
                                
                                // Build options - exclude used participants
                                let options = '';
                                response.data.forEach(function(participant) {
                                    if (!usedParticipants.has(String(participant.value))) {
                                        options += `<option value="${participant.value}">${participant.name}</option>`;
                                    }
                                });
                                
                                // Update select element
                                $('#add_modal_participants').html(options);
                                $('#add_modal_participants').val([]).trigger('change');
                            },
                            error: function() {
                                // If error getting used participants, just show all
                                let options = '';
                                response.data.forEach(function(participant) {
                                    options += `<option value="${participant.value}">${participant.name}</option>`;
                                });
                                $('#add_modal_participants').html(options);
                                $('#add_modal_participants').val([]).trigger('change');
                            }
                        });
                    }
                },
                error: function(xhr) {
                    console.log('Error loading participants:', xhr);
                }
            });
        }
        
        // Show modal
        $('#addScheduleModal').modal('show');
    }

    let participantMovementOptions = [];

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

    function openParticipantMovementModal() {
        $('#movement_source_participant, #movement_target_schedule').html('<option value="">Loading...</option>');
        $('#movement_reason').val('');
        $('#movementActionHelp').text('');
        $('#participantMovementModal').modal('show');

        $.get('{{ url('trstrn/participant-movements/options') }}', { target_trn_id: '{{ $trn->id }}' })
            .done(function(response) {
                participantMovementOptions = response.data.participants || [];
                const participantOptions = ['<option value=""></option>'].concat(participantMovementOptions.map(function(item) {
                    const action = item.allowed_action === 'transfer' ? 'Transfer' : 'Reschedule';
                    const label = `${item.nik} - ${item.name || '-'} | ${item.source_trn_id} | ${item.source_date} | ${action}`;
                    return `<option value="${item.participant_id}" data-action="${item.allowed_action}">${escapeMovementText(label)}</option>`;
                })).join('');
                const scheduleOptions = ['<option value=""></option>'].concat((response.data.target_schedules || []).map(function(item) {
                    const time = item.time_start && item.time_end ? ` | ${item.time_start.substring(0, 5)}-${item.time_end.substring(0, 5)}` : '';
                    return `<option value="${item.id}">${escapeMovementText(item.jadwal_trn + time + ' | ' + (item.place || '-'))}</option>`;
                })).join('');

                $('#movement_source_participant').html(participantOptions).select2({
                    placeholder: 'Cari participant atau ID TRN asal...', width: '100%', dropdownParent: $('#participantMovementModal')
                });
                $('#movement_target_schedule').html(scheduleOptions).select2({
                    placeholder: 'Pilih schedule tujuan...', width: '100%', dropdownParent: $('#participantMovementModal')
                });
            })
            .fail(function(xhr) {
                $('#participantMovementModal').modal('hide');
                Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal memuat data participant.', 'error');
            });
    }

    $(document).on('change', '#movement_source_participant', function() {
        const action = $(this).find('option:selected').data('action');
        $('#movementActionHelp').text(action === 'transfer'
            ? 'Transfer: schedule asal belum berlangsung; alokasi aktif akan dipindahkan.'
            : (action === 'reschedule' ? 'Reschedule: schedule asal sudah berlangsung dan participant berstatus Tidak Hadir.' : ''));
        $('#submitParticipantMovementBtn').html(action === 'reschedule'
            ? '<i class="fas fa-calendar-plus me-1"></i>Reschedule Participant'
            : '<i class="fas fa-people-arrows me-1"></i>Transfer Participant');
    });

    function submitParticipantMovement() {
        const sourceId = $('#movement_source_participant').val();
        const targetScheduleId = $('#movement_target_schedule').val();
        const reason = $('#movement_reason').val().trim();
        const movementType = $('#movement_source_participant option:selected').data('action');
        if (!sourceId || !targetScheduleId || !reason || !movementType) {
            Swal.fire('Validation Error', 'Participant, schedule tujuan, dan alasan wajib diisi.', 'warning');
            return;
        }

        const actionLabel = movementType === 'transfer' ? 'transfer' : 'reschedule';
        Swal.fire({
            title: `Proses ${actionLabel} participant?`,
            text: 'Perubahan akan tercatat pada histori TRN asal dan tujuan.',
            icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, proses', cancelButtonText: 'Batal'
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $('#submitParticipantMovementBtn').prop('disabled', true);
            $.ajax({
                url: '{{ url('trstrn/participant-movements') }}', type: 'POST', contentType: 'application/json',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: JSON.stringify({
                    movement_type: movementType,
                    source_participant_id: parseInt(sourceId, 10),
                    target_schedule_id: parseInt(targetScheduleId, 10),
                    reason: reason
                })
            }).done(function(response) {
                $('#participantMovementModal').modal('hide');
                Swal.fire('Berhasil', response.message, 'success').then(() => location.reload());
            }).fail(function(xhr) {
                Swal.fire('Gagal', xhr.responseJSON?.message || 'Pemindahan participant gagal.', 'error');
            }).always(function() {
                $('#submitParticipantMovementBtn').prop('disabled', false);
            });
        });
    }

    function reschedule(scheduleId) {
        console.log('Loading schedule data for ID:', scheduleId);

        // Load schedule data via AJAX
        $.ajax({
            url: '{{ url($url_menu . "/schedule") }}/' + scheduleId,
            type: 'GET',
            success: function(response) {
                console.log('Schedule data loaded:', response);

                if (response.success) {
                    const schedule = response.data;
                    // Set schedule ID
                    $('#schedule_id').val(schedule.id);
                    $('#schedule_id_trs_trn').val(schedule.id_trs_trn);

                    // Set date (format: yyyy-mm-dd for input type="date")
                    $('#modal_jadwal_trn').val(schedule.jadwal_trn);

                    // Load participants from TNA and set selected values
                    const tnaId = '{{ $trn->id_trs_tna_header }}';
                    const currentParticipants = schedule.participants || [];
                    
                    if (tnaId) {
                        $.ajax({
                            url: '{{ url("trstrn/tna-participants") }}',
                            type: 'GET',
                            data: {
                                tna_id: tnaId
                            },
                            success: function(participantResponse) {
                                if (participantResponse.success && participantResponse.data) {
                                    // Get all already used participants from OTHER schedules (exclude current)
                                    let usedParticipants = new Set();
                                    
                                    $.ajax({
                                        url: '{{ url("trstrn/get-all-schedule-participants") }}',
                                        type: 'GET',
                                        data: {
                                            id_trs_trn: '{{ $trn->id }}',
                                            exclude_schedule_id: scheduleId
                                        },
                                        success: function(usedResponse) {
                                            if (usedResponse.success && usedResponse.data) {
                                                usedParticipants = new Set(usedResponse.data);
                                            }
                                            
                                            // Build options with current selected and filter out used
                                            let options = '';
                                            participantResponse.data.forEach(function(participant) {
                                                const selected = currentParticipants.includes(participant.value) ? 'selected' : '';
                                                // Show if it's currently selected or not used in other schedules
                                                if (currentParticipants.includes(participant.value) || !usedParticipants.has(participant.value)) {
                                                    options += `<option value="${participant.value}" ${selected}>${participant.name}</option>`;
                                                }
                                            });
                                            
                                            // Update select element
                                            $('#modal_participants').html(options);
                                            $('#modal_participants').val(currentParticipants).trigger('change');
                                        },
                                        error: function() {
                                            // If error, just show all with current selected
                                            let options = '';
                                            participantResponse.data.forEach(function(participant) {
                                                const selected = currentParticipants.includes(participant.value) ? 'selected' : '';
                                                options += `<option value="${participant.value}" ${selected}>${participant.name}</option>`;
                                            });
                                            $('#modal_participants').html(options);
                                            $('#modal_participants').val(currentParticipants).trigger('change');
                                        }
                                    });
                                }
                            }
                        });
                    }
                    
                    console.log('Loaded participants:', currentParticipants);

                    // Show modal with jQuery API (more reliable)
                    console.log('Modal element exists:', $('#rescheduleModal').length);
                    setTimeout(function() {
                        $('#rescheduleModal').modal('show');
                    }, 100);
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to load schedule data: ' + response.message,
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                console.log('Error loading schedule:', xhr);
                Swal.fire({
                    title: 'Error',
                    text: 'Error occurred while loading schedule data',
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }

    function submitReschedule() {
        console.log('=== Submitting reschedule ===');

        // Get form data
        const data = {
            id: $('#schedule_id').val(),
            id_trs_trn: $('#schedule_id_trs_trn').val(),
            jadwal_trn: $('#modal_jadwal_trn').val(),
            participants: $('#modal_participants').val() || []
        };

        console.log('Reschedule data:', JSON.stringify(data, null, 2));

        // Validate
        if (!data.jadwal_trn) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Date must be filled',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }
        if (data.participants.length === 0) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Choose at least 1 participant',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        console.log('Validation passed, submitting...');

        // Show loading modal
        $('#loadingModal').modal('show');

        // Disable reschedule modal
        $('#rescheduleModal').modal('hide');

        // Submit via AJAX
        $.ajax({
            url: '{{ url($url_menu . "/schedule/update") }}',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Success response:', response);
                if (response.success) {
                    // Hide reschedule modal
                    $('#rescheduleModal').modal('hide');
                    
                    Swal.fire({
                        title: 'Success',
                        text: 'Schedule Updated',
                        icon: 'success',
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to save data: ' + response.message,
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Error response:', xhr);
                console.log('Status:', xhr.status);
                console.log('Response:', xhr.responseJSON);

                let message = 'Terjadi kesalahan saat menyimpan data';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                }
                
                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }

    function submitAddSchedule() {
        console.log('=== Submitting add schedule ===');

        // Get form data
        const data = {
            id_trs_trn: $('#add_schedule_id_trs_trn').val(),
            jadwal_trn: $('#add_modal_jadwal_trn').val(),
            participants: $('#add_modal_participants').val() || []
        };

        console.log('Add schedule data:', JSON.stringify(data, null, 2));

        // Validate
        if (!data.jadwal_trn) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Date must be filled',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }
        if (data.participants.length === 0) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Choose at least 1 participant',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        console.log('Validation passed, submitting...');

        // Show loading modal
        $('#loadingModal').modal('show');

        // Disable add schedule modal
        $('#addScheduleModal').modal('hide');

        // Submit via AJAX - add schedule endpoint
        $.ajax({
            url: '{{ url("trstrn/schedule") }}',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Success response:', response);
                if (response.success) {
                    // Hide add schedule modal
                    $('#addScheduleModal').modal('hide');
                    
                    Swal.fire({
                        title: 'Success',
                        text: 'Schedule Added',
                        icon: 'success',
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to save data: ' + response.message,
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Error response:', xhr);
                console.log('Status:', xhr.status);
                console.log('Response:', xhr.responseJSON);

                let message = 'Error occurred while saving data';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                }
                
                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }

    function editTnaData() {
        const tnaId = '{{ $trn->id_trs_tna_header }}';
        
        if (!tnaId) {
            Swal.fire({
                title: 'Validation Error',
                text: 'TNA ID not found',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        // Load TNA data via AJAX
        $.ajax({
            url: '{{ url("trstrn/get-tna-data") }}',
            type: 'GET',
            data: {
                tna_id: tnaId
            },
            success: function(response) {
                if (response.success && response.data) {
                    const data = response.data;
                    
                    // Fill read-only fields
                    $('#tnaReadOnly1').val(data.department || '-');
                    $('#tnaReadOnly2').val(data.section || '-');
                    $('#tnaReadOnly3').val(data.superior_name || '-');
                    $('#tnaReadOnly4').val(data.requestor_name || '-');
                    
                    // Fill editable fields
                    $('#tnaTrainingType').val(data.type_training || 'reguler');
                    $('#tnaWithScore').val(data.with_score ? '1' : '0');
                    
                    // Store TNA ID
                    $('#tnaTnaId').val(tnaId);
                    
                    // Show modal
                    $('#editTnaModal').modal('show');
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to load TNA data',
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                console.log('Error loading TNA data:', xhr);
                Swal.fire({
                    title: 'Error',
                    text: 'Error occurred while loading TNA data',
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }

    function submitEditTnaData() {
        const tnaId = $('#tnaTnaId').val();
        const trainingType = $('#tnaTrainingType').val();
        const withScore = $('#tnaWithScore').val();

        if (!tnaId) {
            Swal.fire({
                title: 'Validation Error',
                text: 'TNA ID not found',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        if (!trainingType) {
            Swal.fire({
                title: 'Validation Error',
                text: 'Training Type must be selected',
                icon: 'warning',
                confirmButtonColor: '#FFC107'
            });
            return;
        }

        // Show loading modal
        $('#loadingModal').modal('show');

        // Disable add schedule modal
        $('#editTnaModal').modal('hide');

        // Submit via AJAX
        $.ajax({
            url: '{{ url("trstrn/update-tna-data") }}',
            type: 'POST',
            data: JSON.stringify({
                tna_id: tnaId,
                type_training: trainingType,
                with_score: withScore
            }),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                if (response.success) {
                    // Hide edit modal
                    $('#editTnaModal').modal('hide');
                    
                    Swal.fire({
                        title: 'Success',
                        text: 'TNA Data Updated',
                        icon: 'success',
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Failed to save data: ' + response.message,
                        icon: 'error',
                        confirmButtonColor: '#d32f2f'
                    });
                }
            },
            error: function(xhr) {
                // Hide loading modal
                $('#loadingModal').modal('hide');

                console.log('Error response:', xhr);
                let message = 'Error occurred while saving data';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                
                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#d32f2f'
                });
            }
        });
    }
</script>
@endpush