@extends('layouts.app')

@section('title', 'Dashboard de Reportes')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-chart-bar me-2 text-primary"></i>Dashboard de Reportes
            </h1>
            <p class="text-muted mb-0 small">Análisis y reportes de todas las áreas del sistema</p>
        </div>
    </div>

    <!-- Tarjetas de Estadísticas Principales -->
    <div class="row g-3 mb-4">
        <!-- Ventas -->
        <div class="col-xl-3 col-md-6">
            <div class="report-card report-card-primary">
                <div class="report-card-header">
                    <div class="report-card-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <h5 class="report-card-title">Ventas</h5>
                </div>
                <div class="report-card-body">
                    <div class="report-metric">
                        <span class="report-metric-label">Hoy</span>
                        <span class="report-metric-value">${{ number_format($stats['sales']['today'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Este mes</span>
                        <span class="report-metric-value">${{ number_format($stats['sales']['this_month'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Facturas</span>
                        <span class="report-metric-value">{{ number_format($stats['sales']['total_invoices'] ?? 0) }}</span>
                    </div>
                </div>
                <div class="report-card-footer">
                    <a href="{{ route('admin.reports.sales') }}" class="btn btn-sm btn-light w-100">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Compras -->
        <div class="col-xl-3 col-md-6">
            <div class="report-card report-card-success">
                <div class="report-card-header">
                    <div class="report-card-icon">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <h5 class="report-card-title">Compras</h5>
                </div>
                <div class="report-card-body">
                    <div class="report-metric">
                        <span class="report-metric-label">Hoy</span>
                        <span class="report-metric-value">${{ number_format($stats['purchases']['today'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Este mes</span>
                        <span class="report-metric-value">${{ number_format($stats['purchases']['this_month'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Facturas</span>
                        <span class="report-metric-value">{{ number_format($stats['purchases']['total_invoices'] ?? 0) }}</span>
                    </div>
                </div>
                <div class="report-card-footer">
                    <a href="{{ route('admin.reports.purchases') }}" class="btn btn-sm btn-light w-100">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Inventario -->
        <div class="col-xl-3 col-md-6">
            <div class="report-card report-card-warning">
                <div class="report-card-header">
                    <div class="report-card-icon">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <h5 class="report-card-title">Inventario</h5>
                </div>
                <div class="report-card-body">
                    <div class="report-metric">
                        <span class="report-metric-label">Productos</span>
                        <span class="report-metric-value">{{ number_format($stats['inventory']['total_products'] ?? 0) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Valor Total</span>
                        <span class="report-metric-value">${{ number_format($stats['inventory']['total_value'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Stock Bajo</span>
                        <span class="report-metric-value">{{ number_format($stats['inventory']['low_stock'] ?? 0) }}</span>
                    </div>
                </div>
                <div class="report-card-footer">
                    <a href="{{ route('admin.reports.inventory') }}" class="btn btn-sm btn-light w-100">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Cuentas -->
        <div class="col-xl-3 col-md-6">
            <div class="report-card report-card-info">
                <div class="report-card-header">
                    <div class="report-card-icon">
                        <i class="fas fa-calculator"></i>
                    </div>
                    <h5 class="report-card-title">Cuentas</h5>
                </div>
                <div class="report-card-body">
                    <div class="report-metric">
                        <span class="report-metric-label">Por Cobrar</span>
                        <span class="report-metric-value">${{ number_format($stats['accounts']['receivable_total'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Por Pagar</span>
                        <span class="report-metric-value">${{ number_format($stats['accounts']['payable_total'] ?? 0, 2) }}</span>
                    </div>
                    <div class="report-metric">
                        <span class="report-metric-label">Vencidas</span>
                        <span class="report-metric-value">${{ number_format($stats['accounts']['receivable_overdue'] ?? 0, 2) }}</span>
                    </div>
                </div>
                <div class="report-card-footer">
                    <div class="btn-group w-100" role="group">
                        <a href="{{ route('admin.reports.accounts-receivable') }}" class="btn btn-sm btn-light">
                            <i class="fas fa-hand-holding-usd me-1"></i>Cobrar
                        </a>
                        <a href="{{ route('admin.reports.accounts-payable') }}" class="btn btn-sm btn-light">
                            <i class="fas fa-credit-card me-1"></i>Pagar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reportes Organizados por Módulo -->
    <div class="row g-4">
        <!-- Módulo: Ventas -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-shopping-cart me-2"></i>Ventas
                    </h5>
                    <small>Reportes de ventas e ingresos</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.sales') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-chart-line text-primary me-2"></i>Reporte de Ventas
                        </a>
                        <a href="{{ route('admin.reports.sales-by-salesman') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-user-tie text-info me-2"></i>Ventas por Vendedor
                        </a>
                        <a href="{{ route('admin.reports.top-clients') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-users text-success me-2"></i>Top Clientes
                        </a>
                        <a href="{{ route('admin.reports.top-products') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-box text-warning me-2"></i>Top Productos Vendidos
                        </a>
                        <a href="{{ route('admin.reports.margin-analysis') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-chart-pie text-danger me-2"></i>Análisis de Margen
                        </a>
                        <a href="{{ route('admin.reports.quotation-vs-invoice') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-file-invoice text-secondary me-2"></i>Presupuestos vs Facturas
                        </a>
                        <a href="{{ route('admin.reports.commissions') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-percent text-primary me-2"></i>Comisiones
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Compras -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-shopping-bag me-2"></i>Compras
                    </h5>
                    <small>Reportes de compras y gastos</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.purchases') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-chart-bar text-success me-2"></i>Reporte de Compras
                        </a>
                        <a href="{{ route('admin.reports.purchases-by-supplier') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-truck text-info me-2"></i>Compras por Proveedor
                        </a>
                        <a href="{{ route('admin.reports.top-purchased-products') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-box text-warning me-2"></i>Top Productos Comprados
                        </a>
                        <a href="{{ route('admin.reports.supplier-analysis') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-chart-area text-danger me-2"></i>Análisis de Proveedores
                        </a>
                        <a href="{{ route('admin.reports.pending-orders') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-clock text-secondary me-2"></i>Órdenes Pendientes
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Inventario -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-warning text-dark py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-boxes me-2"></i>Inventario
                    </h5>
                    <small>Reportes de inventario y stock</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.inventory') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-warehouse text-warning me-2"></i>Reporte de Inventario
                        </a>
                        <a href="{{ route('admin.inventory.reports.movements') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-exchange-alt text-info me-2"></i>Movimientos de Inventario
                        </a>
                        <a href="{{ route('admin.inventory.reports.low-stock') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>Stock Bajo
                        </a>
                        <a href="{{ route('admin.inventory.reports.out-of-stock') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-times-circle text-danger me-2"></i>Sin Stock
                        </a>
                        <a href="{{ route('admin.inventory.reports.kardex') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-book text-primary me-2"></i>Kardex General
                        </a>
                        <a href="{{ route('admin.inventory.reports.valued-inventory') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-dollar-sign text-success me-2"></i>Valoración de Inventario
                        </a>
                        <a href="{{ route('admin.inventory.reports.turnover') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-sync-alt text-secondary me-2"></i>Rotación de Inventario
                        </a>
                        <a href="{{ route('admin.inventory.reports.abc-analysis') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-sort-amount-down text-info me-2"></i>Análisis ABC
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Cuentas -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-info text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-calculator me-2"></i>Cuentas
                    </h5>
                    <small>Reportes de cuentas por cobrar y pagar</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.accounts-receivable') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-hand-holding-usd text-info me-2"></i>Cuentas por Cobrar
                        </a>
                        <a href="{{ route('admin.reports.accounts-payable') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-credit-card text-danger me-2"></i>Cuentas por Pagar
                        </a>
                        <a href="{{ route('admin.accounting.reports.aging-receivables') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-clock text-warning me-2"></i>Envejecimiento CxC
                        </a>
                        <a href="{{ route('admin.accounting.reports.aging-payables') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-hourglass-half text-warning me-2"></i>Envejecimiento CxP
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Contabilidad -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-secondary text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-book me-2"></i>Contabilidad
                    </h5>
                    <small>Estados financieros y contables</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.accounting.reports.balance-sheet') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-balance-scale text-primary me-2"></i>Balance General
                        </a>
                        <a href="{{ route('admin.accounting.reports.income-statement') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-chart-line text-success me-2"></i>Estado de Resultados
                        </a>
                        <a href="{{ route('admin.accounting.reports.cash-flow') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-money-bill-wave text-info me-2"></i>Flujo de Efectivo
                        </a>
                        <a href="{{ route('admin.accounting.reports.general-ledger') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-book-open text-warning me-2"></i>Libro Mayor
                        </a>
                        <a href="{{ route('admin.accounting.reports.journal') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-journal-whills text-secondary me-2"></i>Libro Diario
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Gestor -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-users me-2"></i>Gestor
                    </h5>
                    <small>Reportes de clientes, proveedores y vendedores</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.clients') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-user-friends text-primary me-2"></i>Reporte de Clientes
                        </a>
                        <a href="{{ route('admin.reports.products') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-box text-warning me-2"></i>Reporte de Productos
                        </a>
                        <a href="{{ route('admin.reports.catalog') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-book text-info me-2"></i>Catálogo de Productos
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: Bancos -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;" class="py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-university me-2"></i>Bancos
                    </h5>
                    <small>Reportes bancarios y financieros</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.bank.reports.transactions') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-exchange-alt text-primary me-2"></i>Transacciones Bancarias
                        </a>
                        <a href="{{ route('admin.bank.reports.reconciliations') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-check-double text-success me-2"></i>Conciliación Bancaria
                        </a>
                        <a href="{{ route('admin.bank.reports.cash-flow') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-money-bill-wave text-info me-2"></i>Flujo de Caja
                        </a>
                        <a href="{{ route('admin.bank.reports.balances') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-wallet text-warning me-2"></i>Saldos Bancarios
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo: RRHH -->
        <div class="col-lg-6 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-danger text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-user-tie me-2"></i>Recursos Humanos
                    </h5>
                    <small>Reportes de empleados y nómina</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.hr.reports.general') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-users text-primary me-2"></i>Reporte General
                        </a>
                        <a href="{{ route('admin.hr.reports.payroll') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-money-check-alt text-success me-2"></i>Nómina
                        </a>
                        <a href="{{ route('admin.hr.reports.attendance') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-calendar-check text-info me-2"></i>Asistencia
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sección de Exportaciones -->
    <div class="row g-4 mt-2">
        <!-- Exportaciones -->
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-download me-2 text-success"></i>Exportaciones
                    </h5>
                    <small class="text-muted">Exporta reportes en diferentes formatos (PDF, Excel)</small>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="d-grid">
                                <a href="{{ route('admin.reports.export-pdf', 'sales') }}" class="btn btn-outline-danger">
                                    <i class="fas fa-file-pdf me-2"></i>Exportar Ventas a PDF
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-grid">
                                <a href="{{ route('admin.reports.export-excel', 'sales') }}" class="btn btn-outline-success">
                                    <i class="fas fa-file-excel me-2"></i>Exportar Ventas a Excel
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-grid">
                                <a href="{{ route('admin.reports.export-pdf', 'purchases') }}" class="btn btn-outline-danger">
                                    <i class="fas fa-file-pdf me-2"></i>Exportar Compras a PDF
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-grid">
                                <a href="{{ route('admin.reports.export-excel', 'purchases') }}" class="btn btn-outline-success">
                                    <i class="fas fa-file-excel me-2"></i>Exportar Compras a Excel
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-grid">
                                <a href="{{ route('admin.reports.export-pdf', 'inventory') }}" class="btn btn-outline-danger">
                                    <i class="fas fa-file-pdf me-2"></i>Exportar Inventario a PDF
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-grid">
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#bulkExportModal">
                                    <i class="fas fa-file-archive me-2"></i>Exportación Masiva
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <!-- Exportaciones -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-download me-2 text-success"></i>Exportaciones
                    </h5>
                    <small class="text-muted">Exporta reportes en diferentes formatos</small>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.reports.export-pdf', 'sales') }}" class="list-group-item list-group-item-action export-link">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-danger">
                                    <i class="fas fa-file-pdf"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportar Ventas a PDF</h6>
                                    <small class="text-muted">Documento PDF para impresión</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        <a href="{{ route('admin.reports.export-excel', 'sales') }}" class="list-group-item list-group-item-action export-link">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-success">
                                    <i class="fas fa-file-excel"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportar Ventas a Excel</h6>
                                    <small class="text-muted">Hoja de cálculo editable</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        <a href="{{ route('admin.reports.export-pdf', 'purchases') }}" class="list-group-item list-group-item-action export-link">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-danger">
                                    <i class="fas fa-file-pdf"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportar Compras a PDF</h6>
                                    <small class="text-muted">Documento PDF para impresión</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        <a href="{{ route('admin.reports.export-excel', 'purchases') }}" class="list-group-item list-group-item-action export-link">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-success">
                                    <i class="fas fa-file-excel"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportar Compras a Excel</h6>
                                    <small class="text-muted">Hoja de cálculo editable</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        <a href="{{ route('admin.reports.export-pdf', 'inventory') }}" class="list-group-item list-group-item-action export-link">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-danger">
                                    <i class="fas fa-file-pdf"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportar Inventario a PDF</h6>
                                    <small class="text-muted">Documento PDF para impresión</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action export-link" data-bs-toggle="modal" data-bs-target="#bulkExportModal">
                            <div class="d-flex align-items-center">
                                <div class="export-link-icon bg-primary">
                                    <i class="fas fa-file-archive"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Exportación Masiva</h6>
                                    <small class="text-muted">Exporta múltiples reportes a la vez</small>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Exportación Masiva -->
<div class="modal fade" id="bulkExportModal" tabindex="-1" aria-labelledby="bulkExportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkExportModalLabel">
                    <i class="fas fa-file-archive me-2"></i>Exportación Masiva de Reportes
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bulkExportForm">
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Seleccionar Reportes <span class="text-danger">*</span></label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="report_sales" name="report_types[]" value="sales">
                                    <label class="form-check-label" for="report_sales">
                                        <i class="fas fa-shopping-cart me-1 text-primary"></i>Ventas
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="report_purchases" name="report_types[]" value="purchases">
                                    <label class="form-check-label" for="report_purchases">
                                        <i class="fas fa-shopping-bag me-1 text-success"></i>Compras
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="report_inventory" name="report_types[]" value="inventory">
                                    <label class="form-check-label" for="report_inventory">
                                        <i class="fas fa-boxes me-1 text-warning"></i>Inventario
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="report_accounts_receivable" name="report_types[]" value="accounts-receivable">
                                    <label class="form-check-label" for="report_accounts_receivable">
                                        <i class="fas fa-hand-holding-usd me-1 text-info"></i>Cuentas por Cobrar
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="report_accounts_payable" name="report_types[]" value="accounts-payable">
                                    <label class="form-check-label" for="report_accounts_payable">
                                        <i class="fas fa-credit-card me-1 text-danger"></i>Cuentas por Pagar
                                    </label>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-link p-0 mt-2" onclick="selectAllReports()">
                            <i class="fas fa-check-double me-1"></i>Seleccionar Todos
                        </button>
                        <button type="button" class="btn btn-sm btn-link p-0 mt-2 ms-2" onclick="deselectAllReports()">
                            <i class="fas fa-times me-1"></i>Deseleccionar Todos
                        </button>
                    </div>
                    
                    <div class="mb-4">
                        <label for="export_format" class="form-label fw-semibold">Formato de Exportación <span class="text-danger">*</span></label>
                        <select class="form-select" id="export_format" name="format" required>
                            <option value="excel">Excel (.xlsx)</option>
                            <option value="pdf">PDF (.pdf)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Filtros Opcionales</label>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="bulk_date_from" class="form-label">Fecha Desde</label>
                                <input type="date" class="form-control" id="bulk_date_from" name="date_from">
                            </div>
                            <div class="col-md-6">
                                <label for="bulk_date_to" class="form-label">Fecha Hasta</label>
                                <input type="date" class="form-control" id="bulk_date_to" name="date_to">
                            </div>
                        </div>
                        <small class="text-muted">Los filtros se aplicarán a todos los reportes seleccionados</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirmBulkExport">
                    <i class="fas fa-download me-1"></i>Exportar
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    /* Estilos para las tarjetas de reportes */
    .report-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-top: 4px solid;
    }

    .report-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .report-card-primary {
        border-top-color: #007bff;
    }

    .report-card-success {
        border-top-color: #28a745;
    }

    .report-card-warning {
        border-top-color: #ffc107;
    }

    .report-card-info {
        border-top-color: #17a2b8;
    }

    .report-card-header {
        padding: 1.5rem;
        background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .report-card-primary .report-card-header {
        background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
    }

    .report-card-success .report-card-header {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
    }

    .report-card-warning .report-card-header {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    }

    .report-card-info .report-card-header {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.1) 0%, rgba(23, 162, 184, 0.05) 100%);
    }

    .report-card-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .report-card-primary .report-card-icon {
        background: rgba(0, 123, 255, 0.15);
        color: #007bff;
    }

    .report-card-success .report-card-icon {
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
    }

    .report-card-warning .report-card-icon {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
    }

    .report-card-info .report-card-icon {
        background: rgba(23, 162, 184, 0.15);
        color: #17a2b8;
    }

    .report-card-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #2c3e50;
    }

    .report-card-body {
        padding: 1.5rem;
        flex-grow: 1;
    }

    .report-metric {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .report-metric:last-child {
        border-bottom: none;
    }

    .report-metric-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }

    .report-metric-value {
        font-size: 1rem;
        font-weight: 700;
        color: #2c3e50;
    }

    .report-card-footer {
        padding: 1rem 1.5rem;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
    }

    /* Estilos para los enlaces de reportes */
    .report-link {
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 1.25rem 1.5rem;
        transition: all 0.2s ease;
    }

    .report-link:hover {
        background: #f8f9fa;
        transform: translateX(4px);
    }

    .report-link:last-child {
        border-bottom: none;
    }

    .report-link-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* Estilos para los enlaces de exportación */
    .export-link {
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 1.25rem 1.5rem;
        transition: all 0.2s ease;
    }

    .export-link:hover {
        background: #f8f9fa;
        transform: translateX(4px);
    }

    .export-link:last-child {
        border-bottom: none;
    }

    .export-link-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .list-group-item {
        border: none;
    }

    .list-group-item h6 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .card {
        border-radius: 12px;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Exportación masiva
    document.getElementById('confirmBulkExport').addEventListener('click', function() {
        const form = document.getElementById('bulkExportForm');
        const formData = new FormData(form);
        const selectedReports = formData.getAll('report_types[]');
        
        if (selectedReports.length === 0) {
            alert('Por favor, selecciona al menos un reporte para exportar');
            return;
        }
        
        // Mostrar indicador de carga
        const btn = this;
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Exportando...';
        
        // Enviar petición
        fetch('{{ route("admin.reports.bulk-export") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(response => {
            if (response.ok) {
                // Si la respuesta es un archivo, descargarlo
                return response.blob().then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    
                    // Obtener nombre del archivo del header Content-Disposition
                    const contentDisposition = response.headers.get('Content-Disposition');
                    let filename = 'exportacion_masiva_' + new Date().toISOString().slice(0,10) + '.xlsx';
                    if (contentDisposition) {
                        const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
                        if (filenameMatch) {
                            filename = filenameMatch[1];
                        }
                    }
                    
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    
                    // Cerrar modal
                    bootstrap.Modal.getInstance(document.getElementById('bulkExportModal')).hide();
                    alert('Exportación completada exitosamente');
                });
            } else {
                return response.json().then(data => {
                    alert('Error al exportar: ' + (data.error || 'Error desconocido'));
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al exportar los reportes');
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    });
    
    // Seleccionar todos los reportes
    window.selectAllReports = function() {
        document.querySelectorAll('input[name="report_types[]"]').forEach(checkbox => {
            checkbox.checked = true;
        });
    };
    
    // Deseleccionar todos los reportes
    window.deselectAllReports = function() {
        document.querySelectorAll('input[name="report_types[]"]').forEach(checkbox => {
            checkbox.checked = false;
        });
    };
});
</script>
@endpush
@endsection