LocalGovIMS_localgov-ims/src/Admin/Views/MethodOfPaymentMetadata/Create.cshtml
@model Admin.Models.MethodOfPaymentMetadata.EditViewModel
@{
    ViewBag.Title = "Create method of payment metadata";
}

@section Messages {
    @if (TempData.ContainsKey("Message") && TempData["Message"] != null) { Html.RenderPartial("_Message", TempData["Message"]); }
}

@section Header { Create MOP metadata }

@section Subheader { MOP metadata details }

@using (Html.BeginForm("Create", "MethodOfPaymentMetadata", FormMethod.Post))
{
    @Html.HiddenFor(m => m.MopCode)

    <div>

        <div class="row mb-3">
            <div class="col col-sm-6 col-md-5 col-lg-4">
                @Html.LabelFor(m => m.MetadataKeyId, new { @class = "form-label" })
                <select id="MetadataKeyId" name="MetadataKeyId">
                    <option value="">None</option>
                    @foreach (var item in Model.MetadataKeys.Items)
                    {
                        <option class="item" value="@item.Value" @(Model.MetadataKeyId.ToString().Equals(item.Value) ? "selected" : String.Empty)>@item.Text</option>
                    }
                </select>
                <div class="form__element--error">
                    @Html.ValidationMessageFor(m => m.MetadataKeyId)
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col col-sm-6 col-md-5 col-lg-4">
                @Html.LabelFor(m => m.Value, new { @class = "form-label" })
                @Html.TextBoxFor(m => m.Value, new { @class = "form-control" })
                <div class="form__element--error">
                    @Html.ValidationMessageFor(m => m.Value)
                </div>
            </div>
        </div>

        <div>
            <input type="submit" value="Save" class="btn btn-primary" />
            @Html.ActionLink("Back", "Back", "MethodOfPaymentMetadata", null, new { @class = "btn btn-secondary" })
        </div>

    </div>

}

@section Scripts {

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

            accessibleAutocomplete.enhanceSelectElement({
                displayMenu: 'overlay',
                autoSelect: false,
                confirmOnBlur: false,
                showAllValues: true,
                defaultValue: '',
                preserveNullOptions: true,
                placeholder: 'Select metadata key',
                dropdownArrow: () => paymentsAdmin.controls.autocomplete.downarrow,
                selectElement: document.querySelector('#MetadataKeyId')
            });

        });
    </script>

}