@model IEnumerable<HousingProject.Models.Property>

@{
    ViewBag.Title = "Index";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<style type="text/css">
    th, td {
        padding: 5px;
    }

    th {
        background-color: rgb(248, 248, 248);
    }

    #gridT, #gridT tr {
        border: 1px solid #0D857B;
    }

    #subT, #subT tr {
        border: 1px solid #f3f3f3;
    }

    #subT {
        margin: 0px 0px 0px 10px;
        padding: 5px;
        width: 95%;
    }

        #subT th {
            font-size: 12px;
        }

    .hoverEff {
        cursor: pointer;
    }

        .hoverEff:hover {
            background-color: rgb(248, 242, 242);
        }

    .expand {
        background-image: url(/Content/themes/base/images/pm.png);
        background-position: -22px;
        background-repeat: no-repeat;
    }

    .collapse {
        background-image: url(/Content/themes/base/images/pm.png);
        background-position: -2px;
        background-repeat: no-repeat;
    }
</style>
<h2>Index</h2>
<p>
    @using (Html.BeginForm("Index", "Property", FormMethod.Get))
    {
        @Html.TextBox("filter")
        <input type="submit" value="Search" />
    }
</p>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.HouseNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StreetName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Town)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.City)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Postcode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MaxOccupancy)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.HouseNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StreetName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Town)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.City)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Postcode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MaxOccupancy)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}

</table>

<div id="main" style="padding:25px; background-color:white;">
    @grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "700px" },
columns: grid.Columns(
grid.Column("HouseNumber", "House Number"),
grid.Column("StreetName","Street Name"),
grid.Column("Town", "Town"),
grid.Column("City", "City"),
grid.Column("Postcode", "Postcode"),
grid.Column("MaxOccupancy", "Max Occupancy"),
grid.Column("CurrentOccupancy", "Current Occupancy"),
grid.Column(format: (item) =>
{
    WebGrid subGrid = new WebGrid(source: item.CurrentTenants);
    return subGrid.GetHtml(
    htmlAttributes: new { id = "subT" },
    columns: subGrid.Columns(
    subGrid.Column("FirstName", "First Name"),
    subGrid.Column("Surname", "Surname"),
    subGrid.Column("Age", "Age"),
    subGrid.Column("Employer", "Employer")
    )
    );
})
)
 )
</div>




<script type="text/javascript">

    $(document).ready(function () {
        var size = $("#main #gridT > thead > tr >th").size(); // get total column
        $("#main #gridT > thead > tr >th").last().remove(); // remove last column
        $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
        $("#main #gridT > tbody > tr").each(function (i, el) {
            $(this).prepend(
                    $("<td></td>")
                    .addClass("expand")
                    .addClass("hoverEff")
                    .attr('title', "click for show/hide")
                    //.attr('onclick', 'toggleWebGrid()')
                );
            //Now get sub table from last column and add this to the next new added row
            var table = $("table", this).parent().html();
            //add new row with this subtable
            $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
            $("table", this).parent().remove();
        });

        //by default make all subgrid in collapse mode
        $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
            $(this).toggleClass("expand collapse");
            $(this).parent().closest("tr").next().slideToggle(100);
        });

    });
    //toggle expand and collapse
    $(function () {
        $("#main #gridT > tbody > tr td.collapse").on('click', function () {
            alert('test');
            $(this).toggleClass("expand collapse");
            $(this).parent().closest("tr").next().slideToggle(100);
        });
    });

</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Properties","Index","Property")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>