@extends('layouts.app')
@section('title', __('Menú Principal'))

@section('content')
<div class="page-header">
    <h1><i class="bi bi-grid-3x3-gap me-2" style="color:#2563a8"></i>{{ __('Menú Principal') }}</h1>
    <p>{{ __('Selecciona el módulo al que deseas acceder') }}</p>
</div>

<div class="row g-4">

    {{-- Muestra --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('muestra.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#0284c71a;color:#0284c7">
                        <i class="bi bi-collection-fill fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Muestra') }}</h3>
                        <p class="module-desc">{{ __('Gestión y consulta del catálogo de artículos con tallas y precios') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#0284c7">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Diseño --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('diseno.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#7c3aed1a;color:#7c3aed">
                        <i class="bi bi-palette-fill fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Diseño') }}</h3>
                        <p class="module-desc">{{ __('Gestión y configuración del catálogo de diseños y colores') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#7c3aed">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Lista Muestra Diseño --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('lista-muestra-diseno.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#0891b21a;color:#0891b2">
                        <i class="bi bi-card-list fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Lista Muestra Diseño') }}</h3>
                        <p class="module-desc">{{ __('Listado combinado de muestras y diseños disponibles') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#0891b2">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Seguimiento Nuevos Desarrollos --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('seguimiento-desarrollos.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#d970071a;color:#d97007">
                        <i class="bi bi-graph-up-arrow fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Seguimiento Nuevos Desarrollos') }}</h3>
                        <p class="module-desc">{{ __('Control y seguimiento del estado de nuevos desarrollos de producto') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#d97007">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Lista Tallaje --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('lista-tallaje.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#0596691a;color:#059669">
                        <i class="bi bi-rulers fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Lista Tallaje') }}</h3>
                        <p class="module-desc">{{ __('Tablas y especificaciones de tallaje por artículo y categoría') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#059669">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Lista Packaging --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('lista-packaging.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#dc26261a;color:#dc2626">
                        <i class="bi bi-box-seam-fill fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Lista Packaging') }}</h3>
                        <p class="module-desc">{{ __('Especificaciones y datos de packaging y embalaje por artículo') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#dc2626">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Códigos Arancelarios --}}
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('codigos-arancelarios.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#4f46e51a;color:#4f46e5">
                        <i class="bi bi-globe-americas fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Códigos Arancelarios') }}</h3>
                        <p class="module-desc">{{ __('Gestión y consulta de códigos arancelarios por tipo de artículo') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#4f46e5">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Administración — solo SuperAdmin / Admin --}}
    @auth
    @if(in_array(auth()->user()->perfil, ['SuperAdmin', 'Admin']))
    <div class="col-xl-4 col-md-6">
        <a href="{{ route('admin.codificadores.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#0891b21a;color:#0891b2">
                        <i class="bi bi-sliders fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Codificadores') }}</h3>
                        <p class="module-desc">{{ __('Mantenimiento de tablas auxiliares: colores, tallas, estados, composiciones y más') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#0891b2">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-xl-4 col-md-6">
        <a href="{{ route('admin.proveedores.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#0891b21a;color:#0891b2">
                        <i class="bi bi-building fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Proveedores') }}</h3>
                        <p class="module-desc">{{ __('Gestión de proveedores y composiciones/calidades aprobadas') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#0891b2">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>    

    <div class="col-xl-4 col-md-6">
        <a href="{{ route('admin.usuarios.index') }}" class="text-decoration-none">
            <div class="card h-100 module-card">
                <div class="card-body p-4 d-flex flex-column gap-3">
                    <div class="module-icon" style="background:#e8a0001a;color:#e8a000">
                        <i class="bi bi-people-fill fs-2"></i>
                    </div>
                    <div>
                        <h3 class="module-title">{{ __('Administración') }}</h3>
                        <p class="module-desc">{{ __('Gestión de usuarios, perfiles y configuración del sistema') }}</p>
                    </div>
                    <span class="module-arrow" style="color:#e8a000">
                        <i class="bi bi-arrow-right"></i> {{ __('Acceder') }}
                    </span>
                </div>
            </div>
        </a>
    </div>

    @endif
    @endauth

</div>
@endsection