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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        @php
            $rowsNihil = collect($table_detail)->filter(fn($r) => $r->status_absensi === 'NIHIL')->values();
            $rowsWithScore = collect($table_detail)->filter(fn($r) => (int) ($r->with_score ?? 0) === 1 && $r->status_absensi !== 'NIHIL')->values();
            $rowsWithoutScore = collect($table_detail)->filter(fn($r) => (int) ($r->with_score ?? 0) !== 1 && $r->status_absensi !== 'NIHIL')->values();
        @endphp
        <div class="row">
            <div class="col-md-12">
                {{-- Summary Cards --}}
                <!-- @include('assesm.trseva._partials.list_summary_cards') -->
                
                <div class="card mx-1 mt-2">
                    <div class="card-body">
                        {{-- Filter Card (Outside of data cards) --}}
                        @include('assesm.trseva._partials.filter')
                    
                        {{-- Alert Messages --}}
                        <div class="col-12">
                            @include('components.alert')
                        </div>
                    </div>
                </div>
                
                {{-- Card for NIHIL Training --}}
                @if($rowsNihil->isNotEmpty())
                <div class="row mx-1 mt-2">
                    <div class="card border-0 shadow-sm mt-2 border-danger" style="border-left: 4px solid #f5365c !important;">
                        <div class="row align-items-center">
                            <div class="card-header col-md-auto bg-transparent">
                                <h5 class="mb-0 text-danger">Training Peserta Tidak Hadir Semua</h5>
                                <p class="text-xs text-secondary mb-0 mt-1">Seluruh peserta pada training ini ditandai Tidak Hadir. Silakan Reschedule jadwal ini.</p>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @include('assesm.trseva._partials.data_table_nihil', [
                            'rows' => $rowsNihil,
                            'tableId' => 'evaluation_table_nihil',
                        ])
                    </div>
                </div>
                @endif

                {{-- Card for With Score Training --}}
                <div class="row mx-1 mt-2">
                    <div class="card border-0 shadow-sm mt-2">
                        <div class="row align-items-center">
                            <div class="card-header col-md-auto bg-transparent">
                                <h5 class="mb-0">Training Evaluation - With Score</h5>
                                <p class="text-xs text-secondary mb-0 mt-1">Training with score: includes attendance, exam execution, correction, and evaluation.</p>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @include('assesm.trseva._partials.data_table', [
                            'rows' => $rowsWithScore,
                            'tableId' => 'evaluation_table_with_score',
                            'cardTitle' => 'Training Evaluation - With Score',
                        ])
                    </div>
                </div>

                {{-- Card for Without Score Training --}}
                <div class="row mx-1 mt-2">
                    <div class="card border-0 shadow-sm mt-2">
                        <div class="row align-items-center">
                            <div class="card-header col-md-auto bg-transparent">
                                <h5 class="mb-0">Training Evaluation - Without Score</h5>
                                <p class="text-xs text-secondary mb-0 mt-1">Training without score: only attendance and evaluation, no exam or correction.</p>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @include('assesm.trseva._partials.data_table', [
                            'rows' => $rowsWithoutScore,
                            'tableId' => 'evaluation_table_without_score',
                            'cardTitle' => 'Training Evaluation - Without Score',
                        ])
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Reschedule All --}}
    <div class="modal fade" id="modalRescheduleAll" tabindex="-1" aria-labelledby="modalRescheduleAllLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formRescheduleAll">
                    @csrf
                    <input type="hidden" name="schedule_id_encrypted" id="ra_schedule_id_encrypted">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalRescheduleAllLabel">Reschedule Training (Semua Absen)</h5>
                        <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning text-white" role="alert">
                            <strong>Perhatian!</strong> Tindakan ini akan merubah tanggal jadwal <span id="ra_training_name" class="font-weight-bold"></span> dari <span id="ra_schedule_date" class="font-weight-bold"></span> ke tanggal baru dan me-reset status absensi peserta.
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-control-label">Pilih Tanggal Baru <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="new_date" id="ra_new_date" required min="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="btn-submit-ra">Simpan Reschedule</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    // DataTables initialization is handled in js/trseva.blade.php

    // Handle Reschedule All button click
    $('.btn-reschedule-all').on('click', function() {
        var encId = $(this).data('schedule-id');
        var trnName = $(this).data('training-name');
        var oldDate = $(this).data('schedule-date');

        $('#ra_schedule_id_encrypted').val(encId);
        $('#ra_training_name').text(trnName);
        $('#ra_schedule_date').text(oldDate);
        $('#ra_new_date').val('');

        var modal = new bootstrap.Modal(document.getElementById('modalRescheduleAll'));
        modal.show();
    });

    // Handle form submit Reschedule All
    $('#formRescheduleAll').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var btn = $('#btn-submit-ra');
        
        btn.prop('disabled', true).text('Menyimpan...');

        $.ajax({
            url: '{{ route("trseva.reschedule-all") }}',
            type: 'POST',
            data: form.serialize(),
            success: function(res) {
                if(res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: res.message
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: res.message || 'Terjadi kesalahan.'
                    });
                    btn.prop('disabled', false).text('Simpan Reschedule');
                }
            },
            error: function(xhr) {
                var msg = 'Terjadi kesalahan sistem.';
                if(xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: msg
                });
                btn.prop('disabled', false).text('Simpan Reschedule');
            }
        });
    });
});
</script>
@endpush

@include('assesm._partials.jsmenu_push')