@extends('layouts.app')

@section('title', 'Tipos de Hardware')
@section('page-title', 'Tipos de Hardware')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
    <li class="breadcrumb-item active">Tipos de Hardware</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: #7c3aed;
        }

        .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;
            letter-spacing: 0.3px;
            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;
        }

        .count-badge {
            background: #e2e8f0;
            color: #475569;
            padding: 0.25rem 0.625rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .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-microchip"></i></div>
                <h2>Tipos de Hardware</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.tipos-hardware.create') }}" class="btn btn-success"><i
                        class="fas fa-plus me-1"></i> Nuevo Tipo</a>
            </div>
        </div>

        <div class="filtros-card mb-3">
            <form action="{{ route('web.catalogos.tipos-hardware') }}" 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">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.tipos-hardware') }}" 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</th>
                            <th>Descripción</th>
                            <th style="width: 100px;">Tipo</th>
                            <th style="width: 120px;">Equipos</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><span class="text-muted">{{ $item->descripcion ?? '-' }}</span></td>
                                <td>
                                    <span class="estado-badge {{ $item->es_de_via == 1 ? 'activo' : 'inactivo' }}">
                                        {{ $item->es_de_via == 1 ? 'Vía' : 'General' }}
                                    </span>
                                </td>
                                <td><span class="count-badge">{{ $item->inventario_count }} equipos</span></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.tipos-hardware.edit', $item->hardware_id) }}"
                                            class="btn-action editar"><i class="fas fa-edit"></i></a>
                                        <form action="{{ route('web.catalogos.tipos-hardware.toggle', $item->hardware_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-microchip"></i>
                    <h4>No hay tipos de hardware registrados</h4>
                    <p>Crea un nuevo tipo para comenzar.</p>
                </div>
            @endif
        </div>
    </div>
@endsection