@extends('layouts.app')

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

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
<li class="breadcrumb-item active">Marcas 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: #2563eb; }
    .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; letter-spacing: 0.3px; }
    .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; flex-wrap: wrap; }
    .empty-state { text-align: center; padding: 3rem 2rem; color: #94a3b8; }
    .empty-state i { font-size: 2.5rem; margin-bottom: 1rem; color: #e2e8f0; }
    .empty-state h4 { color: #64748b; margin-bottom: 0.5rem; }
    .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-tags"></i></div>
            <h2>Marcas 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.marcas.create') }}" class="btn btn-success">
                <i class="fas fa-plus me-1"></i> Nueva Marca
            </a>
        </div>
    </div>

    <div class="filtros-card mb-3">
        <form action="{{ route('web.catalogos.marcas') }}" 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.marcas') }}" 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 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="count-badge">{{ $item->inventario_count }} equipos</span></td>
                    <td>
                        @if($item->estado == 1)
                        <span class="estado-badge activo">Activo</span>
                        @else
                        <span class="estado-badge inactivo">Inactivo</span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-cell">
                            <a href="{{ route('web.catalogos.marcas.edit', $item->marca_id) }}" class="btn-action editar" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('web.catalogos.marcas.toggle', $item->marca_id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn-action" title="{{ $item->estado == 1 ? 'Desactivar' : 'Activar' }}">
                                    <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-tags"></i>
            <h4>No hay marcas registradas</h4>
            <p>Crea una nueva marca para comenzar.</p>
        </div>
        @endif
    </div>
</div>
@endsection