@extends('layouts.app')
@section('title', 'Gestión ODF')
@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-hdd-stack-fill me-2" style="color:var(--nf-purple)"></i>Gestión ODF</h5>
        <small class="text-muted">{{ $odfs->flatten()->count() }} puertos en {{ $odfs->count() }} equipos</small>
    </div>
    <a href="{{ route('equipos.odf.create') }}" class="btn btn-nf-primary btn-sm">
        <i class="bi bi-plus-circle me-1"></i>Agregar ODF / 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>

<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)">ODF{{ $s->odf_numero }}</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>

@foreach($odfs as $num => $puertos)
@php $tieneSlots = $puertos->first()->slot !== null; $porSlot = $tieneSlots ? $puertos->groupBy('slot') : collect([$puertos]); @endphp
<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-hdd-stack me-1"></i> ODF{{ $num }}
            @if($tieneSlots)<span class="badge bg-secondary ms-1">Con Slots</span>@endif
            <span class="badge ms-1" 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', ['odf' => $num]) }}"
               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.odf.destroy-odf') }}"
                  onsubmit="return confirm('Eliminar todo ODF{{ $num }}?')">
                @csrf @method('DELETE')
                <input type="hidden" name="odf_numero" value="{{ $num }}">
                <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($tieneSlots)
            @foreach($puertos->groupBy('slot') as $slot => $slotPuertos)
            <div class="mb-2">
                <small class="fw-bold text-muted">SLOT {{ sprintf('%02d',$slot) }}</small>
                <div class="d-flex flex-wrap gap-1 mt-1">
                    @foreach($slotPuertos as $p)
                    <button class="port-btn-eq {{ $p->estado }}"
                            title="{{ $p->etiqueta }} — {{ $p->estado }}"
                            @if($p->estado === 'ocupado')
                                onclick="eqShowPortInfo('odf', {{ $p->id }}, this)"
                            @else
                                style="cursor:default"
                            @endif>
                        P{{ sprintf('%02d',$p->puerto) }}
                    </button>
                    @endforeach
                </div>
            </div>
            @endforeach
        @else
            <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('odf', {{ $p->id }}, this)"
                        @else
                            style="cursor:default"
                        @endif>
                    P{{ sprintf('%02d',$p->puerto) }}
                </button>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endforeach

@if($odfs->isEmpty())
<div class="card"><div class="card-body text-center py-5 text-muted">
    <i class="bi bi-hdd-stack fs-1 d-block mb-2 opacity-25"></i>
    Sin equipos ODF. <a href="{{ route('equipos.odf.create') }}">Agrega el primero.</a>
</div></div>
@endif

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