@extends('layouts.app-layout')

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

@section('content')
    <div class="mb-3">
        <a href="{{ route('funcionario.evaluaciones.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Volver a Evaluaciones
        </a>
    </div>

    <h1 class="text-primary mb-4">Evaluacion ID: {{$evaluacion->id}}</h1>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <h2>Preguntas:</h2>

    @forelse($evaluacion->preguntas as $pregunta)
        <div class="mb-3 d-flex justify-content-between align-items-center border p-3 rounded">
            <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <h3 class="text-primary mb-0">{{$pregunta->detalle}}</h3>
                    <span class="badge bg-info">{{$pregunta->dimension}}</span>
                </div>
                @if(!$pregunta->puedeEditarse())
                    <small class="text-muted">
                        <i class="bi bi-lock"></i> Esta pregunta tiene respuestas y no puede ser modificada
                    </small>
                @endif
            </div>

            <div class="btn-group">
                @if($pregunta->puedeEditarse())
                    <button type="button"
                            class="btn btn-warning btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#editModal{{$pregunta->id}}">
                        Editar
                    </button>
                @else
                    <button type="button" class="btn btn-secondary btn-sm" disabled
                            title="No se puede editar porque tiene respuestas">
                        Editar
                    </button>
                @endif

                {{-- Botón Eliminar - Solo si se puede eliminar --}}
                @if($pregunta->puedeEditarse())
                    <form action="{{ route('preguntas.destroy', $pregunta->id) }}"
                          method="POST"
                          onsubmit="return confirm('¿Estás seguro de eliminar esta pregunta?')"
                          class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">
                            Eliminar
                        </button>
                    </form>
                @else
                    <button type="button" class="btn btn-secondary btn-sm" disabled
                            title="No se puede eliminar porque tiene respuestas">
                        Eliminar
                    </button>
                @endif
            </div>
        </div>

        @if($pregunta->puedeEditarse())
            <div class="modal fade" id="editModal{{$pregunta->id}}" tabindex="-1"
                 aria-labelledby="editModalLabel{{$pregunta->id}}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="{{ route('preguntas.update', $pregunta->id) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="modal-header">
                                <h5 class="modal-title" id="editModalLabel{{$pregunta->id}}">Editar Pregunta</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>

                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="detalle{{$pregunta->id}}" class="form-label">Detalle de la
                                        pregunta</label>
                                    <textarea
                                        class="form-control @error('detalle') is-invalid @enderror"
                                        id="detalle{{$pregunta->id}}"
                                        name="detalle"
                                        rows="3"
                                        required>{{old('detalle', $pregunta->detalle)}}</textarea>
                                    @error('detalle')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="dimension{{$pregunta->id}}" class="form-label">Dimensión</label>
                                    <select class="form-select @error('dimension') is-invalid @enderror"
                                            id="dimension{{$pregunta->id}}"
                                            name="dimension"
                                            required>
                                        <option value="">Selecciona una dimensión</option>
                                        <option
                                            value="Propuesta" {{ old('dimension', $pregunta->dimension) == 'Propuesta' ? 'selected' : '' }}>
                                            Propuesta
                                        </option>
                                        <option
                                            value="Ventas" {{ old('dimension', $pregunta->dimension) == 'Ventas' ? 'selected' : '' }}>
                                            Ventas
                                        </option>
                                        <option
                                            value="Finanzas" {{ old('dimension', $pregunta->dimension) == 'Finanzas' ? 'selected' : '' }}>
                                            Finanzas
                                        </option>
                                        <option
                                            value="Gestión" {{ old('dimension', $pregunta->dimension) == 'Gestión' ? 'selected' : '' }}>
                                            Gestión
                                        </option>
                                        <option
                                            value="Formalizacion" {{ old('dimension', $pregunta->dimension) == 'Formalizacion' ? 'selected' : '' }}>
                                            Formalización
                                        </option>
                                        <option
                                            value="Crecimiento" {{ old('dimension', $pregunta->dimension) == 'Crecimiento' ? 'selected' : '' }}>
                                            Crecimiento
                                        </option>
                                        <option
                                            value="Comercial" {{ old('dimension', $pregunta->dimension) == 'Comercial' ? 'selected' : '' }}>
                                            Comercial
                                        </option>
                                    </select>
                                    @error('dimension')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar
                                </button>
                                <button type="submit" class="btn btn-primary">Guardar cambios</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    @empty
        <p>No hay preguntas para esta evaluación</p>
    @endforelse

    <div class="mt-4 d-flex flex-wrap gap-2">
        <a href="{{ route('funcionario.evaluaciones.index') }}" class="btn btn-secondary">
            ← Volver a Evaluaciones
        </a>
        <a href="{{ route('funcionario.resultados.index', $evaluacion->id) }}" class="btn btn-info">
            👥 Ver Personas que Respondieron
        </a>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
            + Agregar Pregunta
        </button>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('preguntas.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="evaluacion_id" value="{{$evaluacion->id}}">

                    <div class="modal-header">
                        <h5 class="modal-title" id="createModalLabel">Nueva Pregunta</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="detalle" class="form-label">Detalle de la pregunta</label>
                            <textarea
                                class="form-control @error('detalle') is-invalid @enderror"
                                id="detalle"
                                name="detalle"
                                rows="3"
                                required
                                placeholder="Escribe tu pregunta aquí...">{{old('detalle')}}</textarea>
                            @error('detalle')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="dimension" class="form-label">Dimensión</label>
                            <select class="form-select @error('dimension') is-invalid @enderror"
                                    id="dimension"
                                    name="dimension"
                                    required>
                                <option value="">Selecciona una dimensión</option>
                                <option value="Propuesta" {{ old('dimension') == 'Propuesta' ? 'selected' : '' }}>
                                    Propuesta
                                </option>
                                <option value="Ventas" {{ old('dimension') == 'Ventas' ? 'selected' : '' }}>Ventas
                                </option>
                                <option value="Finanzas" {{ old('dimension') == 'Finanzas' ? 'selected' : '' }}>
                                    Finanzas
                                </option>
                                <option value="Gestión" {{ old('dimension') == 'Gestión' ? 'selected' : '' }}>Gestión
                                </option>
                                <option
                                    value="Formalizacion" {{ old('dimension') == 'Formalizacion' ? 'selected' : '' }}>
                                    Formalización
                                </option>
                                <option value="Crecimiento" {{ old('dimension') == 'Crecimiento' ? 'selected' : '' }}>
                                    Crecimiento
                                </option>
                                <option value="Comercial" {{ old('dimension') == 'Comercial' ? 'selected' : '' }}>
                                    Comercial
                                </option>
                            </select>
                            @error('dimension')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Crear Pregunta</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection