OpenTimeTracker/application/views/reports/index.phtml

<div class="section">
    <div class="row">
        <div class="small-12 columns text-center">
            <h1><i class="fa fa-file"></i> Reports</h1>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <ul class="button-group round right">
                <li><a id="showAll" class="button small secondary" href="#"><i class="fa fa-eye"></i> Show All</a></li>
                <li><a id="hideAll" class="button small secondary" href="#"><i class="fa fa-eye-slash"></i> Hide All</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <?php

            $i = 0;
            foreach($this->report as $user=>$timesheet)
            {
                echo "
                    <h3 id='user'.$i.'' class='timeTitle'>$user <i class='fa fa-chevron-up right'></i></h3>
                ";

                echo "
        <div class=\"wrapper\">";

                if(count($timesheet) > 0)
                {
                    echo"
                    <table width='100%'>
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Less Worked</th>
                            <th>Total Worked</th>
                            <th>Time Code</th>
                            <th>Validated</th>
                        </tr>
                        </thead>
                    ";
                }

                $totalValidated = 0;
                $totalInvalid = 0;
                $totalVacation = 0;
                $totalSick = 0;

                foreach($timesheet as $entry)
                {
                    echo "
                        <tr>
                               <td>".$entry['date']."</td>
                               <td>".date("g:i A",$entry['inTime'])."</td>
                               <td>".date("g:i A",$entry['outTime'])."</td>
                               <td>".$entry['lessTime']." <small>Hours</small></td>
                               <td>".$entry['timeWorked']."</td>
                               <td>".$entry['code']."</td><td><div class='text-center'>";

                    if($entry['validated'] == 1)
                    {
                        echo "<i class=\"fa fa-check green\"></i>";
                    }
                    else
                    {
                        echo "<i class=\"fa fa-close red\"></i>";
                    }

                    echo "</td>
                        </tr>
                    ";

                    if($entry['validated'] == 1)
                    {
                        $totalValidated += $entry['timeWorked'];
                    }

                    if($entry['validated'] == 0)
                    {
                        $totalInvalid += $entry['timeWorked'];
                    }

                    if($entry['code'] == "Vacation")
                    {
                        $totalVacation += $entry['timeWorked'];
                    }

                    if($entry['code'] == "Sick")
                    {
                        $totalSick += $entry['timeWorked'];
                    }

                }

                if(count($timesheet) > 0) {
                    echo "</table>";


                echo "<div class=\"row\">";
                echo "<div class=\"small-6 medium-4 large-3 columns\">";
                                        echo "<div class=\"card successBg\">
                                            <div class=\"title\">Validated</div>
                                            <div class=\"value\">".$totalValidated." <small>Hours</small></div>
                                        </div>";
                echo "</div>";
                echo "<div class=\"small-6 medium-4 large-3 columns\">";
                                        echo "<div class=\"card warning\">
                                            <div class=\"title\">Not Validated</div>
                                            <div class=\"value\">".$totalInvalid." <small>Hours</small></div>
                                        </div>";
                echo "</div>";
                echo "<div class=\"small-6 medium-4 large-3 columns end\">";
                                     echo "<div class=\"card\">
                                            <div class=\"title\">Sick</div>
                                            <div class=\"value\">".$totalSick." <small>Hours</small></div>
                                        </div>";
                echo "</div>";
                echo "<div class=\"small-6 medium-4 large-3 columns end\">";
                                        echo "<div class=\"card\">
                                            <div class=\"title\">Vacation</div>
                                            <div class=\"value\">".$totalVacation." <small>Hours</small></div>
                                        </div>";
                echo "</div>";
                echo "</div>";

                }
                else
                {
                    echo "<div class=\"text-center\">No time submitted</div>";
                }

                $i++;
                echo "</div><hr>";
            }
            ?>
        </div>
    </div>
</div>

<script>
    $(function() {

        $(".timeTitle").click(function() {
            $(this).next(".wrapper").slideToggle("slow");
            $(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
            return false;
        });

        $("#hideAll").click(function() {
            $(".wrapper").slideUp();
            $(".timeTitle").find("i").removeClass("fa-chevron-up")
            $(".timeTitle").find("i").addClass("fa-chevron-down")
            return false;
        });

        $("#showAll").click(function() {
            $(".wrapper").slideDown();
            $(".timeTitle").find("i").removeClass("fa-chevron-down")
            $(".timeTitle").find("i").addClass("fa-chevron-up")
            return false;
        });

    });
</script>