BeWoPlaner/BeWoPlanerMobil/Views/Scheduler/AppointmentIntervalFinderPartial.cshtml

@using BeWoPlanerMobil.Models
@model BeWoPlanerMobil.Models.SchedulerModel

<script type="text/javascript">
    $(function () {
        $("#scheduler-interval-start-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#scheduler-interval-end-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#scheduler-interval-start-time-picker").datetimepicker({
            locale: "de",
            format: "LT"
        });

        $("#scheduler-interval-end-time-picker").datetimepicker({
            locale: "de",
            format: "LT"
        });
    });

    function resetIntervalFinderForm() {
        $("#scheduler-interval-start-time, #scheduler-interval-end-time, #duration").val("");
        $("#scheduler-interval-start, #scheduler-interval-end").val(moment().format("DD.MM.YYYY"));

        $("#resources-interval-finder-popup input:checked, #customers-interval-finder-popup input:checked, #employees-interval-finder-popup input:checked").each(function() {
            $(this).prop("checked", false);
        });

        $("#selected-resources-interval-finder-list, #selected-employees-interval-finder-list, #selected-customers-interval-finder-list").empty();

        var url = '@Url.Action("ResetIntervalFinder", "Scheduler")';

        $.get(url);
    }

    function submitIntervalFinderForm() {
        try {
            showSpinner();
            $("#find-appointment-intervals-form").submit();
        } catch(error) {
            logError(error.message);
        }
    }
</script>

