<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="CSEasyO365Attendees.aspx.vb" Inherits="CSEasyO365.CSEasyO365Attendees" %>
<%@ register tagprefix="ex" namespace="Exact.Web.UI.Controls" assembly="Exact.Web.UI.Controls" %>

<html>
<head>
	<meta name="save" content="history" />
	<link runat="server" id="ExactCSS" href="Exact.css" type="text/css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="jqueryui.js"></script>
    <script>
        function configureAutocomplete(selector, zoektype, targetFieldPrefix) {
            $("input[id^='" + selector + "']").autocomplete({
                minLength: 2,
                source: function (request, response) {
                    var requestId = $("#RequestID").val();

                    $.ajax({
                        url: "CSEasyO365AttendeesCallback.aspx",
                        dataType: "json",
                        data: {
                            term: request.term,
                            type: zoektype,
                            requestid: requestId
                        },
                        success: function (data) {
                            response(data);
                        }
                    });
                },
                select: function (event, ui) {
                    var inputId = $(this).attr("id");
                    var nummer = inputId.match(/\d+$/)[0];
                    var isNew = inputId.includes("New");
                    var targetPrefix = isNew ? targetFieldPrefix + "New" : targetFieldPrefix;
                    var targetId = targetPrefix + nummer;

                    $("#" + targetId).val(zoektype === "name" ? ui.item.email : ui.item.fullname);
                    $(this).val(ui.item.value);

                    if (inputId.startsWith("txtNameNew") || inputId.startsWith("txtEmailNew")) {
                        //voegNieuweRegelToe();
                        SysAuto(inputId);
                    }

                    return false;
                }
            });
        }

        //function voegNieuweRegelToe() {
        //    var extraItems = parseInt($("#ExtraItems").val(), 10);
        //    var nieuwNummer = extraItems + 1;

        //    // Bouw nieuwe regel
        //    var nieuweRij = $("<tr>").append(
        //        $("<td>").append($("<input>", {
        //            type: "text",
        //            id: "txtNameNew" + nieuwNummer,
        //            placeholder: "Naam " + nieuwNummer
        //        })),
        //        $("<td>").append($("<input>", {
        //            type: "text",
        //            id: "txtEmailNew" + nieuwNummer,
        //            placeholder: "E-mail " + nieuwNummer
        //        }))
        //    );

        //    // Voeg toe aan tabel
        //    $("#jouwTabelID").append(nieuweRij);

        //    // Update hidden veld
        //    $("#ExtraItems").val(nieuwNummer);

        //    // Activeer autocomplete op nieuwe velden
        //    configureAutocomplete("txtNameNew", "name", "txtEmailNew");
        //    configureAutocomplete("txtEmailNew", "email", "txtNameNew");
        //}

        //$("body").on("blur", "input[id^='txtEmailNew']", function () {
        //    var id = $(this).attr("id");
        //    var nummer = parseInt(id.match(/\d+$/)[0], 10);
        //    var naamId = "txtNameNew" + nummer;
        //    var emailId = "txtEmailNew" + nummer;

        //    var naamLeeg = $("#" + naamId).val().trim() === "";
        //    var emailLeeg = $("#" + emailId).val().trim() === "";

        //    // Alleen toevoegen als beide leeg zijn (dus nog niet ingevuld)
        //    if (naamLeeg && emailLeeg) return;

        //    // Check of er al een volgende regel bestaat
        //    var extraItems = parseInt($("#ExtraItems").val(), 10);
        //    if (nummer === extraItems) {
        //        voegNieuweRegelToe();
        //    }
        //});

        $(function () {
            configureAutocomplete("txtName", "name", "txtEmail");
            configureAutocomplete("txtEmail", "email", "txtName");
        });
    </script>
</head>
<body>

	<ep:form id="frm" runat="server">
        <ex:inputfield runat="server" id="Action" validationas="Int" validationdefault="0" hidden="true" />
        <ex:inputfield runat="server" id="RequestID" validationas="Guid" hidden="true" />
        <ex:inputfield runat="server" id="ExtraItems" validationas="Int" validationdefault="0" hidden="true" />

        <ex:CardControl runat="server" ID="Card" Action="Show">

		    <ex:header runat="server" id="hdr" Caption="Easy Office365" CaptionID="0" CaptionSuffix=":Deelnemers" CaptionSuffixID="0">
            </ex:header>

            <ex:headerproperties runat="server" id="hdrProps" HeaderPropertiesStyle="Custom" />

		    <ex:buttonbar runat="server" id="btnBar">
			    <ex:button runat="server" id="btnClose" buttonstyle="Close" />
                <ex:button runat="server" id="btnSave" buttonstyle="Custom" Caption="Save" CaptionID="24522" onClick="SysSet('Action', '1'); SysSubmit(1);" />
		    </ex:buttonbar>

            <ex:bcerrormessages runat="server" id="ErrorMsg" />

            <ex:cardrow runat="server" id="cr">
                <ex:cardcolumn runat="server" id="cc">
                    <ex:cardsection runat="server" id="csRequest" ShowHeader="False">
					    <ex:cardfield runat="server" id="cfRequest" ShowLabel="False">
						    <ex:InputField runat="server" id="RequestDescription" ReadOnly="True" />
					    </ex:cardfield>
                    </ex:cardsection>

                    <ex:cardlistview runat="server" id="csPeople" showheader="True" customizecolumns="False" customizerows="False">
	                    <ex:listview runat="server" id="lstTypes" Caption="Deelnemers" CaptionID="0" onquery="lstTypes_OnQuery" ongetdata="lstTypes_OnGetData" showwaitmessage="True" ScrollBar="None" ShowPageSize="False">
                            <Columns>
                                <ex:ListViewCheckBoxColumn runat="server" id="colSelected" width="5%" Caption="Uitnodigen" CaptionID="0" Pinned="False" />
                                <ex:listviewcolumn runat="server" id="colContactID" width="30%" caption="Contact person" captionid="8484" />
                                <ex:listviewcolumn runat="server" id="colContactEmail" width="25%" caption="E-mail" captionid="5804" />
                                <ex:listviewcolumn runat="server" id="colType" width="5%" caption="Type" captionid="3801" />
                                <ex:listviewcolumn runat="server" id="colStatus" width="5%" caption="Status" captionid="4332" />
                                <ex:listviewcolumn runat="server" id="colStatusTime" width="10%" caption="Status" captionid="4332" CaptionSuffix="Time" CaptionSuffixID="8895" />
                            </Columns>
		                </ex:listview>
		                <ex:bcerrormessages runat="server" id="errNoDataFound" Mode="Notification" />
                    </ex:cardlistview>
                </ex:cardcolumn>
            </ex:cardrow>

        </ex:CardControl>
	</ep:form>
</body>
</html>