@extends('layouts.app')

@section('title', 'Inventario de Equipos')
@section('page-title', 'Inventario de Equipos')

@section('breadcrumb')
<li class="breadcrumb-item active">Inventario</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .inv-stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .inv-stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-stat-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .inv-stat-icon.total { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
    .inv-stat-icon.activos { background: rgba(16, 185, 129, 0.1); color: #10b981; }
    .inv-stat-icon.inactivos { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

    .inv-stat-info h4 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a3a5c;
    }

    .inv-stat-info span {
        font-size: 0.8rem;
        color: #64748b;
    }

    .tipos-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .tipo-badge {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.625rem;
        background: #f1f5f9;
        border-radius: 20px;
        font-size: 0.75rem;
        color: #475569;
    }

    .tipo-badge .count {
        background: #1a3a5c;
        color: #fff;
        padding: 0.125rem 0.375rem;
        border-radius: 10px;
        font-weight: 600;
    }

    .tabla-inventario {
        width: 100%;
        border-collapse: collapse;
    }

    .tabla-inventario thead {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
    }

    .tabla-inventario th {
        padding: 0.875rem 1rem;
        text-align: left;
        font-size: 0.7rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .tabla-inventario td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    .tabla-inventario tbody tr:hover {
        background: rgba(26, 58, 92, 0.02);
    }

    .equipo-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .equipo-tipo {
        font-weight: 600;
        color: #1a3a5c;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .equipo-tipo i {
        color: #f57c00;
    }

    .equipo-detalle {
        font-size: 0.8rem;
        color: #64748b;
    }

    .codigo-serie {
        font-family: monospace;
        background: #f1f5f9;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
        color: #1a3a5c;
    }

    .ubicacion-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        font-size: 0.85rem;
    }

    .ubicacion-info .peaje {
        font-weight: 500;
        color: #1a3a5c;
    }

    .ubicacion-info .via {
        font-size: 0.75rem;
        color: #64748b;
    }

    .estado-badge {
        display: inline-flex;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .estado-badge.activo {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .estado-badge.inactivo {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .acciones-equipo {
        display: flex;
        gap: 0.375rem;
    }

    .btn-accion {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        transition: all 0.2s;
    }

    .btn-accion:hover {
        background: #f1f5f9;
        color: #1a3a5c;
    }

    .btn-accion.editar:hover {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        border-color: #6366f1;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    {{-- Estadísticas --}}
    <div class="inv-stats-row">
        <div class="inv-stat-card">
            <div class="inv-stat-icon total">
                <i class="fas fa-boxes"></i>
            </div>
            <div class="inv-stat-info">
                <h4>{{ $estadisticas['total'] }}</h4>
                <span>Total Equipos</span>
            </div>
        </div>

        <div class="inv-stat-card">
            <div class="inv-stat-icon activos">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="inv-stat-info">
                <h4>{{ $estadisticas['activos'] }}</h4>
                <span>Equipos Activos</span>
            </div>
        </div>

        <div class="inv-stat-card">
            <div class="inv-stat-icon inactivos">
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="inv-stat-info">
                <h4>{{ $estadisticas['inactivos'] }}</h4>
                <span>Equipos Inactivos</span>
            </div>
        </div>
    </div>

    {{-- Distribución por tipo --}}
    <div class="filtros-card mb-3">
        <label class="filtro-label mb-2">Distribución por Tipo de Equipo</label>
        <div class="tipos-grid">
            @foreach($estadisticas['por_tipo'] as $tipo)
            <span class="tipo-badge">
                <i class="fas fa-microchip"></i>
                {{ $tipo->nombre }}
                <span class="count">{{ $tipo->inventario_count }}</span>
            </span>
            @endforeach
        </div>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card mb-3">
        <form action="{{ route('web.inventario.index') }}" 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="Código, serie, modelo..." value="{{ request('buscar') }}">
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Tipo</label>
                <select name="tipo" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($tiposHardware as $tipo)
                    <option value="{{ $tipo->hardware_id }}" {{ request('tipo') == $tipo->hardware_id ? 'selected' : '' }}>
                        {{ $tipo->nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Marca</label>
                <select name="marca" class="form-select form-select-sm">
                    <option value="">Todas</option>
                    @foreach($marcas as $marca)
                    <option value="{{ $marca->marca_id }}" {{ request('marca') == $marca->marca_id ? 'selected' : '' }}>
                        {{ $marca->nombre }}
                    </option>
                    @endforeach
                </select>
            </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.inventario.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
                <a href="{{ route('web.inventario.create') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-plus me-1"></i> Nuevo Equipo
                </a>
            </div>
        </form>
    </div>

    {{-- Tabla de equipos --}}
    <div class="tabla-card">
        <div class="tabla-responsive">
            <table class="tabla-inventario">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Equipo</th>
                        <th>Código/Serie</th>
                        <th>Ubicación</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($equipos as $equipo)
                    <tr>
                        <td>
                            <span class="mant-id">{{ $equipo->inventario_id }}</span>
                        </td>
                        <td>
                            <div class="equipo-info">
                                <span class="equipo-tipo">
                                    <i class="fas fa-microchip"></i>
                                    {{ $equipo->tipoHardware->nombre ?? 'N/A' }}
                                </span>
                                <span class="equipo-detalle">
                                    {{ $equipo->marca->nombre ?? '' }} {{ $equipo->modelo ?? '' }}
                                </span>
                            </div>
                        </td>
                        <td>
                            <span class="codigo-serie">{{ $equipo->codigo1 }}</span>
                            @if($equipo->codigo2)
                            <br>
                            <small class="text-muted">Alt: {{ $equipo->codigo2 }}</small>
                            @endif
                        </td>
                        <td>
                            @if($equipo->ultimaVia)
                            <div class="ubicacion-info">
                                <span class="peaje">{{ $equipo->ultimaVia->centro->nombre_centro ?? 'N/A' }}</span>
                                <span class="via">
                                    <i class="fas fa-road me-1"></i>{{ $equipo->ultimaVia->nombre }}
                                </span>
                            </div>
                            @else
                            <span class="text-muted">Sin asignar</span>
                            @endif
                        </td>
                        <td>
                            <span class="estado-badge {{ $equipo->estado ? 'activo' : 'inactivo' }}">
                                {{ $equipo->estado ? 'Activo' : 'Inactivo' }}
                            </span>
                        </td>
                        <td>
                            <div class="acciones-equipo">
                                <a href="{{ route('web.inventario.show', $equipo->inventario_id) }}"
                                   class="btn-accion" title="Ver detalle">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('web.inventario.edit', $equipo->inventario_id) }}"
                                   class="btn-accion editar" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                <i class="fas fa-boxes"></i>
                                <p>No se encontraron equipos</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($equipos->hasPages())
        <div class="tabla-footer">
            {{ $equipos->links() }}
        </div>
        @endif
    </div>
</div>
@endsection