@using BeWoPlanerMobil.Models;

@model MainModel
@{
    ViewBag.Title = "Main";
}

<div class="header-div">
    <span class="header-span">Willkommen, @string.Format("{0} {1}", Model.Employee.FirstName, Model.Employee.LastName)</span>
    <input type="button" id="menu-btn" onclick="toggleMenu()" />
</div>
<div id="colorRibbon"></div>
<div id="menu-div" style="display: none; position: absolute; right: 0; z-index: 10;">
    <ul class="dark-bg">
        <li class="menu-item menu-link" onclick="showCustomers()" @{if (!MainModel.IsAllowedToSeeCustomers)
                                                                    { @Html.Raw("style='display: none;'")    }}>
            <img src="@Url.Content("~/Content/images/klientenicon.svg")" alt="K" class="menu-img" />Klienten
        </li>

        <li class="menu-item menu-link" onclick="showServiceRecords(); ErfolgteSpx()">
            <img src="@Url.Content("~/Content/images/zeiterfassungsicon.svg")" alt="Z" class="menu-img" />Zeiterfassung
        </li>

        <li class="menu-item menu-link" onclick="showKalender()">
            <img src="@Url.Content("~/Content/images/calendar-bs-orange.svg")" alt="Z" class="menu-img" />Kalender
        </li>

        <li class="menu-item">
            <img src="@Url.Content("~/Content/images/abmeldeicon.svg")" alt="A" class="abmelden-img" />
            @using (Html.BeginForm("Logout", "Main", FormMethod.Post, new { @id = "logout-form" }))
            {
                <input type="submit" value="Abmelden" class="logout-btn" onclick="clearRecords(); showSanduhr();" />
            }
        </li>
    </ul>
</div>

<img id="sanduhr" class="warte-animation" alt="Lade..." src="@Url.Content("~/Content/images/spinner.png")">

