@extends('layouts.admin_sidebar')

@section('title', 'Campos del formulario – ' . $congreso->nombre)

@section('content')
<div class="container-fluid py-4">
    {{-- Encabezado --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">Campos del Formulario</h2>
            <small class="text-muted">{{ $congreso->nombre }}</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.congresos.form-campos.categorias', $congreso) }}" class="btn btn-outline-secondary">
                <i class="bi bi-tags me-1"></i> Categorías
            </a>
            <a href="{{ route('admin.congresos.form-campos.create', $congreso) }}" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i> Nuevo campo
            </a>
        </div>
    </div>

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

    {{-- Lista de campos (drag-and-drop para reordenar) --}}
    @if($campos->isEmpty())
        <div class="text-center py-5 text-muted">
            <i class="bi bi-ui-checks display-4 d-block mb-3"></i>
            <p>Aún no hay campos personalizados.<br>Crea el primero usando el botón <strong>Nuevo campo</strong>.</p>
        </div>
    @else
        <div class="card">
            <div class="card-body p-0">
                <ul id="sortable-campos" class="list-group list-group-flush">
                    @foreach($campos as $campo)
                    <li class="list-group-item d-flex align-items-center gap-3 py-3 px-4" data-id="{{ $campo->id }}">
                        <i class="bi bi-grip-vertical text-muted fs-5 cursor-grab drag-handle"></i>

                        {{-- Icono del tipo --}}
                        <span class="badge bg-light text-dark border" style="min-width:90px">
                            <i class="bi bi-{{ campoIcono($campo->tipo) }} me-1"></i>
                            {{ $tipos[$campo->tipo] ?? $campo->tipo }}
                        </span>

                        <div class="flex-grow-1">
                            <strong>{{ $campo->etiqueta }}</strong>
                            @if($campo->requerido)
                                <span class="badge bg-danger ms-1">Requerido</span>
                            @endif
                            @if($campo->campoPadre)
                                <span class="badge bg-info ms-1" title="Aparece cuando '{{ $campo->campoPadre->etiqueta }}' = '{{ $campo->valor_condicional }}'">
                                    <i class="bi bi-diagram-3 me-1"></i>Condicional
                                </span>
                            @endif
                            @if($campo->es_grupo_repetible)
                                <span class="badge bg-warning text-dark ms-1">Grupo repetible</span>
                            @endif
                            <br>
                            <small class="text-muted">
                                Clave: <code>{{ $campo->nombre }}</code>
                                @if($campo->categoria)
                                    · Categoría: {{ $campo->categoria->nombre }}
                                @endif
                                @if($campo->tieneOpciones())
                                    · {{ $campo->opciones->count() }} opciones
                                @endif
                            </small>
                        </div>

                        <div class="d-flex gap-2">
                            @unless($campo->activo)
                                <span class="badge bg-secondary">Inactivo</span>
                            @endunless
                            <a href="{{ route('admin.congresos.form-campos.edit', [$congreso, $campo]) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('admin.congresos.form-campos.destroy', [$congreso, $campo]) }}" method="POST"
                                  onsubmit="return confirm('¿Eliminar este campo? Se perderán todos sus respuestas.')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <p class="text-muted small mt-2"><i class="bi bi-info-circle me-1"></i>Arrastra los campos para cambiar el orden.</p>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
const list = document.getElementById('sortable-campos');
if (list) {
    Sortable.create(list, {
        handle: '.drag-handle',
        animation: 150,
        onEnd() {
            const orden = [...list.querySelectorAll('[data-id]')].map(el => el.dataset.id);
            fetch('{{ route('admin.congresos.form-campos.reordenar', $congreso) }}', {
                method: 'POST',
                headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                body: JSON.stringify({orden})
            });
        }
    });
}

// Helper para iconos (PHP helper no disponible en Blade, usamos JS)
function campoIcono(tipo) { return tipo; } // no se usa en JS, solo en PHP
</script>
@endpush

@php
function campoIcono(string $tipo): string {
    return match($tipo) {
        'text'     => 'input-cursor-text',
        'textarea' => 'text-paragraph',
        'select'   => 'menu-down',
        'checkbox' => 'check2-square',
        'radio'    => 'record-circle',
        'number'   => 'hash',
        'date'     => 'calendar3',
        'email'    => 'envelope',
        'phone'    => 'telephone',
        'file'     => 'paperclip',
        default    => 'question-circle',
    };
}
@endphp