@extends('layouts.app')
@section('titulo', 'Crear Nuevo Elemento')

@section('ruta')
<div class="mb-3 my-2 small">
    <h6>
        <a href="{{route('revision.index')}}">Revisiones</a> >
        <a href="{{route('revision.show', $revision->id)}}">Revisión en {{$revision->lugar->nombre}}</a> >
        <a href="{{route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id])}}">Central {{$central->nombre}}</a> > Crear Elemento
    </h6>
</div>
@endsection

@section('contenido1')
<div class="card border-0">
    <div class="card-header">
        <h5 class="card-title my-0 py-3 px-1">@yield('titulo')</h5>
    </div>

    <div class="card-body">
        <form action="{{ route('revision.centrales.elementos.store', ['revision' => $revision->id, 'centrale' => $central->id]) }}" method="POST">
            @csrf

            <div class="row g-3">
                <!-- Primera columna -->
                <div class="col-md-6">
                    <div class="form-floating mb-3">
                        <select name="id_zona" id="id_zona" class="form-select" required>
                            <option value="">Seleccione una zona</option>
                            @foreach ($zonas as $zona)
                                <option value="{{ $zona->id }}">{{ $zona->numero }} - {{ $zona->nombre }}</option>
                            @endforeach
                        </select>
                        <label for="id_zona">Zona</label>
                    </div>

                    <div class="form-floating mb-3">
                        <select name="lazo" id="lazo" class="form-select" required>
                            <option value="">Seleccione un lazo</option>
                            @foreach ($lazos as $lazo)
                                <option value="{{ $lazo->id }}">Lazo {{ $lazo->numero }}</option>
                            @endforeach
                        </select>
                        <label for="lazo">Lazo</label>
                    </div>

                    <div class="form-floating mb-3">
                        <input type="number" name="numero" id="numero" class="form-control" required>
                        <label for="numero">Número</label>
                    </div>
                </div>

                <!-- Segunda columna -->
                <div class="col-md-6">
                    <div class="form-floating mb-3">
                        <select name="tipo" id="tipo" class="form-select" required>
                            <option value="">Seleccione un tipo</option>
                            @foreach ($tiposElementos as $tipo)
                                <option value="{{ $tipo->id }}">{{ $tipo->nombre }}</option>
                            @endforeach
                        </select>
                        <label for="tipo">Tipo</label>
                    </div>

                    <div class="form-floating mb-3">
                        <input type="text" name="nombre" id="nombre" class="form-control" required>
                        <label for="nombre">Nombre</label>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" name="funciona" id="funciona" class="form-check-input" value="1">
                        <label for="funciona" class="form-check-label">Funciona</label>
                    </div>
                </div>
            </div>

            <!-- Campo de observaciones (a lo ancho) -->
            <div class="form-floating mb-3">
                <textarea name="observaciones" id="observaciones" class="form-control" style="height: 100px;"></textarea>
                <label for="observaciones">Observaciones</label>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">Guardar Elemento</button>
                <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id]) }}" class="btn btn-secondary">Cancelar</a>
            </div>
        </form>
    </div>
</div>
@endsection