<div id="zeiterfassung">
    <div class="margin-div" style="overflow: hidden;">
        @using (Html.BeginForm("SetShowOnlyOwnSupportConcepts", "Main", FormMethod.Post))
        {
            @Html.CheckBoxFor(m => m.ShowOnlyOwnSupportConcepts, new { @onchange = "showSanduhr();this.form.submit();", @id = "ShowOnlyOwnSupportConceptsCheckBox" })
            @Html.LabelFor(m => m.ShowOnlyOwnSupportConcepts, new {@id="LabelForShowOnlyOwnSupporConceptsCB"})
        }

        @using (Html.BeginForm("SelectSupportConcept", "Main", FormMethod.Post, new { @id = "selectSCForm" }))
        {
            <table>
                <tr>
                    <td>
                        <div class="combobox-label-parent" id="sc-dropdown-container">
                            @Html.LabelFor(m => m.CostBearer2SupportConceptOid)
                            <div class="styled-select-div">
                                @Html.DropDownListFor(m => m.CostBearer2SupportConceptOid, Model.SupportConceptListItems, new { @onchange = "showSanduhr();$('#serviceRecords').empty();this.form.submit();", @id = "scDropDown", @class = "dropdownlist-for", @style = "display:block;" })
                            </div>
                        </div>
                    </td>
                    <td id="statistik-button-td">
                        <input type="button" id="statistik-button" onclick="ShowStatistics()" />
                    </td>
                </tr>
            </table>
        }

        <div class="combobox-label-parent" style="@{ if (!MainModel.IsEmployeeSelectionVisible)
                                                     { @Html.Raw("display: none;") }}">
            @Html.LabelFor(m => m.SelectedEmployeeOid)
            <div class="styled-select-div">
                @Html.DropDownListFor(m => m.SelectedEmployeeOid, Model.EmployeeListItems, new { @onchange = "mitarbeiterLaden()", @id = "employeesDropDown", @class = "dropdownlist-for" })
            </div>
        </div>

        <div @{if (!MainModel.IsAllowedToCreateOrEditRecord)
             { @Html.Raw("style='height: 0; overflow: hidden; position: absolute;'")   }}>
            @using (Html.BeginForm("CreateServiceRecord", "Main", FormMethod.Post, new { @id = "createSRForm" }))
            {
                <table>
                    <tr @{ if (Model.SelectedSupportConcept == null || Model.SelectedSupportConcept.Goals.Count == 0)
                           { @Html.Raw("style='display: none;'")    }
                           else
                           { @Html.Raw("style='display: table-row;'")    } }>
                        <td colspan="2">
                            <div class="collapsible-container">
                                <input type="button" id="kollabier-btn1" class="toggle-btn" value="Ziele" disabled />
                                <div id="kollabierbar1" style="display: none;" class="kollabierbar">
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="combobox-label-parent cell-content">
                                @Html.LabelFor(m => m.SelectedServiceCategoryConceptOid)
                                <div class="styled-select-div select-container" id="kategorien-select-container">
                                    @Html.DropDownListFor(m => m.SelectedServiceCategoryConceptOid, Model.ServiceCategoryListItems, new { @onchange = "loadServiceDescriptions();  ", @id = "kategorien_select", required = "required", @class = "dropdownlist-for" })<!--ErfolgteSpx(); Speichern local-->
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="combobox-label-parent cell-content">
                                <label for="leistungen_select">Leistung</label>
                                <div class="styled-select-div" id="leistungen-select-container">
                                    <select class="dropdownlist-for" id="leistungen_select" onchange="setServiceDescription()" name="Leistungen" required></select>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="input-wrapper cell-content">
                                <input type="text" id="datum_textbox" name="Datum" class="date-input-css floating-label-input" required disabled />
                                <label class="floating-label" for="datum_textbox">Startdatum</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="input-wrapper cell-content" id="EndDate_div">
                                <input type="text" id="enddatum_textbox" name="Enddatum" class="date-input-css floating-label-input" required disabled onchange="aktualDurationwithEndDate()"/>
                                <label class="floating-label" for="enddatum_textbox">Enddatum</label>
                            </div>
                        </td>
                    </tr>                    
                    <tr id="zeiterfassungsErrorTableRow">
                        <td colspan="2" id="zeiterfassungsErrorTableCell">
                            <h4 id="zeiterfassungsErrorDisplay" class="error-text"></h4>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input-wrapper cell-content" id="start-cell">
                                <input class="not-required-input" type="text" id="start_textbox" name="Start" disabled />
                                <label for="start_textbox">Von</label>
                            </div>
                        </td>
                        <td>
                            <div class="input-wrapper cell-content" id="end-cell">
                                <input class="not-required-input" type="text" id="ende_textbox" name="Ende" disabled />
                                <label for="ende_textbox">Bis</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="input-wrapper cell-content">
                                <input class="not-required-input" type="text" id="duration_textbox" name="Dauer" disabled />
                                <label for="duration_textbox">Dauer</label>
                            </div>
                        </td>
                    </tr>
                    <tr id="trnormalDoku" style="display:none;">
                        <td colspan="2">
                            <div class="input-wrapper cell-content" id="divtrnormalDoku">
                                <textarea class="floating-label-input" id="notiz_textbox" name="Dokumentation6"  required disabled></textarea>
                                <label class="floating-label" for="notiz_textbox" id="trnormalDokuLabel">Dokumentation</label>
                            </div>
                        </td>
                    </tr>  
                    <!--####################################### Dokutabs   ##################################################-->
                    <tr>
                        <td colspan="2" id="tddokureiter"  >
                            <div class="input-wrapper cell-content" style="height: 90px;">     <!--80px-->     
                               <article class="infobox">
                                    <section id="Dokumentation1" style="display:none;" >
                                        <h2><a href="#Dokumentation1" onfocus="focusOnTab(1);"  id="DokName1">Dok1</a></h2>  
                                        <textarea  id="notiz_textbox1" name="Dokumentation" disabled></textarea>                                                                                                  
                                    </section>
                                    <section id="Dokumentation2" style="display:none;">
                                        <h2><a href="#Dokumentation2" onfocus="focusOnTab(2);" id="DokName2">Dok2</a></h2>
                                        <textarea  id="notiz_textbox2" name="Dokumentation2" disabled></textarea>
                                    </section> 
                                    <section id="Dokumentation3" style="display:none;">
                                        <h2><a href="#Dokumentation3" onfocus="focusOnTab(3);" id="DokName3">Dok3</a></h2>
                                        <textarea id="notiz_textbox3" name="Dokumentation3" disabled></textarea>                               
                                    </section>
                                   <section id="Dokumentation4" style="display:none;">
                                        <h2><a href="#Dokumentation4"  onfocus="focusOnTab(4);" id="DokName4">Dok4</a></h2>
                                        <textarea id="notiz_textbox4" name="Dokumentation4" disabled></textarea>                                    
                                   </section>
                                   <section id="Dokumentation5"   style="display:none;">                                   
                                        <h2><a href="#Dokumentation5" onfocus="focusOnTab(5);" id="DokName5">Dok5</a></h2>
                                        <textarea id="notiz_textbox5" name="Dokumentation5" disabled></textarea>                                    
                                   </section>
                                </article>
                           </div>
                        </td>
                    </tr>
                </table>
            
                <table style="width: auto; float: right;">
                    <tr>
                        <td>
                            <input type="text" style="display: none" id="GeoLocSaveXCOOR" name="GeoLocSaveXCOOR" />
                        </td>
                        <td>
                            <input type="text" style="display: none" id="GeoLocSaveYCOOR" name="GeoLocSaveYCOOR" />
                        </td>
                        <td>
                            <input type="text" style="display: none" id="TimeStampSave" name="TimeStampSave" />
                        </td>
                        <td>
                            <input type="text" style="display: none" id="URLSave" name="URLSave" />
                        </td>
                        <td class="an-ie-angepasste-tabelle">
                            <input type="button" value="Abbrechen" class="anlegen-btn" id="abbrechenBtn" onclick="resetRecordForm();" disabled />
                        </td>
                        <td class="an-ie-angepasste-tabelle">
                            <input type="hidden" id="versteckt" name="versteckt" @(MainModel.IsOnlyAllowedToEdit ? Html.Raw("value=\"Speichern\"") : Html.Raw("value=\"Anlegen\"")) />
                            <input type="button" @(MainModel.IsOnlyAllowedToEdit ? Html.Raw("value=\"Speichern\"") : Html.Raw("value=\"Anlegen\"")) class="anlegen-btn" name="AnlegenEditierenBtn" id="anlegenEditierenBtn" onclick="saveCreateServicerecod();" disabled />
                        </td>
                    </tr>
                </table>
            }
        </div>

        <input value="@Model.Schalter.ToString()" type="hidden" id="Schalter" />
        <input type="hidden" id="Leistung" />

        @using (Html.BeginForm("LoadServiceRecords", "Main", FormMethod.Post, new { @id = "selectSCForm2" }))
        {
            <div class="combobox-label-parent" id="recordLoader_select_container">
                <div class="styled-select-div" id="record-loader-select-container">
                    <select class="dropdownlist-for" id="recordLoader_select" onchange="showSanduhr();$('#serviceRecords').empty();this.form.submit();" name="Records">
                        <option value="-1">Laden</option>
                        <option value="7" @{if (Model.Zeitraum == 7) { @Html.Raw("selected") }}>Letzte 7 Tage</option>
                        <option value="30" @{if (Model.Zeitraum == 30) { @Html.Raw("selected") }}>Letzte 30 Tage</option>
                        <option value="90" @{if (Model.Zeitraum == 90) { @Html.Raw("selected") }}>Letzte 90 Tage</option>
                        <option value="0" @{if (Model.Zeitraum == 0) { @Html.Raw("selected") }}>Alle</option>
                    </select>
                </div>
            </div>
        }
    </div>

    <hr />

    <div class="margin-div" id="serviceRecords">
        @foreach (var record in Model.ServiceRecords)
        {
            <div class="collapsible-container">
                <input type="button" class="toggle-btn" value="@{
            if (record.Start.Value.Second == 0)
            {
                if(record.Start.Value.Date != record.End.Value.Date){
				    @(record.Start.Value.ToString("dd.MM.yyyy") + "  "+ record.Start.Value.ToString(" HH:mm") + "  -  " + record.End.Value.ToString("dd.MM.yyyy")  + "  " + @record.End.Value.ToString("HH:mm"))
                }else{
                    @(record.Start.Value.ToString("dd.MM.yyyy") + "  " + record.Start.Value.ToString(" HH:mm") + "  -  " + @record.End.Value.ToString("HH:mm"))   
                }               
            }
            else
            {
				    @(record.Start.Value.ToShortDateString())
            }
		    }"/>
                <div style="display: none;" class="kollabierbar">
                    <table>
                        <tbody>
                            <tr class="testklasse">
                                <td colspan="2">

                                    <input type="button" class="edit-button" onclick="@("showSanduhr();selectServiceRecord('" + record.ServiceRecordOid + "')")" @{if (!MainModel.IsEditBtnVisible || record.GroupPersonCount > 1)
                                                                                                                                                                            { @Html.Raw("style=\"display: none;\"")   }} />
                                    <input type="button" onclick="@("togglePopup('" + record.ServiceRecordOid + "')")" class="delete-button" @{if (!MainModel.IsDeleteBtnVisible || record.GroupPersonCount > 1)
                                                                                                                                               { @Html.Raw("style=\"display: none;\"")   }} />

                                    @{if (record.SignatureOid == null && Model.ButtonsSchalter == true || record.SignatureOid.Equals("") && Model.ButtonsSchalter == true)
                                      {
                                        <input type="button" onclick="@("showUnterschrift(" + record.ServiceRecordOid + ")")"  value="Unterschreiben" class="unterschreiben" style="color:#ff5a00; font-weight: bold;  font-size:large"/>
                                      }
                                    }
                                </td>
                            </tr>
                            <tr class="testklasse">
                                <td class="recordHeader">Minuten (gerundet):</td>
                                <td>@record.RoundedDuration.ToString("###0")</td>
                            </tr>
                            <tr class="testklasse" style="@{if (record.Goals != null && record.Goals.Count == 0)
                                                            {@("display: none;")}}">
                                <td class="recordHeader">Ziele:</td>
                                <td>
                                    @{
                                                            if (record.Goals != null)
                                                            {
                                                                foreach (var goal in record.Goals)
                                                                {
                                        @(goal.TypeDescription)
                                                                    if (record.Goals.IndexOf(goal) < record.Goals.Count - 1)
                                                                    {
                                        @(", ")
                                                                    }
                                                                }
                                                            }
                                    }
                                </td>
                            </tr>
                            <tr class="testklasse">
                                <td class="recordHeader">Leistungskategorie:</td>
                                <td>@record.ServiceDescription.CategoryName</td>
                            </tr>
                            <tr class="testklasse">
                                <td class="recordHeader">Leistung:</td>
                                <td>@record.ServiceDescription.Name</td>
                            </tr>
                            <tr class="testklasse">
                                <td class="recordHeader">Mitarbeiter:</td>
                                <td>@record.Employee</td>
                            </tr>
                            <tr class="testklasse">
                                <td class="recordHeader">Angelegt am:</td>
                                <td>@record.InsertedOn</td>
                            </tr>

                            @{if ( Model.SelectedGoalsforType.Length >= 1)             
                              {  
                                    <tr class="testklasse" >
                                        <td class="recordHeader">@Model.SelectedGoalsforType[0].TypeDescription.ToString():</td>
                                        <td>@record.Notice</td>
                                    </tr>                             
                              }
                              else if (record.Notice2 == null && record.Notice3 == null && record.Notice4 == null && record.Notice5 == null && Model.SelectedGoalsforType.Length == 0)
                              {
                                <tr class="testklasse" >
                                    <td class="recordHeader">Dokumentation:</td>
                                    <td>@record.Notice</td>
                                </tr>
                              }
                              else if (record.Notice2 != null || record.Notice3 != null || record.Notice4 != null || record.Notice5 != null)
                              {
                                <tr class="testklasse">
                                    <td class="recordHeader">Dokumentation 1:</td>
                                    <td> @record.Notice</td>
                                </tr>
                              }
                            }

                              @{if(record.Notice2 != null){
                                    if (Model.SelectedGoalsforType.Length >= 2)
                                    {
                                        if (!record.Notice2.Equals("") && Model.SelectedGoalsforType[1] != null)
                                        { 
                                         <tr class="testklasse">
                                            <td class="recordHeader">@Model.SelectedGoalsforType[1].TypeDescription.ToString():</td>
                                            <td> @record.Notice2</td>
                                         </tr>
                                        }
                                    }
                                    else if (!record.Notice2.Equals(""))
                                    {
                                        <tr class="testklasse">
                                            <td class="recordHeader">Dokumentation 2:</td>
                                            <td> @record.Notice2</td>
                                          </tr>
                                    }
                                 }
                             
                                if(record.Notice3 != null){
                                    if (Model.SelectedGoalsforType.Length >= 3){ 
                                        if(!record.Notice3.Equals("") && Model.SelectedGoalsforType[2] != null){
                                         <tr class="testklasse">
                                            <td class="recordHeader">@Model.SelectedGoalsforType[2].TypeDescription.ToString():</td>
                                            <td> @record.Notice3</td>
                                         </tr>
                                        }
                                    }
                                    else if(!record.Notice3.Equals("")){
                                        <tr class="testklasse">
                                            <td class="recordHeader">Dokumentation 3:</td>
                                            <td> @record.Notice3</td>
                                        </tr>
                                    }
                                }
                                
                                  if(record.Notice4 != null){
                                      if (Model.SelectedGoalsforType.Length >= 4){
                                          if(!record.Notice4.Equals("") && Model.SelectedGoalsforType[3] != null){
                                             <tr class="testklasse">
                                                <td class="recordHeader">@Model.SelectedGoalsforType[3].TypeDescription.ToString():</td>
                                                <td> @record.Notice4</td>
                                             </tr>
                                          }
                                      }
                                      else if(!record.Notice4.Equals("")){
                                          <tr class="testklasse">
                                            <td class="recordHeader">Dokumentation 4:</td>
                                            <td> @record.Notice4</td>
                                          </tr>
                                      }
                                  }
                                  
                                  if(record.Notice5 != null){
                                      if ( Model.SelectedGoalsforType.Length == 5)
                                      {
                                          if (!record.Notice5.Equals("") && Model.SelectedGoalsforType[4] != null)
                                          {
                                            <tr class="testklasse">
                                                <td class="recordHeader">@Model.SelectedGoalsforType[4].TypeDescription.ToString():</td>
                                                <td> @record.Notice5</td>
                                            </tr>
                                          }
                                      }
                                      else if (!record.Notice5.Equals(""))
                                      {
                                          <tr class="testklasse">
                                            <td class="recordHeader">Dokumentation 5:</td>
                                            <td> @record.Notice5</td>
                                          </tr>
                                      }
                                  }
                             }                 
                                     
                            @{if(Model.ButtonsSchalter){
                                <tr class="testklasse">
                                    <td class="recordHeader">Unterschrieben:</td>
                                    <td>@{if (record.SignatureOid == null || record.SignatureOid.Equals(""))
                                          {  
                                            @Html.Raw("NEIN")
                                          }
                                          else
                                          {
                                            @Html.Raw("JA")
                                          }
                                    }
                                    </td>
                            </tr>}  
                            }                         
                        </tbody>
                    </table>
                </div>
            </div>  
        }
    </div>
