@model GreenTree.Strohrmann.ERP.Web.Models.Search.ICustomerSearchable

@{ 
	var partialId = Html.RandomId();
}

<script type="text/javascript">

@{ 
    <text>
    $(document).ready(function () {
        $("#text_@partialId").on('keypress', function (e) {
            if (e.keyCode == 13) {
                search_@partialId ();
                e.preventDefault();
            };
        });
        $("#text_@partialId").on('keydown', function (e) {
            if (e.keyCode == 8 && $("#value_@partialId").val() != "") {
                $("#text_@partialId").val("");
                $("#value_@partialId").val("");
                $("#text_@partialId").next().children(".fa-check-circle").fadeOut("fast", function () {
                    $("#text_@partialId").next().children(".fa-ellipsis-h").fadeIn("fast");
                });
                e.preventDefault();
            };
        });
    });

    function search_@partialId () {
        $.ajax({
            method: "POST",
            url: "@Url.Action("Search", "Customer")",
            data: {
                SearchTerm: $("#text_@partialId").val()
            },
            success: function (data) {
                $("#searchCustomerModal_@partialId").find(".list-group").empty();
                if (data.length > 0) {
                    $(data).each(function (index, elem) {
                        $("#searchCustomerModal_@partialId").find(".list-group").append(
                            '<a href="#" class="list-group-item list-group-item-info list-group-item-action" ' +
                            'data-toggle="list" data-val="{0}" data-text="{1}" ondblclick="select_@partialId ()">{1} ({2})</a>'
                                .format(elem.id, elem.fullname, elem.localAddress));
                    });
                } else {
                    $("#searchCustomerModal_@partialId").find(".list-group").append(
                        '<button type="button" class="list-group-item">Keine Treffer</button>');
				}
                $("#searchCustomerModal_@partialId").modal("show");
            },
            error: function (msg) {

            }
        });
    }

    function select_@partialId () {
        $("#searchCustomerModal_@partialId").modal("hide");
        var val = $("#searchCustomerModal_@partialId").find("a.active").attr("data-val");
        var text = $("#searchCustomerModal_@partialId").find("a.active").attr("data-text");
        $("#value_@partialId").val(val);
        $("#text_@partialId").val(text);
        $("#text_@partialId").next().children(".fa-ellipsis-h").fadeOut("fast", function () {
            $("#text_@partialId").next().children(".fa-check-circle").fadeIn("fast");
        });
	}
            
    </text>
}

</script>

<div class="input-group">
    <div class="input-group-prepend">
        <button class="btn btn-info fas fa-search" type="button" onclick="search_@partialId ()"></button>
    </div>
    <input id="text_@partialId" type="text" asp-for="CustomerText" class="form-control" placeholder="Suchbegriff" 
           aria-label="Suchbegriff" aria-describedby="basic-addon1">
    <div class="input-group-append">
        @if (Model.CustomerId > 0)
		{
            @Html.Span("", new { @class = "input-group-text bg-success text-white rounded-right fas fa-cust-lh fa-check-circle" })
            @Html.Span("", new { @class = "input-group-text rounded-right fas fa-cust-lh fa-ellipsis-h", style = "display: none" })
		}
		else
		{
            @Html.Span("", new { @class = "input-group-text bg-success text-white rounded-right fas fa-cust-lh fa-check-circle", style = "display: none" })
            @Html.Span("", new { @class = "input-group-text rounded-right fas fa-cust-lh fa-ellipsis-h" })
		}
    </div>
</div>

<input id="value_@partialId" type="hidden" asp-for="CustomerId" />

<div id="searchCustomerModal_@partialId" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Suchergebnisse</h4>
            </div>
            <div class="modal-body overflow-auto" style="max-height: 400px">
                <div class="list-group">
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn btn-secondary" data-dismiss="modal">Schließen</div>
                <div class="btn btn-success" onclick="select_@partialId ()">Auswählen</div>
            </div>
        </div>
    </div>
</div>