@extends('layouts.app')

@section('content')

    @include('layouts.alert')
    @include('reports.tabs')
    @include('reports.analytics-filters')

    <section class="analytics data">
        <div class="columns">
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>Number of Projects</h5>
                        <h2 class="fuscous-gray">0</h2>
                                            </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>Hourly - Number of Projects</h5>
                        <h2 class="fuscous-gray">0</h2>
                                            </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>Proposal - Number of Projects</h5>
                        <h2 class="fuscous-gray">0</h2>
                                            </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>In Progress - Number of Projects</h5>
                        <p class="label">*Project statuses are fluid, so this data is <em>not</em> computed based on the date parameters</p>
                        <h1 class="fuscous-gray">0</h1>
                        <ul class="bubbles no-margin">
                            <li class="bubble green icon arrow-up">0% Under Budget</li>
                            <li class="bubble red icon arrow-down">0% Over Budget</li>
                        </ul>
                                            </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>Completed - Number of Projects</h5>
                        <p class="label">*Project statuses are fluid, so this data is <em>not</em> computed based on the date parameters</p>
                        <h1 class="fuscous-gray">0</h1>
                        <ul class="bubbles no-margin">
                            <li class="bubble green icon arrow-up">0% Under Budget</li>
                            <li class="bubble red icon arrow-down">0% Over Budget</li>
                        </ul>
                                            </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                    <div class="content">
                        <h5>Logged Hours</h5>
                        <h1 class="fuscous-gray">0 hours</h1>
                        <ul class="bubbles no-margin">
                            <li class="bubble green">0% Billable</li>
                            <li class="bubble red">0% Non-Billable</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5 class="no-margin">Total Amount Invoiced per Project Category</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5 class="no-margin">Total Amount Invoiced per Project Category</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5>User Role Breakdown by Project Category</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5 class="no-margin">Total Amount Invoiced per Company Category</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
            <div class="column width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5>Total Amount Invoiced per Company Category</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
            <div class="column last-in-row width-33">
                <div class="inside">
                                            <div class="content match-height">
                            <h5>Top 15 Paying Companies</h5>
                            <p>There isn't enough data to generate this graph.</p>
                        </div>
                                    </div>
            </div>
                    </div>
    </section>

@endsection

@section('footer')

    <script src="