@extends('layouts.app-layout')

@section('title','¡Evaluaciones!')

@section('content')
    <div class="container-fluid py-4">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="fw-normal mb-0">Lista de Evaluaciones</h2>

            <div class="d-flex gap-2">
                @if(auth()->user()?->funcionario)
                    <a href="{{ route('funcionario.dashboard') }}" class="btn btn-outline-secondary rounded-pill">
                        <i class="bi bi-arrow-left"></i> Volver
                    </a>
                @endif

                <form action="{{ route('funcionario.evaluaciones.store') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-primary rounded-pill">
                        <i class="bi bi-plus-lg"></i> Crear nueva evaluación
                    </button>
                </form>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success py-2">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger py-2">
                {{ session('error') }}
            </div>
        @endif

        <div class="card border-0 shadow-sm rounded-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>Nombre / ID</th>
                        <th>Estado</th>
                        <th>Respuestas</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                    </thead>

                    <tbody>
                    @forelse ($evaluaciones as $evaluacion)
                        <tr class="clickable-row" data-href="{{ route('funcionario.evaluaciones.show', $evaluacion) }}"
                            style="cursor:pointer;">
                            <td class="fw-bold">
                                Evaluación #{{ $evaluacion->id }}
                            </td>

                            <td>
                                @if($evaluacion->activa)
                                    <span class="badge rounded-pill bg-success">Activa</span>
                                @else
                                    <span class="badge rounded-pill bg-secondary">Inactiva</span>
                                @endif
                            </td>

                            <td>
                                @if($evaluacion->tieneRespuestas())
                                    <span class="text-info"><i class="bi bi-check2-all"></i> Con respuestas</span>
                                @else
                                    <span class="text-muted">Sin respuestas</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-2">
                                    {{-- Botón Ver --}}
                                    <a href="{{ route('funcionario.evaluaciones.show', $evaluacion) }}"
                                       class="btn btn-sm btn-outline-secondary"
                                       title="Ver">
                                        <i class="bi bi-eye"></i>
                                    </a>

                                    {{-- Botón Activar --}}
                                    @if(!$evaluacion->activa)
                                        <form action="{{ route('funcionario.evaluaciones.toggleActiva', $evaluacion->id) }}"
                                              method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-success"
                                                    title="Activar">
                                                <i class="bi bi-play-fill"></i>
                                            </button>
                                        </form>
                                    @endif

                                    {{-- Botón Eliminar --}}
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal{{ $evaluacion->id }}"
                                            title="Eliminar">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        {{-- Modal de confirmación de eliminación --}}
                        <x-delete-confirmation-modal
                            :id="$evaluacion->id"
                            title="Confirmar eliminación de evaluación"
                            :entity-name="'Evaluación #' . $evaluacion->id"
                            :entity-data="[
                                'subtitle' => $evaluacion->activa ? 'Estado: Activa' : 'Estado: Inactiva',
                                'details' => [
                                    '<strong>Respuestas:</strong> ' . ($evaluacion->tieneRespuestas() ? 'Sí (se mantendrán)' : 'Sin respuestas'),
                                    '<strong>Creada:</strong> ' . $evaluacion->created_at->format('d/m/Y H:i')
                                ]
                            ]"
                            warning-message="Esta acción eliminará permanentemente la evaluación. Las respuestas existentes se conservarán en el sistema."
                            :route="route('funcionario.evaluaciones.destroy', $evaluacion->id)"
                            button-text="Eliminar evaluación"
                            :show-avatar="false"
                        />
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                No hay evaluaciones registradas.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const rows = document.querySelectorAll('tr.clickable-row[data-href]');
            if (!rows.length) return;

            rows.forEach(row => {
                row.addEventListener('click', (event) => {
                    if (event.target.closest('a, button, input, select, textarea, label, form')) {
                        return;
                    }
                    window.location = row.dataset.href;
                });
            });
        })();
    </script>
@endpush