@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@model ReportViewModel
<div class="container reportTabContainer">
    <div class="row hideOnPrint">
        <div class="col-md-3 col-12 mt-2 text-center">
            <span class="lead">@Model.ReportHeaderForVehicle.MaxOdometer.ToString("N0")</span><br />
            <span class="text-secondary">Current Odometer</span>
        </div>
        <div class="col-md-3 col-12 mt-2 text-center">
            <span class="lead">@Model.ReportHeaderForVehicle.DistanceTraveled.ToString("N0")</span><br />
            <span class="text-secondary">Distance Traveled</span>
        </div>
        <div class="col-md-3 col-12 mt-2 text-center">
            <span class="lead">@StaticHelper.HideZeroCost(Model.ReportHeaderForVehicle.DistanceTraveled.ToString("C2"), true)</span><br />
            <span class="text-secondary">Total Cost</span>
        </div>
        <div class="col-md-3 col-12 mt-2 text-center">
            <span class="lead">@Model.ReportHeaderForVehicle.AverageMPG.ToString("F")</span><br />
            <span class="text-secondary">Average Fuel Economy</span>
        </div>
    </div>
    <hr />
    <div class="row hideOnPrint">
        <div class="col-md-3 col-12 mt-2">
            <div class="row">
                <div class="col-12">
                    <select class="form-select" id="yearOption" onchange="yearUpdated()">
                        <option value="0">@translator.Translate(userLanguage, "All Time")</option>
                        @foreach (int year in Model.Years)
                        {
                            <option value="@year">@year</option>
                        }
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="costMakeUpReportContent">
                    @await Html.PartialAsync("_CostMakeUpReport", Model.CostMakeUpForVehicle)
                </div>
            </div>
        </div>
        <div class="col-md-6 col-12 mt-2">
            <div class="row">
                <div class="col-md-1 d-sm-none d-md-block"></div>
                <div class="col-12 col-md-10">
                    <div class="dropdown d-grid dropdown-center">
                        <button class="btn btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                            @translator.Translate(userLanguage, "Metrics")
                        </button>
                        <ul class="dropdown-menu" style="width:100%;">
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input" onChange="updateCheckAll()" type="checkbox" id="selectAllExpenseCheck" value="0" checked>
                                    <label class="form-check-label stretched-link" for="selectAllExpenseCheck">@translator.Translate(userLanguage, "Select All")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="odometerExpenseCheck" value="6" checked>
                                    <label class="form-check-label stretched-link" for="odometerExpenseCheck">@translator.Translate(userLanguage, "Odometer")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="serviceExpenseCheck" value="1" checked>
                                    <label class="form-check-label stretched-link" for="serviceExpenseCheck">@translator.Translate(userLanguage, "Service")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="repairExpenseCheck" value="2" checked>
                                    <label class="form-check-label stretched-link" for="repairExpenseCheck">@translator.Translate(userLanguage, "Repairs")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="upgradeExpenseCheck" value="3" checked>
                                    <label class="form-check-label stretched-link" for="upgradeExpenseCheck">@translator.Translate(userLanguage, "Upgrades")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="gasExpenseCheck" value="4" checked>
                                    <label class="form-check-label stretched-link" for="gasExpenseCheck">@translator.Translate(userLanguage, "Fuel")</label>
                                </div>
                            </li>
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="taxExpenseCheck" value="5" checked>
                                    <label class="form-check-label stretched-link" for="taxExpenseCheck">@translator.Translate(userLanguage, "Taxes")</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-1 d-sm-none d-md-block"></div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="gasCostByMonthReportContent">
                    @await Html.PartialAsync("_GasCostByMonthReport", Model.CostForVehicleByMonth)
                </div>
            </div>
        </div>
        <div class="col-md-3 col-12 mt-2">
            <div class="row">
                <div class="col-12">
                    <select class="form-select" onchange="updateReminderPie()" id="reminderOption">
                        <option value="0">@translator.Translate(userLanguage, "As of Today")</option>
                        <option value="30">@translator.Translate(userLanguage, "+30 Days")</option>
                        <option value="60">@translator.Translate(userLanguage, "+60 Days")</option>
                        <option value="90">@translator.Translate(userLanguage, "+90 Days")</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="reminderMakeUpReportContent">
                    @await Html.PartialAsync("_ReminderMakeUpReport", Model.ReminderMakeUpForVehicle)
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="row hideOnPrint">
        <div class="col-md-3 col-12 chartContainer" id="collaboratorContent">
            @await Html.PartialAsync("_Collaborators", Model.Collaborators)
        </div>
        <div class="col-md-6 col-12 chartContainer">
            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="monthFuelMileageReportContent">
                @await Html.PartialAsync("_MPGByMonthReport", Model.FuelMileageForVehicleByMonth)
            </div>
        </div>
        <div class="col-md-3 col-12 chartContainer">
            <div class="d-grid">
                <button onclick="showGlobalSearch()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Search")<i class="bi ms-2 bi-search"></i></button>
            </div>
            <div class="d-grid">
                <button onclick="generateVehicleHistoryReport()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Vehicle Maintenance Report")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
            </div>
            <div class="d-grid">
                <button onclick="exportAttachments()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Export Attachments")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
            </div>
            @if (Model.CustomWidgetsConfigured)
            {
                <div class="d-grid">
                    <button onclick="loadCustomWidgets()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Additional Widgets")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
                </div>
            }
        </div>
    </div>
</div>
<div class="modal fade" data-bs-focus="false" id="globalSearchModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="globalSearchModalContent">
            <div class="modal-body">
                <div class="input-group input-group-lg">
                    <input type="text" id="globalSearchInput" autocomplete="off" onkeyup="handleGlobalSearchKeyPress(event)" class="form-control" placeholder="@translator.Translate(userLanguage,"Search by Keyword(Case Sensitive)")">
                    <button type="button" class="btn btn-outline-secondary" onclick="performGlobalSearch()"><i class="bi bi-search"></i></button>
                </div>
                <div class="form-check form-switch mt-1">
                    <input class="form-check-input" type="checkbox" role="switch" id="globalSearchAutoSearchCheck" checked>
                    <label class="form-check-label" for="globalSearchAutoSearchCheck">@translator.Translate(userLanguage, "Incremental Search")</label>
                </div>
                <div id="globalSearchModalResults"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" data-bs-focus="false" id="vehicleDataTableModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="vehicleDataTableModalContent">
            
        </div>
    </div>
</div>
@if (Model.CustomWidgetsConfigured)
{
    <div class="modal fade" data-bs-focus="false" id="vehicleCustomWidgetsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" id="vehicleCustomWidgetsModalContent">
            </div>
        </div>
    </div>
}

<script>
    getSelectedMetrics();
</script>