<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ModalControl.ascx.cs" Inherits="Phonebook.Modal" %>
<!-- The Modal -->
<div class="w3-modal" id="myModal">
<div class="w3-modal-dialog">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HF" runat="server" />
<div class="w3-modal-content" style="width: 559px; top: -37px;">
<!-- Modal Header -->
<div class="someClassNew">
<asp:Label ID="insertContactsLbl" runat="server" Style="margin-right: 170px; margin-bottom: 10px; color:dimgray; font-weight: bold" Text="Insert Contacts" Visible="false"></asp:Label>
<asp:Label ID="updateContactsLbl" runat="server" Style="margin-right: 170px; margin-bottom: 10px; color:dimgray; font-weight: bold" Text="Update Contacts" Visible="false"></asp:Label>
<asp:Button ID="headClose" class="btn-close" runat="server" Style="margin: 10px; background-color: #f660a0;" Text="" BorderStyle="Solid" OnClick="headClose_Click" />
</div>
<!-- Modal body -->
<div class="w3-modal-body" style="background-color: #f5f5f5;" align="center">
<div class="w3-input" style="border-style:none">
<asp:Label ID="lblId" runat="server" Text="Enter ID:" Visible="false"></asp:Label>
<asp:TextBox ID="insId" class="form-control" Style="width: 426px;" runat="server" Visible="false"></asp:TextBox>
<asp:Label ID="insUpdLbl" runat="server" Text="Command has been executed successful !" Visible="false"></asp:Label>
</div>
<div class="w3-input" style="border-style:none">
<asp:Label ID="lblFirstName" runat="server" Visible="false" Text="Enter First Name:"></asp:Label>
<div class="input-group" style="margin-left:40px;">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<asp:TextBox ID="insName" class="form-control" placeholder="First Name" Style="width: 426px;" runat="server"></asp:TextBox>
</div>
<asp:Label ID="errFname" runat="server" Text="Wrong First Name" Visible="false"></asp:Label>
</div>
<div class="w3-input" style="border-style:none">
<asp:Label ID="Label1" runat="server" Visible="false" Text="Enter Last Name:"></asp:Label>
<div class="input-group" style="margin-left:40px;">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<asp:TextBox ID="insLname" class="form-control" placeholder="Last Name" Style="width: 426px;" runat="server"></asp:TextBox>
</div>
<asp:Label ID="errLname" runat="server" Text="Wrong Last Name" Visible="false"></asp:Label>
</div>
<div class="w3-input" style="border-style:none">
<asp:Label ID="lblPhone" runat="server" Visible="false" Text="Enter Phone:"></asp:Label>
<div class="input-group" style="margin-left:40px">
<span class="input-group-addon">
<i class="fa fa-address-book"></i>
</span>
<asp:TextBox ID="insPhone" class="form-control" placeholder="Phone Number" Style="width: 426px;" runat="server"></asp:TextBox>
</div>
<asp:Label ID="errPhone" runat="server" Text="Wrong Phone Number" Visible="false"></asp:Label>
</div>
<div class="w3-input" style="border-style:none">
<asp:Label ID="lblEmail" runat="server" Visible="false" Text="Enter Email:"></asp:Label>
<div class="input-group" style="margin-left:40px">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<asp:TextBox ID="insEmail" class="form-control" placeholder="Email Address" Style="width: 426px;" runat="server"></asp:TextBox>
</div>
<asp:Label ID="errEmail" runat="server" Text="Wrong Email Address" Visible="false"></asp:Label>
</div>
<div class="w3-input" style="border-style:none">
<asp:Label ID="countryLbl" runat="server" Visible="false" Text="Select Country"></asp:Label>
<div class="input-group" style="margin-left:40px">
<span class="input-group-addon">
<i class="fa fa-flag"></i>
</span>
<asp:DropDownList ID="DropDownList1" runat="server" Style="width: 426px; height: 34px; border-radius: .25rem; border: 1px solid #ced4da; margin-left:-80px;">
<asp:ListItem Selected="True" Value="">Choose Country</asp:ListItem>
<asp:ListItem Value="USA">USA</asp:ListItem>
<asp:ListItem Value="JAPAN">JAPAN</asp:ListItem>
<asp:ListItem Value="UK">UK</asp:ListItem>
</asp:DropDownList>
</div>
<asp:Label ID="errCountry" runat="server" Visible="false">Country Not Selected</asp:Label>
</div>
<div class="w3-input" style="border-style:none"">
<div class="input-group" style="margin-left:40px">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<asp:TextBox ID="datatextbox" class="form-control" placeholder="Birth Date" autocomplete="off" runat="server" Style="width: 427.4px;"></asp:TextBox><br />
</div>
<asp:Label ID="errDateLbl" runat="server" Visible="false">Wrong Date Format</asp:Label>
</div>
<div class="w3-input" style="border-style:none;">
<asp:RadioButtonList ID="RadioButtonList1" RepeatLayout="Table" RepeatDirection="Horizontal" runat="server" Style="width: 279px; height: 36px; margin-top: 15px;">
<asp:ListItem Value="0"> <i style="font-size:25px;" class="fa fa-male"></i> Male</asp:ListItem>
<asp:ListItem Value="1"> <i style="font-size:23px;" class="fa fa-female"></i> Female</asp:ListItem>
<asp:ListItem Value="2"> <i style="font-size:17px;" class="fa fa-briefcase"></i> Firm</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="errGenderTwo" runat="server" Visible="false">Gender Not Selected</asp:Label>
</div>
</div>
<!-- Modal footer -->
<div class="someClassNew">
<asp:Button ID="insandupd" class="btn btn-success w3-padding" runat="server" Style="margin: 10px; font-weight:bolder" Text="Save" BorderStyle="Solid" OnClick="insandupd_Click" CausesValidation="true" Visible="true" />
<asp:Button ID="close" class="btn btn-danger w3-right w3-padding" runat="server" Style="margin: 10px; font-weight:bolder" Text="Close" BorderStyle="Solid" OnClick="close_Click" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<script type="text/javascript">
Sys.Application.add_load(function () {
$('#<%= datatextbox.ClientID%>').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'focus',
dateFormat: 'dd.mm.yy'
});
});
</script>