@extends('layouts.app')

@section('title', 'Conexiones FTTH')

@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">Conexiones OLT → EDFA → ODF</h5>
        <small class="text-muted">{{ $conexiones->total() }} conexiones registradas</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('conexiones.export.excel', request()->query()) }}" class="btn btn-sm btn-success">
            <i class="bi bi-file-earmark-excel me-1"></i>Excel
        </a>
        <a href="{{ route('conexiones.export.pdf', request()->query()) }}" class="btn btn-sm btn-danger">
            <i class="bi bi-file-earmark-pdf me-1"></i>PDF
        </a>
        <a href="{{ route('conexiones.rotulos') }}" class="btn btn-sm btn-warning" target="_blank">
            <i class="bi bi-tag-fill me-1"></i>Rótulos
        </a>
        <a href="{{ route('conexiones.create') }}" class="btn btn-nf-primary btn-sm">
            <i class="bi bi-plus-circle me-1"></i>Nueva Conexión
        </a>
    </div>
</div>

{{-- FILTROS --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('conexiones.index') }}" class="row g-2 align-items-end">
            <div class="col-6 col-md-2">
                <label class="form-label small mb-1 fw-600">SLOT OLT</label>
                <select name="slot_olt" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($slots as $s)
                        <option value="{{ $s }}" {{ request('slot_olt') == $s ? 'selected' : '' }}>S{{ sprintf('%02d',$s) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small mb-1 fw-600">EDFA</label>
                <select name="edfa" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($edfas as $e)
                        <option value="{{ $e }}" {{ request('edfa') == $e ? 'selected' : '' }}>EDFA{{ $e }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small mb-1 fw-600">ODF</label>
                <select name="odf" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($odfs as $o)
                        <option value="{{ $o }}" {{ request('odf') == $o ? 'selected' : '' }}>ODF{{ $o }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small mb-1 fw-600">Zona</label>
                <input type="text" name="zona" class="form-control form-control-sm"
                       placeholder="Zona..." value="{{ request('zona') }}">
            </div>
            <div class="col-12 col-md-3">
                <label class="form-label small mb-1 fw-600">Búsqueda Global</label>
                <input type="text" name="search" class="form-control form-control-sm"
                       placeholder="Cliente, etiqueta, OLT, EDFA, ODF..."
                       value="{{ request('search') }}">
            </div>
            <div class="col-12 col-md-1 d-flex gap-1">
                <button type="submit" class="btn btn-nf-primary btn-sm flex-fill">
                    <i class="bi bi-search"></i>
                </button>
                <a href="{{ route('conexiones.index') }}" class="btn btn-outline-secondary btn-sm flex-fill">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- TABLE --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-nextfiber mb-0">
                <thead>
                    @php
                        function sortUrl(string $col, string $currentSort, string $currentDir): string {
                            $newDir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc';
                            return request()->fullUrlWithQuery(['sort' => $col, 'dir' => $newDir, 'page' => 1]);
                        }
                        function sortIcon(string $col, string $currentSort, string $currentDir): string {
                            if ($currentSort !== $col) return '<i class="bi bi-arrow-down-up opacity-50 ms-1" style="font-size:0.7rem"></i>';
                            return $currentDir === 'asc'
                                ? '<i class="bi bi-sort-up ms-1" style="font-size:0.7rem"></i>'
                                : '<i class="bi bi-sort-down ms-1" style="font-size:0.7rem"></i>';
                        }
                    @endphp
                    <tr>
                        <th><a href="{{ sortUrl('id',$sort,$dir) }}" class="text-white text-decoration-none">#&nbsp;{!! sortIcon('id',$sort,$dir) !!}</a></th>
                        <th><a href="{{ sortUrl('etiqueta',$sort,$dir) }}" class="text-white text-decoration-none">Etiqueta{!! sortIcon('etiqueta',$sort,$dir) !!}</a></th>
                        <th>OLT</th>
                        <th>EDFA</th>
                        <th>ODF</th>
                        <th>NAP</th>
                        <th><a href="{{ sortUrl('cliente',$sort,$dir) }}" class="text-white text-decoration-none">Cliente{!! sortIcon('cliente',$sort,$dir) !!}</a></th>
                        <th><a href="{{ sortUrl('zona',$sort,$dir) }}" class="text-white text-decoration-none">Zona{!! sortIcon('zona',$sort,$dir) !!}</a></th>
                        <th><a href="{{ sortUrl('fecha',$sort,$dir) }}" class="text-white text-decoration-none">Fecha{!! sortIcon('fecha',$sort,$dir) !!}</a></th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($conexiones as $c)
                    <tr>
                        <td class="text-muted small">{{ $c->id }}</td>
                        <td>
                            <code class="fw-bold" style="font-size:0.8rem;">{{ $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>
                            @if($c->cajaNapPort)
                                <span class="badge" style="background:var(--nf-purple);color:#fff;font-size:0.75rem">
                                    NAP-{{ $c->cajaNapPort->cajaNap->nombre }}-P{{ sprintf('%02d',$c->cajaNapPort->numero) }}
                                </span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>{{ $c->cliente ?? '—' }}</td>
                        <td>
                            @if($c->zona)
                                <span class="badge-zona">{{ $c->zona }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-muted small">{{ $c->fecha?->format('d/m/Y') ?? '—' }}</td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('conexiones.show', $c) }}" class="btn btn-sm btn-outline-secondary" title="Ver">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('conexiones.edit', $c) }}" class="btn btn-sm btn-nf-secondary" title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form method="POST" action="{{ route('conexiones.destroy', $c) }}"
                                      onsubmit="return confirm('¿Eliminar esta conexión?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" title="Eliminar">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                            <strong>Sin resultados</strong><br>
                            <small>No se encontraron conexiones con los filtros aplicados.</small>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($conexiones->hasPages())
    <div class="card-footer d-flex align-items-center justify-content-between">
        <small class="text-muted">
            Mostrando {{ $conexiones->firstItem() }}–{{ $conexiones->lastItem() }}
            de {{ $conexiones->total() }} conexiones
        </small>
        {{ $conexiones->links() }}
    </div>
    @endif
</div>
@endsection