@extends('layouts.app')
@section('title', __('Codificadores'))

@push('styles')
<style>
.grupo-titulo {
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tabla-card {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    cursor: pointer;
}
.tabla-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 14px rgba(37,99,168,.12);
    transform: translateY(-2px);
    color: var(--primary);
    text-decoration: none;
}
.tabla-card-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.tabla-card-name {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
}
.tabla-card-sub {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 1px;
}
</style>
@endpush

@section('content')

<div class="page-header">
    <h1>
        <i class="bi bi-sliders me-2" style="color:#0891b2"></i>{{ __('Codificadores') }}
    </h1>
    <p>{{ __('Mantenimiento de tablas auxiliares del sistema') }}</p>
</div>

@php
$grupoIconos = [
    'Muestra'            => ['icon' => 'bi-collection',       'color' => '#0284c7', 'bg' => '#0284c71a'],
    'Atributos'          => ['icon' => 'bi-sliders',           'color' => '#7c3aed', 'bg' => '#7c3aed1a'],
    'Diseño'             => ['icon' => 'bi-palette',           'color' => '#db2777', 'bg' => '#db27771a'],
    'Precios / Packaging'=> ['icon' => 'bi-box-seam',          'color' => '#dc2626', 'bg' => '#dc26261a'],
    'Tallaje'            => ['icon' => 'bi-rulers',            'color' => '#059669', 'bg' => '#0596691a'],
    'Logística'          => ['icon' => 'bi-truck',             'color' => '#d97007', 'bg' => '#d970071a'],
];
@endphp

@foreach($tablas as $grupo => $items)
@php $gi = $grupoIconos[$grupo] ?? ['icon'=>'bi-list','color'=>'#64748b','bg'=>'#64748b1a']; @endphp

<div class="grupo-titulo">
    <i class="bi {{ $gi['icon'] }}" style="color:{{ $gi['color'] }}"></i>
    {{ __($grupo) }}
    <span class="badge bg-secondary ms-1" style="font-size:.65rem;border-radius:5px;font-weight:600">{{ $items->count() }}</span>
</div>

<div class="row g-2 mb-2">
    @foreach($items as $item)
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
        <a href="{{ route('admin.codificadores.show', $item['slug']) }}" class="tabla-card">
            <div class="tabla-card-icon" style="background:{{ $gi['bg'] }};color:{{ $gi['color'] }}">
                <i class="bi {{ $gi['icon'] }}"></i>
            </div>
            <div>
                <div class="tabla-card-name">{{ __($item['label']) }}</div>
                <div class="tabla-card-sub">{{ count($item['campos']) }} {{ __('campo(s)') }}</div>
            </div>
        </a>
    </div>
    @endforeach
</div>
@endforeach

@endsection