@extends('layouts.app', ['title' => __('Reports & Analytics')])

@section('content')
<div class="header pb-8 pt-5 pt-md-8">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="mb-3 mt--3">📊 {{ __('Reports & Analytics') }}</h1>
                </div>
                <div class="col-auto">
                    <button id="downloadPdfBtn" onclick="downloadReportsAsPDF()" class="btn btn-primary">
                        <i class="ni ni-cloud-download-95"></i>
                        {{ __('Download PDF') }}
                    </button>
                </div>
            </div>
            <div class="row align-items-center pt-2">
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mt--7">
    <div class="row">
        @if(count($availableReports) > 0)
            @foreach($availableReports as $report)
                <div class="col-xl-12 col-lg-12 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-white border-0">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="mb-0">{{ __($report['name']) }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            @include($report['view'])
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body text-center py-5">
                        <div class="mb-4">
                            <i class="ni ni-chart-bar-32 ni-3x text-muted"></i>
                        </div>
                        <h4 class="text-muted">{{ __('No Reports Available') }}</h4>
                        <p class="text-muted">{{ __('No modules with reports are currently installed or active.') }}</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

@endsection

@section('js')
<script src="{{ asset('vendor/chart/chart.js') }}"></script>

<style>
@media print {
    .header, .navbar, .btn, .no-print {
        display: none !important;
    }
    
    .container-fluid {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }
    
    .card {
        break-inside: avoid;
        margin-bottom: 20px;
    }
    
    .chart canvas {
        max-height: 300px !important;
    }
    
    body {
        font-size: 12px;
    }
    
    h1, h2, h3 {
        color: #000 !important;
    }
    
    .text-white {
        color: #000 !important;
    }
    
    .bg-gradient-default,
    .bg-gradient-info,
    .bg-gradient-success,
    .bg-gradient-warning,
    .bg-gradient-danger,
    .bg-gradient-primary {
        background: #f8f9fa !important;
        color: #000 !important;
    }
    
    .card-header {
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    @page {
        margin: 1cm;
        size: A4;
    }
}

.print-header {
    display: none;
}

@media print {
    .print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }
}
</style>

<script>
function downloadReportsAsPDF() {
    const downloadBtn = document.getElementById('downloadPdfBtn');
    const originalContent = downloadBtn.innerHTML;
    
    // Show loading state
    downloadBtn.innerHTML = '<i class="ni ni-settings-gear-65 fa-spin"></i> {{ __("Preparing PDF...") }}';
    downloadBtn.disabled = true;
    
    // Add print header with current timestamp and company info
    const printHeader = document.createElement('div');
    printHeader.className = 'print-header';
    printHeader.innerHTML = `
        <h1>{{ __('Reports & Analytics') }}</h1>
        <p><strong>{{ __('Generated on') }}:</strong> ${new Date().toLocaleString()}</p>
        <p><strong>{{ __('Company') }}:</strong> {{ auth()->user()->currentCompany()->name ?? 'N/A' }}</p>
        <p><strong>{{ __('Generated by') }}:</strong> {{ auth()->user()->name }}</p>
    `;
    
    // Insert at the beginning of the container
    const container = document.querySelector('.container-fluid');
    if (container) {
        container.insertBefore(printHeader, container.firstChild);
    }
    
    // Wait for charts to fully render and data to load
    setTimeout(() => {
        // Show user instruction
        if (confirm('{{ __("This will open your browser\'s print dialog. Please select \'Save as PDF\' as your destination.") }}')) {
            // Trigger browser print dialog
            window.print();
        }
        
        // Reset button state
        downloadBtn.innerHTML = originalContent;
        downloadBtn.disabled = false;
        
        // Remove print header after printing
        setTimeout(() => {
            if (printHeader && printHeader.parentNode) {
                printHeader.parentNode.removeChild(printHeader);
            }
        }, 1000);
    }, 1000);
}

// Add keyboard shortcut for PDF download
document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
        e.preventDefault();
        downloadReportsAsPDF();
    }
});

// Add event listener for after print
window.addEventListener('afterprint', function() {
    // Show success message
    if (typeof js !== 'undefined' && js.notify) {
        js.notify('{{ __("PDF generation completed!") }}', 'success');
    } else {
        alert('{{ __("PDF generation completed!") }}');
    }
});

// Add event listener for before print to ensure all data is loaded
window.addEventListener('beforeprint', function() {
    console.log('Preparing reports for PDF generation...');
});
</script>

@if(count($availableReports) > 0)
    @foreach($availableReports as $report)
        @include($report['script'])
    @endforeach
@endif
@endsection
