@extends('layouts.app', ['activePage' => 'contabilidad', '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 Reportes Contables -->
                <h1 class="text-2xl font-bold text-gray-800 mb-8 text-center">Reportes contables</h1>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <!-- Balanza de Comprobación -->
                    <a href="{{ route('reporte-contabilidad.balanza-comprobacion') }}" 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 balanza representativo -->
                            <svg class="h-12 w-12 text-indigo-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <g>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v2m-6 6c0 2.21 2.686 4 6 4s6-1.79 6-4m-12 0c0-2.21 2.686-4 6-4s6 1.79 6 4m-12 0v2m12-2v2m-6 6v2m-4 0h8" />
                                    <ellipse cx="6" cy="15" rx="2" ry="1.2" fill="currentColor" opacity="0.3" />
                                    <ellipse cx="18" cy="15" rx="2" ry="1.2" fill="currentColor" opacity="0.3" />
                                </g>
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Balanza de comprobación</h3>
                            <p class="mt-1 text-sm text-gray-500">Consulta el resumen de saldos de todas las cuentas contables para verificar la igualdad entre cargos y abonos.</p>
                        </div>
                    </a>

                    <!-- Balance General -->
                    <a href="{{ route('reporte-contabilidad.balance-general') }}" 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 balance general representativo (maletín con gráfico) -->
                            <svg class="h-12 w-12 text-green-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <rect x="3" y="7" width="18" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M16 3v4M8 3v4M3 10h18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 17v-2a2 2 0 012-2h1a2 2 0 012 2v2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <rect x="14" y="13" width="2" height="4" fill="currentColor" opacity="0.3" />
                                <rect x="8" y="15" width="2" height="2" fill="currentColor" opacity="0.3" />
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Balance general</h3>
                            <p class="mt-1 text-sm text-gray-500">Visualiza la situación financiera de la empresa mostrando activos, pasivos y capital en un periodo determinado.</p>
                        </div>
                    </a>

                    <!-- Estado de Resultados -->
                    <a href="{{ route('reporte-contabilidad.estado-resultados') }}" 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 estado de resultados representativo (gráfica de barras) -->
                            <svg class="h-12 w-12 text-blue-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <rect x="4" y="13" width="3" height="7" rx="1" fill="currentColor" opacity="0.3" />
                                <rect x="10" y="9" width="3" height="11" rx="1" fill="currentColor" opacity="0.5" />
                                <rect x="16" y="5" width="3" height="15" rx="1" fill="currentColor" />
                                <path d="M3 21h18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Estado de resultados</h3>
                            <p class="mt-1 text-sm text-gray-500">Consulta los ingresos, costos y gastos para determinar la utilidad o pérdida neta del periodo.</p>
                        </div>
                    </a>

                    <!-- Auxiliar de Cuentas -->
                    <a href="{{ route('reporte-contabilidad.auxiliar-cuentas') }}" 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 auxiliar de cuentas representativo (libro abierto) -->
                            <svg class="h-12 w-12 text-yellow-500 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path d="M3 6.5A2.5 2.5 0 015.5 4H19a1 1 0 011 1v14a1 1 0 01-1 1H5.5A2.5 2.5 0 013 17.5v-11z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 4v16M16 4v16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <rect x="8" y="8" width="8" height="2" fill="currentColor" opacity="0.3" />
                                <rect x="8" y="12" width="8" height="2" fill="currentColor" opacity="0.3" />
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Auxiliar de cuentas</h3>
                            <p class="mt-1 text-sm text-gray-500">Revisa el detalle de movimientos de cada cuenta contable para un seguimiento preciso.</p>
                        </div>
                    </a>
                    <!-- Reporte Libre de Diario -->
                    <a href="{{ route('reporte-contabilidad.libre-diario') }}" 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 representativo (documento con lápiz) -->
                            <svg class="h-12 w-12 text-purple-600 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M8 8h8M8 12h5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M16.5 19.5l2-2a1 1 0 00-1.42-1.42l-2 2a1 1 0 001.42 1.42z" fill="currentColor" opacity="0.5"/>
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Libre de diario</h3>
                            <p class="mt-1 text-sm text-gray-500">Genera un reporte personalizado del libro diario según los criterios que necesites.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection