laatzen/LaaProductionWeb/LaaProductionWeb/Views/Protocol/Index.cshtml

@model OrderClientModel

@using LaaProductionWeb.Controllers
@using LaaProductionWeb.Services.Models

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="align-top p-0 w-100">
                <table class="table table-bordered">
                    <tr>
                        <td colspan="2" class="py-1 fs-5 white-space-nowrap text-center text-smallcaps">Test Protocol</td>
                    </tr>
                    <tr>
                        <td class="py-1 white-space-nowrap va-middle"><label for="client_name">Client</label></td>
                        <td class="p-1 dropdown w-75">
                            <input id="client_name" class="form-control border-0 rounded-0" value="@this.Model.ClientName" />
                            <ul class="dropdown-menu mt-2 w-100" id="client_name_options">
                                <li class="text-secondary bg-light text-normal">Search by client name</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="py-1 white-space-nowrap va-middle"><label for="order_no">Order No.</label></td>
                        <td class="p-1 w-75">
                            <input id="order_no" class="form-control border-0 rounded-0" value="@this.Model.OrderId" />
                            <ul class="dropdown-menu mt-2 w-100" id="order_no_options">
                                <li class="text-secondary bg-light text-normal">Search by order no.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr class="border-bottom-0">
                        <td class="py-1 white-space-nowrap va-middle">Positions</td>
                        <td class="p-1 w-75">
                            <div class="form-control border-0 rounded-0">
                                @if (string.IsNullOrWhiteSpace(this.Model.Positions))
                                {
                                    <span class="text-white">...</span>
                                }
                                else
                                {
                                    <span>@this.Model.Positions</span>
                                }
                            </div>
                        </td>
                    </tr>
                </table>
            </th>
            <th class="text-center va-middle w-auto">
                <img src="~/App_Content/svg/sensus_xylem_logo.svg" width="210" class="mx-5"/>
                <form action="/Protocol/Index" method="post" enctype="multipart/form-data">
                    @this.Html.HiddenFor(x => x.OrderId)
                    @this.Html.HiddenFor(x => x.ClientId)
                    @this.Html.HiddenFor(x => x.ClientName)
                    @this.Html.HiddenFor(x => x.Positions)
                    <input name="FilePDF" id="FilePDF" type="file" class="d-none" accept="application/pdf" onchange="javascript: this.form.submit();" />
                    <div class="input-group flex-nowrap mt-3">
                        <a class="btn btn-light white-space-nowrap w-100" href="/Protocol/Print?orderId=@this.Model.OrderId" target="_blank"><i class="bi bi-printer me-2"></i> Vorschau</a>
                        <label for="FilePDF" class="btn btn-outline-light border text-dark white-space-nowrap w-100"><i class="bi bi-filetype-pdf"></i> Auswählen</label>
                    </div>
                    @if (this.TempData.TryGetValue(ProtocolController.FilePDF, out object errorMessage))
                    {
                        <div class="text-danger small fw-normal">
                            @($"{errorMessage}")
                        </div>
                    }
                </form>
            </th>
        </tr>
    </thead>
    @if (this.Model.OrderId > 0)
    {
        this.Html.RenderAction(nameof(ProtocolController.Body), new { orderId = this.Model.OrderId });
    }
</table>


@section scripts {
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const show = 'show';

            let clientNrInput = document.getElementById('client_name');
            let clientMenu = document.getElementById('client_name_options');
            if (clientNrInput && clientMenu) {
                clientNrInput.oninput = function loadOrdersByOrderNr() {
                    setTimeout(function handler() {
                        let search = clientNrInput.value;
                        if (search && search.length > 3) {
                            fetch(`/Protocol/Clients?search=${search}`)
                                .then(response => response.text())
                                .then(orderItems => {
                                    clientMenu.innerHTML = orderItems;
                                    clientMenu.classList.add(show);
                                })
                        } else {
                            clientMenu.classList.remove(show);
                        }
                    }, 50);
                };
            }

            let orderNrInput = document.getElementById('order_no');
            let orderMenu = document.getElementById('order_no_options');
            if (orderNrInput && orderMenu) {
                orderNrInput.oninput = function loadOrdersByOrderNr() {
                    setTimeout(function handler() {
                        let search = orderNrInput.value;
                        if (search && search.length > 3) {
                            fetch(`/Protocol/Orders?search=${search}`)
                                .then(response => response.text())
                                .then(orderItems => {
                                    orderMenu.innerHTML = orderItems;
                                    orderMenu.classList.add(show);
                                })
                        } else {
                            orderMenu.classList.remove(show);
                        }
                    }, 50);
                };
            }


            window.addEventListener('hashchange', function () {
                clientMenu.classList.remove(show);
                orderMenu.classList.remove(show);
                location.href = `/Protocol?orderId=${location.hash.substring(1)}`
            });
        });
    </script>
}