@using BeWoPlanerMobil.Models
@using BeWoPlanerMobil.Util
@model BeWoPlanerMobil.Models.ReportViewerModel

@{
    if(TempData[TempDataConstants.DoLogoutKey] is bool doLogout && doLogout)
    {
        <text>
            <script type="text/javascript">
                $("#second-logout-form").submit();
            </script>
        </text>
    }
}

<script type="text/javascript">
    function reportFilterOnChange() {
        window.toggleMitarbeiterstundenForm();
    }

    function allEmployeesCbOnClick() {
        const isChecked = $("#msk-all-employees-cb").is(':checked');

        $("#msk-employee-list").toggle(isChecked);
    }

    function allTeamsCbOnClick() {
        const isChecked = $("#msk-all-teams-cb").is(':checked');

        $("#msk-team-list").toggle(isChecked);
    }

    function createMitarbeiterstundenkontoReport() {
        const month = parseInt($("#msk-month-select :selected").val());
        const year = parseInt($("#msk-year-select :selected").val());

        const allEmployees = $("#msk-all-employees-cb").is(':checked');
        const allTeams = $("#msk-all-teams-cb").is(':checked');

        let ansicht = 0;

        if($("#msk-tagesansicht-cb").length) {
            ansicht = $("#msk-tagesansicht-cb").is('checked') ? 1 : 0;
        } else {
            switch ($("input[name=msk-ansichtsradio]:checked").attr("id")) {
            case "msk-tagesansichtsradio":
                ansicht = 1;
                break;
            case "msk-jahresansichtsradio":
                ansicht = 2;
                break;
            default:
                ansicht = 0;
                break;
            }
        }

        const teamForm = $("#msk-team-form");
        const employeeForm = $("#msk-employee-form");

        const isEmployeeFormSelected = employeeForm.css("display") === "block" || employeeForm.css("display") === "none" && (teamForm.css("display") === "none" || teamForm.length === 0);

        const buttonTextLength = $("#msk-team-popup").parent().find(".dropdown-toggle").text().length;

        if(false === isEmployeeFormSelected && buttonTextLength === 0) {
            window.showAlertMessageBoxWithoutCallback("Mitarbeiterstundenkonto", "Bitte wählen Sie ein Team aus.");

            return;
        }

        const all = allEmployees === true || allTeams === true;

        showSpinner();
        $("#msk-report-container").load("@Url.Action("LoadMitarbeiterstundenkonto")", {ansicht: ansicht, month: month, year: year, all: all, isEmployee: isEmployeeFormSelected }, function() {
            hideSpinner();
            $("#bewo-report-popup").modal("show");
        });
    }

    function loadCustomReport() {
        const selectedReportOid2HasParameters = $("#msk-customReportSelect").val();

        if(selectedReportOid2HasParameters === undefined || selectedReportOid2HasParameters === null || selectedReportOid2HasParameters.includes("_") === false) {
            return;
        }

        const oid2HasParams = selectedReportOid2HasParameters.split("_");

        const hasParameters = oid2HasParams[1] === "1";

        const selectedReportOid = oid2HasParams[0];

        if(hasParameters) {
	        showSpinner();
            $("#berichte-form-container").load("@Url.Action("LoadBerichteForm")", {reportOid: selectedReportOid}, function() {
                hideSpinner();
                window.toggleMitarbeiterstundenForm();
                $("#berichte-form-container").show();
            });
        } else {
            showSpinner();
            $("#berichte-form-container").empty();
            $("#berichte-form-container").hide();
            $("#msk-report-container").load("@Url.Action("LoadCustomReport")", {reportOid: selectedReportOid}, function () {
                hideSpinner();
                window.toggleMitarbeiterstundenForm();
                $("#bewo-report-popup").modal("show");
            });
        }
    }

    function setEmployee(element, oid) {
        try {
            $.get("@Url.Action("SetEmployeeForMitarbeiterstundenkonto")", {employeeOid: oid}).done(
                function(employeeName) {
                    $("#msk-employee-popup").parent().find(".dropdown-toggle").text(employeeName);
                    $("#msk-employee-popup").modal("hide");
                });
        } catch(error) {
            window.showErrorPopup(error);
        }
    }

    function setTeam(element, oid) {
        try {
            $.get("@Url.Action("SetTeamForMitarbeiterstundenkonto")", {teamOid: oid}).done(
                function(teamName) {
                    $("#msk-team-popup").parent().find(".dropdown-toggle").text(teamName);
                    $("#msk-team-popup").modal("hide");
                });
        } catch (error) {
            window.showErrorPopup(error);
        }
    }
