@extends('layouts.app')

@section('title', 'Vías')
@section('page-title', 'Vías / Subcentros')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
<li class="breadcrumb-item active">Vías / Subcentros</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .catalogo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
    .catalogo-title { display: flex; align-items: center; gap: 0.75rem; }
    .catalogo-title-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: #0891b2; }
    .catalogo-title h2 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #1a3a5c; }
    .catalogo-table-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .catalogo-table { width: 100%; margin: 0; border-collapse: collapse; }
    .catalogo-table thead { background: #f8fafc; }
    .catalogo-table th { padding: 0.875rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; }
    .catalogo-table td { padding: 0.875rem 1rem; font-size: 0.9rem; color: #475569; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .catalogo-table tbody tr:hover { background: #fafbfc; }
    .catalogo-table tbody tr:last-child td { border-bottom: none; }
    .estado-badge { padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
    .estado-badge.activo { background: rgba(5, 150, 105, 0.1); color: #059669; }
    .estado-badge.inactivo { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
    .centro-info { display: flex; flex-direction: column; gap: 0.125rem; }
    .centro-info .nombre { font-weight: 500; color: #1a3a5c; }
    .centro-info .concesion { font-size: 0.75rem; color: #94a3b8; }
    .btn-action { padding: 0.375rem 0.625rem; font-size: 0.75rem; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; transition: all 0.15s; border: 1px solid #e2e8f0; background: #fff; color: #64748b; }
    .btn-action:hover { background: #f8fafc; color: #1a3a5c; border-color: #cbd5e1; }
    .btn-action.editar:hover { background: rgba(59, 130, 246, 0.05); color: #2563eb; border-color: #3b82f6; }
    .actions-cell { display: flex; gap: 0.375rem; }
    .empty-state { text-align: center; padding: 3rem 2rem; color: #94a3b8; }
    .empty-state i { font-size: 2.5rem; margin-bottom: 1rem; color: #e2e8f0; }
    .catalogo-footer { padding: 1rem; border-top: 1px solid #e2e8f0; background: #fafbfc; }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    <div class="catalogo-header">
        <div class="catalogo-title">
            <div class="catalogo-title-icon"><i class="fas fa-arrows-alt-h"></i></div>
            <h2>Vías / Subcentros</h2>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('web.catalogos.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Volver</a>
            <a href="{{ route('web.catalogos.vias.create') }}" class="btn btn-success"><i class="fas fa-plus me-1"></i> Nueva Vía</a>
        </div>
    </div>

    <div class="filtros-card mb-3">
        <form action="{{ route('web.catalogos.vias') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Buscar</label>
                <input type="text" name="buscar" class="form-control form-control-sm" placeholder="Nombre..." value="{{ request('buscar') }}">
            </div>
            <div class="filtro-grupo">
                <label class="filtro-label">Centro/Peaje</label>
                <select name="centro" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($centros as $centro)
                    <option value="{{ $centro->id_centro }}" {{ request('centro') == $centro->id_centro ? 'selected' : '' }}>
                        {{ $centro->nombre_centro }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="1" {{ request('estado') === '1' ? 'selected' : '' }}>Activo</option>
                    <option value="0" {{ request('estado') === '0' ? 'selected' : '' }}>Inactivo</option>
                </select>
            </div>
            <div class="filtro-acciones">
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search me-1"></i> Filtrar</button>
                <a href="{{ route('web.catalogos.vias') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times me-1"></i> Limpiar</a>
            </div>
        </form>
    </div>

    <div class="catalogo-table-container">
        @if($items->count() > 0)
        <table class="catalogo-table">
            <thead>
                <tr>
                    <th>Nombre Vía</th>
                    <th>Centro / Peaje</th>
                    <th style="width: 90px;">Estado</th>
                    <th style="width: 120px;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $item)
                <tr>
                    <td><strong>{{ $item->nombre }}</strong></td>
                    <td>
                        <div class="centro-info">
                            <span class="nombre">{{ $item->centro->nombre_centro ?? '-' }}</span>
                            <span class="concesion">{{ $item->centro->concesion->nombre ?? '' }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="estado-badge {{ $item->estado == 1 ? 'activo' : 'inactivo' }}">
                            {{ $item->estado == 1 ? 'Activo' : 'Inactivo' }}
                        </span>
                    </td>
                    <td>
                        <div class="actions-cell">
                            <a href="{{ route('web.catalogos.vias.edit', $item->via_id) }}" class="btn-action editar"><i class="fas fa-edit"></i></a>
                            <form action="{{ route('web.catalogos.vias.toggle', $item->via_id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn-action"><i class="fas fa-power-off"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($items->hasPages())
        <div class="catalogo-footer">{{ $items->links() }}</div>
        @endif
        @else
        <div class="empty-state">
            <i class="fas fa-arrows-alt-h"></i>
            <h4>No hay vías registradas</h4>
            <p>Crea una nueva vía para comenzar.</p>
        </div>
        @endif
    </div>
</div>
@endsection