</div>


<input value="@Model.SrviceRecoOID" id="ServiceRecordOIDSave" type="hidden" />

<input value="@Model.ErrorWert" id="ErrorZeiterfassungAfterCrashSchalter" type="hidden" />

<div class="modalWrapper">
</div>
<div id="popupDiv">
    <h4 id="popupTitle" class="center-aligned-text-element">Eintrag l&ouml;schen</h4>
    <p id="popupText" class="center-aligned-text-element">Sind Sie sicher, dass Sie den Eintrag l&ouml;schen m&ouml;chten?</p>
    <div id="popupBtnDiv" class="center-aligned-text-element">
        @using (Html.BeginForm("DeleteRecord", "Main", FormMethod.Post, new { @id = "deletionForm" }))
        {
            <input type="button" class="popupBtn" value="OK" onclick="submitDeletionForm()" />
            <input type="button" class="popupBtn" value="Abbrechen" onclick="togglePopup()" />
        }
    </div>
</div>

<div class="modalWrapper">
</div>
<div id="errorPopupDiv">
    <h4 id="errorPopupTitle" class="error-text">Fehler</h4>
    <p id="errorPopupText" class="center-aligned-text-element">Ein Fehler ist aufgetreten</p>
    <div id="errorPopupBtnDiv" class="center-aligned-text-element">
        <input id="errorPopupOkBtn" type="button" class="popupBtn" value="OK" onclick="toggleErrorPopup('')" />
    </div>
