@extends('layouts.app')

@section('content')
<div class="container-fluid px-4" id="statistics-content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Financial Statistics</h1>
        <button onclick="window.print()" class="btn btn-primary">
            <i class="fas fa-print"></i> Print Report
        </button>
    </div>

    <!-- Month Filter -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('super-admin.statistics') }}" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="month" class="form-label">Filter by Month</label>
                    <select name="month" id="month" class="form-select" onchange="this.form.submit()">
                        @foreach($availableMonths as $month)
                            <option value="{{ $month['value'] }}" {{ $filterMonth == $month['value'] ? 'selected' : '' }}>
                                {{ $month['label'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('super-admin.statistics') }}" class="btn btn-secondary">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Overall Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow border-left-primary">
                <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 Sales</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($overallStats['totalSales'], 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-left-success">
                <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">Total Revenue</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($overallStats['totalRevenue'], 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-left-danger">
                <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-danger text-uppercase mb-1">Total Expenses</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($overallStats['totalExpenses'], 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-minus-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-left-info">
                <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">Net Profit/Loss</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800 {{ $overallStats['netProfit'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ number_format($overallStats['netProfit'], 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Statistics (Filtered) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h6 class="m-0">{{ \Carbon\Carbon::createFromFormat('Y-m', $filterMonth)->format('F Y') }} Statistics</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Sales</div>
                                <div class="h5 text-primary">{{ number_format($monthlyStats['sales'], 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Revenue</div>
                                <div class="h5 text-success">{{ number_format($monthlyStats['revenue'], 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Expenses</div>
                                <div class="h5 text-danger">{{ number_format($monthlyStats['expenses'], 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Gross Profit</div>
                                <div class="h5 text-info">{{ number_format($monthlyStats['profit'], 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Payments</div>
                                <div class="h5 text-warning">{{ number_format($monthlyStats['payments'], 2) }}</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <div class="text-muted small">Due</div>
                                <div class="h5 text-secondary">{{ number_format($monthlyStats['due'], 2) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="row mb-4">
        <!-- Line Chart - Monthly Trends -->
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h6 class="m-0">Monthly Trends (Last 12 Months)</h6>
                </div>
                <div class="card-body">
                    <canvas id="trendChart" height="100"></canvas>
                </div>
            </div>
        </div>
        <!-- Bar Chart - Current Month Comparison -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-secondary text-white">
                    <h6 class="m-0">{{ \Carbon\Carbon::createFromFormat('Y-m', $filterMonth)->format('F Y') }} Overview</h6>
                </div>
                <div class="card-body">
                    <canvas id="overviewChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>


    <!-- Permission Usage -->


    <div class="text-center mt-4">
        <a href="{{ route('super-admin.dashboard') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left"></i> Back to Dashboard
        </a>
    </div>
</div>

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

<script>
    // Prepare data for charts
    const monthlyData = @json($monthlyChartData);
    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: '{{ \Carbon\Carbon::createFromFormat("Y-m", $filterMonth)->format("F Y") }}',
                data: [
                    {{ $monthlyStats['sales'] }},
                    {{ $monthlyStats['revenue'] }},
                    {{ $monthlyStats['expenses'] }},
                    {{ $monthlyStats['profit'] }},
                    {{ $monthlyStats['payments'] }},
                    {{ $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();
                        }
                    }
                }
            }
        }
    });
</script>

<style>
    /* Print Styles */
    @media print {
        body {
            background-color: white !important;
        }

        .no-print {
            display: none !important;
        }

        .card {
            border: 1px solid #ddd !important;
            box-shadow: none !important;
        }

        .card-header {
            background-color: #f8f9fa !important;
            color: #000 !important;
            border-bottom: 1px solid #ddd !important;
        }

        .text-white {
            color: #000 !important;
        }

        #statistics-content {
            padding: 0 !important;
        }

        .container-fluid {
            max-width: 100% !important;
            padding: 0 !important;
        }

        .col-lg-8, .col-lg-4, .col-md-3, .col-md-2 {
            page-break-inside: avoid;
        }

        canvas {
            max-width: 100% !important;
            height: auto !important;
        }

        .btn {
            display: none !important;
        }
    }
</style>
@endsection