<div id="interval-form-container">
        @using (Html.BeginForm("FindFreeIntervals", "Scheduler", FormMethod.Post, new { id = "find-appointment-intervals-form" }))
        {
            <div class="mt-3">
                <div class="form-row">
                    <div class="col-12">
                        <div class="form-group mb-1">
                            <label for="scheduler-interval-start">Datum-Zeitraum (von)</label>
                            <div class="input-group date" id="scheduler-interval-start-picker" data-target-input="nearest">
                                <input value="@Model.IntervalStartDateStr" type="text" id="scheduler-interval-start" name="IntervalStart" class="form-control datetimepicker-input" data-target="#scheduler-interval-start-picker" data-toggle="datetimepicker" />
                                <div class="input-group-append" data-target="#scheduler-interval-start-picker" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group mb-1">
                            <label for="scheduler-interval-start-time">Zwischen Uhrzeit (von)</label>
                            <div class="input-group date" id="scheduler-interval-start-time-picker" data-target-input="nearest">
                                <input value="@Model.IntervalStartTimeStr" type="text" id="scheduler-interval-start-time" name="IntervalStartTime" class="form-control datetimepicker-input" data-target="#scheduler-interval-start-time-picker" />
                                <div class="input-group-append" data-target="#scheduler-interval-start-time-picker" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fas fa-clock"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-12">
                        <div class="form-group mb-1">
                            <label for="scheduler-interval-end">Datum-Zeitraum (bis)</label>
                            <div class="input-group date" id="scheduler-interval-end-picker" data-target-input="nearest">
                                <input value="@Model.IntervalEndDateStr" type="text" id="scheduler-interval-end" name="IntervalEnd" class="form-control datetimepicker-input" data-target="#scheduler-interval-end-picker" data-toggle="datetimepicker" />
                                <div class="input-group-append" data-target="#scheduler-interval-end-picker" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group mb-1">
                            <label for="scheduler-interval-end-time">Zwischen Uhrzeit (bis)</label>
                            <div class="input-group date" id="scheduler-interval-end-time-picker" data-target-input="nearest">
                                <input value="@Model.IntervalEndTimeStr" type="text" id="scheduler-interval-end-time" name="IntervalEndTime" class="form-control datetimepicker-input" data-target="#scheduler-interval-end-time-picker" />
                                <div class="input-group-append" data-target="#scheduler-interval-end-time-picker" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fas fa-clock"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md">
                        <div class="form-group mb-1">
                            <label for="interval-duration">Dauer</label>
                            <input value="@Model.IntervalDurationStr" type="number" id="interval-duration" name="Duration" class="form-control" />
                        </div>
                    </div>
                </div>

                @if (Model.HasResourcesEmployeesOrCustomers)
                {
                    <!-- Hinzufügen-Buttons -->
                    <div class="form-row">
                        @if (AbstractModel.HasRightToInsertEmployeeAppointments)
                        {
                            <div class="col-md">
                                <div class="form-group my-1">
                                    <button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#employees-interval-finder-popup">Mitarbeiter<br/>hinzufügen</button>
                                </div>
                            </div>
                        }
                        @if (AbstractModel.HasRightToInsertCustomerAppointments)
                        {
                            <div class="col-md">
                                <div class="form-group my-1">
                                    <button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#customers-interval-finder-popup">Klienten<br />hinzufügen</button>
                                </div>
                            </div>
                        }
                        @if (AbstractModel.HasRightToInsertRessourceAppointments && Model.ResourceCategories2Resources.Any())
                        {
                            <div class="col-md">
                                <div class="form-group my-1">
                                    <button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#resources-interval-finder-popup">Ressourcen<br />hinzufügen</button>
                                </div>
                            </div>
                        }
                    </div>

                    <div class="form-row">
                        @if (AbstractModel.HasRightToInsertEmployeeAppointments)
                        {
                            <div class="col-12">
                                <div class="form-group my-1">
                                    <div class="list-group" id="selected-employees-interval-finder-list">
                                        @foreach (var selectedEmployee in Model.SelectedEmployeesForIntervalFinder)
                                        {
                                            <div class="list-group-item my-auto" id="related-employee-interval-finder-@selectedEmployee.EmployeeOid">
                                                <div class="row">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <i class="fas fa-user text-bewo-employee h-100"></i>
                                                        </div>
                                                        <p class="form-control border-0 bg-transparent text-truncate">
                                                            @selectedEmployee.DetailDescription
                                                        </p>
                                                        <div class="input-group-append">
                                                            @{
                                                                var url = Url.Action("SelectEmployeesForIntervalFinder", "Scheduler");
                                                                var oid = selectedEmployee.EmployeeOid;

                                                                var onClickParams = $"{oid}, '-interval-finder-checkbox', false, '{url}', 'employees-interval-finder-popup', 'employees-interval-finder-popup', 'related-employee-interval-finder-'";
                                                            }

                                                            <button type="button" class="btn btn-primary" onclick="removeSelectedItem(@onClickParams)">
                                                                <span class="fas fa-times-circle"></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                        @if (AbstractModel.HasRightToInsertCustomerAppointments)
                        {
                            <div class="col-12">
                                <div class="form-group my-1">
                                    <div class="list-group" id="selected-customers-interval-finder-list">
                                        @foreach (var selectedCustomer in Model.SelectedCustomersForIntervalFinder)
                                        {
                                            <div class="list-group-item my-auto" id="related-customer-interval-finder-@selectedCustomer.CustomerOid">
                                                <div class="row">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <i class="fas fa-user text-bewo-customers h-100"></i>
                                                        </div>
                                                        <p class="form-control border-0 bg-transparent text-truncate">
                                                            @selectedCustomer.DetailDescription
                                                        </p>
                                                        <div class="input-group-append">
                                                            @{
                                                                var url = Url.Action("SelectCustomersForIntervalFinder", "Scheduler");
                                                                var oid = selectedCustomer.CustomerOid;

                                                                var onClickParams = $"{oid}, '-interval-finder-checkbox', false, '{url}', 'customers-interval-finder-popup', 'customers-interval-finder-popup', 'related-customer-interval-finder-'";
                                                            }
                                                            <button type="button" class="btn btn-primary" onclick="removeSelectedItem(@onClickParams)">
                                                                <span class="fas fa-times-circle"></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                        @if (AbstractModel.HasRightToInsertRessourceAppointments && Model.ResourceCategories2Resources.Any())
                        {
                            <div class="col-12">
                                <div class="form-group my-1">
                                    <div class="list-group" id="selected-resources-interval-finder-list">
                                        @foreach (var selectedResource in Model.SelectedResourcesForIntervalFinder)
                                        {
                                            <div class="list-group-item my-auto" id="related-resource-interval-finder-item-@selectedResource.ResourceOid">
                                                <div class="row">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <i class="fas fa-cubes text-bewo-resource h-100"></i>
                                                        </div>
                                                        <p class="form-control border-0 bg-transparent text-truncate">
                                                            @selectedResource.Name
                                                        </p>
                                                        <div class="input-group-append">
                                                            <button type="button" class="btn btn-primary" onclick="removeSelectedResource('related-resource-interval-finder-item-@selectedResource.ResourceOid', 'resource-@selectedResource.ResourceOid-interval-finder-checkbox', 'resources-interval-finder-popup', '@Url.Action("SelectResourcesForIntervalFinder", "Scheduler")', 'selected-resources-interval-finder-list')">
                                                                <span class="fas fa-times-circle"></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }

        <div class="d-flex bd-highlight mt-3">
            <div class="mr-auto bd-highlight">
                <!-- Abstandshalter -->
            </div>
            <div class="ml-3 bd-highlight">
                <button type="button" class="btn btn-primary" id="reset-interval-finder-button" onclick="resetIntervalFinderForm()">Abbrechen</button>
            </div>
            <div class="ml-3 bd-highlight">
                <button type="button" class="btn btn-primary" id="find-interval-finder-button" onclick="submitIntervalFinderForm()">Intervalle Prüfen</button>
            </div>
        </div>
    </div>

@if (AbstractModel.HasRightToInsertRessourceAppointments && Model.ResourceCategories2Resources.Any())
{
    <div class="modal" tabindex="-1" role="dialog" id="resources-interval-finder-popup">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-center w-100">Ressourcen</h6>
                    <button type="button" class="close" data-dismiss="modal" onclick="resetResourceSearch('interval-finder-resource-search-input')">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="input-group mb-3">
                            <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="resourceSearchOnChange('interval-finder-resource-search-input')" id="interval-finder-resource-search-input" />
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" onclick="resetResourceSearch('interval-finder-resource-search-input')">
                                    <span class="fas fa-times-circle"></span>
                                </button>
                            </div>
                        </div>

                        @foreach(var category2Resources in Model.ResourceCategories2Resources)
                        {
                            <div class="card w-100 mb-3 category-card" id="resource-category-@category2Resources.Key.ValueListEntryOid">
                                <div class="card-header" data-toggle="collapse" data-target="#collapsable-resource-category-interval-finder-@category2Resources.Key.ValueListEntryOid">
                                    <div class="d-flex align-items-center">
                                        <h5 class="mr-auto">@category2Resources.Key.DisplayName</h5>
                                        <div class="btn-group" role="group">
                                            <span class="fas fa-chevron-down text-primary"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="collapse" id="collapsable-resource-category-interval-finder-@category2Resources.Key.ValueListEntryOid">
                                    <div class="card-body resource-list">
                                        @foreach(var resource in category2Resources.Value)
                                        {
                                            var checkedValue = Model.SelectedResourcesForIntervalFinder.Contains(resource) ? "checked" : string.Empty;

                                            <div class="custom-control custom-checkbox resource-text">
                                                <input type="checkbox" class="custom-control-input" id="resource-@resource.ResourceOid-interval-finder-checkbox" @checkedValue onchange="changeResourceSelection('resources-interval-finder-popup', '@Url.Action("SelectResourcesForIntervalFinder", "Scheduler")', 'selected-resources-interval-finder-list', 'related-resource-interval-finder-item-', '-interval-finder-checkbox')"/>
                                                <label class="custom-control-label resource-name-label" for="resource-@resource.ResourceOid-interval-finder-checkbox">@resource.Name</label>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
                </div>
            </div>
        </div>
    </div>
}

@if (AbstractModel.HasRightToInsertEmployeeAppointments && Model.AllEmployees.Any())
{
    <div class="modal" tabindex="-1" role="dialog" id="employees-interval-finder-popup">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-center w-100">Mitarbeiter</h6>
                    <button type="button" class="close" data-dismiss="modal" onclick="resetSearch('interval-finder-employee-search-input', 'interval-finder-employee-text')">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="input-group mb-3">
                            <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="listSearchOnChange('interval-finder-employee-search-input', 'interval-finder-employee-text', 'interval-finder-employee-name-label')" id="interval-finder-employee-search-input" />
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-secondary" onclick="resetSearch('interval-finder-employee-search-input', 'interval-finder-employee-text')">
                                    <span class="fas fa-times-circle"></span>
                                </button>
                            </div>
                        </div>

                        @foreach(var employee in Model.AllEmployees)
                        {
                            var checkedValue = Model.SelectedEmployeesForIntervalFinder.Contains(employee) ? "checked" : string.Empty;

                            var url = Url.Action("SelectEmployeesForIntervalFinder", "Scheduler");
                                
                            var onClickParams = $"'{url}', 'employees-interval-finder-popup', 'selected-employees-interval-finder-list', 'related-employee-interval-finder-', false, '-interval-finder-checkbox'";

                            <div class="custom-control custom-checkbox interval-finder-employee-text">
                                <input type="checkbox" class="custom-control-input" id="employee-@employee.EmployeeOid-interval-finder-checkbox" @checkedValue onchange="changeItemListSelection(@onClickParams)" />
                                <label class="custom-control-label interval-finder-employee-name-label" for="employee-@employee.EmployeeOid-interval-finder-checkbox">@employee.DetailDescription</label>
                            </div>
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
                </div>
            </div>
        </div>
    </div>
}

@if (AbstractModel.HasRightToInsertCustomerAppointments && Model.AllCustomers.Any())
{
    <div class="modal" tabindex="-1" role="dialog" id="customers-interval-finder-popup">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-center w-100">Klienten</h6>
                    <button type="button" class="close" data-dismiss="modal" onclick="resetSearch('interval-finder-customer-search-input', 'interval-finder-customer-text')">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="input-group mb-3">
                            <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="listSearchOnChange('interval-finder-customer-search-input', 'interval-finder-customer-text', 'interval-finder-customer-name-label')" id="interval-finder-customer-search-input"/>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-secondary" onclick="resetSearch('interval-finder-customer-search-input', 'interval-finder-customer-text')">
                                    <span class="fas fa-times-circle"></span>
                                </button>
                            </div>
                        </div>

                        @foreach(var customer in Model.AllCustomers)
                        {
                            var checkedValue = Model.SelectedCustomersForIntervalFinder.Contains(customer) ? "checked" : string.Empty;

                            var url = Url.Action("SelectCustomersForIntervalFinder", "Scheduler");

                            var onClickParams = $"'{url}', 'customers-interval-finder-popup', 'selected-customers-interval-finder-list', 'related-customer-interval-finder-', true, '-interval-finder-checkbox'";

                            <div class="custom-control custom-checkbox interval-finder-customer-text">
                                <input type="checkbox" class="custom-control-input" id="customer-@customer.CustomerOid-interval-finder-checkbox" @checkedValue onchange="changeItemListSelection(@onClickParams)"/>
                                <label class="custom-control-label interval-finder-customer-name-label" for="customer-@customer.CustomerOid-interval-finder-checkbox">@customer.DetailDescription</label>
                            </div>
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
                </div>
            </div>
        </div>
    </div>
}