</div>

<div id="SuccessPopupDiv">
    <h4 id="SuccessPopupTitle" class="error-text">Speichern Erfolgreich</h4>
    <p id="SuccessPopupText" class="center-aligned-text-element"></p>
    <div id="SuccessPopupBtnDiv" class="center-aligned-text-element">
        <input type="button" class="SuccessPopupOkBtn" value="OK" onclick="toggleSuccessPopup(''), location.reload()" />
        <input type="button" class="SuccessPopupUSchrift" value="Unterschreiben" onclick="showUnterschrift('', 1)" />
    </div>
</div>


<div id="AendernPopupDiv" style="display:none">
    <p id="AendernPopupText" class="center-aligned-text-element"></p>
    <div id="AendernPopupBtnDiv" class="center-aligned-text-element">
        <input type="button" class="AendernPopupOkBtn" value="Ja" onclick="ÄndereTerminPoppup(''), selectServiceKalender(4)" />
        <input type="button" class="AendernPopupUSchrift" value="Nein" onclick="ÄndereTerminPoppup('')" />
    </div>
</div>



<div id="klienten">
    <div class="combobox-label-parent">
        @Html.LabelFor(m => m.SelectedCustomerOid)
        <div class="styled-select-div">
            @Html.DropDownListFor(m => m.SelectedCustomerOid, Model.CustomerListItems, new { @onchange = "klientenLaden()", @id = "customersDropDown", @class = "dropdownlist-for" })
        </div>
    </div>

    <div id="klientenTabelle">
        <div class="eigenschaftsdiv">
            <h4>Eigenschaften</h4>
            <hr />
            <table class="width-inheriting-table">
                <tr>
                    <td class="customer-td">Vorname:</td>
                    <td class="contentTd" id="KlientVorname" data-bind="text: vorname"></td>
                </tr>
                <tr>
                    <td class="customer-td">Nachname:</td>
                    <td class="contentTd" id="KlientNachname" data-bind="text: nachname"></td>
                </tr>
                <tr>
                    <td class="customer-td">Geburtstag:</td>
                    <td class="contentTd" id="KlientGeb" data-bind="text: geburtstag"></td>
                </tr>
                <tr>
                    <td class="customer-td">Geschlecht:</td>
                    <td class="contentTd" id="KlientSex" data-bind="text: geschlecht"></td>
                </tr>
            </table>
        </div>

        <div class="eigenschaftsdiv">
            <h4 class="inline-display-element">Adresse</h4>
            <input type="button" onclick="karteAnzeigen()" style="background-image:url(@Url.Content("~/Content/images/location-orange.svg"));background-repeat: no-repeat;background-position: center;background-size: 55%;background-color: transparent;margin-top:-0.6em;display:inline;width:auto;float:right;" />
            <hr />
            <table class="width-inheriting-table">
                <tr>
                    <td class="customer-td">Adresszusatz:</td>
                    <td class="contentTd" id="KlientAdresse" data-bind="text: adresszusatz"></td>
                </tr>
                <tr>
                    <td class="customer-td">Stra&szlig;e:</td>
                    <td class="contentTd" id="KlientStrasse" data-bind="text: strasse" id="adressfeld"></td>
                </tr>
                <tr>
                    <td class="customer-td">PLZ:</td>
                    <td class="contentTd" id="KlientPlz" data-bind="text: plz" id="plzfeld"></td>
                </tr>
                <tr>
                    <td class="customer-td">Ort:</td>
                    <td class="contentTd" id="KlientOrt" data-bind="text: ort" id="ortfeld"></td>
                </tr>
            </table>
        </div>

        <div class="eigenschaftsdiv">
            <h4>Rechnungsadresse</h4>
            <hr />
            <table class="width-inheriting-table">
                <tr>
                    <td class="customer-td">Name:</td>
                    <td class="contentTd" id="KlientReName" data-bind="text: rechnungsadressename"></td>
                </tr>
                <tr>
                    <td class="customer-td">Stra&szlig;e:</td>
                    <td class="contentTd" id="KlientReStrasse" data-bind="text: rechnungsadressestrasse"></td>
                </tr>
                <tr>
                    <td class="customer-td">Postleitzahl:</td>
                    <td class="contentTd" id="KlientRePostleitzahl" data-bind="text: rechnungsadressepostleitzahl"></td>
                </tr>
                <tr>
                    <td class="customer-td">Ort:</td>
                    <td class="contentTd" id="KlientReOrt" data-bind="text: rechnungsadresseort"></td>
                </tr>
            </table>
        </div>

        <div class="eigenschaftsdiv">
            <h4>Kontakt</h4>
            <hr />
            <table class="width-inheriting-table">
                <tr>
                    <td class="customer-td">Handy:</td>
                    <td class="contentTd" id="KlientHandy" data-bind="text: handy"></td>
                </tr>
                <tr>
                    <td class="customer-td">Telefon:</td>
                    <td class="contentTd" id="KlientTelefon" data-bind="text: telefon"></td>
                </tr>
                <tr>
                    <td class="customer-td">Fax:</td>
                    <td class="contentTd" id="KlientFax" data-bind="text: fax"></td>
                </tr>
                <tr>
                    <td class="customer-td">Mail:</td>
                    <td class="contentTd" id="KlientMail"><a style="color: black" data-bind="attr: { href: email, title: pureemail }, text: pureemail"></a></td>
                </tr>
            </table>
        </div>
    

 <!--############################################## Wohnheim gedöns #####################################################################################
    <div class="eigenschaftsdiv"  id="WohnheimContainer">
            <h4>Wohnheim zugehörigkeit</h4>
            <hr />
            <table class="width-inheriting-table">
                <tr>
                    <td class="customer-td">Name:</td>
                    <td class="contentTd" >a</td><!--data-bind="text: WohnheimName"
                </tr>
                <tr>
                    <td class="customer-td">Strasse:</td>
                    <td class="contentTd" >e</td>
                </tr>
                <tr>
                    <td class="customer-td">Postleitzahl:</td>
                    <td class="contentTd" >i</td>
                </tr>
                <tr>
                    <td class="customer-td">Ort:</td>
                    <td class="contentTd" >o</td>
                </tr>
                <tr>
                    <td class="customer-td">Bemerkung:</td>
                    <td class="contentTd" data-bind="text: WohnheimName" >u</td>
                </tr>
            </table>
    </div>-->
