{% load i18n %}
{% if request.is_dealer or request.is_manager or request.is_accountant %}
    <h3 class="fw-bold mb-3">
        {% blocktrans with start_date=start_date|date:"F j, Y" end_date=end_date|date:"F j, Y" %}
            Monthly Performance Trends ({{ start_date }} - {{ end_date }})
        {% endblocktrans %}
    </h3>
    <div class="row g-4 mb-5">
        <div class="col-12">
            <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">{% trans "Monthly Revenue & Profit" %}</h5>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="revenueProfitChart" ></canvas>
                </div>
            </div>
        </div>
        <div class="col-12">
            <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">{% trans "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 mb-5">
        <div class="col-lg-6 col-12">
            <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">{% trans "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 col-12">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">{% trans "Models Sold" %}</h5>
                    <form method="GET" class="d-flex align-items-center">
                        <div class="form-group d-flex align-items-center me-2">
                            <label for="carMakeSelectSales" class="form-label mb-0 me-2">{% trans "Select Make:" %}</label>
                            <select id="carMakeSelectSales" class="form-select" name="make_sold">
                                <option value="">{% trans "All Makes" %}</option>
                                {% for make_sold in all_makes_sold %}
                                    <option value="{{ make_sold }}"
                                            {% if make_sold == selected_make_sales %}selected{% endif %}>
                                        {{ make_sold }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">{% trans "Go" %}</button>
                        <input type="hidden" name="start_date" value="{{ start_date|date:'Y-m-d' }}">
                        <input type="hidden" name="end_date" value="{{ end_date|date:'Y-m-d' }}">
                    </form>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="salesChartByModel"></canvas>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% if request.is_dealer or request.is_manager or request.is_inventory %}
    <h3 class="fw-bold mb-3">{% trans "Inventory Trends" %}</h3>
    <div class="row g-4 mb-5">
        <div class="col-lg-6 col-12">
            <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">{% trans "Inventory by Make" %}</h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center"
                     style="height: 400px">
                    <canvas id="inventoryByMakeChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">{% trans "Models in Inventory" %}</h5>
                    <form method="GET" class="d-flex align-items-center">
                        <div class="form-group d-flex align-items-center me-2">
                            <label for="carMakeSelectInventory" class="form-label mb-0 me-2">{% trans "Select Make:" %}</label>
                            <select id="carMakeSelectInventory" class="form-select" name="make_inventory">
                                <option value="">{% trans "All Makes" %}</option>
                                {% for make_inv in all_makes_inventory %}
                                    <option value="{{ make_inv }}"
                                            {% if make_inv == selected_make_inventory %}selected{% endif %}>
                                        {{ make_inv }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">{% trans "Go" %}</button>
                    </form>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="inventoryByModelChart"></canvas>
                </div>
            </div>
        </div>
    </div>
{% endif %}