@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">{{ $slots->flatten()->count() }} puertos en {{ $slots->count() }} slots</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 --}}
<div class="row g-2 mb-4">
    @foreach($stats 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>

{{-- Slots --}}
@foreach($slots as $slot => $puertos)
<div class="card mb-3">
    <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]) }}"
               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 todo el SLOT {{ sprintf('%02d',$slot) }}?')">
                @csrf @method('DELETE')
                <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

@if($slots->isEmpty())
<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 slot.</a>
    </div>
</div>
@endif

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