@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">Add {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <form method="POST" action="{{ url($url_menu) }}">
                            @csrf

                            {{-- Filter Training --}}
                            <div class="row px-4 py-2">
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold mb-1">Filter Training</label>
                                    <select class="form-select form-select-sm" id="filterTraining">
                                        <option value="all">Semua Training</option>
                                        @foreach ($training_list as $trn)
                                            <option value="{{ $trn }}">{{ $trn }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold mb-1">Search Participant</label>
                                    <input type="text" id="searchPeserta" class="form-control form-control-sm" placeholder="Search NIK or Name...">
                                </div>
                                <div class="col-md-4 d-flex align-items-end">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="showOnlyTidakBagus">
                                        <label class="form-check-label small" for="showOnlyTidakBagus">Only show "Not Good"</label>
                                    </div>
                                </div>
                            </div>

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

                            @if ($peserta_list->count() > 0)
                                <div class="row px-4 py-2">
                                    <div class="col-12 mb-2">
                                        <span class="badge bg-info"><i class="fas fa-info-circle me-1"></i>{{ $peserta_list->count() }} participants not yet evaluated</span>
                                        <small class="text-muted ms-2">Default: <span class="badge bg-success">Good</span> — Change to <span class="badge bg-danger">Not Good</span> if needed</small>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="tablePeserta">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    <th>NIK</th>
                                                    <th>Participant Name</th>
                                                    <th>Department</th>
                                                    <th>Section</th>
                                                    <th>Training Name</th>
                                                    <th>Training Date</th>
                                                    <th width="250">Evaluation Result</th>
                                                    <th width="200">Notes</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($peserta_list as $peserta)
                                                    <tr class="peserta-row" data-training="{{ $peserta->nama_trn }}" data-nik="{{ $peserta->nik }}" data-nama="{{ $peserta->nama }}">
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td class="text-sm">{{ $peserta->nik }}</td>
                                                        <td class="text-sm font-weight-bold">{{ $peserta->nama }}</td>
                                                        <td class="text-sm">{{ $peserta->departemen }}</td>
                                                        <td class="text-sm">{{ $peserta->bagian }}</td>
                                                        <td class="text-sm">{{ $peserta->nama_trn }}</td>
                                                        <td class="text-sm">{{ \Carbon\Carbon::parse($peserta->jadwal_trn)->format('d M Y') }}</td>
                                                        <td>
                                                            <div class="btn-group w-100" role="group">
                                                                <input type="radio"
                                                                    class="btn-check evaluasi-radio"
                                                                    name="evaluasi[{{ $peserta->participant_id }}]"
                                                                    id="bagus_{{ $peserta->participant_id }}"
                                                                    value="Bagus"
                                                                    checked>
                                                                <label class="btn btn-outline-success btn-sm" for="bagus_{{ $peserta->participant_id }}">
                                                                    <i class="fas fa-check me-1"></i>Good
                                                                </label>

                                                                <input type="radio"
                                                                    class="btn-check evaluasi-radio"
                                                                    name="evaluasi[{{ $peserta->participant_id }}]"
                                                                    id="tidakbagus_{{ $peserta->participant_id }}"
                                                                    value="Tidak Bagus">
                                                                <label class="btn btn-outline-danger btn-sm" for="tidakbagus_{{ $peserta->participant_id }}">
                                                                    <i class="fas fa-times me-1"></i>Not Good
                                                                </label>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <input type="text"
                                                                class="form-control form-control-sm"
                                                                name="keterangan[{{ $peserta->participant_id }}]"
                                                                placeholder="Optional..."
                                                                maxlength="500">
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="row px-4 py-3">
                                    <div class="col-12 d-flex justify-content-between">
                                        <a href="{{ url($url_menu) }}" class="btn btn-secondary">
                                            <i class="fas fa-arrow-left me-1"></i> Back
                                        </a>
                                        <button type="submit" class="btn btn-primary" id="btnSubmit">
                                            <i class="fas fa-save me-1"></i> Save Evaluation
                                        </button>
                                    </div>
                                </div>
                            @else
                                <div class="row px-4 py-4">
                                    <div class="col-12 text-center">
                                        <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                                        <h6>All participants have been evaluated!</h6>
                                        <p class="text-muted">No training participants are pending evaluation at this time.</p>
                                        <a href="{{ url($url_menu) }}" class="btn btn-primary btn-sm">
                                            <i class="fas fa-arrow-left me-1"></i> Back to List
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Filter by training
            $('#filterTraining').on('change', function() {
                filterTable();
            });

            // Search peserta
            $('#searchPeserta').on('keyup', function() {
                filterTable();
            });

            // Show only tidak bagus
            $('#showOnlyTidakBagus').on('change', function() {
                filterTable();
            });

            function filterTable() {
                var training = $('#filterTraining').val();
                var search = $('#searchPeserta').val().toLowerCase();
                var onlyTidakBagus = $('#showOnlyTidakBagus').is(':checked');

                $('.peserta-row').each(function() {
                    var row = $(this);
                    var matchTraining = (training === 'all' || row.data('training') === training);
                    var matchSearch = (search === '' ||
                        row.data('nik').toString().toLowerCase().includes(search) ||
                        row.data('nama').toString().toLowerCase().includes(search));

                    var isTidakBagus = row.find('input[value="Tidak Bagus"]').is(':checked');
                    var matchStatus = (!onlyTidakBagus || isTidakBagus);

                    row.toggle(matchTraining && matchSearch && matchStatus);
                });
            }

            // Confirm before submit
            $('#btnSubmit').on('click', function(e) {
                e.preventDefault();
                var tidakBagusCount = $('input[value="Tidak Bagus"]:checked').length;
                var totalCount = $('.peserta-row:visible').length;

                var msg = 'Save evaluation for ' + totalCount + ' participants?';
                if (tidakBagusCount > 0) {
                    msg += '\n\n⚠️ ' + tidakBagusCount + ' participants rated "Not Good".';
                }

                Swal.fire({
                    title: 'Confirmation',
                    text: msg,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Save',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#028284'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $(this).closest('form').submit();
                    }
                });
            });
        });
    </script>
@endpush