<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.InvoiceID)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Description)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.InvoiceDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.DueDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Paid)
    </th>
    <th>Actions</th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DueDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Paid)
        </td>
        <td style="white-space: nowrap;width: 1px;">
            <button type="button" class="btn btn-primary btn-xs" onclick="location.href='@Url.Action("Edit", "Billing", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-edit" style="vertical-align:middle;margin-top: -5px"></span> Edit</button>
            <button type="button" class="btn btn-default btn-xs" onclick="location.href='@Url.Action("Index", "InvoiceItem", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-eye-open" style="vertical-align:middle;margin-top: -5px"></span> Details</button>
            <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id=@item.InvoiceID><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm Delete</h4>
                        </div>
                        <div class="modal-body">
                            <!-- The problem seems to be here:-->
                            <p>Are you sure you want to delete invoice number: <b>@item.InvoiceID</b></p>
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" asp-route-id=@item.InvoiceID method="post" class="form-inline" role="form">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
}