</div>
<!--###################################################################################################################################-->
    <div style="padding-right: 1em;" id="umfeldContainer">
        <h4 style="display: inline; color: #AB4A07;">Umfeld</h4>
        <hr />
        <div data-bind="foreach: umfeldpersonen" style="width: inherit;">
            <div class="collapsible-container">
                <input type="button" class="toggle-btn2" data-bind="value: formattedName" />
                <div style="display: none;" class="kollabierbar">
                    <table class="width-inheriting-table">
                        <tbody>
                            <tr class="testklasse">
                                <td class="customer-td">Rolle:</td>
                                <td class="contentTd" data-bind="text: umfrolle"></td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td">Adresse:</td>
                                <td class="contentTd" data-bind="text: umfstrnr"></td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td"></td>
                                <td class="contentTd" data-bind="text: umfplzort"></td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td">Tel.:</td>
                                <td class="contentTd">
                                    <a style="color: black" data-bind="attr: { href: umftelnr, title: nurtelnr }, text: nurtelnr"></a>
                                </td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td">Mobil:</td>
                                <td class="contentTd">
                                    <a style="color: black" data-bind="attr: { href: umfmobil, title: nurmobil }, text: nurmobil"></a>
                                </td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td">E-Mail</td>
                                <td class="contentTd">
                                    <a style="color: black" data-bind="attr: { href: umfemail, title: nuremail }, text: nuremail"></a>
                                </td>
                            </tr>
                            <tr class="testklasse">
                                <td class="customer-td">Fax:</td>
                                <td class="contentTd" data-bind="text: umffax"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="Kalender">
    <div class="margin-div">
        <div id='KalenderNavigation' style="display: none;">
            <table>
                <tr>
                    <td class="navigation-table-td">
                        <input id="VorherigerTag" type='button' onclick='selectServiceKalender(2)' />
                    </td>
                    <td class="navigation-table-td">
                        <input id="KalenderDatumFormat" class="date-input-css" style="font-weight: bold;" onchange='selectServiceKalender(6)' type="button" />
                    </td>
                    <td class="navigation-table-td">
                        <input id="NaechsterTag" type='button' onclick='selectServiceKalender(1)' />
                        <input id="KalenderDatum" type='button' style="display: none;" disabled />
                    </td>
                    <td>
                        <input id="NeuenTerminAnlegen" type='button' onclick='selectServiceKalender(3)' />
                    </td>
                </tr>
            </table>
        </div>
        <div style="display: none;" id="TerminHinzufügen">
            <table>
                <tr>
                    <td colspan="2">
                        <div class="input-wrapper cell-content" style="margin-top: 1em;">
                            <input class="floating-label-input date-input-css" id="TerminDatum" name="Datum" onchange="showUsAendern()"/>
                            <label class="floating-label" for="TerminDatum">Datum</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="input-wrapper cell-content" style="margin-top: 1em;">
                            <input class="floating-label-input" id="TerminStartZeit" name="Startzeit" onchange="showUsAendern()"/>
                            <label class="floating-label" for="TerminStartZeit">Startzeit</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="input-wrapper cell-content" style="margin-top: 1em;">
                            <input class="floating-label-input" id="TerminEndZeit" name="Endzeit"  onchange="showUsAendern()"/>
                            <label class="floating-label" for="TerminEndZeit">Endzeit</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="input-wrapper cell-content" style="margin-top: 1em;">
                            <input class="floating-label-input" id="TerminBetreff" name="Betreff"  onchange="showUsAendern()" />
                            <label class="floating-label" for="TerminBetreff">Betreff</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="input-wrapper cell-content" style="margin-top: 1em; height: 150px;">
                            <textarea class="floating-label-input" style="height: 150px;" id="TerminNotiz" name="Notiz" onchange="showUsAendern()"></textarea>
                            <label class="floating-label" for="TerminNotiz">Notiz</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Abbrechen" id="TerminSpeichernAbbrechen" onclick='showUsVerwerfen()' style="width: 100px;" />
                        <input type="button" value="Speichern" id="TerminSpeichern" onclick='selectServiceKalender(5)' style="width: 100px;" />
                    </td>
                </tr>
            </table>
        </div>
        <table id="KalenderTable"></table>
        <br />
        <table id="KalenderTableTask"></table>
    </div>
