@extends('layouts.app')
@section('title', 'Gestión OLT')
@section('content')

<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h5 class="mb-0 fw-bold"><i class="bi bi-router-fill me-2" style="color:var(--nf-purple)"></i>Gestión OLT</h5>
        <small class="text-muted">
            {{ $olts->flatten(2)->count() }} puertos en
            {{ $olts->sum(fn($slots) => $slots->count()) }} slots ·
            {{ $olts->count() }} equipo(s) OLT
        </small>
    </div>
    <a href="{{ route('equipos.olt.create') }}" class="btn btn-nf-primary btn-sm">
        <i class="bi bi-plus-circle me-1"></i>Agregar Slot / Puertos
    </a>
</div>

{{-- Leyenda --}}
<div class="d-flex gap-3 mb-3 align-items-center flex-wrap">
    <span style="font-size:0.8rem;color:var(--text-muted)">
        <span class="port-btn-eq libre d-inline-flex me-1" style="width:20px;height:14px;border-radius:3px;vertical-align:middle;cursor:default;"></span> Libre
    </span>
    <span style="font-size:0.8rem;color:var(--text-muted)">
        <span class="port-btn-eq ocupado d-inline-flex me-1" style="width:20px;height:14px;border-radius:3px;vertical-align:middle;cursor:default;"></span> Ocupado — clic para ver conexión
    </span>
</div>

{{-- Stats por OLT --}}
@foreach($stats as $oltNum => $statsOlt)
<div class="mb-2">
    <p class="fw-bold small mb-1" style="color:var(--nf-purple)">
        <i class="bi bi-router me-1"></i> OLT{{ $oltNum }} — Nodo {{ $oltNum }}
    </p>
    <div class="row g-2 mb-3">
        @foreach($statsOlt as $s)
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card text-center p-2">
                <div class="fw-bold" style="color:var(--nf-purple)">S{{ sprintf('%02d', $s->slot) }}</div>
                <div class="small text-muted">{{ $s->usados }}/{{ $s->total }}</div>
                <div class="progress mt-1" style="height:5px">
                    <div class="progress-bar nf-bar" style="width:{{ $s->total > 0 ? round(($s->usados/$s->total)*100) : 0 }}%"></div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endforeach

{{-- Slots por OLT --}}
@forelse($olts as $oltNum => $slots)
<div class="mb-4">
    <h6 class="fw-bold py-2 px-3 rounded mb-2" style="background:var(--nf-purple);color:#fff;font-size:0.85rem;">
        <i class="bi bi-router me-2"></i>OLT{{ $oltNum }} — Nodo {{ $oltNum }}
        <span class="badge bg-light text-dark ms-2">{{ $slots->flatten()->count() }} puertos</span>
    </h6>

    @foreach($slots as $slot => $puertos)
    <div class="card mb-2">
        <div class="card-header d-flex align-items-center justify-content-between py-2">
            <span class="fw-bold">
                <i class="bi bi-layers me-1"></i>
                SLOT {{ sprintf('%02d', $slot) }}
                <span class="badge ms-2" style="background:var(--nf-purple)">{{ $puertos->count() }} puertos</span>
                <span class="badge bg-success ms-1">{{ $puertos->where('estado','libre')->count() }} libres</span>
                @if($puertos->where('estado','ocupado')->count())
                <span class="badge bg-danger ms-1">{{ $puertos->where('estado','ocupado')->count() }} ocupados</span>
                @endif
            </span>
            <div class="d-flex gap-2">
                @if($puertos->where('estado','ocupado')->count())
                <a href="{{ route('conexiones.index', ['slot_olt' => $slot, 'olt_num' => $oltNum]) }}"
                   class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-diagram-3 me-1"></i>Ver conexiones
                </a>
                @endif
                <form method="POST" action="{{ route('equipos.olt.destroy-slot') }}"
                      onsubmit="return confirm('¿Eliminar SLOT {{ sprintf('%02d',$slot) }} de OLT{{ $oltNum }}?')">
                    @csrf @method('DELETE')
                    <input type="hidden" name="olt_numero" value="{{ $oltNum }}">
                    <input type="hidden" name="slot" value="{{ $slot }}">
                    <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i>Eliminar Slot</button>
                </form>
            </div>
        </div>
        <div class="card-body p-2">
            <div class="d-flex flex-wrap gap-1">
                @foreach($puertos as $p)
                <button class="port-btn-eq {{ $p->estado }}"
                        title="{{ $p->etiqueta }} — {{ $p->estado }}"
                        @if($p->estado === 'ocupado')
                            onclick="eqShowPortInfo('olt', {{ $p->id }}, this)"
                        @else
                            style="cursor:default"
                        @endif>
                    {{ sprintf('%02d', $p->pon) }}
                </button>
                @endforeach
            </div>
        </div>
    </div>
    @endforeach
</div>
@empty
<div class="card">
    <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-router fs-1 d-block mb-2 opacity-25"></i>
        Sin puertos OLT. <a href="{{ route('equipos.olt.create') }}">Agrega el primer equipo.</a>
    </div>
</div>
@endforelse

@include('partials.port-tooltip')
@endsection