executaveis/GCI.PortalCondomino/Views/Recibos/Index.cshtml

@using GCI.UTL
@using GCI.PortalCondomino.Models
@model RecibosModel
@{
    ViewBag.Title = "Recibos";
    Layout = "~/Views/Backoffice/_Layout.cshtml";
}

<h3 class="oswald mt0 mb40 ac">@ViewBag.Title</h3>

<section class="col-xs-12 col-md-10">
    <div class="row filtros mb20 form-inline">
        @using (Html.BeginForm("Index", "Recibos", FormMethod.Get, null))
        {
            <div class="col-xs-12 xs-ac al mb20 form-group">
                @Html.Hidden("commonholdid", @Model.CodCondominio, new { onchange = "this.form.submit();" })
                <label for="f_ordenar" class="control-label">Ano:</label>
                @Html.DropDownList("year", ViewBag.Years as List<SelectListItem>, new { @class = "form-control", onchange = "this.form.submit();" })
            </div>
        }
    </div>

    @using (Html.BeginForm("Details"))
    {
        <div class="table-responsive">
            <table id="recibos" border="0" cellspacing="0" cellpadding="0" class="table table-striped mb40">
                <thead>
                    <tr>
                        <th class="text-center" colspan="4" style="border-right: 2px solid #ddd">Documento</th>
                        <th class="text-center" colspan="3" style="border-left: 2px solid #ddd">Pagamento</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th>Número</th>
                        <th>Data</th>
                        <th>Valor</th>
                        <th>Forma</th>
                        <th>Banco</th>
                        <th align="right">Nº Documento</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var linha in Model.Registos)
            {
                        @Html.HiddenFor(model => linha.CodRecibo)
                        <tr id=@("recibo-"+linha.CodRecibo)>
                            <td align="right">
                                <a class="glyphicon glyphicon-plus"
                                    data-recibo=@("recibo-"+linha.CodRecibo)
                                    data-toggle="collapse"
                                    data-target=@("#detalhe-recibo-"+linha.CodRecibo)></a>
                            </td>
                            <td>@linha.NRecibo</td>
                            <td>@linha.Data.ToShortDateString()</td>
                            <td>@linha.Valor.ToString("C2")</td>
                            <td>@linha.DadosPagamento.Tipo.GetDescription()</td>
                            <td>@linha.DadosPagamento.ContaBancaria.Nome</td>
                            <td>@linha.DadosPagamento.ContaBancaria.ID</td>
                        </tr>
                        <tr name="filler"><!-- Criado para que o estilo da tabela não seja afectado (even/odd) --></tr>
                        <tr>
                            <td class="detalhe" colspan="7">
                                <div id=@("detalhe-recibo-"+linha.CodRecibo) class="collapse">
                                    <p>A Carregar...</p>
                                </div>
                            </td>
                        </tr>
            }
                </tbody>
            </table>
        </div>
    }
    @section scripts {
        @*https://www.aspsnippets.com/Articles/ASPNet-MVC-Master-Detail-example-Display-details-of-Grid-Row-inside-Popup-using-jQuery.aspx*@
        <script type="text/javascript">
            $(function () {
                $("[id^='detalhe-recibo']").on('shown.bs.collapse', function () {
                    var _this = $(this);
                    var link = $("a[data-target='#" + $(this).attr('id') + "']");

                    link.removeClass('glyphicon-plus');
                    link.addClass('glyphicon-minus');

                    if (!_this.attr('data-cache')) {
                        var id = link.attr('data-recibo').substr(link.attr('data-recibo').lastIndexOf('-') + 1);
                        $.ajax({
                            type: "GET",
                            url: "/Recibos/Details/" + id,
                            contentType: "application/json; charset=utf-8",
                            dataType: "html",
                            success: function (response) {
                                _this.html(response);
                                _this.attr('data-cache', true);
                            },
                            failure: function (response) {
                                _this.html("<p>Ocorreu um erro ao obter detalhes do recibo!</p>");
                            },
                            error: function (response) {
                                _this.html("<p>Ocorreu um erro ao obter detalhes do recibo!</p>");
                            }
                        });
                    }
                });

                $("[id^='detalhe-recibo']").on('hidden.bs.collapse', function () {
                    var link = $("a[data-target='#" + $(this).attr('id') + "']");

                    link.removeClass('glyphicon-minus');
                    link.addClass('glyphicon-plus');
                });

                // Poor mans binding
                $('#condominios').val($('#commonholdid').val())
                $('#condominios').change(function () {
                    $('#commonholdid').val($(this).val());
                    // Force trigger onchange
                    $('#commonholdid').trigger('change');
                });
            });
        </script>
    }
</section>

@section footer {
    @Html.Partial("_ContactosAdminPartial", Model.AdminData)
}