Untitled

@model IEnumerable<ARCHive.Models.Complex_Types.AttendanceModel>

<body>

        @using (Ajax.BeginForm("Attendance", "Personnel", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "GET" }, new { id = "AjaxForm" }))
        {

    <div class="dropdown" style="float:left">
            @Html.DropDownList(
                "showOnly",
                (SelectList)ViewBag.StaffList,
                          new { @class = "containerItems", @onchange = "showUser($(this).val());" }
                )
    </div>

     <div style="float:left">
       Start date: <input type="date" name="startDate"/>
    </div>

    <div style="float:left">
        End date: <input type="date" name="endDate"/>
    </div>

    <div>
        <input type="button" name="SubmitBtn" value="Submit" onclick="$('#AjaxForm').submit();"/>

    </div>

        }

    <h3 style="text-align:center">Key</h3>


    @*Add colour for no data!!!!!!!!!!!*@


        <div class="progress">
            <div class="progress-bar progress-bar-in2" role="progressbar" style="width:16.66%">
                In
            </div>
            <div class="progress-bar progress-bar-sick2" role="progressbar" style="width:16.66%">
                Sick
            </div>
            <div class="progress-bar progress-bar-holiday2" role="progressbar" style="width:16.66%">
                Holiday
            </div>
            <div class="progress-bar progress-bar-absent2" role="progressbar" style="width:16.66%">
                Absent
            </div>
            <div class="progress-bar progress-bar-request2" role="progressbar" style="width:16.66%">
                Requested
            </div>
            <div class="progress-bar progress-bar-rejected2" role="progressbar" style="width:16.7%">
                Rejected
            </div>
        </div>

        <br />
        @foreach (var Item in Model)
        {
            <div class="hideMe" data-id="@Item.ID">
                <div class="panel panel-custom">
                <div class="panel-heading">@Item.Name</div>

                @{
            int j = Item.DayList.Count();
            float k = 100.00f / j;
            string format = "ddd d MMM";
            string format2 = "ddd";
                }

                <div class="panel-body" style="margin-top:15px;">
                    <div class="progress">

                        @foreach (var Rec in Item.DayList)
                        {
                            if (Rec.Type.ToString() == "In")
                            {
                                <div class="progress-bar progress-bar-in" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Absent")
                            {
                                <div class="progress-bar progress-bar-absent" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Sick")
                            {
                                <div class="progress-bar progress-bar-sick" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Holiday")
                            {
                                <div class="progress-bar progress-bar-holiday" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Requested_Holiday")
                            {
                                <div class="progress-bar progress-bar-request" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Rejected_Holiday")
                            {
                                <div class="progress-bar progress-bar-rejected" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }
                            if (Rec.Type.ToString() == "Weekend")
                            {
                                <div class="progress-bar progress-bar-weekend" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                    @Rec.Date.ToString(format2).Replace("Sat", "S").Replace("Sun", "S")
                                </div>
                            }
                               if (Rec.Type.ToString() == "None")
                            {
                                <div class="progress-bar progress-bar-none" role="progressbar" style="width:@k%" data-toggle="tooltip" title="@Rec.Date.ToShortDateString()">
                                   @Rec.Date.ToString(format2).Replace("Mon", "M").Replace("Tue", "T").Replace("Wed", "W").Replace("Thu", "T").Replace("Fri", "F")
                                </div>
                            }

                        }
                    </div>
                </div>
            </div>
            </div>
        }
</body>


<script type="text/javascript">

    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });

    $(document).ready(showUser(@ViewBag.showOnly));

    function showAll() {
        $(".hideMe").each(function () {
            $(this).show();
        });
    }

    function showUser(e) {

        showAll();

        if (e != -1) {

            $(".hideMe").each(function (index) {
                if ($(this).data('id') != e) { //remove and set = e //$(e).attr('id'))
                    $(this).hide();

                }
            });
        }


    }
</script>