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

?>

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

        </div>
        <div class="col-lg-6 col-sm-12">
            <section class="card">
                <div class="symbol red">
                    <i class="fal fa-newspaper"></i>
                </div>
                <div class="value">
                    <h1 class=" count2">
                        <?= $posts->count ?>
                    </h1>
                    <p>Matérias</p>
                </div>
            </section>
        </div>


    </div>
    <!--state overview end-->

    <div class="row">

        <div class="col-lg-12">
            <!--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>Acesso Rápido</h1>

                    </div>
                </header>

                <section class="card">
                    <header class="card-header tab-bg-dark-navy-blue p-0">
                        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Ordens</a>
                            </li>


                        </ul>


                    </header>
                    <div class="card-body">
                        <div class="tab-content tasi-tab" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">


                                    <article class="media mb-3">

                                        <div class="media-body">
                                            <?= $v->insert("views/fragments/table-orders", ["orders"=>$orders])?>
                                        </div>
                                    </article>
                                    <hr>

                                <a class="btn btn-success" href="<?= url("/admin/order/order"); ?>">+ Lançar Nova</a>
                                <a class="btn btn-info" href="<?= url("/admin/order/home"); ?>"><i class="fal fa-search"></i> Ver Todas</a>
                            </div>



                        </div>

                    </div>
                </section>


            </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">
                    <?= $v->insert("views/fragments/online-users")?>
                    </tbody>
                </table>
            </section>
            <!--work progress end-->
        </div>
    </div>

</section>


<?php
$v->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

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