@extends('layouts.app')

@section('content')
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Dashboard</h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">App</li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard2</li>
                    </ol>
                </nav>
            </div>
       </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        
        <!-- Quick Stats -->
                    <!-- jQuery Sparkline (.js-sparkline class is initialized in Helpers.sparkline() -->
                    <!-- For more info and examples you can check out http://omnipotent.net/jquery.sparkline/#s-about -->
                    <div class="row">
                        <div class="col-md-6 col-xl-6 invisible" data-toggle="appear">
                            <a class="block block-rounded block-link-pop" href="javascript:void(0)">
                                <div class="block-content block-content-full d-flex align-items-center justify-content-between">
                                    <div>
                                        <!-- Sparkline Dashboard Users Container -->
                                        <span class="js-sparkline" data-type="line"
                                              data-points="[340,330,360,340,360,350,370,360]"
                                              data-width="90px"
                                              data-height="40px"
                                              data-line-color="#82b54b"
                                              data-fill-color="transparent"
                                              data-spot-color="transparent"
                                              data-min-spot-color="transparent"
                                              data-max-spot-color="transparent"
                                              data-highlight-spot-color="#82b54b"
                                              data-highlight-line-color="#82b54b"
                                              data-tooltip-suffix="Tickets"></span>
                                    </div>
                                    <div class="ml-3 text-right">
                                        <p class="text-muted mb-0">
                                            Tickets Mes Actual
                                        </p>
                                        <p class="font-size-h3 font-w300 mb-0">
                                            {{$tickets_count}}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-xl-6 invisible" data-toggle="appear" data-timeout="200">
                            <a class="block block-rounded block-link-pop" href="javascript:void(0)">
                                <div class="block-content block-content-full d-flex align-items-center justify-content-between">
                                    <div>
                                        <!-- Sparkline Dashboard Tickets Container -->
                                        <span class="js-sparkline" data-type="line"
                                              data-points="[21,17,19,25,24,25,18,27]"
                                              data-width="90px"
                                              data-height="40px"
                                              data-line-color="#e04f1a"
                                              data-fill-color="transparent"
                                              data-spot-color="transparent"
                                              data-min-spot-color="transparent"
                                              data-max-spot-color="transparent"
                                              data-highlight-spot-color="#e04f1a"
                                              data-highlight-line-color="#e04f1a"
                                              data-tooltip-suffix="Facturas"></span>
                                    </div>
                                    <div class="ml-3 text-right">
                                        <p class="text-muted mb-0">
                                            Facturas  Mes Actual
                                        </p>
                                        <p class="font-size-h3 font-w300 mb-0">
                                            {{$cfdis_count}}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        
                    </div>
                    <!-- END Quick Stats -->

                    <!-- Main Chart -->
                    <!--
                    <div class="block block-rounded block-mode-loading-refresh invisible" data-toggle="appear">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">Operaciones</h3>
                            <div class="block-options">
                                <div class="btn-group btn-group-sm btn-group-toggle mr-2" data-toggle="buttons" role="group" aria-label="Earnings Select Date Group">
                                    <label class="btn btn-light" data-toggle="dashboard-chart-set-week">
                                        <input type="radio" name="dashboard-chart-options" id="dashboard-chart-options-week"> Week
                                    </label>
                                    <label class="btn btn-light" data-toggle="dashboard-chart-set-month">
                                        <input type="radio" name="dashboard-chart-options" id="dashboard-chart-options-month"> Month
                                    </label>
                                    <label class="btn btn-light active" data-toggle="dashboard-chart-set-year">
                                        <input type="radio" name="dashboard-chart-options" id="dashboard-chart-options-year" checked> Year
                                    </label>
                                </div>
                                <button type="button" class="btn-block-option align-middle" data-toggle="block-option" data-action="state_toggle" data-action-mode="demo">
                                    <i class="si si-refresh"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content block-content-full overflow-hidden">
                            <div class="pull-x pull-b">
                                <canvas class="js-chartjs-dashboard-earnings" style="height: 340px;"></canvas>
                            </div>
                        </div>
                    </div>
                    -->
                    <!-- END Main Chart -->
    </div>
    <!-- END Page Content -->
@endsection