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

<div class="d-flex align-items-center justify-content-between mb-4">
    <h5 class="mb-0 fw-bold"><i class="bi bi-box-seam me-2" style="color:var(--nf-purple)"></i>Agregar Caja NAP</h5>
    <a href="{{ route('equipos.caja-nap.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-8">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('equipos.caja-nap.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="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-600">Nombre de la Caja NAP</label>
                            <input type="text" name="nombre" class="form-control @error('nombre') is-invalid @enderror"
                                   value="{{ old('nombre') }}" placeholder="Ej: NAP-01, NAP-NORTE-A" required>
                            @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Cantidad de puertos</label>
                            <select name="num_puertos" class="form-select @error('num_puertos') is-invalid @enderror" required>
                                @foreach([4,8,16,24,32] as $n)
                                <option value="{{ $n }}" {{ old('num_puertos','16') == $n ? 'selected' : '' }}>{{ $n }} puertos</option>
                                @endforeach
                            </select>
                            @error('num_puertos')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Salida de Splitter <small class="text-muted">(opcional)</small></label>
                            <select name="splitter_port_id" class="form-select @error('splitter_port_id') is-invalid @enderror">
                                <option value="">— Sin asignar —</option>
                                @php $curSpl = null; @endphp
                                @foreach($splitterPortsLibres as $p)
                                    @if($curSpl !== $p->splitter->nombre)
                                        @if($curSpl !== null)</optgroup>@endif
                                        <optgroup label="Splitter: {{ $p->splitter->nombre }} ({{ $p->splitter->tipo }})">
                                        @php $curSpl = $p->splitter->nombre; @endphp
                                    @endif
                                    <option value="{{ $p->id }}" {{ old('splitter_port_id') == $p->id ? 'selected' : '' }}>
                                        Salida {{ $p->numero }}
                                    </option>
                                @endforeach
                                @if($curSpl !== null)</optgroup>@endif
                            </select>
                            @error('splitter_port_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Zona</label>
                            <input type="text" name="zona" class="form-control"
                                   value="{{ old('zona') }}" placeholder="Ej: Norte, Sector B...">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-600">Dirección / Ubicación</label>
                            <input type="text" name="direccion" class="form-control"
                                   value="{{ old('direccion') }}" placeholder="Calle, esquina, referencia...">
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-bold mb-3"><i class="bi bi-geo-alt me-2" style="color:var(--nf-purple)"></i>Coordenadas GPS <small class="text-muted fw-normal">(para el mapa)</small></h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-600">Latitud</label>
                            <input type="number" step="0.0000001" name="lat" class="form-control @error('lat') is-invalid @enderror"
                                   value="{{ old('lat') }}" placeholder="-12.0464">
                            @error('lat')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Longitud</label>
                            <input type="number" step="0.0000001" name="lng" class="form-control @error('lng') is-invalid @enderror"
                                   value="{{ old('lng') }}" placeholder="-77.0428">
                            @error('lng')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </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 Caja NAP
                        </button>
                        <a href="{{ route('equipos.caja-nap.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header py-3">
                <i class="bi bi-map me-2" style="color:var(--nf-purple)"></i>Ayuda de Coordenadas
            </div>
            <div class="card-body small">
                <p class="mb-2">Para obtener las coordenadas GPS:</p>
                <ol class="ps-3 mb-2">
                    <li>Abre Google Maps</li>
                    <li>Click derecho en la ubicación de la caja</li>
                    <li>Copia los números que aparecen (Lat, Lng)</li>
                </ol>
                <p class="mb-0 text-muted">Las coordenadas son opcionales. Puedes agregarlas después editando la caja.</p>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header py-3">
                <i class="bi bi-diagram-3 me-2" style="color:var(--nf-purple)"></i>Topología
            </div>
            <div class="card-body small text-center">
                <div class="badge-olt px-2 py-1 mb-1 d-block">OLT</div>
                <div class="text-muted small">↓</div>
                <div class="badge-edfa px-2 py-1 mb-1 d-block">EDFA</div>
                <div class="text-muted small">↓</div>
                <div class="badge-odf px-2 py-1 mb-1 d-block">ODF</div>
                <div class="text-muted small">↓</div>
                <div class="badge bg-secondary px-2 py-1 mb-1 d-block">Splitter</div>
                <div class="text-muted small">↓</div>
                <div class="badge" style="background:var(--nf-purple);padding:4px 8px;" >Caja NAP ← Aquí</div>
                <div class="text-muted small">↓</div>
                <div class="badge bg-dark px-2 py-1 d-block">Cliente</div>
            </div>
        </div>
    </div>
</div>
@endsection