{% extends 'back.html.twig' %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Dashboard</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box text-bg-primary">
                        <div class="inner">
                            <h3>{{ unfinishedJobs }}</h3>
                            <p>Unfinished Jobs</p>
                        </div>
                        <div class="icon"><i class="bi bi-layers small-box-icon"></i></div>
                        <a href="{{ path('admin_job_index') }}" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                            More info <i class="bi bi-link-45deg"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box text-bg-success">
                        <div class="inner">
                            <h3>{{ unpaidInvoices }} <sup class="fs-5" style="margin-left: 10px;">${{ unpaidTotal }}</sup></h3>
                            <p>Unpaid Invoices</p>
                        </div>
                        <div class="icon"><i class="bi bi-currency-dollar small-box-icon"></i></div>
                        <a href="{{ path('admin_invoice_index') }}" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                            More info <i class="bi bi-link-45deg"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box text-bg-warning">
                        <div class="inner">
                            <h3>{{ paidInvoicesMonth }} <sup class="fs-5" style="margin-left: 10px;">${{ paidInvoicesMonthTotal }}</sup></h3>
                            <p>Paid Invoices for Current Month</p>
                        </div>
                        <div class="icon"><i class="bi bi-currency-dollar small-box-icon"></i></div>
                        <a href="{{ path('admin_invoice_index') }}" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
                            More info <i class="bi bi-link-45deg"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box text-bg-danger">
                        <div class="inner">
                            <h3>{{ finishedJobsMonth }}</h3>
                            <p>Finished Jobs for Current Month</p>
                        </div>
                        <div class="icon"><i class="bi bi-layers small-box-icon"></i></div>
                        <a href="{{ path('admin_job_index') }}" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
                            More info <i class="bi bi-link-45deg"></i>
                        </a>
                    </div>
                </div>
            </div>


{#            <div class="row">#}
{#                <div class="col-lg-6 connectedSortable">#}
{#                    <div class="card mb-4">#}
{#                        <div class="card-header" style="cursor: move;"><h3 class="card-title">Jobs for 2026</h3></div>#}
{#                        <div class="card-body"><div id="jobs-chart"></div></div>#}
{#                    </div>#}
{#                </div>#}

{#            </div>#}
        </div>
    </div>


    <script>
        // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
        // IT'S ALL JUST JUNK FOR DEMO
        // ++++++++++++++++++++++++++++++++++++++++++

        const sales_chart_options = {
            series: [
                {
                    name: 'Digital Goods',
                    data: [28, 48, 40, 19, 86, 27, 90],
                },
                {
                    name: 'Electronics',
                    data: [65, 59, 80, 81, 56, 55, 40],
                },
            ],
            chart: {
                height: 300,
                type: 'area',
                toolbar: {
                    show: false,
                },
            },
            legend: {
                show: false,
            },
            colors: ['#0d6efd', '#20c997'],
            dataLabels: {
                enabled: false,
            },
            stroke: {
                curve: 'smooth',
            },
            xaxis: {
                type: 'datetime',
                categories: [
                    '2023-01-01',
                    '2023-02-01',
                    '2023-03-01',
                    '2023-04-01',
                    '2023-05-01',
                    '2023-06-01',
                    '2023-07-01',
                ],
            },
            tooltip: {
                x: {
                    format: 'MMMM yyyy',
                },
            },
        };

        const sales_chart = new ApexCharts(
            document.querySelector('#jobs-chart'),
            sales_chart_options,
        );
        sales_chart.render();
    </script>

{% endblock %}