@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
<style>
    .eval-table th { background: #e8f5f5; color: #028284; font-size: 0.82rem; }
    .eval-table td { font-size: 0.83rem; vertical-align: middle; }
    .btn-check:checked + .btn-outline-success { background-color: #198754 !important; color: #fff !important; border-color: #198754 !important; }
    .btn-check:checked + .btn-outline-danger  { background-color: #dc3545 !important; color: #fff !important; border-color: #dc3545 !important; }
    .btn-check:checked + .btn-outline-success i,
    .btn-check:checked + .btn-outline-danger  i { color: #fff !important; }
    .status-bar-ok   { background:#f0fafa; border-left:4px solid #028284; border-radius:0 .5rem .5rem 0; padding:.5rem 1rem; font-size:.85rem; }
    .status-bar-warn { background:#fff8e1; border-left:4px solid #ffc107; border-radius:0 .5rem .5rem 0; padding:.5rem 1rem; font-size:.82rem; color:#856404; }
    /* Baris belum dievaluasi = kuning muda */
    tr.row-pending-eval { background-color: #fffbea !important; }
    tr.row-pending-eval td { background-color: #fffbea !important; }
</style>

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

{{-- Top bar --}}
<div class="card shadow-lg mx-4 mb-3">
    <div class="card-body p-3">
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <a href="{{ url('trsevl') }}" class="btn btn-secondary mb-0">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
            @if ($is_spv)
                <button type="button" class="btn btn-success mb-0" id="btnSaveEvaluasi" onclick="saveEvaluasi()">
                    <i class="fas fa-save me-1"></i> Save Evaluation
                </button>
            @endif
        </div>
    </div>
</div>

<div class="container-fluid pb-4">
    <div class="card shadow-sm">
        {{-- Header --}}
        <div class="card-header pb-2" style="background: linear-gradient(87deg,#028284 0,#01a6a9 100%); border-radius:.75rem .75rem 0 0;">
            <h5 class="mb-0 text-white">
                <i class="fas fa-clipboard-list me-2"></i>{{ $trn->nama_trn }}
            </h5>
            <small class="text-white opacity-8">
                Supervisor: {{ $spv_info['name'] }} ({{ $trn->diusulkan }})
            </small>
        </div>

        {{-- Status bar — hanya untuk SPV (bukan HRD) --}}
        @if ($is_spv)
        <div class="px-4 pt-3">
            @if ($spv_submitted)
                <div class="status-bar-ok mb-3">
                    <i class="fas fa-check-circle me-1 text-success"></i>
                    You submitted your evaluation on
                    {{ $spv_submitted_at ? \Carbon\Carbon::parse($spv_submitted_at)->format('d M Y H:i') : '-' }}.
                    You can still make changes and save again.
                </div>
            @else
                <div class="status-bar-warn mb-3">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    You have <strong>not submitted your evaluation yet</strong>.
                    Click <strong>Save Evaluation</strong> after finishing your assessment.
                </div>
            @endif
        </div>
        @endif

        {{-- Export buttons + search --}}
        <div class="row px-4 pt-2 pb-0">
            <div class="col-md-6">
                <div id="export-buttons" class="d-flex gap-2"></div>
            </div>
            <div class="col-md-6 d-flex justify-content-end align-items-center">
                <label class="me-2 mb-0 small fw-bold">Search:</label>
                <input type="text" id="customSearch" class="form-control form-control-sm" style="max-width:250px;" placeholder="Search...">
            </div>
        </div>

        {{-- Table --}}
        <div class="px-4 py-3">
            <div class="table-responsive">
                <table class="table eval-table display" id="evalTable">                    <thead>
                        <tr>
                            <th width="40">No</th>
                            <th>NIK</th>
                            <th>Participant Name</th>
                            <th>Department</th>
                            <th>Section</th>
                            <th>Training Date</th>
                            @if ($is_hrd)
                                <th>Supervisor</th>
                            @endif
                            <th width="210">Evaluation Result</th>
                            <th>Notes</th>
                            <th width="110">Evaluation Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            // Sort: yang belum dievaluasi (tanggal_evaluasi null atau SPV belum submit) di atas
                            $sorted = $participants->sortBy(function($p) use ($all_submissions) {
                                $spvSubmitted = $all_submissions->has($p->nik_spv);
                                // 0 = belum (naik ke atas), 1 = sudah (turun ke bawah)
                                return $spvSubmitted ? 1 : 0;
                            });
                        @endphp
                        @foreach ($sorted as $idx => $p)
                            @php
                                $encId = encrypt($p->id);
                                $spvSubmitted = $all_submissions->has($p->nik_spv);
                                // Untuk SPV view: cek berdasarkan tanggal_evaluasi per peserta
                                $isPending = $is_spv ? is_null($p->tanggal_evaluasi) : !$spvSubmitted;
                            @endphp
                            <tr class="{{ $isPending ? 'row-pending-eval' : '' }}">
                                <td>{{ $loop->iteration }}</td>
                                <td class="fw-bold">{{ $p->nik_peserta }}</td>
                                <td>{{ $p->peserta_name }}</td>
                                <td>{{ $p->peserta_departemen }}</td>
                                <td>{{ $p->peserta_bagian }}</td>
                                <td>{{ $p->schedule_date ? \Carbon\Carbon::parse($p->schedule_date)->format('d M Y') : '-' }}</td>
                                @if ($is_hrd)
                                    <td class="text-sm">{{ $p->spv_name ?? '-' }}</td>
                                @endif
                                <td>
                                    @php
                                        // Peserta bisa diedit kalau:
                                        // - is_spv = true DAN nik_spv peserta = nik login
                                        // - Untuk HRD fallback: hanya peserta yang nik_spv = nik_login
                                        //   DAN peserta tidak ada di mst_struktur_organisasi
                                        $canEditRow = $is_spv && ($p->nik_spv === $nik_login);
                                    @endphp
                                    @if ($canEditRow)
                                        <div class="btn-group" role="group">
                                            <input type="radio" class="btn-check eval-radio"
                                                name="eval_{{ $p->id }}"
                                                id="bagus_{{ $p->id }}"
                                                value="Bagus"
                                                data-enc="{{ $encId }}"
                                                {{ $p->hasil_evaluasi === 'Bagus' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-success btn-sm mb-0 px-2" for="bagus_{{ $p->id }}">
                                                <i class="fas fa-check me-1"></i>Good
                                            </label>
                                            <input type="radio" class="btn-check eval-radio"
                                                name="eval_{{ $p->id }}"
                                                id="tidakbagus_{{ $p->id }}"
                                                value="Tidak Bagus"
                                                data-enc="{{ $encId }}"
                                                {{ $p->hasil_evaluasi === 'Tidak Bagus' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-danger btn-sm mb-0 px-2" for="tidakbagus_{{ $p->id }}">
                                                <i class="fas fa-times me-1"></i>Not Good
                                            </label>
                                        </div>
                                    @else
                                        @if ($p->hasil_evaluasi === 'Bagus')
                                            <span class="badge bg-success px-3 py-2">
                                                <i class="fas fa-check me-1"></i>Good
                                            </span>
                                        @else
                                            <span class="badge bg-danger px-3 py-2">
                                                <i class="fas fa-times me-1"></i>Not Good
                                            </span>
                                        @endif
                                    @endif
                                </td>
                                {{-- Notes: tombol buka modal --}}
                                <td class="text-center">
                                    <button type="button"
                                        class="btn btn-sm {{ $p->keterangan ? 'btn-outline-primary' : 'btn-outline-secondary' }} px-2 py-1"
                                        data-notes-id="{{ $p->id }}"
                                        onclick="openNotesModal('{{ $p->id }}', '{{ $encId }}', {{ $canEditRow ? 'true' : 'false' }}, '{{ addslashes($p->peserta_name) }}', this.closest('td').querySelector('.keterangan-input').value)"
                                        title="{{ $p->keterangan ? 'View / Edit Notes' : 'Add Notes' }}">
                                        <i class="fas fa-{{ $p->keterangan ? 'comment-alt' : 'plus-circle' }}"></i>
                                        <span class="notes-preview">
                                            @if ($p->keterangan)
                                                {{ \Illuminate\Support\Str::limit($p->keterangan, 15) }}
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </span>
                                    </button>
                                    {{-- Hidden input for save function --}}
                                    <input type="hidden" class="keterangan-input" data-id="{{ $p->id }}" data-enc="{{ $encId }}" value="{{ $p->keterangan ?? '' }}">
                                </td>
                                <td>{{ $p->tanggal_evaluasi ? \Carbon\Carbon::parse($p->tanggal_evaluasi)->format('d M Y') : '-' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{-- Legend --}}
            <div class="d-flex gap-3 mt-2">
                <span class="d-flex align-items-center gap-1 small text-muted">
                    <span style="display:inline-block;width:14px;height:14px;background:#fffbea;border:1px solid #ffc107;border-radius:3px;flex-shrink:0;"></span>
                    Not yet evaluated
                </span>
                <span class="d-flex align-items-center gap-1 small text-muted">
                    <span style="display:inline-block;width:14px;height:14px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:3px;flex-shrink:0;"></span>
                    Already evaluated
                </span>
            </div>
        </div>
    </div>
</div>
{{-- Notes Modal --}}
<div class="modal fade" id="notesModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(87deg,#028284 0,#01a6a9 100%); color:#fff;">
                <h6 class="modal-title mb-0 text-white"><i class="fas fa-comment-alt me-2"></i>Notes — <span id="notesModalName"></span></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea class="form-control" id="notesModalText" rows="5"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success btn-sm d-none" id="notesModalSave" onclick="saveNotes()">
                    <i class="fas fa-check me-1"></i>Apply
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    var trnEncrypted = '{{ $trn_encrypted }}';
    var currentNotesId = null;

    function openNotesModal(rowId, encId, canEdit, name, notes) {
        currentNotesId = rowId;
        $('#notesModalName').text(name);
        $('#notesModalText').val(notes || '');

        if (canEdit) {
            $('#notesModalText').prop('readonly', false).css('background', '#fff');
            $('#notesModalSave').removeClass('d-none');
        } else {
            $('#notesModalText').prop('readonly', true).css('background', '#f8f9fa');
            $('#notesModalSave').addClass('d-none');
        }

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

    function saveNotes() {
        var newNotes = $('#notesModalText').val();
        // Update hidden input value
        $('.keterangan-input[data-id="' + currentNotesId + '"]').val(newNotes);

        // Update button text preview
        var $btn = $('button[data-notes-id="' + currentNotesId + '"]');
        if (newNotes) {
            $btn.find('.notes-preview').text(newNotes.substring(0, 15) + (newNotes.length > 15 ? '...' : ''));
            $btn.removeClass('btn-outline-secondary').addClass('btn-outline-primary');
            $btn.find('i').removeClass('fa-plus-circle').addClass('fa-comment-alt');
        } else {
            $btn.find('.notes-preview').html('<span class="text-muted">-</span>');
            $btn.removeClass('btn-outline-primary').addClass('btn-outline-secondary');
            $btn.find('i').removeClass('fa-comment-alt').addClass('fa-plus-circle');
        }

        // Close modal with toast
        bootstrap.Modal.getInstance(document.getElementById('notesModal')).hide();
        Swal.fire({
            icon: 'info',
            title: 'Notes updated',
            text: 'Click "Save Evaluation" to save all changes.',
            toast: true,
            position: 'top-end',
            timer: 2500,
            showConfirmButton: false,
        });
    }

    $(document).ready(function() {
        if ($.fn.DataTable.isDataTable('#evalTable')) {
            $('#evalTable').DataTable().destroy();
        }

        var table = $('#evalTable').DataTable({
            language: {
                lengthMenu: "Show _MENU_ entries",
                zeroRecords: "No data found",
                info: "Showing _START_ to _END_ of _TOTAL_",
                infoEmpty: "No data available",
                infoFiltered: "(filtered from _MAX_ total entries)"
            },
            responsive: true,
            dom: 'Brtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                    autoFilter: true,
                    sheetName: 'Post-Training Evaluation',
                    exportOptions: { columns: [0,1,2,3,4,5,6,7,8] },
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                    exportOptions: { columns: [0,1,2,3,4,5,6,7,8] },
                    title: 'Post-Training Evaluation — {{ addslashes($trn->nama_trn) }}',
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                    exportOptions: { columns: [0,1,2,3,4,5,6,7,8] },
                    title: 'Post-Training Evaluation — {{ addslashes($trn->nama_trn) }}',
                },
            ]
        });

        table.buttons().container().appendTo('#export-buttons');
        $('.dt-button').addClass('btn btn-secondary btn-sm');
        $('.dt-button').removeClass('dt-button');

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

    function saveEvaluasi() {
        var evaluations = [];

        $('input.eval-radio:checked').each(function() {
            var encId      = $(this).data('enc');
            var rowId      = $(this).attr('name').replace('eval_', '');
            var hasil      = $(this).val();
            var keterangan = $('.keterangan-input[data-id="' + rowId + '"]').val() || '';
            evaluations.push({ id: encId, hasil_evaluasi: hasil, keterangan: keterangan });
        });

        if (evaluations.length === 0) {
            Swal.fire({ icon: 'warning', title: 'No data', text: 'No participants to evaluate.', confirmButtonColor: '#028284' });
            return;
        }

        $('#btnSaveEvaluasi').prop('disabled', true)
            .html('<span class="spinner-border spinner-border-sm me-1"></span>Saving...');

        $.ajax({
            url: '{{ route("trsevl.save.evaluasi") }}',
            method: 'POST',
            data: {
                _token:      '{{ csrf_token() }}',
                trn_id:      trnEncrypted,
                evaluations: evaluations,
            },
            success: function(res) {
                $('#btnSaveEvaluasi').prop('disabled', false)
                    .html('<i class="fas fa-save me-1"></i>Save Evaluation');
                if (res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: res.message,
                        confirmButtonColor: '#028284',
                        timer: 2000,
                        showConfirmButton: false,
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire({ icon: 'error', title: 'Failed', text: res.message, confirmButtonColor: '#028284' });
                }
            },
            error: function(xhr) {
                $('#btnSaveEvaluasi').prop('disabled', false)
                    .html('<i class="fas fa-save me-1"></i>Save Evaluation');
                var msg = xhr.responseJSON ? xhr.responseJSON.message : 'An error occurred.';
                Swal.fire({ icon: 'error', title: 'Error', text: msg, confirmButtonColor: '#028284' });
            }
        });
    }
</script>
@endpush