{~
    @meta.styles.local.morris                    = 'morris/morris.css';
    @meta.scripts.local.morris                   = 'plugins/morris/morris.min.js';
    @meta.scripts.remote.raphael                 = '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js';
    /*@meta.styles.local.jvectormap                = 'jvectormap/jquery-jvectormap-1.2.2.css';
    @meta.styles.local.datepicker3               = 'datepicker/datepicker3.css';
    @meta.styles.local.daterangepicker           = 'daterangepicker/daterangepicker-bs3.css';
    @meta.styles.local.wysihtml5                 = 'bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css';

    //@meta.scripts.remote.jquery_ui               = '//code.jquery.com/ui/1.11.1/jquery-ui.min.js';
    @meta.scripts.local.sparkline                = 'plugins/sparkline/jquery.sparkline.min.js';
    @meta.scripts.local.jvectormap               = 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js';
    @meta.scripts.local.jvectormap_world_mill_en = 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js';
    @meta.scripts.local.knob                     = 'plugins/jqueryKnob/jquery.knob.js';
    @meta.scripts.local.daterangepicker          = 'plugins/daterangepicker/daterangepicker.js';
    @meta.scripts.local.datepicker               = 'plugins/datepicker/bootstrap-datepicker.js';
    @meta.scripts.local.wysihtml5                = 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js';
    @meta.scripts.local.icheck                   = 'plugins/iCheck/icheck.min.js';*/
    //@meta.scripts.local.dashboard                = 'AdminLTE/dashboard.js';

    @meta.scripts.local.moment       = 'moment.js';

    @meta.scripts.local.datetimepicker = 'bootstrap-datetimepicker.min.js';
    @meta.styles.local.datetimepicker  = 'bootstrap-datetimepicker.min.css';
    array_unshift(@meta.scripts.raw, '
        $(".date").datetimepicker();
    ');
~}
{~
@meta.scripts.raw.chart = "
$(document).ready(function() {
    /*var chartStatus = new Morris.Donut({
        element: 'chart-status',
        resize: true,
        colors: ['gray', '#3c8dbc', '#00a65a', '#f56954'],
        data: [
            {label: 'Carregando', value: null },
        ],
        hideHover: 'auto'
    });*/

    var chartLocacoes = new Morris.Area({
        element: 'chart-locacoes',
        resize: true,
        data: [],
        xkey: 'date',
        ykeys: ['R', 'A', 'F', 'C'],
        labels: ['Reservas', 'Abertos', 'Faturados', 'Cancelados'],
        lineColors: ['gray', '#3c8dbc', '#00a65a', '#f56954'],
        hideHover: 'auto',
        xLabels: 'week',
        dateFormat: function(x) { x = new Date(x); return x.getDate()+'/'+(x.getMonth()+1)+'/'+x.getFullYear(); },
        xLabelFormat: function(x) { return x.getDate()+'/'+(x.getMonth()+1)+'/'+x.getFullYear(); },
        yLabelFormat: function(y){ return y != Math.round(y) ? '' : y }
    });
    
    var chartLocacoesVeiculos = new Morris.Bar({
        element: 'chart-locacoes-veiculos',
        resize: true,
        data: [],
        xkey: 'y',
        ykeys: ['R', 'A', 'F', 'C'],
        labels: ['Reservas', 'Abertos', 'Faturados', 'Cancelados'],
        barColors: ['gray', '#3c8dbc', '#00a65a', '#f56954'],
        hideHover: 'auto',
        stacked: true,
        horizontal: true,
        yLabelFormat: function(y){ return y != Math.round(y) ? '' : y }
    });

    var chartFaturamento = new Morris.Line({
        element: 'chart-faturamento',
        resize: true,
        data: [],
        xkey: 'data',
        ykeys: ['receita', 'despesa'],
        labels: ['Receita', 'Despesas'],
        lineColors: ['#00a65a', '#f56954'],
        hideHover: 'auto',
        xLabels: 'week',
        dateFormat: function(x) { x = new Date(x); return x.getDate()+'/'+(x.getMonth()+1)+'/'+x.getFullYear(); },
        xLabelFormat: function(x) { return x.getDate()+'/'+(x.getMonth()+1)+'/'+x.getFullYear(); },
        yLabelFormat: function(y){ return 'R$ ' + parseFloat(y).toFixed(2).replace('.', ',') }
    });
    
    var chartFaturamentoVeiculos = new Morris.Bar({
        element: 'chart-faturamento-veiculos',
        resize: true,
        data: [],
        xkey: 'veiculo',
        ykeys: ['receita', 'despesa'],
        labels: ['Receita', 'Despesa'],
        barColors: ['#00a65a', '#f56954'],
        hideHover: 'auto',
        stacked: false,
        horizontal: true,
        yLabelFormat: function(y){ return 'R$ ' + parseFloat(y).toFixed(2).replace('.', ',') }
    });

    function _refreshChart() {
        $.getJSON(
            '".@BASE.\Base::instance()->alias('softsat_locacao_admin_api_chart')."', 
            {de: $('#chart_de').val(), ate: $('#chart_ate').val()}, 
            function(resp) {
                if(!resp.data)
                    return;

                for(var key in resp.data.status)
                    $('#chart-status-' + key).text(resp.data.status[key]);

                //chartStatus.setData(resp.data.status.length ? resp.data.status : [{label: 'Sem dados'}]);
                chartLocacoes.setData(resp.data.locacoes.length ? resp.data.locacoes : [{date: null}]);
                chartLocacoesVeiculos.setData(resp.data.locacoes_veiculos.length ? resp.data.locacoes_veiculos : [{y: ''}]);
                chartFaturamento.setData(resp.data.faturamento.length ? resp.data.faturamento : [{data: null}]);
                chartFaturamentoVeiculos.setData(resp.data.faturamento_veiculos.length ? resp.data.faturamento_veiculos : [{data: null}]);
            }
        );
    }

    $('.date').on('dp.change', _refreshChart);
    $('.date input').keydown(function(evt) {
        if(evt.keyCode == 13)
        _refreshChart();
    });
    _refreshChart();
});";
~}

<include href="hwapx/admin/admin/header.html" />

<check if="{{ 'softsat.locacao.grafico'|role }}">
<div class="row">
<place name="dashboard" />
</div>
</check>

{*
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3>
                    150
                </h3>
                <p>
                    New Orders
                </p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <h3>
                    53<sup style="font-size: 20px">%</sup>
                </h3>
                <p>
                    Bounce Rate
                </p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>
                    44
                </h3>
                <p>
                    User Registrations
                </p>
            </div>
            <div class="icon">
                <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3>
                    65
                </h3>
                <p>
                    Unique Visitors
                </p>
            </div>
            <div class="icon">
                <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
</div><!-- /.row -->


<!-- Main row -->
<div class="row">
    <!-- Left col -->
    <section class="col-lg-7 connectedSortable">                            


        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
                <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
                <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div><!-- /.nav-tabs-custom -->                                               

        <!-- TO DO List -->
        <div class="box box-primary">
            <div class="box-header">
                <i class="ion ion-clipboard"></i>
                <h3 class="box-title">To Do List</h3>
                <div class="box-tools pull-right">
                    <ul class="pagination pagination-sm inline">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body">
                <ul class="todo-list">
                    <li>
                        <!-- drag handle -->
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <!-- checkbox -->
                        <input type="checkbox" value="" name=""/>
                        <!-- todo text -->
                        <span class="text">Design a nice theme</span>
                        <!-- Emphasis label -->
                        <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                        <!-- General tools such as edit or delete-->
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li>
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <input type="checkbox" value="" name=""/>
                        <span class="text">Make the theme responsive</span>
                        <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li>
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <input type="checkbox" value="" name=""/>
                        <span class="text">Let theme shine like a star</span>
                        <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li>
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <input type="checkbox" value="" name=""/>
                        <span class="text">Let theme shine like a star</span>
                        <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li>
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <input type="checkbox" value="" name=""/>
                        <span class="text">Check your messages and notifications</span>
                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li>
                        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                        </span>
                        <input type="checkbox" value="" name=""/>
                        <span class="text">Let theme shine like a star</span>
                        <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                </ul>
            </div><!-- /.box-body -->
            <div class="box-footer clearfix no-border">
                <button class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
            </div>
        </div><!-- /.box -->

    </section><!-- /.Left col -->
    <!-- right col (We are only adding the ID to make the widgets sortable)-->
    <section class="col-lg-5 connectedSortable"> 

        <!-- solid sales graph -->
        <div class="box box-solid bg-teal-gradient">
            <div class="box-header">
                <i class="fa fa-th"></i>
                <h3 class="box-title">Sales Graph</h3>
                <div class="box-tools pull-right">
                    <button class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body border-radius-none">
                <div class="chart" id="line-chart" style="height: 250px;"></div>                                    
            </div><!-- /.box-body -->
            <div class="box-footer no-border">
                <div class="row">
                    <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                        <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60" data-fgColor="#39CCCC"/>
                        <div class="knob-label">Mail-Orders</div>
                    </div><!-- ./col -->
                    <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                        <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60" data-fgColor="#39CCCC"/>
                        <div class="knob-label">Online</div>
                    </div><!-- ./col -->
                    <div class="col-xs-4 text-center">
                        <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60" data-fgColor="#39CCCC"/>
                        <div class="knob-label">In-Store</div>
                    </div><!-- ./col -->
                </div><!-- /.row -->
            </div><!-- /.box-footer -->
        </div><!-- /.box -->                            

        <!-- Calendar -->
        <div class="box box-solid bg-green-gradient">
            <div class="box-header">
                <i class="fa fa-calendar"></i>
                <h3 class="box-title">Calendar</h3>
                <!-- tools box -->
                <div class="pull-right box-tools">
                    <!-- button with a dropdown -->
                    <div class="btn-group">
                        <button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            <li><a href="#">Add new event</a></li>
                            <li><a href="#">Clear events</a></li>
                            <li class="divider"></li>
                            <li><a href="#">View calendar</a></li>
                        </ul>
                    </div>
                    <button class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>                                        
                </div><!-- /. tools -->
            </div><!-- /.box-header -->
            <div class="box-body no-padding">
                <!--The calendar -->
                <div id="calendar" style="width: 100%"></div>
            </div><!-- /.box-body -->  
            <div class="box-footer text-black">
                <div class="row">
                    <div class="col-sm-6">
                        <!-- Progress bars -->
                        <div class="clearfix">
                            <span class="pull-left">Task #1</span>
                            <small class="pull-right">90%</small>
                        </div>
                        <div class="progress xs">
                            <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
                        </div>

                        <div class="clearfix">
                            <span class="pull-left">Task #2</span>
                            <small class="pull-right">70%</small>
                        </div>
                        <div class="progress xs">
                            <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
                        </div>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <div class="clearfix">
                            <span class="pull-left">Task #3</span>
                            <small class="pull-right">60%</small>
                        </div>
                        <div class="progress xs">
                            <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
                        </div>

                        <div class="clearfix">
                            <span class="pull-left">Task #4</span>
                            <small class="pull-right">40%</small>
                        </div>
                        <div class="progress xs">
                            <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
                        </div>
                    </div><!-- /.col -->
                </div><!-- /.row -->                                                                        
            </div>
        </div><!-- /.box -->    
    </section><!-- right col -->    
</div><!-- /.row (main row) -->                    
*}
<include href="hwapx/admin/admin/footer.html" />