@extends('layouts.app')

@section('title', 'Escritorio Principal - ERP LOGÍSTICO')
@section('header_title', 'Escritorio Principal')

@section('styles')
<style>
    .module-card {
        border: 1px solid #ebedf3;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .module-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 13, 134, 0.1);
        border-color: rgba(0, 13, 134, 0.15);
    }

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary-color);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .module-card:hover::after {
        transform: scaleX(1);
    }

    .module-card.active-module {
        border: 1.5px solid rgba(0, 13, 134, 0.15);
        box-shadow: 0 8px 25px rgba(0, 13, 134, 0.05);
    }

    .module-card.active-module:hover {
        border-color: var(--primary-color);
        box-shadow: 0 15px 35px rgba(0, 13, 134, 0.15);
    }

    .module-card.active-module::after {
        background: var(--yellow-brand);
        transform: scaleX(1);
    }

    .module-card.active-module:hover::after {
        background: var(--accent-color);
    }

    .module-icon-container {
        width: 70px;
        height: 70px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }

    .module-card:hover .module-icon-container {
        transform: scale(1.1) rotate(5deg);
    }

    .module-details h4 {
        font-weight: 700;
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 8px;
    }

    .module-details p {
        font-size: 0.88rem;
        color: #7e8299;
        margin: 0;
        line-height: 1.4;
    }

    .module-status {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 6px;
        letter-spacing: 0.5px;
    }

    /* Color variations for modules */
    .bg-light-danger { background-color: rgba(224, 48, 33, 0.1); color: var(--accent-color); }
    .bg-light-primary { background-color: rgba(0, 13, 134, 0.1); color: var(--primary-color); }
    .bg-light-success { background-color: #c9f7f5; color: #1bc5bd; }
    .bg-light-warning { background-color: rgba(255, 231, 48, 0.15); color: #b08d00; }
    .bg-light-info { background-color: #eee5ff; color: #8950fc; }
    .bg-light-dark { background-color: #f3f6f9; color: #7e8299; border: 1px solid #ebedf3; }
</style>
@endsection

@section('content')
<div class="mb-4">
    <h3 class="fw-bold text-dark"><i class="bi bi-grid-fill text-primary me-2"></i>¡Bienvenido al ERP LOGÍSTICO!</h3>
    <p class="text-muted">Selecciona el módulo corporativo en el que deseas operar el día de hoy.</p>
</div>

<!-- Grid of Modules -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    
    <!-- Active Module: Incidencias (Tickets) -->
    <div class="col">
        <a href="{{ route('tickets.index') }}" class="module-card active-module card p-4">
            <span class="module-status bg-light-danger">Operativo</span>
            <div class="module-icon-container bg-light-primary">
                <i class="bi bi-ticket-detailed-fill"></i>
            </div>
            <div class="module-details">
                <h4>Gestión de Incidencias</h4>
                <p>Módulo de ingreso, aprobación, seguimiento y solución de tickets de mantención para locales y maquinarias.</p>
            </div>
        </a>
    </div>

    <!-- Mockup Module: Ventas y Facturación -->
    <div class="col">
        <a href="#" class="module-card card p-4" onclick="alert('Este módulo es de prueba visual. Actualmente estamos trabajando en el módulo de Incidencias.')">
            <span class="module-status bg-light-dark text-secondary">Prototipo</span>
            <div class="module-icon-container bg-light-dark">
                <i class="bi bi-cart-fill text-secondary"></i>
            </div>
            <div class="module-details">
                <h4 class="text-secondary">Ventas & Facturación</h4>
                <p>Monitoreo de cajas, emisión de boletas electrónicas y facturas de venta al público en sucursales.</p>
            </div>
        </a>
    </div>

    <!-- Mockup Module: Compras y Abastecimiento -->
    <div class="col">
        <a href="#" class="module-card card p-4" onclick="alert('Este módulo es de prueba visual. Actualmente estamos trabajando en el módulo de Incidencias.')">
            <span class="module-status bg-light-dark text-secondary">Prototipo</span>
            <div class="module-icon-container bg-light-dark">
                <i class="bi bi-bag-check-fill text-secondary"></i>
            </div>
            <div class="module-details">
                <h4 class="text-secondary">Abastecimiento & Compras</h4>
                <p>Órdenes de compra a proveedores de carne, programación de despachos y control de cuentas por pagar.</p>
            </div>
        </a>
    </div>

    <!-- Mockup Module: Inventario & Bodegas -->
    <div class="col">
        <a href="#" class="module-card card p-4" onclick="alert('Este módulo es de prueba visual. Actualmente estamos trabajando en el módulo de Incidencias.')">
            <span class="module-status bg-light-dark text-secondary">Prototipo</span>
            <div class="module-icon-container bg-light-dark">
                <i class="bi bi-box-seam-fill text-secondary"></i>
            </div>
            <div class="module-details">
                <h4 class="text-secondary">Inventario & Bodega</h4>
                <p>Control de stock en cámaras de frío, mermas de carne, desposte y alertas de abastecimiento crítico.</p>
            </div>
        </a>
    </div>

    <!-- Mockup Module: Despachos y Logística -->
    <div class="col">
        <a href="#" class="module-card card p-4" onclick="alert('Este módulo es de prueba visual. Actualmente estamos trabajando en el módulo de Incidencias.')">
            <span class="module-status bg-light-dark text-secondary">Prototipo</span>
            <div class="module-icon-container bg-light-dark">
                <i class="bi bi-truck text-secondary"></i>
            </div>
            <div class="module-details">
                <h4 class="text-secondary">Despacho & Logística</h4>
                <p>Planificación de rutas de camiones frigoríficos hacia las diferentes carnicerías de la red corporativa.</p>
            </div>
        </a>
    </div>

    <!-- Mockup Module: Recursos Humanos -->
    <div class="col">
        <a href="#" class="module-card card p-4" onclick="alert('Este módulo es de prueba visual. Actualmente estamos trabajando en el módulo de Incidencias.')">
            <span class="module-status bg-light-dark text-secondary">Prototipo</span>
            <div class="module-icon-container bg-light-dark">
                <i class="bi bi-people-fill text-secondary"></i>
            </div>
            <div class="module-details">
                <h4 class="text-secondary">Recursos Humanos</h4>
                <p>Control de asistencia biométrica, turnos rotativos en carnicería y liquidaciones de sueldo mensuales.</p>
            </div>
        </a>
    </div>

</div>
@endsection