{% load i18n static custom_filters django_ledger %}
{% block content %}
    <div class="row justify-content-between mb-2">
        <h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
            <span class="text-gradient-info me-3">{{ dealer.get_local_name }}</span>
        </h3>
        <p>
            <span class="badge badge-phoenix badge-phoenix-success me-2 fs-10">
                <span class="fs-10 text-body-secondary me-1">{{ _("As of") }}</span>{% now "SHORT_DATETIME_FORMAT" %}
            </span>
        </p>
    </div>
    <div class="row justify-content-between mb-2">
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-users-alt text-success"></span>
            <a href="{% url 'user_list' request.dealer.slug %}">
                <h4 class="fs-6 pt-3">{{ staff }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Staff") }}</p>
        </div>
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-bolt-alt text-primary"></span>
            <a href="{% url 'lead_list' request.dealer.slug %}">
                <h4 class="fs-6 pt-3">{{ total_leads }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Leads") }}</p>
        </div>
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-user-plus text-warning"></span>
            <a href="{% url 'customer_list' request.dealer.slug %}">
                <h4 class="fs-6 pt-3">{{ customers }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Customers") }}</p>
        </div>
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-bill text-info"></span>
            <a href="{% url 'invoice_list' request.dealer.slug %}">
                <h4 class="fs-6 pt-3">{{ invoices }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Invoices") }}</p>
        </div>
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-comment-alt-question text-success-dark"></span>
            <a href="{% url 'estimate_list' request.dealer.slug %}">
                <h4 class="fs-6 pt-3">{{ estimates }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Quotations") }}</p>
        </div>
        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
            <span class="uil fs-5 lh-1 uil-receipt-alt text-secondary"></span>
            <a href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}">
                <h4 class="fs-6 pt-3">{{ purchase_orders }}</h4>
            </a>
            <p class="fs-9 mb-0">{{ _("Purchase Orders") }}</p>
        </div>
    </div>
    <div class="row g-3 pe-xxl-3 my-3">
        <div class="col-12 col-xl-6 col-xxl-12">
            <div class="row">
                <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
                    <h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
                    <div class="d-md-flex flex-between-center">
                        <div id="car-chart-by-make"
                             class="order-sm-0 order-md-1"
                             style="height:64px;
                                    width: 128px"></div>
                        <div class="mt-4 mt-md-0">
                            <h1 class="text-body-highlight">
                                {{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span>
                            </h1>
                        </div>
                    </div>
                </div>
                <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
                    <h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
                    <div class="d-md-flex flex-between-center">
                        <div class="d-md-flex align-items-center gap-2">
                            <span class="fas fa-money-check-alt fs-5 text-success-light dark__text-opacity-75"></span>
                            <div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
                                <p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
                                <h4 class="text-body-highlight mb-0"></h4>
                            </div>
                        </div>
                        <div class="mt-3 mt-md-0">
                            <h3 class="text-body-highlight mb-2">
                                {{ total_selling_price|currency_format }} <span class="icon-saudi_riyal"></span>
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
                    <h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
                    <div class="d-md-flex flex-between-center">
                        <div class="d-md-flex align-items-center gap-2">
                            <span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75"
                                  data-bs-theme="light"></span>
                            <div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
                                <p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
                                <h4 class="text-body-highlight mb-0"></h4>
                            </div>
                        </div>
                        <div class="mt-3 mt-md-0">
                            <h3 class="text-body-highlight mb-2">
                                {{ total_profit|currency_format }} <span class="icon-saudi_riyal"></span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-between">
        <div class="col-12 col-lg-12">
            <div class="row">
                <div class="card mb-3">
                    <div class="bg-holder"
                         style="background-image:url({% static 'images/bg/38.png' %});
                                background-position:left bottom;
                                background-size:auto"></div>
                    <div class="card-body d-flex justify-content-between position-relative">
                        <div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
                            <h3 class="mb-3">{{ _("Inventory by Status") }}</h3>
                            <div class="row g-0">
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-success"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
                                    </div>
                                </div>
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-warning"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
                                    </div>
                                </div>
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-danger"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
                                    </div>
                                </div>
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-primary"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
                                    </div>
                                </div>
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-warning-light"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
                                    </div>
                                </div>
                                <div class="col-6 col-xl-4">
                                    <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="fa-solid fa-square fs-11 me-2 text-secondary-dark"
                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span>
                                        </div>
                                        <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
                            <div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
                                <div id="echart-cars-by-status"
                                     class="mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0"
                                     style="min-height:245px;
                                            width:100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
    /* Car Chart By Make */
            const { getColor, rgbaColor } = window.phoenix.utils;
            const handleTooltipPosition = ([pos, , dom, , size]) => {
        // only for mobile device
                if (window.innerWidth <= 540) {
                    const tooltipHeight = dom.offsetHeight;
                    const obj = {top: pos[1] - tooltipHeight - 20};
                    obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
                    return obj;
                }
                return null; // else default behaviour
            };


            const carData = {{ car|safe }}
            const carNames = carData.map(item => item.id_car_make__name);
            const carCounts = carData.map(item => item.count);

            const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
            option = {
                color: getColor("danger"),
                tooltip: {
                    trigger: 'axis',
                    position: (...params) => handleTooltipPosition(params),
                    padding: [7, 10],
                    axisPointer: {
                        type: 'none'
                    },
                },
                extraCssText: 'z-index: 1000',
                responsive: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: carNames,
                        axisLine: {
                            show: true,
                            lineStyle: {color: getColor('secondary-bg')}
                        },
                        axisTick: {
                            show: false
                        },
                    }
                ],
                yAxis: [
                    {
                        show: false,
                        type: 'value',
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: 3,
                        backgroundStyle: {
                            borderRadius: [0.5, 0.5, 0, 0],
                        },
                        data: carCounts
                    },
                ],
                grid: {
                    bottom: 0,
                    top: 0,
                    left: 10,
                    right: 10,
                    containLabel: false
                }
            };

            car_chart.setOption(option);

    /* Car Status Chart */
            const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
            const data = [
                {value: {{available_cars}}, name: '{{ _("Available") }}'},
                {value: {{sold_cars}}, name: '{{ _("Sold")}}'},
                {value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
                {value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
                {value: {{hold_cars}}, name: '{{ _("Hold") }}'},
                {value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
            ];

            option = {
                color: [
                    rgbaColor(getColor('success'),0.7),
                    rgbaColor(getColor('warning'),0.7),
                    rgbaColor(getColor('danger'),0.7),
                    rgbaColor(getColor('primary'),0.7),
                    rgbaColor(getColor('warning-light'),0.7),
                    rgbaColor(getColor('secondary-light'),0.7),
                ],
                tooltip: {
                    trigger: 'item',
                    padding: [7, 10],
                    backgroundColor: getColor('body-highlight-bg'),
                    borderColor: getColor('body-bg'),
                    textStyle: {color: getColor('light-text-emphasis')},
                    borderWidth: 1,
                    transitionDuration: 0,
                    extraCssText: 'z-index: 1000'
                },
                responsive: true,
                maintainAspectRatio: false,

                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['55%', '90%'],
                        startAngle: 90,
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: getColor('body-bg'),
                            borderWidth: 3
                        },

                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data
                    }
                ],
                grid: {
                    bottom: 0,
                    top: 0,
                    left: 0,
                    right: 0,
                    containLabel: false
                }
            };
            car_status.setOption(option);



        });
    </script>
{% endblock %}