@extends('layouts.app')
@section('title', 'Gestión Cajas NAP')
@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-box-seam-fill me-2" style="color:var(--nf-purple)"></i>Gestión Cajas NAP</h5>
        <small class="text-muted">{{ $cajas->count() }} cajas registradas</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('mapa-geo.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-map me-1"></i>Ver Mapa
        </a>
        <a href="{{ route('equipos.caja-nap.create') }}" class="btn btn-nf-primary btn-sm">
            <i class="bi bi-plus-circle me-1"></i>Agregar Caja NAP
        </a>
    </div>
</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>

@if($cajas->isEmpty())
<div class="card">
    <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-box-seam fs-1 d-block mb-2 opacity-25"></i>
        Sin cajas NAP. <a href="{{ route('equipos.caja-nap.create') }}">Agrega la primera.</a>
    </div>
</div>
@else
@foreach($cajas as $c)
@php
    $total  = $c->ports->count();
    $usados = $c->ports->where('estado','ocupado')->count();
    $pct    = $total > 0 ? round(($usados/$total)*100) : 0;
@endphp
<div class="card mb-3">
    <div class="card-header d-flex align-items-center justify-content-between py-2 flex-wrap gap-2">
        <span class="fw-bold">
            <i class="bi bi-box-seam me-1"></i> NAP-{{ $c->nombre }}
            <span class="badge ms-2" style="background:var(--nf-purple)">{{ $total }} puertos</span>
            <span class="badge bg-success ms-1">{{ $total - $usados }} libres</span>
            @if($usados)
            <span class="badge bg-danger ms-1">{{ $usados }} ocupados</span>
            @endif
            @if($c->zona)
            <span class="badge-zona ms-1">{{ $c->zona }}</span>
            @endif
        </span>
        <div class="d-flex align-items-center gap-2">
            <div class="small text-muted">
                @if($c->splitterPort)
                    <i class="bi bi-diagram-2 me-1"></i>{{ $c->splitterPort->splitter->nombre }} S{{ $c->splitterPort->numero }}
                @else
                    <span class="fst-italic">Sin splitter</span>
                @endif
            </div>
            @if($c->lat && $c->lng)
            <span class="badge bg-info text-dark" title="Lat: {{ $c->lat }}, Lng: {{ $c->lng }}">
                <i class="bi bi-geo-alt-fill"></i> GPS
            </span>
            @endif
            <form method="POST" action="{{ route('equipos.caja-nap.destroy', $c) }}"
                  onsubmit="return confirm('¿Eliminar caja NAP {{ $c->nombre }}?')">
                @csrf @method('DELETE')
                <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i>Eliminar</button>
            </form>
        </div>
    </div>
    <div class="card-body p-2">
        @if($c->direccion)
        <div class="small text-muted mb-2"><i class="bi bi-pin-map me-1"></i>{{ $c->direccion }}</div>
        @endif
        <div class="d-flex align-items-center justify-content-between mb-1 small px-1">
            <span class="text-muted">Ocupación: {{ $usados }}/{{ $total }}</span>
            <span class="text-muted">{{ $pct }}%</span>
        </div>
        <div class="progress mb-2" style="height:4px">
            <div class="progress-bar nf-bar" style="width:{{ $pct }}%"></div>
        </div>
        <div class="d-flex flex-wrap gap-1 mt-2">
            @foreach($c->ports as $p)
            <button class="port-btn-eq {{ $p->estado }}"
                    title="P{{ sprintf('%02d',$p->numero) }} — {{ $p->estado }}"
                    @if($p->estado === 'ocupado')
                        onclick="eqShowPortInfo('nap', {{ $p->id }}, this)"
                    @else
                        style="cursor:default"
                    @endif>
                {{ sprintf('%02d', $p->numero) }}
            </button>
            @endforeach
        </div>
    </div>
</div>
@endforeach
@endif

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