@model BeWoPlanerMobil.Models.AppointmentModel

@using BS.Shared.DataContracts
@using DevExpress.Web.Mvc.UI

@{
	Html.EnableClientValidation();
	Html.EnableUnobtrusiveJavaScript();

	// Ist bei Serientermininstanzen ebenfalls null!
	var isNew = Model.Oid is null && Model.RecurrenceIndex == 0 && Model.RecurrenceInfo is null;

	var cancelButtonText = "Abbrechen";

	var isOriginator = Model.OriginatorOid?.Equals(Model.LoggedInCompactEmployee.EmployeeOid) ?? false;
	var isInEmployeeList = Model.SelectedEmployee2SchedulerAppointments.Any(employee2Appointment => employee2Appointment.Employee.Equals(Model.LoggedInCompactEmployee));

	var hasCustomers = Model.SelectedCustomers.Any();
	var hasEmployees = Model.SelectedEmployee2SchedulerAppointments.Any();
	var hasResources = Model.SelectedResources.Any();

	var canEditCustomerApt = Model.HasRightKalenderKlientenTermineAendern;

	var canEditEmployeeApt = Model.HasRightKalenderMitarbeiterTermineAendern;

	var canEditResourceApt = Model.HasRightKalenderRessourcenTermineAendern;
	var canEditOthersResourceApt = Model.HasRightKalenderRessourcenTermineAndererAendern;

	var areButtonsVisible = true;

	if(isOriginator is false || isNew is false)
	{
		if(canEditCustomerApt is false && hasCustomers)
		{
			areButtonsVisible = false;
		}

		if(canEditEmployeeApt is false && hasEmployees && isInEmployeeList is false)
		{
			areButtonsVisible = false;
		}
	}

	// Es ist eigentlich unmöglich als jemand anderes einen Termin anzulegen, denn der angemeldete Mitarbeiter ist ja immer der InsUser.
	if(isOriginator is false && isNew is false)
	{
		if(canEditOthersResourceApt is false && hasResources)
		{
			areButtonsVisible = false;
		}
	}
	else if(isNew is false)
	{
		// Falls man beim Anlegen mehr Rechte hatte als beim Bearbeiten:
		if(canEditResourceApt is false && hasResources)
		{
			areButtonsVisible = false;
		}
	}

	var disabled = string.Empty;

	if(areButtonsVisible is false)
	{
		cancelButtonText = "Schließen";
		disabled = "disabled";
	}

	var isDeleteButtonVisible = areButtonsVisible && isNew is false;

	var dateInputType = isNew is false && Model.AllDay ? "date" : "datetime-local";

	var start = Model.StartTime.HasValue ? Model.AllDay ? $"{Model.StartTime:yyyy-MM-dd}" : $"{Model.StartTime:yyyy-MM-ddTHH:mm}" : string.Empty;
	var end = Model.EndTime.HasValue ? Model.AllDay ? $"{Model.EndTime:yyyy-MM-dd}" : $"{Model.EndTime:yyyy-MM-ddTHH:mm}" : string.Empty;


	var showEmployeeButton = (Model.HasRightKalenderMitarbeitertermineAnsehen && Model.Oid.HasValue) ||
							 (Model.Oid.HasValue && Model.HasRightKalenderMitarbeiterTermineAendern) ||
							 (Model.Oid is null && Model.HasRightKalenderMitarbeiterTermineAnlegen);

	var showCustomerButton = (Model.HasRightKalenderKliententermineAnsehen && Model.Oid.HasValue) ||
							 (Model.Oid.HasValue && Model.HasRightKalenderKlientenTermineAendern) ||
							 (Model.Oid is null && Model.HasRightKalenderKlientenTermineAnlegen);

	var showResourceButton = (Model.HasRightKalenderRessourcentermineAnsehen && Model.Oid.HasValue) || 
	                         (Model.Oid.HasValue && (Model.HasRightKalenderRessourcenTermineAendern && isOriginator || isOriginator is false && Model.HasRightKalenderRessourcenTermineAndererAendern)) || 
	                         (Model.Oid is null && Model.HasRightKalenderRessourcenTermineAnlegen);

	if(areButtonsVisible != Model.CanBeEdited)
	{

	}
}

