<?php $this->layout("_admin");
$this->start("css");
?>
<link href="<?= url("admin-assets/css/owl.carousel.css")?>" rel="stylesheet" type="text/css"/>
<?php
$this->end();

?>

<section class="wrapper">
    <!--state overview start-->
    <div class="row state-overview">
        <div class="col-lg-3 col-sm-6">
            <section class="card">
                <div class="symbol terques">
                    <i class="fa fa-user"></i>
                </div>
                <div class="value">
                    <h1 class="count">
                        <?= $users->users ?>
                    </h1>
                    <p>Clientes</p>
                </div>
            </section>

        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="card">
                <div class="symbol red">
                    <i class="fa fa-bars"></i>
                </div>
                <div class="value">
                    <h1 class=" count2">
                        <?= $products->categories ?>
                    </h1>
                    <p>Categorias</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="card">
                <div class="symbol yellow">
                    <i class="fa fa-tags"></i>
                </div>
                <div class="value">
                    <h1 class=" count3">
                        <?= $products->count ?>
                    </h1>
                    <p>Produtos</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="card">
                <div class="symbol blue">
                    <i class="fa fa-bar-chart-o"></i>
                </div>
                <div class="value">
                    <h1 class=" count4">
                        <?= $ordersCount ?>
                    </h1>
                    <p>Pedidos Abertos</p>
                </div>
            </section>
        </div>
    </div>
    <!--state overview end-->

    <div class="row">
        <div class="col-lg-5">
            <!--custom chart start-->
            <div class="card green-chart">
                <div class="card-body">
                    <div class="chart">
                        <div class="heading">
                            <span>Últimos <?= $orderGraph->months ?> Meses</span>
                            Total Período <strong>R$ <?= preco_real($orderGraph->total) ?></strong>
                        </div>
                        <div id="barchart"></div>
                    </div>
                </div>
                <div class="chart-tittle">
                    <span class="title">Mês Corrente</span>
                    <span class="value"><b>R$ <?= preco_real($orderGraph->actualValues) ?></b></span>
                </div>
            </div>
            <!--custom chart end-->
        </div>
        <div class="col-lg-7">
            <!--new earning start-->
            <div class="card terques-chart">
                <div class="card-body chart-texture">
                    <div class="chart">
                        <div class="heading">
                            <span>Últimos <?= $chart->days ?> dias</span>
                            <strong><?= $percentualUsers ?>%</strong> diferença
                        </div>
                        <div class="sparkline" data-type="line" data-resize="true" data-height="80" data-width="85%" data-line-width="2" data-line-color="#fff" data-spot-color="#fff" data-fill-color="" data-highlight-line-color="#fff" data-spot-radius="6" data-data="[<?= $chart->userReport ?>]"></div>
                    </div>
                </div>
                <div class="chart-tittle">
                    <span class="title">Usuários (<?= $chart->days ?> dias)</span>
                    <span class="value">
                                  <a href="#" class="active"><?= $chart->usersTotal ?></a>

                              </span>
                </div>
            </div>
            <!--new earning end-->
        </div>
    </div>
    <!--vertical center Modal start-->


    <div class="row">
        <div class="col-lg-12">
            <section class="card">
                <header class="card-header">
                    <div class="task-progress">
                        <h1>Últimos Pedidos <b class="badge badge-pill badge-danger"><?= $ordersCount ?></b></h1>

                    </div>
                </header>
                <?= $this->insert("views/fragments/table-orders", ["orders"=>$orders])?>
            </section>
        </div>
    </div>


    <div class="row">

        <div class="col-lg-12">
            <!--work progress start-->
            <section class="card">
                <div class="card-body progress-card">
                    <div class="task-progress">
                        <h1>Online Agora <b class="badge badge-pill badge-danger app_dash_home_trafic_count"><?= $onlineCount; ?></b></h1>

                    </div>
                </div>
                <table class="table table-hover personal-task">
                    <tbody class="j_online_user">
                        <?= $this->insert("views/fragments/online-users")?>
                    </tbody>
                </table>
            </section>
            <!--work progress end-->
        </div>
    </div>

</section>


<?php
$this->start("scripts");
?>

<script src="<?= url("admin-assets/js/jquery.sparkline.js"); ?>"></script>
<script src="<?= url("admin-assets/js/owl.carousel.js"); ?>"></script>
<script src="<?= url("admin-assets/js/jquery.customSelect.min.js"); ?>"></script>
<script>

    //owl carousel

    $(document).ready(function() {
        $("#owl-demo").owlCarousel({
            navigation : true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem : true,
            autoPlay:true

        });
    });

    $(".sparkline").each(function(){
        var $data = $(this).data();

        $data.valueSpots = {'0:': $data.spotColor};

        $(this).sparkline( $data.data || "html", $data,
            {
                tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
                    '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
            });

    });

    //sparkline chart

    $("#barchart").sparkline([<?= $orderGraph->graph ?>], {
        type: 'bar',
        height: '100',
        barWidth: 35,
        barSpacing: 15,
        barColor: '#fff'
//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'

    });



$(".j_actions").on("click","#j_shipment_code", function (e) {
    e.preventDefault();
    var id = $(this).data("id");
    var formatedId = $(this).data("order");
    $("#form_order_id").val(id);
    $(".j_order_id_number").html("Pedido Número: <b>[#"+formatedId+"]</b>");
})

    //custom select box

    $(function(){
        $('select.styled').customSelect();
    });

    $(window).on("resize",function(){
        var owl = $("#owl-demo").data("owlCarousel");
        owl.reinit();
    });

    $(function () {
        setInterval(function () {
            $.post('<?= url("/admin/dash/home");?>', {refresh: true}, function (response) {
                // count
                if (response.count) {
                    $(".app_dash_home_trafic_count").text(response.count);
                } else {
                    $(".app_dash_home_trafic_count").text(0);
                }

                if (response.list) {

                    $(".j_online_user").html(response.list);
                }


            }, "json");
        }, 1000 * 10);
    });

</script>
<?php

$this->end();
$this->insert("views/modals/shipment-code");
?>