@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<!-- Stat Cards -->
<div class="row g-3 mb-4">
    {{-- OLT --}}
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="card-icon" style="background:#e8f5e9;">
                    <i class="bi bi-router-fill" style="color:#2e7d32;"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $usadosOlt }}<small class="text-muted fs-6">/{{ $totalOlt }}</small></div>
                    <div class="text-muted small">Puertos OLT</div>
                </div>
            </div>
            <div class="px-3 pb-2">
                <div class="progress">
                    <div class="progress-bar nf-bar" style="width:{{ $totalOlt > 0 ? round(($usadosOlt/$totalOlt)*100) : 0 }}%"></div>
                </div>
                <small class="text-muted">{{ $totalOlt > 0 ? round(($usadosOlt/$totalOlt)*100) : 0 }}% usado</small>
            </div>
        </div>
    </div>

    {{-- EDFA --}}
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="card-icon" style="background:#f3e5f5;">
                    <i class="bi bi-broadcast" style="color:#6a1b9a;"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $usadosEdfa }}<small class="text-muted fs-6">/{{ $totalEdfa }}</small></div>
                    <div class="text-muted small">Puertos EDFA</div>
                </div>
            </div>
            <div class="px-3 pb-2">
                <div class="progress">
                    <div class="progress-bar nf-bar" style="width:{{ $totalEdfa > 0 ? round(($usadosEdfa/$totalEdfa)*100) : 0 }}%"></div>
                </div>
                <small class="text-muted">{{ $totalEdfa > 0 ? round(($usadosEdfa/$totalEdfa)*100) : 0 }}% usado</small>
            </div>
        </div>
    </div>

    {{-- ODF --}}
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="card-icon" style="background:#e3f2fd;">
                    <i class="bi bi-hdd-stack-fill" style="color:#1565c0;"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $usadosOdf }}<small class="text-muted fs-6">/{{ $totalOdf }}</small></div>
                    <div class="text-muted small">Puertos ODF</div>
                </div>
            </div>
            <div class="px-3 pb-2">
                <div class="progress">
                    <div class="progress-bar nf-bar" style="width:{{ $totalOdf > 0 ? round(($usadosOdf/$totalOdf)*100) : 0 }}%"></div>
                </div>
                <small class="text-muted">{{ $totalOdf > 0 ? round(($usadosOdf/$totalOdf)*100) : 0 }}% usado</small>
            </div>
        </div>
    </div>

    {{-- Conexiones --}}
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="card-icon" style="background:#fff3e0;">
                    <i class="bi bi-link-45deg" style="color:#e65100;font-size:1.8rem;"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $totalConex }}</div>
                    <div class="text-muted small">Conexiones Activas</div>
                </div>
            </div>
            <div class="px-3 pb-2">
                <a href="{{ route('conexiones.create') }}" class="btn btn-nf-primary btn-sm w-100">
                    <i class="bi bi-plus-circle me-1"></i>Nueva
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    {{-- Uso por EDFA --}}
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2 py-3">
                <i class="bi bi-broadcast" style="color:var(--nf-purple)"></i>
                <span>Uso por EDFA</span>
            </div>
            <div class="card-body">
                @foreach($usoEdfa as $e)
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-600 small">EDFA{{ $e->edfa_numero }}</span>
                        <span class="small text-muted">{{ $e->usados }}/{{ $e->total }} puertos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar nf-bar"
                             style="width:{{ $e->total > 0 ? round(($e->usados/$e->total)*100) : 0 }}%">
                        </div>
                    </div>
                    <small class="text-muted">
                        {{ $e->total > 0 ? round(($e->usados/$e->total)*100) : 0 }}% —
                        {{ $e->total - $e->usados }} libres
                    </small>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Uso por ODF --}}
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2 py-3">
                <i class="bi bi-hdd-stack-fill" style="color:var(--nf-purple)"></i>
                <span>Uso por ODF</span>
            </div>
            <div class="card-body">
                @foreach($usoOdf as $o)
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-600 small">ODF{{ $o->odf_numero }}</span>
                        <span class="small text-muted">{{ $o->usados }}/{{ $o->total }} puertos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar nf-bar"
                             style="width:{{ $o->total > 0 ? round(($o->usados/$o->total)*100) : 0 }}%">
                        </div>
                    </div>
                    <small class="text-muted">
                        {{ $o->total > 0 ? round(($o->usados/$o->total)*100) : 0 }}% —
                        {{ $o->total - $o->usados }} libres
                    </small>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- Últimas conexiones --}}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between py-3">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-clock-history" style="color:var(--nf-purple)"></i>
            <span>Últimas Conexiones</span>
        </div>
        <a href="{{ route('conexiones.index') }}" class="btn btn-nf-secondary btn-sm">
            Ver todas <i class="bi bi-arrow-right ms-1"></i>
        </a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-nextfiber mb-0">
                <thead>
                    <tr>
                        <th>Etiqueta</th>
                        <th>OLT</th>
                        <th>EDFA</th>
                        <th>ODF</th>
                        <th>Cliente</th>
                        <th>Zona</th>
                        <th>Fecha</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ultimasConexiones as $c)
                    <tr>
                        <td><code class="text-dark fw-bold">{{ $c->etiqueta }}</code></td>
                        <td><span class="badge-olt">{{ $c->oltPort?->etiqueta }}</span></td>
                        <td><span class="badge-edfa">{{ $c->edfaPort?->etiqueta }}</span></td>
                        <td><span class="badge-odf">{{ $c->odfPort?->etiqueta }}</span></td>
                        <td>{{ $c->cliente ?? '—' }}</td>
                        <td>{{ $c->zona ? '<span class="badge-zona">'.$c->zona.'</span>' : '—' }}</td>
                        <td>{{ $c->fecha?->format('d/m/Y') ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-2 d-block mb-2 opacity-50"></i>
                            Sin conexiones registradas
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection