LocalGovIMS_localgov-ims/src/PaymentPortal/Views/Payment/Index.cshtml
@using PaymentPortal.Classes;

@model PaymentPortal.Models.PaymentModel

@{
    ViewBag.FormTitle = "Make a payment";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (ViewBag.BasketMessage != null)
{
    <div class="alert alert-success">
        @ViewBag.BasketMessage
    </div>
}
@if (ViewBag.ExMessage != null)
{
    <div class="alert alert-danger">
        @ViewBag.ExMessage
    </div>
}

@using (Html.BeginForm("", "", FormMethod.Post))
{
    <div class="row">

        @if (Model.BasketItems.Count > 0)
        {
            <div class="col-12 d-xl-none mb-3">
                @Html.Partial("_Basket", Model)
            </div>
        }

        <div class="col-12 col-xl-7 mb-3">

            <div class="card">
                <div class="card-body">

                    @if (Model.BasketItems.Count <= 0)
                    {
                        <h2 class="card-title">
                            Payment details
                        </h2>

                        <div class="alert alert-secondary">
                            <p>You can pay by:</p>
                            <ul class="mb-0">
                                <li>
                                    Debit or credit card for one or more items by adding them to your basket
                                </li>
                            </ul>
                        </div>
                    }
                    else
                    {
                        <h2 class="card-title">
                            Add another payment
                        </h2>

                    }

                    @if (ViewBag.Message != null)
                    {
                        <div class="alert alert-danger">
                            @ViewBag.Message
                        </div>
                    }

                    <div class="row">
                        <div class="col col-sm-7">
                            @Html.LabelFor(m => m.PaymentType, new { @class = "form-label fw-bold" })
                            <select id="PaymentType" name="PaymentType">
                                <option value="">None</option>
                                @foreach (var item in (List<PaymentTypeListItem>)ViewBag.PaymentTypes)
                                {
                                    <option class="item" value="@item.Value" @(!string.IsNullOrEmpty(Model.PaymentType) && Model.PaymentType.Equals(item.Value) ? "selected" : String.Empty) data-referenceFieldLabel="@item.ReferenceFieldLabel" data-referenceFieldMessage="@item.ReferenceFieldMessage">@item.Text</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form__element--error">
                                @Html.ValidationMessageFor(m => m.PaymentType)
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col">
                            @Html.LabelFor(m => m.PaymentReference, new { @class = "form-label fw-bold" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="payment-reference-message"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-sm-4">
                            @Html.TextBoxFor(m => m.PaymentReference, new { @class = "form-control", @style = "text-transform:uppercase", @maxlength = "30" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form__element--error">
                                @Html.ValidationMessageFor(m => m.PaymentReference)
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col col-sm-4">
                            @Html.LabelFor(m => m.Amount, new { @class = "form-label fw-bold" })
                            @Html.TextBoxFor(m => m.Amount, new { @class = "form-control", @type = "number", @step = "0.01" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col">
                            <div class="form__element--error">
                                @Html.ValidationMessageFor(m => m.Amount)
                            </div>
                        </div>
                    </div>

                    <button value="Card" name="action" type="submit" class="btn btn-primary mt-3">Pay with Card (add to basket)</button>

                    <div class="row">
                        <div class="col col-sm-6">
                            <div class="form__element--error">
                                @Html.ValidationMessageFor(m => m.BasketItems)
                            </div>
                        </div>
                    </div>

                    @if (Model.BasketItems.Count > 0)
                    {
                        for (int i = 0; i < Model.BasketItems.Count; i++)
                        {
                            @Html.Hidden("BasketItems[" + @i + "].Description", Model.BasketItems[@i].Description)
                            @Html.Hidden("BasketItems[" + @i + "].Code", Model.BasketItems[@i].Code)
                            @Html.Hidden("BasketItems[" + @i + "].Reference", Model.BasketItems[@i].Reference)
                            @Html.Hidden("BasketItems[" + @i + "].Amount", Model.BasketItems[@i].Amount)
                        }
                    }

                </div>
            </div>

        </div>
        <div class="col-12 col-xl-5">
            <div class="d-none d-xl-block">
                @Html.Partial("_Basket", Model)
            </div>
            @Html.Partial("_PaymentMethods", Model)
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/app/payment")

    <script type="text/javascript">
        $(document).ready(function () {

            accessibleAutocomplete.enhanceSelectElement({
                displayMenu: 'overlay',
                autoSelect: false,
                confirmOnBlur: false,
                showAllValues: true,
                defaultValue: '',
                preserveNullOptions: true,
                placeholder: 'Select payment type',
                dropdownArrow: () => downarrow,
                selectElement: document.querySelector('#PaymentType'),
                onConfirm: (val) => {
                    handleFundTypeChange(val);
                }
            });

            function handleFundTypeChange(val) {

                setTimeout(function () {

                    var option = getSelectedAccessibleAutocompleteOption('#PaymentType', val);

                    var referenceFieldLabel = option.dataset.referencefieldlabel;
                    var referenceFieldMessage = option.dataset.referencefieldmessage;

                    $('label[for="PaymentReference"]').text(referenceFieldLabel);
                    $('#payment-reference-message').text(referenceFieldMessage);

                    $('#PaymentType-select').val(option.value);

                }, 50);

            }

            function getSelectedAccessibleAutocompleteOption(querySelector, selectedText) {
                const option = Array.from(document.querySelector(querySelector + '-select').querySelectorAll("option")).find(
                    (o) => o.innerText === selectedText
                );

                return option;
            }

        });
    </script>
}