</div>

<input value="@Html.Raw("false")" id="AenderePopupDivSchalter" type="hidden" />

<div id="UnterschriftBereich" style="display: none" align="center">
    <h2>HilfePlan - Unterschrift</h2>
    <div onload="LadeDatenVor()">
        <input class="floating-label-input" id="UnterschriftHilfeplan" readonly name="HilfePlan" />
        <input class="floating-label-input" id="UnterschriftEmployee" readonly name="Mitarbeiter" />
        <input class="floating-label-input" id="UnterschriftKategorie" readonly name="Kategorie" />
        <input class="floating-label-input" id="UnterschriftLeistung" readonly name="Leistung" />
        <input class="floating-label-input" id="UnterschriftDatum" readonly name="Datum/Uhrzeit" />

        <input id="SaveRecordOID" style="display: none" />
    </div>
    <div>
        <canvas id="sketchpad" height="150" style="cursor: default; border-color: black" width="325"></canvas>
    </div>
    <p id="Geologie"></p>
    <input type="button" style="width: 100px;" onclick=' loescheUnterschrift(canvas, ctx)' value="Neu" />
    <input type="button" style="width: 100px;" onclick=' speichereUnterschrift()' value="Speichern" />
    <input type="button" style="width: 100px;" onclick='backToZeiterfassung()' value="Abbrechen" />
