<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Financial Statistics Report</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f5f5;
        }

        @media print {
            body {
                background: white;
            }
            .no-print {
                display: none !important;
            }
        }

        .report-container {
            max-width: 11in;
            margin: 20px auto;
            padding: 40px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .report-header {
            border-bottom: 3px solid #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }

        .company-logo {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .company-info {
            font-size: 11px;
            color: #666;
            line-height: 1.4;
        }

        .report-title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        .report-period {
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-bottom: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-card {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            text-align: center;
        }

        .stat-card.primary {
            border-left: 4px solid #4e73df;
        }

        .stat-card.success {
            border-left: 4px solid #1cc88a;
        }

        .stat-card.danger {
            border-left: 4px solid #e74c3c;
        }

        .stat-card.info {
            border-left: 4px solid #36b9cc;
        }

        .stat-label {
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            color: #666;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .stat-value.positive {
            color: #1cc88a;
        }

        .stat-value.negative {
            color: #e74c3c;
        }

        .section-title {
            background: #34495e;
            color: white;
            font-weight: bold;
            padding: 10px;
            margin: 20px 0 10px;
            border-radius: 4px;
        }

        .monthly-stats-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .monthly-stat {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px 10px;
            text-align: center;
        }

        .monthly-stat-label {
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            color: #666;
            margin-bottom: 5px;
        }

        .monthly-stat-value {
            font-size: 14px;
            font-weight: bold;
        }

        .monthly-stat-value.primary { color: #4e73df; }
        .monthly-stat-value.success { color: #1cc88a; }
        .monthly-stat-value.danger { color: #e74c3c; }
        .monthly-stat-value.info { color: #36b9cc; }
        .monthly-stat-value.warning { color: #f6c23e; }
        .monthly-stat-value.secondary { color: #858796; }

        .print-button {
            display: inline-block;
            margin: 20px auto;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .print-button:hover {
            background: #2980b9;
        }

        .no-print-container {
            text-align: center;
            margin: 20px 0;
        }

        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            text-align: center;
            font-size: 10px;
            color: #666;
        }

        @media print {
            .print-button {
                display: none;
            }

            .report-container {
                box-shadow: none;
                margin: 0;
                padding: 20px;
            }

            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .monthly-stats-grid {
                grid-template-columns: repeat(6, 1fr);
            }

            canvas {
                max-width: 100% !important;
                height: auto !important;
                page-break-inside: avoid;
            }
        }

        @media (max-width: 768px) {
            .report-container {
                max-width: 100%;
                margin: 0;
                padding: 20px;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .monthly-stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="no-print-container no-print">
        <button class="print-button" onclick="window.print()">🖨️ Print Report</button>
        <a href="<?php echo e(route('super-admin.statistics')); ?>" class="print-button" style="background: #6c757d; text-decoration: none;">←</a>
    </div>

    <div class="report-container">
        <!-- Header -->
        <div class="report-header">
            <div class="company-logo">STARUP MIND</div>
            <div class="company-info">Your Trusted Technology Partner</div>
        </div>

        <!-- Report Title -->
        <div class="report-title">FINANCIAL STATISTICS REPORT</div>
        <div class="report-period">
            Filter Period: <strong><?php echo e(\Carbon\Carbon::createFromFormat('Y-m', $filterMonth)->format('F Y')); ?></strong>
        </div>

        <!-- Overall Statistics -->
        <div class="section-title">Overall Statistics (All Time)</div>
        <div class="stats-grid">
            <div class="stat-card primary">
                <div class="stat-label">Total Sales</div>
                <div class="stat-value"><?php echo e(number_format($overallStats['totalSales'], 2)); ?></div>
            </div>
            <div class="stat-card success">
                <div class="stat-label">Total Revenue</div>
                <div class="stat-value"><?php echo e(number_format($overallStats['totalRevenue'], 2)); ?></div>
            </div>
            <div class="stat-card danger">
                <div class="stat-label">Total Expenses</div>
                <div class="stat-value"><?php echo e(number_format($overallStats['totalExpenses'], 2)); ?></div>
            </div>
            <div class="stat-card info">
                <div class="stat-label">Net Profit/Loss</div>
                <div class="stat-value <?php echo e($overallStats['netProfit'] >= 0 ? 'positive' : 'negative'); ?>">
                    <?php echo e(number_format($overallStats['netProfit'], 2)); ?>

                </div>
            </div>
        </div>

        <!-- Monthly Statistics -->
        <div class="section-title"><?php echo e(\Carbon\Carbon::createFromFormat('Y-m', $filterMonth)->format('F Y')); ?> Statistics</div>
        <div class="monthly-stats-grid">
            <div class="monthly-stat">
                <div class="monthly-stat-label">Sales</div>
                <div class="monthly-stat-value primary"><?php echo e(number_format($monthlyStats['sales'], 2)); ?></div>
            </div>
            <div class="monthly-stat">
                <div class="monthly-stat-label">Revenue</div>
                <div class="monthly-stat-value success"><?php echo e(number_format($monthlyStats['revenue'], 2)); ?></div>
            </div>
            <div class="monthly-stat">
                <div class="monthly-stat-label">Expenses</div>
                <div class="monthly-stat-value danger"><?php echo e(number_format($monthlyStats['expenses'], 2)); ?></div>
            </div>
            <div class="monthly-stat">
                <div class="monthly-stat-label">Gross Profit</div>
                <div class="monthly-stat-value info"><?php echo e(number_format($monthlyStats['profit'], 2)); ?></div>
            </div>
            <div class="monthly-stat">
                <div class="monthly-stat-label">Payments</div>
                <div class="monthly-stat-value warning"><?php echo e(number_format($monthlyStats['payments'], 2)); ?></div>
            </div>
            <div class="monthly-stat">
                <div class="monthly-stat-label">Due</div>
                <div class="monthly-stat-value secondary"><?php echo e(number_format($monthlyStats['due'], 2)); ?></div>
            </div>
        </div>

        <!-- Monthly Trends Table -->
        <div class="section-title">Monthly Trends (Last 12 Months)</div>

        <!-- Charts Row -->
        </table>

        <!-- Footer -->
        <div class="footer">
            <p>This is a computer-generated report. No signature required.</p>
            <p>Report Generated on <?php echo e(now()->format('d M Y')); ?> at <?php echo e(now()->format('H:i A')); ?></p>
        </div>
    </div>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // Prepare data for charts
        const monthlyData = <?php echo json_encode($monthlyChartData, 15, 512) ?>;
        const months = monthlyData.map(item => item.month);
        const salesData = monthlyData.map(item => item.sales);
        const revenueData = monthlyData.map(item => item.revenue);
        const expensesData = monthlyData.map(item => item.expenses);
        const profitData = monthlyData.map(item => item.profit);

        // Monthly Trend Line Chart
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: months,
                datasets: [
                    {
                        label: 'Sales',
                        data: salesData,
                        borderColor: '#4e73df',
                        backgroundColor: 'rgba(78, 115, 223, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Revenue',
                        data: revenueData,
                        borderColor: '#1cc88a',
                        backgroundColor: 'rgba(28, 200, 138, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Expenses',
                        data: expensesData,
                        borderColor: '#e74c3c',
                        backgroundColor: 'rgba(231, 76, 60, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Profit',
                        data: profitData,
                        borderColor: '#36b9cc',
                        backgroundColor: 'rgba(54, 185, 204, 0.1)',
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        // Overview Bar Chart
        const overviewCtx = document.getElementById('overviewChart').getContext('2d');
        new Chart(overviewCtx, {
            type: 'bar',
            data: {
                labels: ['Sales', 'Revenue', 'Expenses', 'Profit', 'Payments', 'Due'],
                datasets: [{
                    label: '<?php echo e(\Carbon\Carbon::createFromFormat("Y-m", $filterMonth)->format("F Y")); ?>',
                    data: [
                        <?php echo e($monthlyStats['sales']); ?>,
                        <?php echo e($monthlyStats['revenue']); ?>,
                        <?php echo e($monthlyStats['expenses']); ?>,
                        <?php echo e($monthlyStats['profit']); ?>,
                        <?php echo e($monthlyStats['payments']); ?>,
                        <?php echo e($monthlyStats['due']); ?>

                    ],
                    backgroundColor: [
                        '#4e73df',
                        '#1cc88a',
                        '#e74c3c',
                        '#36b9cc',
                        '#f6c23e',
                        '#858796'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        // Auto-print if coming from print button
        if (new URLSearchParams(window.location.search).get('autoprint') === '1') {
            setTimeout(() => {
                window.print();
            }, 500);
        }
    </script>
</body>
</html>

<?php /**PATH C:\Users\startup sabbir\Desktop\jannat\sarvice-accounts\accounting-system\resources\views/super-admin/statistics-print.blade.php ENDPATH**/ ?>