@extends('layouts.app')
@section('title', 'Agregar Splitter')
@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <h5 class="mb-0 fw-bold"><i class="bi bi-diagram-2 me-2" style="color:var(--nf-purple)"></i>Agregar Splitter</h5>
    <a href="{{ route('equipos.splitter.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Volver
    </a>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('equipos.splitter.store') }}">
                    @csrf
                    @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                    </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label fw-600">Nombre del Splitter</label>
                        <input type="text" name="nombre" class="form-control @error('nombre') is-invalid @enderror"
                               value="{{ old('nombre') }}" placeholder="Ej: SPL-01, SPL-NORTE-01" required>
                        @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-600">Tipo / Relación de división</label>
                        <select name="tipo" class="form-select @error('tipo') is-invalid @enderror" required>
                            <option value="">— Seleccionar —</option>
                            @foreach(['1:2','1:4','1:8','1:16','1:32'] as $t)
                            <option value="{{ $t }}" {{ old('tipo') === $t ? 'selected' : '' }}>{{ $t }}</option>
                            @endforeach
                        </select>
                        @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-600">Puerto ODF de entrada <small class="text-muted">(opcional)</small></label>
                        <select name="odf_port_id" class="form-select @error('odf_port_id') is-invalid @enderror">
                            <option value="">— Sin asignar —</option>
                            @php $curOdf = null; @endphp
                            @foreach($odfPortsLibres as $p)
                                @if($curOdf !== $p->odf_numero)
                                    @if($curOdf !== null)</optgroup>@endif
                                    <optgroup label="ODF{{ $p->odf_numero }}">
                                    @php $curOdf = $p->odf_numero; @endphp
                                @endif
                                <option value="{{ $p->id }}" {{ old('odf_port_id') == $p->id ? 'selected' : '' }}>
                                    {{ $p->etiqueta }}
                                </option>
                            @endforeach
                            @if($curOdf !== null)</optgroup>@endif
                        </select>
                        @error('odf_port_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div class="form-text">Solo se muestran puertos ODF libres sin splitter asignado.</div>
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-nf-primary">
                            <i class="bi bi-check-circle me-2"></i>Crear Splitter
                        </button>
                        <a href="{{ route('equipos.splitter.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header py-3">
                <i class="bi bi-info-circle me-2" style="color:var(--nf-purple)"></i>Información
            </div>
            <div class="card-body small">
                <p class="mb-2">El splitter recibe una señal del ODF y la divide en N salidas.</p>
                <table class="table table-sm table-borderless mb-0">
                    <thead><tr><th>Tipo</th><th>Salidas creadas</th></tr></thead>
                    <tbody>
                        @foreach(['1:2'=>2,'1:4'=>4,'1:8'=>8,'1:16'=>16,'1:32'=>32] as $t=>$n)
                        <tr><td><span class="badge" style="background:var(--nf-purple)">{{ $t }}</span></td><td>{{ $n }} puertos</td></tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection