@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .contacts a {
            color: #aea9c3;
        }

        .active {
            color: #e76c90 !important;
        }
        .card-counter{
            box-shadow: 2px 2px 10px #DADADA;
            margin: 5px;
            padding: 20px 10px;
            background-color: #fff;
            height: 100px;
            border-radius: 5px;
            transition: .3s linear all;
        }

        .card-counter:hover{
            box-shadow: 4px 4px 20px #DADADA;
            transition: .3s linear all;
        }

        .card-counter.primary{
            background-color: #007bff;
            color: #FFF;
        }

        .card-counter.danger{
            background-color: #ef5350;
            color: #FFF;
        }

        .card-counter.success{
            background-color: #66bb6a;
            color: #FFF;
        }

        .card-counter.info{
            background-color: #26c6da;
            color: #FFF;
        }

        .card-counter i{
            font-size: 5em;
            opacity: 0.2;
        }

        .card-counter .count-numbers{
            position: absolute;
            right: 35px;
            top: 20px;
            font-size: 32px;
            display: block;
        }

        .card-counter .count-name{
            position: absolute;
            right: 35px;
            top: 65px;
            font-style: italic;
            text-transform: capitalize;
            opacity: 0.5;
            display: block;
            font-size: 18px;
        }
    </style>
@stop

