@extends('layouts.app')

@section('title', 'Gestión de Reportes')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-chart-bar me-2"></i>Gestión de Reportes
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.config.print-configurations.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Nueva Configuración
            </a>
            <a href="{{ route('admin.config.print-configurations.index') }}" class="btn btn-secondary">
                <i class="fas fa-cog me-2"></i>Configuraciones
            </a>
        </div>
    </div>

    <!-- Filtros de Búsqueda -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-secondary">
                <i class="fas fa-filter me-2"></i>Filtros de Búsqueda
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label for="moduleFilter" class="form-label">Módulo</label>
                    <select id="moduleFilter" class="form-select">
                        <option value="">Todos los módulos</option>
                        @foreach($modules as $moduleKey => $module)
                            <option value="{{ $moduleKey }}">{{ $module['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="statusFilter" class="form-label">Estado</label>
                    <select id="statusFilter" class="form-select">
                        <option value="">Todos los estados</option>
                        <option value="active">Activos</option>
                        <option value="inactive">Inactivos</option>
                        <option value="unconfigured">Sin Configurar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="searchReport" class="form-label">Buscar Reporte</label>
                    <input type="text" id="searchReport" class="form-control" placeholder="Nombre del reporte...">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 text-end">
                    <button type="button" class="btn btn-primary" id="applyFilters">
                        <i class="fas fa-search me-1"></i>Aplicar Filtros
                    </button>
                    <button type="button" class="btn btn-secondary" id="clearFilters">
                        <i class="fas fa-times me-1"></i>Limpiar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Configuraciones
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_configurations'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-cog fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Configuraciones Activas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_configurations'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Módulos Disponibles
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['modules_count'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-layer-group fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Tipos de Reporte
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['reports_count'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Módulos de Reportes -->
    @foreach($modules as $moduleKey => $module)
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="{{ $module['icon'] }} me-2"></i>{{ $module['name'] }}
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($module['reports'] as $reportKey => $reportName)
                    @php
                        $configuration = $configurations->get($reportKey);
                        $hasConfiguration = $configuration && $configuration->count() > 0;
                        $isActive = $hasConfiguration && $configuration->first()->is_active;
                    @endphp
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card h-100 {{ $isActive ? 'border-success' : 'border-secondary' }}">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="card-title mb-0">{{ $reportName }}</h6>
                                    @if($hasConfiguration)
                                        <span class="badge bg-{{ $isActive ? 'success' : 'secondary' }}">
                                            {{ $isActive ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    @else
                                        <span class="badge bg-warning">Sin Configurar</span>
                                    @endif
                                </div>
                                
                                <p class="card-text text-muted small">
                                    @if($hasConfiguration)
                                        {{ $configuration->first()->description }}
                                    @else
                                        Configuración automática disponible
                                    @endif
                                </p>

                                <div class="d-flex gap-2 mt-3">
                                    @if($hasConfiguration)
                                        <a href="{{ route('admin.config.print-configurations.edit', $configuration->first()) }}" 
                                           class="btn btn-sm btn-primary">
                                            <i class="fas fa-edit me-1"></i>Editar
                                        </a>
                                        <a href="{{ route('admin.config.print-configurations.preview', $configuration->first()) }}" 
                                           class="btn btn-sm btn-info">
                                            <i class="fas fa-eye me-1"></i>Vista Previa
                                        </a>
                                        <a href="{{ route('admin.config.reports.generate', [$moduleKey, $reportKey]) }}" 
                                           class="btn btn-sm btn-success">
                                            <i class="fas fa-download me-1"></i>Generar
                                        </a>
                                    @else
                                        <a href="{{ route('admin.config.reports.configure', [$moduleKey, $reportKey]) }}" 
                                           class="btn btn-sm btn-warning">
                                            <i class="fas fa-cog me-1"></i>Configurar
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endforeach

    <!-- Configuraciones Existentes -->
    @if($configurations->count() > 0)
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-info">
                <i class="fas fa-list me-2"></i>Configuraciones Existentes
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Reporte</th>
                            <th>Nombre</th>
                            <th>Estado</th>
                            <th>Predeterminado</th>
                            <th>Creado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($configurations->flatten() as $config)
                        <tr>
                            <td>
                                <span class="badge bg-primary">{{ $config->report_type }}</span>
                            </td>
                            <td>{{ $config->report_name }}</td>
                            <td>
                                <span class="badge bg-{{ $config->is_active ? 'success' : 'secondary' }}">
                                    {{ $config->is_active ? 'Activo' : 'Inactivo' }}
                                </span>
                            </td>
                            <td>
                                @if($config->is_default)
                                    <span class="badge bg-warning">Predeterminado</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>{{ $config->created_at->format('d/m/Y') }}</td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('admin.config.print-configurations.show', $config) }}" 
                                       class="btn btn-outline-info" title="Ver">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.config.print-configurations.edit', $config) }}" 
                                       class="btn btn-outline-primary" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ route('admin.config.print-configurations.preview', $config) }}" 
                                       class="btn btn-outline-success" title="Vista Previa">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Funcionalidad de filtros
    const moduleFilter = document.getElementById('moduleFilter');
    const statusFilter = document.getElementById('statusFilter');
    const searchReport = document.getElementById('searchReport');
    const applyFiltersBtn = document.getElementById('applyFilters');
    const clearFiltersBtn = document.getElementById('clearFilters');
    
    // Aplicar filtros
    function applyFilters() {
        const moduleValue = moduleFilter.value;
        const statusValue = statusFilter.value;
        const searchValue = searchReport.value.toLowerCase();
        
        // Obtener todas las tarjetas de módulos
        const moduleCards = document.querySelectorAll('.card.shadow.mb-4');
        
        moduleCards.forEach(card => {
            const moduleHeader = card.querySelector('.card-header h6');
            const moduleName = moduleHeader ? moduleHeader.textContent.toLowerCase() : '';
            
            // Filtrar por módulo
            if (moduleValue && !moduleName.includes(moduleValue)) {
                card.style.display = 'none';
                return;
            }
            
            // Filtrar reportes dentro del módulo
            const reportCards = card.querySelectorAll('.col-md-6.col-lg-4.mb-3');
            let visibleReports = 0;
            
            reportCards.forEach(reportCard => {
                const reportTitle = reportCard.querySelector('.card-title');
                const reportName = reportTitle ? reportTitle.textContent.toLowerCase() : '';
                const badge = reportCard.querySelector('.badge');
                const badgeText = badge ? badge.textContent.toLowerCase() : '';
                
                let showCard = true;
                
                // Filtrar por estado
                if (statusValue) {
                    if (statusValue === 'active' && !badgeText.includes('activo')) {
                        showCard = false;
                    } else if (statusValue === 'inactive' && !badgeText.includes('inactivo')) {
                        showCard = false;
                    } else if (statusValue === 'unconfigured' && !badgeText.includes('sin configurar')) {
                        showCard = false;
                    }
                }
                
                // Filtrar por búsqueda
                if (searchValue && !reportName.includes(searchValue)) {
                    showCard = false;
                }
                
                if (showCard) {
                    reportCard.style.display = 'block';
                    visibleReports++;
                } else {
                    reportCard.style.display = 'none';
                }
            });
            
            // Mostrar/ocultar módulo completo si no tiene reportes visibles
            if (visibleReports === 0) {
                card.style.display = 'none';
            } else {
                card.style.display = 'block';
            }
        });
    }
    
    // Limpiar filtros
    function clearFilters() {
        moduleFilter.value = '';
        statusFilter.value = '';
        searchReport.value = '';
        
        // Mostrar todas las tarjetas
        const allCards = document.querySelectorAll('.card.shadow.mb-4, .col-md-6.col-lg-4.mb-3');
        allCards.forEach(card => {
            card.style.display = 'block';
        });
    }
    
    // Event listeners
    applyFiltersBtn.addEventListener('click', applyFilters);
    clearFiltersBtn.addEventListener('click', clearFilters);
    
    // Búsqueda en tiempo real
    searchReport.addEventListener('input', function() {
        if (this.value.length >= 2 || this.value.length === 0) {
            applyFilters();
        }
    });
    
    // Filtro por módulo
    moduleFilter.addEventListener('change', applyFilters);
    statusFilter.addEventListener('change', applyFilters);
    
    // Contador de reportes visibles
    function updateReportCount() {
        const visibleReports = document.querySelectorAll('.col-md-6.col-lg-4.mb-3[style*="block"], .col-md-6.col-lg-4.mb-3:not([style*="none"])');
        console.log(`Reportes visibles: ${visibleReports.length}`);
    }
    
    // Actualizar contador después de aplicar filtros
    applyFiltersBtn.addEventListener('click', updateReportCount);
    clearFiltersBtn.addEventListener('click', updateReportCount);
});
</script>
@endpush