@extends('admin_layouts.main')
@section('main-section')
<div class="content">
    <div class="container-fluid pt-4 px-4">
        <div class="col-sm-6 col-xl-3">
            <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                <i class="fa fa-chart-line fa-3x text-primary"></i>
                <div class="ms-3">
                    <p class="mb-2">Total Projects</p>
                    <h6 class="mb-0">{{count($projects)}}</h6>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid pt-4 px-4">
        
        <!-- Filter Dropdown -->
        <form method="GET" action="{{ route('admin.home') }}">
            
            <div class="row mb-4" style="justify-content: end;">
                <div class="col-md-4">
                    <select name="filter" class="form-control" onchange="this.form.submit()">
                        <option value="all" {{ $filter == 'all' ? 'selected' : '' }}>Filters</option>
                        <option value="last_7_days" {{ $filter == 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                        <option value="last_14_days" {{ $filter == 'last_14_days' ? 'selected' : '' }}>Last 14 Days</option>
                        <option value="today" {{ $filter == 'today' ? 'selected' : '' }}>Today</option>
                        <option value="last_month" {{ $filter == 'last_month' ? 'selected' : '' }}>Last Month</option>
                    </select>
                </div>
            </div>
        </form>

        <div class="row" style="padding-top:40px;">
            <div class="col-md-6">
                <h4>Total Revenue by BDE Executives</h4>
                <canvas id="revenueByBDEChart" width="300" height="200"></canvas>
            </div>
            <!-- Remaining Balance by BDE Executives (Bar Chart) -->
            <div class="col-md-6">
                <h4>Remaining Balance by BDE Executives</h4>
                <canvas id="balanceByBDEChart" width="300" height="200"></canvas>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            // Pass revenue and balance data to JavaScript
            const revenueByBDE = @json($revenueByBDE);
            const balanceByBDE = @json($balanceByBDE);

            // Prepare data for the total revenue chart
            const labelsRevenue = revenueByBDE.map(bde => bde.bde_executive); // BDE Executives
            const totalRevenue = revenueByBDE.map(bde => bde.total_revenue); // Total revenue

            // Create the total revenue bar chart
            const ctxRevenue = document.getElementById('revenueByBDEChart').getContext('2d');
            const revenueByBDEChart = new Chart(ctxRevenue, {
                type: 'bar', // Bar chart type
                data: {
                    labels: labelsRevenue,
                    datasets: [{
                        label: 'Total Revenue (₹)',
                        data: totalRevenue,
                        backgroundColor: 'rgba(60, 179, 113)', // Bar color
                        borderColor: 'rgba(75, 192, 192, 1)', // Border color
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'BDE Executive'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Revenue (₹)'
                            }
                        }
                    }
                }
            });

            // Prepare data for the remaining balance chart
            const labelsBalance = balanceByBDE.map(bde => bde.bde_executive); // BDE Executives
            const totalBalance = balanceByBDE.map(bde => bde.total_balance); // Remaining balance

            // Create the remaining balance bar chart
            const ctxBalance = document.getElementById('balanceByBDEChart').getContext('2d');
            const balanceByBDEChart = new Chart(ctxBalance, {
                type: 'bar', // Bar chart type
                data: {
                    labels: labelsBalance,
                    datasets: [{
                        label: 'Remaining Balance (₹)',
                        data: totalBalance,
                        backgroundColor: 'rgba(255, 0, 0, 0.5)', // Bar color
                        borderColor: 'rgba(255, 159, 64, 1)', // Border color
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'BDE Executive'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Remaining Balance (₹)'
                            }
                        }
                    }
                }
            });
        </script>
    </div>
</div>




    </div>
</div>
@endsection