</div>

<div id="SupportStatistik" style="display: none" align="center" >    
        <div>
            <input  id="StatisticUberschrift" readonly name="uberschrift" />
        </div>
        <table>
            <tr>
                <td colspan="2">
                    <div class="input-wrapper cell-content" style="margin-top: 0.25em;">
                        <input id="Statistic1" name="Statistic1" readonly value=""  onclick="StatisticÄnderung(1)"/>
                    </div>
                 </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="input-wrapper cell-content" style="margin-top: 0.25em;">
                        <input  id="Statistic2" name="Statistic2" readonly value=""  onclick="StatisticÄnderung(2)"/>     
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="input-wrapper cell-content" style="margin-top: 0.25em;">
                        <input  id="Statistic3" name="Statistic3" readonly value=" " onclick="StatisticÄnderung(3)"/>
                    </div>
                </td>
            </tr>
        </table>

        <div>
            <input type="button" value="Zurück" onclick='goBackToZeiterfassung(), location.reload()' style="width: 100px; float:left; " />
      
            <div style=" width: 65%; float:right; zoom:0.75; -moz-transform: scale(0.75); margin: 2px;">
                      <fieldset>
                        <legend>Legende</legend>
                                <hr style="width: 5%; height: 30px; margin: 1px; color: green; background: #4cff00; float:left;"  /> <input type="text" style="width:90%; float:right; height:35px; text-align:center;" id="LegendStatistic1" readonly>
                            <br />
                            <br />
                                <hr style="width: 5%; height: 30px; margin: 1px; color: red; background: red; float:left;"/> <input type="text" style="width:90%; float:right; height:35px; text-align:center;" id="LegendStatistic2" readonly>
                      </fieldset>
                </div>

             <canvas id="myChart" scaleheight="50%"  scalewidth="50%" ></canvas>
        </div>
    
    