<style type="text/css">
	.centeredLabel {
		margin: 0 auto;
		padding-left: .25em;
	}
</style>

@using(Html.BeginForm())
{
	<div class="row" id="abc-table">
		<div class="col">
            <div class="form-row">
	            <div class="col-md">
		            <div class="input-group mb-2">
			            <div class="input-group-prepend">
				            <span class="input-group-text">Betreff</span>
			            </div>
			            <input class="form-control" type="text" @disabled id="Subject" name="Subject" value="@Model.Subject" />
		            </div>
	            </div>
            </div>
            <div class="form-row">
                <div class="col-md">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Ort</span>
                        </div>
                        <input class="form-control" type="text" @disabled id="Location" name="Location" value="@Model.Location" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col-md">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Start</span>
                        </div>
                        <input class="form-control" type="@dateInputType" @disabled id="StartDate" name="StartDate" value="@start" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col-md">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Ende</span>
                        </div>
                        <input class="form-control" type="@dateInputType" @disabled id="EndDate" name="EndDate" value="@end" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col-md">
	                <div class="input-group mb-2">
		                <div class="input-group-prepend">
			                <div class="input-group-text">
				                @Html.DevExpress().CheckBox(
					                settings =>
					                {
						                settings.Name = nameof(SchedulerAppointmentDC.IsPrivate);
						                settings.Width = Unit.Percentage(100);
						                settings.Properties.RootStyle.CssClass = "";
						                settings.ReadOnly = disabled.Length > 0;
					                }).Bind(Model.IsPrivate).GetHtml()
			                </div>
		                </div>
		                <div class="input-group-append">
			                <span class="input-group-text">Privat</span>
		                </div>
	                </div>
                </div>
                <div class="col-md">
	                <div class="input-group pl-2 mb-2 justify-content-end">
		                <div class="input-group-prepend">
			                <div class="input-group-text">
				                @Html.DevExpress().CheckBox(
					                settings =>
					                {
						                settings.Name = nameof(SchedulerAppointmentDC.AllDay);
						                settings.Width = Unit.Percentage(100);
						                settings.ReadOnly = disabled.Length > 0;
					                }).Bind(Model.AllDay).GetHtml()
			                </div>
		                </div>
		                <div class="input-group-append">
			                <span class="input-group-text">Ganztägig</span>
		                </div>
	                </div>
                </div>
            </div>

            @if(Model.HasRightKalenderMitarbeitertermineAnsehen || Model.HasRightKalenderKliententermineAnsehen || Model.HasRightKalenderRessourcentermineAnsehen)
            {
                <div class="form-row justify-content-center">
	                @if(showEmployeeButton)
	                {
		                @Html.Partial("CustomEmployeeSelectPartial", Model)
	                }

	                @if(showCustomerButton)
	                {
		                @Html.Partial("CustomCustomerSelectPartial", Model)
	                }

	                @if(showResourceButton)
	                {
		                @Html.Partial("CustomResourceSelectPartial", Model)
	                }
                </div>
            }

            <div class="form-row">
                <div class="col-md">
	                <div class="form-group">
		                <label for="Description">Notiz</label>
		                <textarea class="form-control" @disabled id="Description" name="Description">@Model.Description</textarea>
	                </div>
                </div>
            </div>
            
            <div id="recurrence-container">
                @*@{
            var recurrenceSettings = (AppointmentRecurrenceFormSettings) ViewBag.AppointmentRecurrenceFormSettings;

            recurrenceSettings.Enabled = areButtonsVisible;
        }

        @Html.DevExpress().AppointmentRecurrenceForm(recurrenceSettings).GetHtml()*@


                <div class="input-group input-group-sm">
                    <div class="input-group-prepend">
                        <label for="recurrence-type" class="input-group-text">Wiederholung</label>
                    </div>
                    <select name="recurrence-type" id="recurrence-type" class="custom-select" onclick="recurrenceSelectChange()">
                        <option value="1">Einmalig</option>
                        <option value="2">Täglich</option>
                        <option value="3">Wöchentlich</option>
                        <option value="4">Monatlich</option>
                        <option value="5">Jährlich</option>
                    </select>
                </div>
                <div id="recurrence-form-container">
                    <div class="card mt-2">
                        <div class="card-header p-1 pr-2">
                            Serienmuster
                        </div>
                        <div class="card-body p-1">
                            <div id="daily-recurrence-form">
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="daily-x-pattern-radio" name="daily-pattern">
                                            <span>Jeden</span>
                                        </div>
                                    </div>
                                    <input id="daily-x-pattern-value" class="form-control" type="number" min="0" max="9999" value="1" />
                                    <div class="input-group-append">
                                        <span class="input-group-text">Tag</span>
                                    </div>
                                </div>
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" id="daily-every-weekday-radio" name="daily-pattern">
                                        </div>
                                    </div>
                                    <div class="input-group-append">
                                        <span class="input-group-text">Jeden Wochentag</span>
                                    </div>
                                </div>
                            </div>
                            <div id="weekly-recurrence-form">
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            Jede
                                        </span>
                                    </div>
                                    <input id="weekly-x-pattern-value" name="weekly-x-pattern-value" class="form-control" type="number" min="1" value="1" />
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            Woche am:
                                        </span>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-mo-cb" name="weekly-mo-cb" class="form-check-input">
                                        <label for="weekly-mo-cb" class="form-check-label">Mo</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-di-cb" name="weekly-di-cb" class="form-check-input">
                                        <label for="weekly-di-cb" class="form-check-label">Di</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-mi-cb" name="weekly-mi-cb" class="form-check-input">
                                        <label for="weekly-mi-cb" class="form-check-label">Mi</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-do-cb" name="weekly-do-cb" class="form-check-input">
                                        <label for="weekly-do-cb" class="form-check-label">Do</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-fr-cb" name="weekly-fr-cb" class="form-check-input">
                                        <label for="weekly-fr-cb" class="form-check-label">Fr</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-sa-cb" name="weekly-sa-cb" class="form-check-input">
                                        <label for="weekly-sa-cb" class="form-check-label">Sa</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="weekly-so-cb" name="weekly-so-cb" class="form-check-input">
                                        <label for="weekly-so-cb" class="form-check-label">So</label>
                                    </div>
                                </div>
                            </div>
                            <div id="monthly-recurrence-form">
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="monthly-day-pattern-radio" name="monthly-pattern">
                                            <span>Tag</span>
                                        </div>
                                    </div>
                                    <input id="monthly-day-pattern-day-value" name="monthly-day-pattern-day-value" class="form-control" type="number" min="1" max="31" value="1" />
                                    <div class="input-group-append">
                                        <span class="input-group-text">jeden</span>
                                        <input id="monthly-day-pattern-month-value" name="monthly-day-pattern-month-value" class="border border-left-0 border-right-0 border-input-group-form-control-border text-dark" type="number" min="1" max="31" value="1" />
                                        <span class="input-group-text">Monats</span>
                                    </div>
                                </div>
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="monthly-weekday-pattern-radio" name="monthly-pattern">
                                            <span>Am</span>
                                        </div>
                                    </div>
                                    <select id="monthly-weekday-number-value" name="monthly-weekday-number-value" class="custom-select">
                                        <option value="1">Ersten</option>
                                        <option value="2">Zweiten</option>
                                        <option value="3">Dritten</option>
                                        <option value="4">Vierten</option>
                                        <option value="5">Letzten</option>
                                    </select>
                                    <select id="monthly-weekday-day-of-week-value" name="monthly-weekday-day-of-week-value" class="custom-select">
                                        <option value="1">Montag</option>
                                        <option value="2">Dienstag</option>
                                        <option value="3">Mittwoch</option>
                                        <option value="4">Donnerstag</option>
                                        <option value="5">Freitag</option>
                                        <option value="6">Samstag</option>
                                        <option value="7">Sonntag</option>
                                    </select>
                                    <div class="input-group-prepend">
                                        <span class="input-group-text border-left-0">jeden</span>
                                        <input id="monthly-weekday-pattern-value" name="monthly-weekday-pattern-value" class="border border-left-0 border-right-0 border-input-group-form-control-border text-dark" type="number" min="1" max="31" value="1" />
                                        <span class="input-group-text">Monats</span>
                                    </div>
                                </div>
                            </div>
                            <div id="yearly-recurrence-form">
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="yearly-day-pattern-radio" name="yearly-pattern">
                                            <span>Am</span>
                                        </div>
                                    </div>
                                    <input id="yearly-pattern-day-of-month-value" name="yearly-pattern-day-of-month-value" class="form-control" type="number" min="1" max="31" value="1">
                                    <select id="yearly-pattern-month-value" name="yearly-pattern-month-value" class="custom-select">
                                        <option value="1">Januar</option>
                                        <option value="2">Februar</option>
                                        <option value="3">März</option>
                                        <option value="4">April</option>
                                        <option value="5">Mai</option>
                                        <option value="6">Juni</option>
                                        <option value="7">Juli</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">Oktober</option>
                                        <option value="11">November</option>
                                        <option value="12">Dezember</option>
                                    </select>
                                </div>
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="yearly-weekday-pattern-radio" name="yearly-pattern">
                                            <span>Am</span>
                                        </div>
                                    </div>
                                    <select id="yearly-weekday-number-value" name="yearly-weekday-number-value" class="custom-select">
                                        <option value="1">Ersten</option>
                                        <option value="2">Zweiten</option>
                                        <option value="3">Dritten</option>
                                        <option value="4">Vierten</option>
                                        <option value="5">Letzten</option>
                                    </select>
                                    <select id="yearly-weekday-day-of-week-value" name="yearly-weekday-day-of-week-value" class="custom-select">
                                        <option value="1">Montag</option>
                                        <option value="2">Dienstag</option>
                                        <option value="3">Mittwoch</option>
                                        <option value="4">Donnerstag</option>
                                        <option value="5">Freitag</option>
                                        <option value="6">Samstag</option>
                                        <option value="7">Sonntag</option>
                                    </select>
                                    <span class="input-group-text rounded-0 border-left-0 border-right-0">im</span>
                                    <select id="yearly-weekday-month-value" name="yearly-weekday-month-value" class="custom-select">
                                        <option value="1">Januar</option>
                                        <option value="2">Februar</option>
                                        <option value="3">März</option>
                                        <option value="4">April</option>
                                        <option value="5">Mai</option>
                                        <option value="6">Juni</option>
                                        <option value="7">Juli</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">Oktober</option>
                                        <option value="11">November</option>
                                        <option value="12">Dezember</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="recurrence-duration-container">
                        <div class="card mt-2">
                            <div class="card-header p-1 pl-2">
                                Seriendauer
                            </div>
                            <div class="card-body p-1">
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="duration-no-end" name="duration-radio-group">
                                            <span>Ohne Ende</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="duration-end-after" name="duration-radio-group">
                                            <span>Endet nach:</span>
                                        </div>
                                    </div>
                                    <input type="number" class="form-control" />
                                    <div class="input-group-append">
                                        <span class="input-group-text">Wiederholungen</span>
                                    </div>
                                </div>
                                <div class="input-group input-group-sm mt-1">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="radio" class="mr-2" id="duration-end-by" name="duration-radio-group">
                                            <span>Endet am:</span>
                                        </div>
                                    </div>
                                    <input type="date" class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            <div class="form-row">
                <div class="col">
	                <div class="float-right">
		                @if(areButtonsVisible)
		                {
			                <button type="button" class="btn btn-sm-auto btn-primary mr-2" id="Apply" name="Apply" onclick="OnAppointmentFormSave()">OK</button>
		                }

		                <button type="button" class="btn btn-sm-auto btn-primary mr-2" id="Cancel" name="Cancel" onclick="OnAppointmentFormCancel()">@cancelButtonText</button>

		                @if(isDeleteButtonVisible)
		                {
			                <button type="button" class="btn btn-sm-auto btn-danger" id="Delete" name="Delete" onclick="OnAppointmentFormDelete()">Löschen</button>
		                }
	                </div>
                </div>
            </div>

            <div>
                @Html.DevExpress().SchedulerStatusInfo(
	                settings =>
	                {
		                settings.Name = "schedulerStatusInfo";
		                settings.Priority = 1;
		                settings.SchedulerName = "scheduler";
	                }).GetHtml()
            </div>
		</div>
	</div>
}