@extends('layouts.app')

@section('title', 'Peajes')
@section('page-title', 'Centros / Peajes')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
<li class="breadcrumb-item active">Centros / Peajes</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: #ea580c; }
    .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; }
    .mant-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
    .mant-badge.si { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
    .mant-badge.no { background: #f1f5f9; color: #94a3b8; }
    .num-badge { background: #1a3a5c; color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .count-badge { background: #e2e8f0; color: #475569; padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
    .concesion-tag { font-size: 0.75rem; color: #64748b; }
    .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-building"></i></div>
            <h2>Centros / Peajes</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.peajes.create') }}" class="btn btn-success"><i class="fas fa-plus me-1"></i> Nuevo Peaje</a>
        </div>
    </div>

    <div class="filtros-card mb-3">
        <form action="{{ route('web.catalogos.peajes') }}" 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 o número..." value="{{ request('buscar') }}">
            </div>
            <div class="filtro-grupo">
                <label class="filtro-label">Concesión</label>
                <select name="concesion" class="form-select form-select-sm">
                    <option value="">Todas</option>
                    @foreach($concesiones as $concesion)
                    <option value="{{ $concesion->id_concesion }}" {{ request('concesion') == $concesion->id_concesion ? 'selected' : '' }}>
                        {{ $concesion->nombre }}
                    </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.peajes') }}" 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 style="width: 60px;">Nº</th>
                    <th>Nombre</th>
                    <th>Concesión</th>
                    <th style="width: 80px;">Vías</th>
                    <th style="width: 80px;">Mant.</th>
                    <th style="width: 90px;">Estado</th>
                    <th style="width: 120px;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $item)
                <tr>
                    <td><span class="num-badge">{{ $item->num_peaje }}</span></td>
                    <td><strong>{{ $item->nombre_centro }}</strong></td>
                    <td><span class="concesion-tag">{{ $item->concesion->nombre ?? '-' }}</span></td>
                    <td><span class="count-badge">{{ $item->vias_count }}</span></td>
                    <td>
                        @if($item->mantenimiento)
                        <span class="mant-badge si"><i class="fas fa-check"></i> Sí</span>
                        @else
                        <span class="mant-badge no"><i class="fas fa-times"></i> No</span>
                        @endif
                    </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.peajes.edit', $item->id_centro) }}" class="btn-action editar"><i class="fas fa-edit"></i></a>
                            <form action="{{ route('web.catalogos.peajes.toggle', $item->id_centro) }}" 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-building"></i>
            <h4>No hay peajes registrados</h4>
            <p>Crea un nuevo peaje para comenzar.</p>
        </div>
        @endif
    </div>
</div>
@endsection