@section('content')
    <div class="container-fluid p-0 chat">
        <div class="row m-0">
            <div class="col-xl-12 p-0">
                <!-- Begin Widget -->
                <div class="row m-0 widget no-bg">
                    <!-- Begin Friends Sidebar -->
                    <div class="col-xl-2 col-lg-3 col-md-12 p-0" id="sidebar">
                        <!-- Begin Friendslist -->
                        <div class="sidebar-content w-100 h-100" >
                            <div class="" id="search-group" style="margin: 12px;">
                                <a id="manage-keywords-btn" href="javascript: void(0);" class="btn btn-primary btn-block" data-toggle="modal" data-target="#modal-centered">
                                    Call Dashboard
                                </a>
                            </div>
                            <!-- Begin List Group -->
                            <div id="list-group">
                                <ul class="friend-list list-group w-100 friends-scroll auto-scroll" tabindex="3" style="height: 879px; overflow: hidden; outline: none;">
                                    <li class="heading">
                                        Metrics
                                    </li>
                                                                        @foreach($categories as $category)
                                    <li class="list-group-item contacts" >
                                        <a class="d-block" data-toggle="tab" href="#msg-1">
                                            <div class="media">
                                                <div class="media-left align-self-center">
                                                    <i class="la la-columns" style="font-size:32px;"></i>
                                                </div>
                                                <div class="media-body align-self-center ">
                                                    <h4>
                                                        <a href="{{route('call_rails.'.str_replace('-', '_', \Illuminate\Support\Str::lower(clean($category))))}}" class="@if($category == 'Dashboard') active @endif">
                                                            {{$category}}
                                                        </a>
                                                    </h4>
                                                    {{--                                                    <p>Avg Rank: <b>3.1</b></p>--}}
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    @endforeach

                                </ul>
                            </div>
                            <!-- End List Group -->
                        </div>
                        <!-- End Friendslist -->
                    </div>
                    <!-- End Friends Sidebar -->
                    <!-- Begin Messages -->
                    <div class="col-xl-10 col-lg-10 col-md-12 d-flex ">
                        <!-- Begin Card -->
                        <div class="card w-100 ">
                            <!-- Begin Tab -->
                            <div class="">
                                <div>
                                    <div class="card-header">
                                        <div class="d-flex flex-xl-row flex-lg-row flex-md-row flex-column align-items-center">
                                            <div class="col-xl-6 d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-center">
                                                <div class="discussion-name">Dashboard</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body d-flex flex-column no-padding">
                                        <div class="">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <table class="table table-compact">
                                                        <thead>
                                                        <tr>
                                                            @for($x=1;$x<=8;$x++)
                                                                <th class="text-center">Stat {{$x}}</th>
                                                            @endfor
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            @for($x=1;$x<=8;$x++)
                                                                <td class="text-center">Value {{$x}}</td>
                                                            @endfor
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                            <div class="cleafix"><br /></div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="widget widget-09 has-shadow">
                                                        <!-- Begin Widget Body -->
                                                        <div class="widget-body">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-12 no-padding border border-dark">
                                                                    <div id="chart-container" style="width: 100%; height: 300px; margin: 0 auto"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            {{--table--}}
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="widget has-shadow">
                                                        <div class="widget-header bordered no-actions d-flex align-items-center">
                                                            <h4>Border</h4>
                                                        </div>
                                                        <div class="widget-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered mb-0">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>Order ID</th>
                                                                        <th>Customer Name</th>
                                                                        <th>Country</th>
                                                                        <th>Ship Date</th>
                                                                        <th><span style="width:100px;">Status</span></th>
                                                                        <th>Order Total</th>
                                                                        <th>Actions</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td><span class="text-primary">054-01-FR</span></td>
                                                                        <td>Lori Baker</td>
                                                                        <td>US</td>
                                                                        <td>10/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small info">Paid</span></span></td>
                                                                        <td>$139.45</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">021-12-US</span></td>
                                                                        <td>Lawrence Crawford</td>
                                                                        <td>FR</td>
                                                                        <td>10/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small info">Paid</span></span></td>
                                                                        <td>$189.00</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">189-01-RU</span></td>
                                                                        <td>Samuel Walker</td>
                                                                        <td>AU</td>
                                                                        <td>08/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small danger">Failed</span></span></td>
                                                                        <td>$107.55</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">092-06-FR</span></td>
                                                                        <td>Angela Walters</td>
                                                                        <td>US</td>
                                                                        <td>08/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small success">Delivered</span></span></td>
                                                                        <td>$129.85</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">021-09-US</span></td>
                                                                        <td>Ryan Hanson</td>
                                                                        <td>ES</td>
                                                                        <td>07/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small info">Paid</span></span></td>
                                                                        <td>$199.95</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">054-01-FR</span></td>
                                                                        <td>Evelyn Black</td>
                                                                        <td>FR</td>
                                                                        <td>10/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small info">Paid</span></span></td>
                                                                        <td>$139.45</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">021-12-US</span></td>
                                                                        <td>James Morris</td>
                                                                        <td>EN</td>
                                                                        <td>10/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small info">Paid</span></span></td>
                                                                        <td>$189.00</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td><span class="text-primary">189-01-RU</span></td>
                                                                        <td>Valentin H.</td>
                                                                        <td>AU</td>
                                                                        <td>08/21/2017</td>
                                                                        <td><span style="width:100px;"><span class="badge-text badge-text-small danger">Failed</span></span></td>
                                                                        <td>$107.55</td>
                                                                        <td class="td-actions">
                                                                            <a href="#"><i class="la la-edit edit"></i></a>
                                                                            <a href="#"><i class="la la-close delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Card -->
                    </div>
                </div>
                <!-- End Widget -->
            </div>
            <!-- End Col -->
        </div>
        <!-- End Row -->
    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script src="{{asset('assets/vendors/js/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/jszip.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/pdfmake.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/vfs_fonts.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.print.min.js')}}"></script>
    <script src="{{asset('assets/js/components/tables/tables.js')}}"></script>


    {{--    <script src="{{asset('assets/js/components/wizard/form-wizard.min.js')}}"></script>--}}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script>
        $(function(){
            Highcharts.chart('chart-container', {

                title: {
                    text: 'Solar Employment Growth by Sector, 2010-2016'
                },

                subtitle: {
                    text: 'Source: thesolarfoundation.com'
                },

                yAxis: {
                    title: {
                        text: 'Number of Employees'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },

                series: [{
                    name: 'Installation',
                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                }, {
                    name: 'Manufacturing',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, {
                    name: 'Sales & Distribution',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, {
                    name: 'Project Development',
                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                }, {
                    name: 'Other',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

            });

        });
    </script>
@stop