</script>


@if(Model.SelectedReportType == ReportType.Berichte)
{
    @Html.DropDownListFor(model => model.SelectedCustomReport, Model.CustomReports, new { @class = "custom-select", id = "msk-customReportSelect", onchange = "loadCustomReport()" })
    
    var berichteFormContainerDisplay = Model.SelectedCustomReport?.QueryOid != null ? "block" : "none";

    <div id="berichte-form-container" style="display: @berichteFormContainerDisplay;">
        @Html.Partial("BerichteFormPartialView", Model)
    </div>
}

@if(Model.SelectedReportType == ReportType.Mitarbeiterstundenkonto && Model.HasRightToViewMitarbeiterstundenkonto)
{
    <div id="report-form-container">
        @if(Model.HasRightMitarbeiterstundenkontoViewAll || Model.HasRightMitarbeiterstundenkontoViewTeams)
        {
            <div class="form-row">
                <div class="col">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="filterRadio" id="msk-filterForEmployeesRadio" onchange="reportFilterOnChange()" checked />
                        <label class="custom-control-label" for="msk-filterForEmployeesRadio">Nach Mitarbeiter filtern</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="filterRadio" id="msk-filterForTeamsRadio" onchange="reportFilterOnChange()" />
                        <label class="custom-control-label" for="msk-filterForTeamsRadio">Nach Teams filtern</label>
                    </div>
                </div>
            </div>
        }

        <div id="msk-employee-form">
            @if(Model.HasRightMitarbeiterstundenkontoViewAll)
            {
                <div class="form-row">
                    <div class="col mb-2">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="msk-all-employees-cb" />
                            <label class="custom-control-label" for="msk-all-employees-cb" onclick="allEmployeesCbOnClick()">Alle Mitarbeiter</label>
                        </div>
                    </div>
                </div>
            }
            <div class="form-row" id="msk-employee-list">
                <div class="col mb-2">
                    @Html.PopupWithSearchForIFilterables(Model.AllEmployees, "setEmployee", null, Model.SelectedEmployee?.DetailDescription, "msk-employee-popup", false)
                </div>
            </div>
        </div>
        @if(Model.HasRightMitarbeiterstundenkontoViewAll || Model.HasRightMitarbeiterstundenkontoViewTeams)
        {
            <div id="msk-team-form">
                <div class="form-row">
                    <div class="col mb-2">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="msk-all-teams-cb" />
                            <label class="custom-control-label" for="msk-all-teams-cb" onclick="allTeamsCbOnClick()">Alle Teams</label>
                        </div>
                    </div>
                </div>

                <div class="form-row" id="msk-team-list">
                    <div class="col mb-2">
                        @Html.PopupWithSearchForIFilterables(Model.AllTeams, "setTeam", null, Model.SelectedTeam?.DetailDescription, "msk-team-popup", false)
                    </div>
                </div>
            </div>
        }

        <div class="form-row">
            <div class="col">
                @Html.DropDownListFor(model => model.SelectedMonth, Model.Months, new { @class = "custom-select mb-2", id = "msk-month-select" })
            </div>
            <div class="col">
                @Html.DropDownListFor(model => model.SelectedYear, Model.Years, new { @class = "custom-select mb-2", id = "msk-year-select" })
            </div>
        </div>
        <div class="form-row">
            @{
                var str = BS.Shared.Translation.Translator.Translate("StundenkontoTagesansicht");
            }

            @if(str == "StundenkontoTagesansicht")
            {
                <div class="col-4 mb-2">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="msk-ansichtsradio" id="msk-tagesansichtsradio" />
                        <label class="custom-control-label" for="msk-tagesansichtsradio">Tag</label>
                    </div>
                </div>
                <div class="col-4 mb-2">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="msk-ansichtsradio" id="msk-monatsansichtsradio" checked />
                        <label class="custom-control-label" for="msk-monatsansichtsradio">Monat</label>
                    </div>
                </div>
                <div class="col-4 mb-2">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="msk-ansichtsradio" id="msk-jahresansichtsradio" />
                        <label class="custom-control-label" for="msk-jahresansichtsradio">Jahr</label>
                    </div>
                </div>
            }
            else
            {
                <div class="col mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="msk-tagesansicht-cb" />
                        <label class="custom-control-label" for="msk-tagesansicht-cb">@str</label>
                    </div>
                </div>
            }
        </div>
        <div class="form-row">
            <div class="col">
                <button type="button" class="btn btn-primary w-100" onclick="createMitarbeiterstundenkontoReport()">Erstellen</button>
            </div>
        </div>
    </div>
}