</div>







<script>
    getSelectedRecordInformationUrl        = '@Url.Action("GetSelectedRecordInformation")';
    setSelectedServiceRecordUrl            = '@Url.Action("SetSelectedServiceRecord")';
    setServiceDescriptionUrl               = '@Url.Action("SetServiceDescription")';
    updateGoalsUrl                         = '@Url.Action("UpdateGoals")';
    loadServiceCategoriesUrl               = '@Url.Action("LoadServiceCategories")';
    loadServiceRecordsUrl                  = '@Url.Action("LoadServiceRecords")';
    loadGoalsUrl                           = '@Url.Action("LoadGoals")';
    setRecordForDeletionUrl                = '@Url.Action("SetRecordOidToDelete")';
    checkRightsUrl                         = '@Url.Action("CheckRights")';
    getSelectedCustomerUrl                 = '@Url.Action("GetSelectedCustomer")';
    getSelectedKalenderUrl                 = '@Url.Action("LoadKalender")';
    getSelectedKalenderTaskUrl             = '@Url.Action("LoadKalenderTask")';
    setSelectedKalenderUrl                 = '@Url.Action("SaveKalender")';
    setSelectedUnterschriftUrl             = '@Url.Action("SaveUnterschrift")';
    setServiceRecordEmployeeUrl            = '@Url.Action("SetServiceRecordEmployee")';
    toggleIconUContentUrl                  = '@Url.Content("~/Content/images/toggle-icon-u.svg")';
    toggleIconDContentUrl                  = '@Url.Content("~/Content/images/toggle-icon-d.svg")';
    redirectLink                           = '@Url.Action("Index", "Login")';
    getSupportConceptCustomerUrl           = '@Url.Action("GetSelectedSupportConceptCustomer")';
    getSelectedRecordInformationUrlWithOid = '@Url.Action("GetSelectedRecordInformationWithOid")';
    LoadStatisticsUrl                      = '@Url.Action("LoadStatistics")';
    UpdateKalenderUrl                      = '@Url.Action("UpdateKalender")';   
    saveZeiterfassungAfterCrashUrl         = '@Url.Action("saveZeiterfassungAfterCrash")';
    CheckRightsAfterCrashUrl               = '@Url.Action("CheckRightsAfterCrash")';
    ErrorZeiterfassungAnzeigenUrl          = '@Url.Action("ErrorZeiterfassungAnzeigen")';
    LogoutUrl                              = '@Url.Action("Logout")';
    LoadSessionSettingsFromBWPUrl          = '@Url.Action("LoadBWPSettings")';
    CheckEndDateUrl                        = '@Url.Action("CheckEndDate")';
    CheckDokuReiterUrl                     = '@Url.Action("CheckDokuReiter")';

   

    $(".toggle-btn").click(function () {
        toggleOnclick(this);
    });

    serviceRecordEmployeeOid = '@Model.Employee.EmployeeOid';

    function karteAnzeigen() {
        var blubb = $("#adressfeld").html().split(' ');

        var strString = "";
        for (var it = 0; it < blubb.length; it++) {
            strString += blubb[it];

            if (it < blubb.length - 1) {
                strString += "+";
            }
        }

        strString += "," + $("#plzfeld").html() + "+" + $("#ortfeld").html();

        window.open("https://www.google.de/maps/place/" + strString);
    }
</script>