<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ServiceRecordEditPage.aspx.cs" Inherits="Host.ServiceRecordEditPage" MasterPageFile="~/BeWo.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<style type="text/css">
		.ui-collapsible h4 .ui-btn-inner
		{
			text-align: center;
		}

		.centeredText {
			text-align: center;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table width="100%">
        <tr>
            <td colspan="1">
                <asp:Label ID="Label1" runat="server" Text="Hilfeplan" />
            </td>
            <td colspan="3">
                <asp:Label ID="label_serviceRecord" runat="server" Font-Bold="True" CssClass="centeredText" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label2" runat="server" Text="Kategorie" />
            </td>
            <td colspan="3">
                <asp:DropDownList Width="100%" runat="server" ID="combo_serviceCategories" AutoPostBack="true"
                    OnSelectedIndexChanged="combo_serviceCategories_SelectedIndexChanged" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label3" runat="server" Text="Leistung" />
            </td>
            <td colspan="3">
                <asp:DropDownList Width="100%" runat="server" ID="combo_serviceDescriptions" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label4" runat="server" Text="Datum" />
            </td>
            <td colspan="3" class="textboxcell">
                <asp:TextBox Width="100%" runat="server" ID="tb_date"></asp:TextBox>
				<script type="text/javascript">
					$(function () {
						var date = document.getElementById('ContentPlaceHolder1_tb_date').value;
						$("#ContentPlaceHolder1_tb_date").datepicker();
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "firstDay", 1);
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "dateFormat", "dd.mm.yy");
						$("#ContentPlaceHolder1_tb_date").datepicker("setDate", date);
						
						$("#ui-datepicker-div").wrap('<div class="myScope"></div>');
						
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "dayNames", ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]);
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "dayNamesShort", ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"]);
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "dayNamesMin", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]);
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "monthNames", ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
						$("#ContentPlaceHolder1_tb_date").datepicker("option", "monthNamesShort", ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]);
					});
				</script>
            </td>
        </tr>
        <tr>
            <td>
	            <asp:Label ID="Label5" runat="server" Text="Dauer" />
            </td>
            <td colspan="3" class="textboxcell">
	            <input type="text" runat="server" style="width: 100%;" ID="tb_duration" data-clear-btn="false" pattern="[0-9]*" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label6" runat="server" Text="von" />
            </td>
            <td class="textboxcell">
	            <input type="text" runat="server" style="width: 100%;" ID="tb_start" pattern="[0-9]{1,2}[:]{0,1}[0-9]{2}" placeholder="z.B. 09:30 oder 0930" data-clear-btn="true" onchange='TimeCalculation()'/>
            </td>
            <td>
                <asp:Label ID="Label7" runat="server" Text="bis" />
            </td>
            <td class="textboxcell">
	            <input type="text" runat="server" style="width: 100%;" ID="tb_stop" pattern="[0-9]{1,2}[:]{0,1}[0-9]{2}" placeholder="z.B. 10:30 oder 1030" data-clear-btn="true" onchange="TimeCalculation()"/>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label8" runat="server" Text="Dokumentation" />
            </td>
            <td colspan="3" class="textboxcell">
                <asp:TextBox Width="100%" runat="server" ID="tb_notice" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button CssClass="smallbtn_alignright" runat="server" ID="Button1" Text="Abbrechen"
                    OnClick="bt_cancel_Click" data-inline="true" class="ui-btn-left" data-textonly="false" data-textvisible="true" data-msgtext="Lade"/>
            </td>
            <td colspan="3" style="text-align: right">
                <asp:Button CssClass="smallbtn_alignright" runat="server" ID="bt_saveEdit" Text="&Auml;nderung speichern"
                    OnClick="bt_save_Click" data-inline="true" class="ui-btn-right"  />
            </td>
        </tr>
        <tr>
            <td colspan="4" style="text-align: center;">
                <asp:Label ForeColor="Green" runat="server" ID="lbl_success" />
                <asp:Label ForeColor="Red" runat="server" ID="lbl_error" />
            </td>
        </tr>
    </table>
</asp:Content>
