@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
<style>
    .training-card {
        border: 1px solid #e0e0e0;
        border-radius: 0.75rem;
        transition: box-shadow 0.2s, transform 0.15s;
        cursor: pointer;
        background: #fff;
    }
    .training-card:hover {
        box-shadow: 0 4px 18px rgba(2,130,132,0.13);
        transform: translateY(-2px);
    }
    .training-card .card-header-custom {
        background: linear-gradient(87deg, #028284 0, #01a6a9 100%);
        border-radius: 0.75rem 0.75rem 0 0;
        padding: 0.85rem 1.1rem;
        color: #fff;
    }
    .badge-submitted {
        background: #198754;
        color: #fff;
        font-size: 0.72rem;
        padding: 3px 9px;
        border-radius: 20px;
    }
    .badge-not-submitted {
        background: #ffc107;
        color: #333;
        font-size: 0.72rem;
        padding: 3px 9px;
        border-radius: 20px;
    }
    .eval-table th { background: #e8f5f5; color: #028284; font-size: 0.8rem; }
    .eval-table td { font-size: 0.82rem; 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; }
    .spv-info-bar {
        background: #f0fafa;
        border-left: 4px solid #028284;
        border-radius: 0 0.5rem 0.5rem 0;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .not-submitted-warning {
        background: #fff8e1;
        border-left: 4px solid #ffc107;
        border-radius: 0 0.5rem 0.5rem 0;
        padding: 0.5rem 1rem;
        font-size: 0.82rem;
        color: #856404;
    }
</style>

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

<div class="container-fluid py-3">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between pb-2">
                    <h5 class="mb-0">{{ $title_menu }}</h5>
                    @include('components.alert')
                </div>
                <hr class="horizontal dark mt-0 mb-3">

                {{-- Filter Bulan --}}
                <div class="px-4 mb-3">
                    <form method="GET" action="{{ url('trsevl') }}" class="d-flex align-items-center gap-2">
                        <label for="month" class="mb-0 text-sm fw-bold text-muted">
                            <i class="fas fa-calendar-alt me-1"></i>Month:
                        </label>
                        <input type="month" id="month" name="month"
                               value="{{ $filter_month }}"
                               class="form-control form-control-sm"
                               style="max-width: 180px;"
                               onchange="this.form.submit()">
                    </form>
                </div>

                {{-- Role info bar --}}
                <div class="px-4 mb-3">
                    @if ($is_hrd)
                        <div class="spv-info-bar">
                            <i class="fas fa-user-shield me-1 text-success"></i>
                            <strong>HRD Mode</strong> — You can view all evaluations. Only the respective supervisor can make changes.
                        </div>
                    @else
                        <div class="spv-info-bar">
                            <i class="fas fa-user-tie me-1" style="color:#028284"></i>
                            <strong>Supervisor Mode</strong> — Only trainings you proposed are shown. Click <strong>Save Evaluation</strong> after finishing your assessment.
                        </div>
                    @endif
                </div>

                {{-- Training Cards --}}
                <div class="px-4 pb-4">
                    @if ($trainings_grouped->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-clipboard-list fa-3x mb-3 d-block" style="color:#ccc"></i>
                            No post-training evaluation data available.
                        </div>
                    @else
                        <div class="row g-3">
                            @foreach ($trainings_grouped as $trn)
                                <div class="col-md-6 col-lg-4">
                                    <div class="training-card h-100"
                                         onclick="window.location='{{ url('trsevl/training/' . encrypt($trn->trn_id)) }}'">
                                        <div class="card-header-custom d-flex justify-content-between align-items-start">
                                            <div>
                                                <div class="fw-bold" style="font-size:0.95rem;">{{ $trn->nama_trn }}</div>
                                                <div class="text-white opacity-8 small mt-1">
                                                    <i class="fas fa-calendar me-1"></i>
                                                    {{ $trn->earliest_date ? \Carbon\Carbon::parse($trn->earliest_date)->format('d M Y') : '-' }}
                                                    @if ($trn->earliest_date != $trn->latest_date)
                                                        — {{ \Carbon\Carbon::parse($trn->latest_date)->format('d M Y') }}
                                                    @endif
                                                </div>
                                            </div>
                                            <i class="fas fa-chevron-right text-white opacity-7 mt-1"></i>
                                        </div>
                                        <div class="p-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted small">
                                                    <i class="fas fa-users me-1"></i>{{ $trn->total_peserta }} Participants
                                                </span>
                                                @if ($trn->total_not_good > 0)
                                                    <span class="badge bg-danger">
                                                        <i class="fas fa-times me-1"></i>{{ $trn->total_not_good }} Not Good
                                                    </span>
                                                @else
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check me-1"></i>All Good
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="text-muted small">
                                                    <i class="fas fa-user-tie me-1"></i>
                                                    @if ($is_hrd)
                                                        {{ $trn->spv_name }}
                                                    @else
                                                        My participants
                                                    @endif
                                                </span>
                                                @if ($trn->all_submitted)
                                                    <span class="badge-submitted">
                                                        <i class="fas fa-check-circle me-1"></i>
                                                        @if ($is_hrd && $trn->spv_count > 1)
                                                            All {{ $trn->spv_count }} SPV Evaluated
                                                        @else
                                                            Evaluated
                                                        @endif
                                                    </span>
                                                @elseif ($is_hrd && $trn->submitted_count > 0)
                                                    <span class="badge-not-submitted">
                                                        <i class="fas fa-clock me-1"></i>
                                                        {{ $trn->submitted_count }}/{{ $trn->spv_count }} Evaluated
                                                    </span>
                                                @else
                                                    <span class="badge-not-submitted">
                                                        <i class="fas fa-clock me-1"></i>Not Evaluated
                                                    </span>
                                                @endif
                                            </div>
                                            @if ($trn->spv_submitted && $trn->spv_submitted_at)
                                                <div class="text-muted mt-1" style="font-size:0.75rem;">
                                                    <i class="fas fa-calendar-check me-1"></i>
                                                    {{ \Carbon\Carbon::parse($trn->spv_submitted_at)->format('d M Y H:i') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
<script>
    // List page only shows training cards — navigation to detail via link
</script>
@endpush
@endsection