@extends('layouts.dashboard')

@section('tab_tittle', 'Dashboard')

@section('content')
<style>
    .row {
        display: flex;
        justify-content: center; /* Center the row horizontally */
        flex-wrap: wrap; /* Ensure the items can wrap to the next line */
    }

    ul.swiper-wrapper {
        display: flex;
        justify-content: space-around; /* Distribute the space evenly around the items */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0;
    }

    li.swiper-slide {
        flex: 0 0 calc(25% - 1em); /* Each card takes up 25% of the row, minus some space for margin */
        margin: 0.5em; /* Add some space around each card */
    }

    .card {
        width: 100%; /* Ensure the card takes up the full width of the flex item */
        box-sizing: border-box; /* Ensure padding and border are included in the width */
    }
    .card-body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
   .counter{
        font-size: 30px;
    }
</style>

<div class="row row-cols-1">
    <div class="overflow-hidden">
        <!-- Primera fila -->
        <div class="row">
            <!-- <div class="p-0 m-0 mb-2 swiper-wrapper list-inline col-md-12"> -->
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="700">
                    <div class="card-body">
                        <div class="progress-widget">
                            <div class="progress-detail">
                                <p class="mb-2"> CARD 1</p>
                                <h4 class="counter" >0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="800">
                    <div class="card-body">
                        <div class="progress-widget">                           
                            <div class="progress-detail">
                                <p class="mb-2"> CARD 2</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="900">
                    <div class="card-body">
                        <div class="progress-widget">
                            <div class="progress-detail">
                                <p class="mb-2">CARD 3</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1000">
                    <div class="card-body">
                        <div class="progress-widget">   
                            <div class="progress-detail">
                                <p class="mb-2">CARD 4</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </div> -->
        </div>

        <!-- Segunda fila -->
        <div class="row">
            <!-- <ul class="p-0 m-0 mb-2 swiper-wrapper list-inline"> -->
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1100">
                    <div class="card-body">
                        <div class="progress-widget">                            
                           <div class="progress-detail">
                                <p class="mb-2">CARD 5</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1200">
                    <div class="card-body">
                        <div class="progress-widget">   
                            <div class="progress-detail">
                                <p class="mb-2">CARD 6</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1300">
                    <div class="card-body">
                        <div class="progress-widget">
                            <div class="progress-detail">
                                <p class="mb-2">CARD 7</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1400">
                    <div class="card-body">
                        <div class="progress-widget">  
                            <div class="progress-detail">
                                <p class="mb-2">CARD 8</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </ul> -->
        </div>

        <!-- Tercera fila -->
        <div class="row">
            <!-- <ul class="p-0 m-0 mb-2 swiper-wrapper list-inline"> -->
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1500">
                    <div class="card-body">
                        <div class="progress-widget">
                            <div class="progress-detail">
                                <p class="mb-2">CARD 9</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1600">
                    <div class="card-body">
                        <div class="progress-widget">
                            <div class="progress-detail">
                                <p class="mb-2">CARD 10</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                  </div>
            </div>
            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1700">
                    <div class="card-body">
                        <div class="progress-widget">                          
                            <div class="progress-detail">
                                <p class="mb-2">CARD 11</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>

            <div class="col-md-3 pdr7 pdl7">
                <div class="swiper-slide card card-slide" data-aos="fade-up" data-aos-delay="1800">
                    <div class="card-body">
                        <div class="progress-widget">
                            <!-- <div id="circle-progress-12"
                                class="text-center circle-progress-01 circle-progress circle-progress-info"
                                data-min-value="0" data-max-value="100" data-value="20" data-type="percent">
                                <svg class="card-slie-arrow " width="24px" height="24px" viewBox="0 0 24 24">
                                    <path fill="currentColor" d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" />
                                </svg>
                            </div> -->
                            <div class="progress-detail">
                                <p class="mb-2">CARD 12</p>
                                <h4 class="counter">0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </ul> -->
        </div>

        <!-- inicio grafica -->
        <div class="row">
            <div class="col-md-6 swiper-slide padding_new" data-aos="fade-up" data-aos-delay="1800">
                <div class="card">
                    <div class="card-body">
                        <div class="clearfix clearfixfull">
                            <h4 class="card-title float-left">CARD. General</h4>
                            <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                        </div>
                        <canvas id="visit-sale-chart" class="mt-4"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 swiper-slide pdr7" data-aos="fade-up" data-aos-delay="1800">
                <div class="card">
                    <div class="card-body">
                        <div class="clearfix clearfixfull">
                            <h4 class="card-title float-left">CARD SUCURSAL</h4>
                            <div id="traffic-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                        </div>
                        <canvas id="traffic-chart" class="mt-4"></canvas>
                    </div>
                </div>
             </div>
        </div>

            <!-- fin grafica  -->

    <!-- filtro grafica inferior  -->
   


    <!-- fin filtro grafica inferior  -->
            <!-- primera fila inferior  -->

     
            <!-- ultima fila inferior  -->



            <!-- segunda fila inferior  -->

     
        

    </div>
</div>

@endsection 

@section('scripts')
<script>
  
</script>
@endsection