@extends('layouts.app')

@section('title', 'Nueva Conexión')

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h5 class="mb-0 fw-bold">Nueva Conexión FTTH</h5>
        <small class="text-muted">OLT → EDFA → ODF → Splitter → Caja NAP → Cliente</small>
    </div>
    <a href="{{ route('conexiones.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-header py-3">
                <i class="bi bi-diagram-3 me-2" style="color:var(--nf-purple)"></i>
                Configurar Enlace
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('conexiones.store') }}" id="conexionForm">
                    @csrf

                    @if($errors->any())
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    {{-- OLT --}}
                    <div class="mb-3">
                        <label class="form-label fw-600">
                            <span class="badge-olt me-1">OLT</span> Puerto OLT
                        </label>
                        <select name="olt_port_id" class="form-select @error('olt_port_id') is-invalid @enderror"
                                required onchange="updatePreview()">
                            <option value="">— Seleccionar puerto OLT libre —</option>
                            @php $currentSlot = null; @endphp
                            @foreach($oltPorts as $p)
                                @if($currentSlot !== $p->slot)
                                    @if($currentSlot !== null) </optgroup> @endif
                                    <optgroup label="SLOT {{ sprintf('%02d', $p->slot) }}">
                                    @php $currentSlot = $p->slot; @endphp
                                @endif
                                <option value="{{ $p->id }}" {{ old('olt_port_id') == $p->id ? 'selected' : '' }}
                                        data-label="{{ $p->etiqueta }}">
                                    {{ $p->etiqueta }}
                                </option>
                            @endforeach
                            @if($currentSlot !== null) </optgroup> @endif
                        </select>
                        @error('olt_port_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- EDFA --}}
                    <div class="mb-3">
                        <label class="form-label fw-600">
                            <span class="badge-edfa me-1">EDFA</span> Puerto EDFA
                        </label>
                        <select name="edfa_port_id" class="form-select @error('edfa_port_id') is-invalid @enderror"
                                required onchange="updatePreview()">
                            <option value="">— Seleccionar puerto EDFA libre —</option>
                            @php $currentEdfa = null; @endphp
                            @foreach($edfaPorts as $p)
                                @if($currentEdfa !== $p->edfa_numero)
                                    @if($currentEdfa !== null) </optgroup> @endif
                                    <optgroup label="EDFA{{ $p->edfa_numero }}">
                                    @php $currentEdfa = $p->edfa_numero; @endphp
                                @endif
                                <option value="{{ $p->id }}" {{ old('edfa_port_id') == $p->id ? 'selected' : '' }}
                                        data-label="{{ $p->etiqueta }}">
                                    {{ $p->etiqueta }}
                                </option>
                            @endforeach
                            @if($currentEdfa !== null) </optgroup> @endif
                        </select>
                        @error('edfa_port_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- ODF --}}
                    <div class="mb-3">
                        <label class="form-label fw-600">
                            <span class="badge-odf me-1">ODF</span> Puerto ODF
                        </label>
                        <select name="odf_port_id" class="form-select @error('odf_port_id') is-invalid @enderror"
                                required onchange="updatePreview()">
                            <option value="">— Seleccionar puerto ODF libre —</option>
                            @php $currentOdf = null; @endphp
                            @foreach($odfPorts as $p)
                                @if($currentOdf !== $p->odf_numero)
                                    @if($currentOdf !== null) </optgroup> @endif
                                    <optgroup label="ODF{{ $p->odf_numero }}">
                                    @php $currentOdf = $p->odf_numero; @endphp
                                @endif
                                <option value="{{ $p->id }}" {{ old('odf_port_id') == $p->id ? 'selected' : '' }}
                                        data-label="{{ $p->etiqueta }}">
                                    {{ $p->etiqueta }}
                                </option>
                            @endforeach
                            @if($currentOdf !== null) </optgroup> @endif
                        </select>
                        @error('odf_port_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Caja NAP --}}
                    <div class="mb-3">
                        <label class="form-label fw-600">
                            <span class="badge me-1" style="background:var(--nf-purple)">NAP</span>
                            Puerto Caja NAP <small class="text-muted">(opcional)</small>
                        </label>
                        <select name="caja_nap_port_id" class="form-select @error('caja_nap_port_id') is-invalid @enderror"
                                onchange="updatePreview()">
                            <option value="">— Sin asignar —</option>
                            @php $curNap = null; @endphp
                            @foreach($napPorts as $p)
                                @if($curNap !== $p->cajaNap->nombre)
                                    @if($curNap !== null)</optgroup>@endif
                                    <optgroup label="NAP-{{ $p->cajaNap->nombre }}{{ $p->cajaNap->zona ? ' ('.$p->cajaNap->zona.')' : '' }}">
                                    @php $curNap = $p->cajaNap->nombre; @endphp
                                @endif
                                <option value="{{ $p->id }}" {{ old('caja_nap_port_id') == $p->id ? 'selected' : '' }}
                                        data-label="NAP-{{ $p->cajaNap->nombre }}-P{{ sprintf('%02d',$p->numero) }}">
                                    Puerto {{ sprintf('%02d', $p->numero) }}
                                </option>
                            @endforeach
                            @if($curNap !== null)</optgroup>@endif
                        </select>
                        @error('caja_nap_port_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <hr>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-600">Cliente</label>
                            <input type="text" name="cliente" class="form-control"
                                   value="{{ old('cliente') }}" placeholder="Nombre del cliente">
                        </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, Zona A...">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Fecha de instalación</label>
                            <input type="date" name="fecha" class="form-control"
                                   value="{{ old('fecha', now()->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-600">Notas</label>
                            <textarea name="notas" class="form-control" rows="2"
                                      placeholder="Observaciones...">{{ old('notas') }}</textarea>
                        </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 Conexión
                        </button>
                        <a href="{{ route('conexiones.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Preview --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header py-3">
                <i class="bi bi-eye me-2" style="color:var(--nf-purple)"></i>
                Vista Previa del Enlace
            </div>
            <div class="card-body text-center">
                <div id="previewOlt" class="badge-olt d-inline-block p-2 mb-2" style="font-size:0.95rem;">
                    OLT1-S??-P??
                </div>
                <div class="text-muted my-1"><i class="bi bi-arrow-down-circle-fill" style="color:var(--nf-purple)"></i></div>
                <div id="previewEdfa" class="badge-edfa d-inline-block p-2 mb-2" style="font-size:0.95rem;">
                    EDFA?-P??
                </div>
                <div class="text-muted my-1"><i class="bi bi-arrow-down-circle-fill" style="color:var(--nf-purple)"></i></div>
                <div id="previewOdf" class="badge-odf d-inline-block p-2 mb-2" style="font-size:0.95rem;">
                    ODF?-P??
                </div>
                <div class="text-muted my-1"><i class="bi bi-arrow-down-circle-fill" style="color:var(--nf-purple)"></i></div>
                <div id="previewNap" class="badge d-inline-block p-2 mb-2" style="font-size:0.95rem;background:var(--nf-purple);color:#fff;">
                    NAP (opcional)
                </div>
                <hr>
                <p class="small text-muted mb-1">Etiqueta generada:</p>
                <code id="previewEtiqueta" class="d-block p-2 rounded" style="background:#f8f4fa;font-size:0.9rem;">
                    —
                </code>
            </div>
        </div>

        <div class="card mt-3">
            <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-1"><strong>Formato OLT:</strong> OLT1-SXX-PXX</p>
                <p class="mb-1"><strong>Formato EDFA:</strong> EDFA#-PXX</p>
                <p class="mb-1"><strong>Formato ODF:</strong> ODF#-PXX o ODF#-SXX-PXX</p>
                <hr class="my-2">
                <p class="mb-1 text-muted">Solo se muestran puertos <span class="badge bg-success">libres</span></p>
                <p class="mb-0 text-muted">La etiqueta se genera automáticamente.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function getSelectedLabel(selectId) {
    const sel = document.querySelector(selectId);
    if (!sel || !sel.value) return null;
    return sel.options[sel.selectedIndex]?.getAttribute('data-label');
}

function updatePreview() {
    const olt  = getSelectedLabel('[name="olt_port_id"]')       || 'OLT1-S??-P??';
    const edfa = getSelectedLabel('[name="edfa_port_id"]')      || 'EDFA?-P??';
    const odf  = getSelectedLabel('[name="odf_port_id"]')       || 'ODF?-P??';
    const nap  = getSelectedLabel('[name="caja_nap_port_id"]')  || null;

    document.getElementById('previewOlt').textContent  = olt;
    document.getElementById('previewEdfa').textContent = edfa;
    document.getElementById('previewOdf').textContent  = odf;
    if (nap) {
        document.getElementById('previewNap').textContent = nap;
        document.getElementById('previewNap').style.opacity = '1';
    } else {
        document.getElementById('previewNap').textContent = 'NAP (opcional)';
        document.getElementById('previewNap').style.opacity = '0.4';
    }

    // Generate label preview
    if (olt !== 'OLT1-S??-P??' && edfa !== 'EDFA?-P??' && odf !== 'ODF?-P??') {
        const oltParts  = olt.match(/S(\d+)-P(\d+)/);
        const edfaParts = edfa.match(/EDFA(\d+)-P(\d+)/);

        let label = '—';
        if (oltParts && edfaParts) {
            const oltPart  = `S${oltParts[1].padStart(2,'0')}P${oltParts[2].padStart(2,'0')}`;
            const edfaPart = `E${edfaParts[1]}P${edfaParts[2].padStart(2,'0')}`;
            label = `${oltPart}-${edfaPart}-${odf.replace(/[^A-Z0-9]/g, '')}`;
        }
        document.getElementById('previewEtiqueta').textContent = label;
    } else {
        document.getElementById('previewEtiqueta').textContent = '—';
    }
}
</script>
@endpush