{% extends 'base.html' %}
{% block content %}

<div class="main-content flex-grow-1 container-fluid mt-4 mb-3">
    <div class="d-flex justify-content-between align-items-center mb-5 pb-3 border-bottom">
        <h2 class="h3 fw-bold  mb-0">Manager Dashboard<i class="fas fa-chart-area text-primary ms-2"></i></h2>
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Last 30 Days
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow">
                <li><a class="dropdown-item" href="#">Today</a></li>
                <li><a class="dropdown-item" href="#">Last 7 Days</a></li>
                <li><a class="dropdown-item" href="#">Last 90 Days</a></li>
            </ul>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Total Revenue</p>
                        <h4 class="fw-bolder text-primary mb-3">$1.25M</h4>
                    </div>
                    <span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +8% from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Net Profit</p>
                        <h4 class="fw-bolder text-success mb-3">$1.25M</h4>
                    </div>
                    <span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +8% from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Total Expense</p>
                        <h4 class="fw-bolder text-danger mb-3">$1.25M</h4>
                    </div>
                    <span class="badge bg-danger-subtle text-danger fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +3% from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Total Cars Sold</p>
                        <h4 class="fw-bolder text-success mb-3">{{ sold_cars }}</h4>
                    </div>
                    <span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +5 units from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Avg. Time on Lot</p>
                        <h4 class="fw-bolder text-warning mb-3">10 days</h4>
                    </div>
                    <span class="badge bg-danger-subtle text-danger fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +2 days from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Inventory Value</p>
                        <h4 class="fw-bolder text-primary mb-3">$5.8M</h4>
                    </div>
                    <span class="badge bg-danger-subtle text-danger fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        -2% from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Aging Inventory</p>
                        <h4 class="fw-bolder text-danger mb-3">12 units</h4>
                    </div>
                    <span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        -4 cars from last month
                    </span>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column justify-content-between p-4">
                    <div>
                        <p class="text-uppercase text-muted fw-bold small mb-1">Gross Profit</p>
                        <h4 class="fw-bolder text-info mb-3">$1.25M</h4>
                    </div>
                    <span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
                        +8% from last month
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-lg-8">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0">
                    <h5 class="fw-bold mb-0 text-dark">Monthly Revenue & Profit</h5>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="revenueProfitChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0">
                    <h5 class="fw-bold mb-0 text-dark">Monthly Cars Sold</h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
                    <canvas id="CarsSoldByMonthChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0">
                    <h5 class="fw-bold mb-0 text-dark">Sales by Make</h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
                    <canvas id="salesByBrandChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0">
                    <h5 class="fw-bold mb-0 text-dark">Top Salesperson Performance</h5>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="salespersonChart"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock content %}


{% block customJS %}
<script>
    // Define a color palette that aligns with the Phoenix template
    const primaryColor = '#7249b6'; // A vibrant purple
    const secondaryColor = '#8193a6'; // A muted gray/blue
    const successColor = '#00d074'; // A bright green
    const warningColor = '#ffc107'; // A strong yellow
    const dangerColor = '#e63757'; // A deep red
    const chartColors = ['#00d27a', '#7249b6', '#32b9ff', '#e63757', '#ffc107'];

    // Monthly Cars Sold (Bar Chart)
    const ctx1 = document.getElementById('CarsSoldByMonthChart').getContext('2d');
    new Chart(ctx1, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Total Cars Sold',
                data: [2, 3, 10, 4, 30, 12, 8, 9, 20, 12, 15, 35],
                backgroundColor: primaryColor,
                borderColor: primaryColor,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { color: secondaryColor }
                },
                x: {
                    grid: { display: false },
                    ticks: { color: secondaryColor }
                }
            }
        }
    });

    // Monthly Revenue & Profit (Line Chart)
    const ctx2 = document.getElementById('revenueProfitChart').getContext('2d');
    new Chart(ctx2, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                    label: 'Monthly Revenue',
                    data: [120000, 150000, 130000, 180000, 200000, 175000, 190000, 220000, 210000, 250000, 240000, 280000],
                    borderColor: primaryColor,
                    backgroundColor: 'rgba(114, 73, 182, 0.1)', // Using primaryColor with transparency
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: primaryColor,
                    pointRadius: 5,
                    pointHoverRadius: 8
                },
                {
                    label: 'Monthly Net Profit',
                    data: [25000, 35000, 28000, 40000, 45000, 38000, 42000, 50000, 48000, 55000, 52000, 60000],
                    borderColor: successColor,
                    backgroundColor: 'rgba(0, 208, 116, 0.1)', // Using successColor with transparency
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: successColor,
                    pointRadius: 5,
                    pointHoverRadius: 8
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    labels: { color: '#495057', boxWidth: 20 }
                },
                tooltip: {
                    backgroundColor: 'rgba(33, 37, 41, 0.9)',
                    titleColor: 'white',
                    bodyColor: 'white',
                    padding: 10,
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { color: secondaryColor },
                    border: { color: secondaryColor }
                },
                y: {
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { color: secondaryColor },
                    border: { color: secondaryColor }
                }
            }
        }
    });

    // Sales by Make (Pie Chart)
    const ctx3 = document.getElementById('salesByBrandChart').getContext('2d');
    new Chart(ctx3, {
        type: 'pie',
        data: {
            labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
            datasets: [{
                label: 'Car Count by Make',
                data: [45, 30, 25, 15, 10],
                backgroundColor: chartColors,
                hoverOffset: 15,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: { color: '#343a40', font: { size: 14 } }
                },
                tooltip: {
                    backgroundColor: 'rgba(33, 37, 41, 0.9)',
                    titleColor: '#fff',
                    bodyColor: '#fff',
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((value / total) * 100).toFixed(2);
                            return `${label}: ${value} cars (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });

    // Salesperson Performance (Bar Chart)
    const ctx_salesperson = document.getElementById('salespersonChart').getContext('2d');
    new Chart(ctx_salesperson, {
        type: 'bar',
        data: {
            labels: ['John Doe', 'Jane Smith', 'Peter Jones', 'Mary Brown'],
            datasets: [{
                label: 'Cars Sold',
                data: [15, 22, 18, 25],
                backgroundColor: chartColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: true, text: 'Top Salesperson Performance', font: { size: 16 } }
            },
            scales: {
                x: {
                    title: { display: true, text: 'Salesperson Name', color: secondaryColor },
                    ticks: { color: secondaryColor }
                },
                y: {
                    beginAtZero: true,
                    title: { display: true, text: 'Number of Cars Sold', color: secondaryColor },
                    ticks: { color: secondaryColor }
                }
            }
        }
    });
</script>
{% endblock %}