@extends('layouts.app', ['activePage' => 'auditorias', 'menuParent' => 'reportes', 'titlePage' => __('')])
@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid">
        <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Grid de auditorias -->
                <h1 class="text-2xl font-bold text-gray-800 mb-8 text-center">Auditorias</h1>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <!-- Auditoría de complementos de pago contra facturas -->
                    <a href="{{ route('auditorias.facturacion') }}" class="bg-white overflow-hidden shadow rounded-lg block group transform transition duration-300 hover:scale-105 hover:shadow-2xl">
                        <div class="p-5 flex flex-col items-center text-center">
                            <!-- Icono de auditoría/documento con lupa -->
                            <span class="material-icons text-blue-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" style="font-size: 3rem;">
                                search
                            </span>
                            <h3 class="text-lg font-semibold text-gray-900">Auditorías de CFDIs</h3>
                            <p class="mt-1 text-sm text-gray-500">
                                Consulta y accede a las auditorías disponibles para tus CFDIs, como complementos de pago, facturas canceladas, PPD sin complemento y más.
                            </p>
                            <span class="mt-3 inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">
                                Ver auditorías de facturación
                            </span>
                        </div>
                    </a>
                    <!-- Auditoría contable -->
                    <a href="{{ route('auditorias.contabilidad') }}"  class="bg-white overflow-hidden shadow rounded-lg block group transform transition duration-300 hover:scale-105 hover:shadow-2xl">
                        <div class="p-5 flex flex-col items-center text-center">
                            <!-- Icono de libro o contabilidad -->
                            <span class="material-icons text-purple-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" style="font-size: 3rem;">
                                book
                            </span>
                            <h3 class="text-lg font-semibold text-gray-900">Auditorías contables</h3>
                            <p class="mt-1 text-sm text-gray-500">
                                Revisa y valida que los registros contables estén correctamente capturados, cuadrando la información financiera del sistema.
                            </p>
                            <span class="mt-3 inline-block px-3 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">
                                Ver auditorías contables
                            </span>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection