@model PantheonRA.BackOffice.Models.TravelOrdersAttachmentsViewModel

@{
    ViewBag.Title = Loc.Create;
    Layout = null;
}

<div class="table-responsive">
    @using (Ajax.BeginForm("CreateAttachement", "TravelOrdersAttachments",
        null,
    new AjaxOptions
    {
        UpdateTargetId = "TravelOrdersAttachmentsId"
    },
    new { enctype = "multipart/form-data" }))
    {
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>

                        @Html.HiddenFor(m => m.acKey)
                        <div class="form-group">
                            @Html.ValidationSummary(false, "", new { @class = "text-danger" })
                            @Html.EditorFor(model => model.travelOrderAttachmentSingle.Title,
           new { htmlAttributes = new { @class = "form-control", @autocomplete = "on", @required = "required", @placeholder = Loc.Title, @id = "Title" } })
                        </div>
                    </td>
                    <td>
                        <div class="upload-btn-wrapper">
                            <button class="btn">@Loc.Document</button>
                            <input type="file" name="File" id="File" />
                        </div>


                    </td>
                    <td>
                        <div class="form-group">
                            <button class="btn btn-success" type="submit">
                                <i class="fa fa-plus" title="@Loc.AddAttachment" aria-hidden="true"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @foreach (var item in Model.travelOrderAttachmentList)
                {
                    <tr>
                        <td class="address" data-address="@item.Title">@Html.DisplayFor(modelitem => item.Title)</td>
                        <td>
                            <a target="_blank"
                               href="@Url.Action("DisplayFile", "TravelOrdersAttachments", new { qId = item.QId })">
                                @Html.DisplayFor(modelitem => item.DocName)
                            </a>
                        </td>
                        <td>
                            <a class="btn btn-outline"
                               data-ajax="true"
                               data-ajax-method="POST"
                               data-ajax-mode="replace"
                               data-ajax-update="#TravelOrdersAttachmentsId"
                               href="@Url.Action("Delete", "TravelOrdersAttachments", new { qId = item.QId, acKey = item.AcKey })">
                                <span class="far fa-trash-alt" aria-hidden="true"></span>
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
</div>

<script>
    $(document).ready(function () {
        ajaxUploadDocument();
    });
</script>

<style>
        .upload-btn-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

            .upload-btn-wrapper input[type=file] {
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
            }
    </style>