@extends("layouts.app")

@section("content")
  <div class="iq-top-navbar">
    <div class="iq-navbar-custom">
      <div class="iq-sidebar-logo">
        <div class="top-logo">
          <a href="{{url('/')}}" class="logo">
            <span>Ecommerce</span>
          </a>
        </div>
      </div>
      <div class="navbar-breadcrumb">
        <h5 class="mb-0">Principal</h5>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item">Principal</li>
          </ol>
        </nav>
      </div>
      <nav class="navbar navbar-expand-lg navbar-light p-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="ri-menu-3-line"></i>
        </button>
        <div class="iq-menu-bt align-self-center">
          <div class="wrapper-menu">
            <div class="line-menu half start"></div>
            <div class="line-menu"></div>
            <div class="line-menu half end"></div>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto navbar-list">
            <li class="nav-item iq-full-screen"><a href="#" class="iq-waves-effect" id="btnFullscreen"><i class="ri-fullscreen-line"></i></a></li>
          </ul>
        </div>
        <ul class="navbar-list">
          <li>
            <a href="#" class="search-toggle iq-waves-effect bg-primary text-white">
              <img src="{{asset('/assets-admin/images/usuario.png')}}" class="img-fluid rounded" alt="Usuario">
            </a>
            <div class="iq-sub-dropdown iq-user-dropdown">
              <div class="iq-card shadow-none m-0">
                <div class="iq-card-body p-0 ">
                  <div class="bg-primary p-3">
                    <h5 class="mb-0 text-white line-height">
                      {{Auth::user()->nombre}}
                    </h5>
                  </div>
                  <div class="d-inline-block w-100 text-center p-3">
                    <a class="iq-bg-danger iq-sign-btn" role="button" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                      Salir
                    </a>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                      @csrf
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  
  <div id="content-page" class="content-page">
     <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 col-lg-3">
             <div class="iq-card iq-card-block iq-card-stretch iq-card-height overflow-hidden">
                <div class="iq-card-body pb-0">
                  <div class="rounded-circle iq-card-icon iq-bg-primary"><i class="ri-exchange-dollar-fill"></i></div>
                  <span class="float-right line-height-6">Total de ventas ultimos 30 dias</span>
                  <div class="clearfix"></div>
                  <div class="text-center">
                    <h2 class="mb-0"><span>$</span><span class="counter">{{number_format($totalVentas->valor, 2)}}</span></h2>
                  </div>
                </div>
                <div id="chart-1"></div>
             </div>
          </div>
          <div class="col-md-6 col-lg-3">
             <div class="iq-card iq-card-block iq-card-stretch iq-card-height overflow-hidden">
                <div class="iq-card-body pb-0">
                   <div class="rounded-circle iq-card-icon iq-bg-warning"><i class="ri-bar-chart-grouped-line"></i></div>
                   <span class="float-right line-height-6">Total de Pedidos ultimos 30 dias</span>
                   <div class="clearfix"></div>
                   <div class="text-center">
                      <h2 class="mb-0"><span>$</span><span class="counter">{{number_format($totalPedidos->valor, 2)}}</span></h2>
                   </div>
                </div>
                <div id="chart-2"></div>
             </div>
          </div>
          <div class="col-md-6 col-lg-3">
             <div class="iq-card iq-card-block iq-card-stretch iq-card-height overflow-hidden">
                <div class="iq-card-body pb-0">
                   <div class="rounded-circle iq-card-icon iq-bg-success"><i class="ri-group-line"></i></div>
                   <span class="float-right line-height-6">Total de Clientes</span>
                   <div class="clearfix"></div>
                   <div class="text-center">
                      <h2 class="mb-0"><span class="counter">{{number_format($totalClientes->total)}}</span></h2>
                   </div>
                </div>
                <div id="chart-3"></div>
             </div>
          </div>
          <div class="col-md-6 col-lg-3">
             <div class="iq-card iq-card-block iq-card-stretch iq-card-height overflow-hidden">
                <div class="iq-card-body pb-0">
                   <div class="rounded-circle iq-card-icon iq-bg-danger"><i class="ri-shopping-cart-line"></i></div>
                   <span class="float-right line-height-6">Total de Productos</span>
                   <div class="clearfix"></div>
                   <div class="text-center">
                      <h2 class="mb-0"><span class="counter">{{number_format($totalProductos->total)}}</span></h2>
                   </div>
                </div>
                <div id="chart-4"></div>
             </div>
          </div>

          <div class="col-lg-12">
            <div class="iq-card">
              <div class="iq-card-header d-flex justify-content-between">
                 <div class="iq-header-title">
                    <h4 class="card-title">Productos Populares</h4>
                 </div>
                 <div class="iq-card-header-toolbar d-flex align-items-center">
                    <div class="dropdown">
                       <span class="dropdown-toggle text-primary" id="dropdownMenuButton5" data-toggle="dropdown">
                       <i class="ri-more-2-fill"></i>
                       </span>
                       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                          <a class="dropdown-item" href="#"><i class="ri-eye-fill mr-2"></i>View</a>
                          <a class="dropdown-item" href="#"><i class="ri-delete-bin-6-fill mr-2"></i>Delete</a>
                          <a class="dropdown-item" href="#"><i class="ri-pencil-fill mr-2"></i>Edit</a>
                          <a class="dropdown-item" href="#"><i class="ri-printer-fill mr-2"></i>Print</a>
                          <a class="dropdown-item" href="#"><i class="ri-file-download-fill mr-2"></i>Download</a>
                       </div>
                    </div>
                 </div>
              </div>
              <div class="iq-card-body">
                 <div class="table-responsive">
                    <table class="table mb-0 table-borderless">
                       <thead>
                          <tr>
                             <th scope="col">Imagen</th>
                             <th scope="col">SKU</th>
                             <th scope="col">Nombre</th>
                             <th scope="col">Precio de Venta</th>
                             <th scope="col">Stock</th>
                             <th scope="col">Estado</th>

                          </tr>
                       </thead>
                       <tbody>
                          @if(count($productosPopulares) > 0)
                          @foreach($productosPopulares as $p)
                            <tr>
                              <td>{{$p->codigo}}</td>
                              <td>{{$p->codigo}}</td>
                              <td>{{$p->nombre}}</td>
                              <td>$ {{number_format($p->precioVenta, 2)}}</td>
                              <td>
                                <div class="iq-progress-bar">
                                  @php
                                    $bar = ($p->stock > 100) ? 100 : $p->stock;
                                  @endphp
                                  @if($p->stock < 10 && $p->stock >= 3)
                                    <span class="bg-warning" data-percent="{{number_format($bar)}}"></span>
                                    <div class="badge badge-pill badge-warning">{{number_format($p->stock)}}</div>
                                  @elseif($p->stock < 3)
                                    <span class="bg-danger" data-percent="{{number_format($bar)}}"></span>
                                    <div class="badge badge-pill badge-danger">{{number_format($p->stock)}}</div>
                                  @else
                                    <span class="bg-success" data-percent="{{number_format($bar)}}"></span>
                                    <div class="badge badge-pill badge-success">{{number_format($p->stock)}}</div>
                                  @endif
                                </div>
                              </td>
                              <td>
                                <div class="badge badge-pill badge-success">{{$p->estado}}</div>
                              </td>
                            </tr>
                          @endforeach
                          @else
                            <tr>
                              <td colspan="6">Sin registro</td>
                            </tr>
                          @endif
                       </tbody>
                    </table>
                 </div>
              </div>
           </div>
        </div>
       </div>
     </div>
  </div>
@endsection

@section("js")
  <script>
    if(jQuery('#chart-1').length){
      var chart = new ApexCharts(
        document.querySelector("#chart-1"),
        {
          chart: {
              height: 80,
              type: 'area',
              sparkline: {
                  enabled: true
              },
              group: 'sparklines',
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            width: 3,
            curve: 'smooth'
          },
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 1,
              opacityFrom: 0.5,
              opacityTo: 0,
            }
          },

          series: [{
            name: 'series1',
            data: [60, 15, 50, 30, 70]
          }],
          colors: ['#0084ff'],

          xaxis: {
            type: 'datetime',
            categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
          },
          tooltip: {
            x: {
              format: 'dd/MM/yy HH:mm'
            },
          }
        }
      );
      chart.render();
    }

    if(jQuery('#chart-2').length){
      var chart1 = new ApexCharts(
        document.querySelector("#chart-2"),
        {
          chart: {
              height: 80,
              type: 'area',
              sparkline: {
                  enabled: true
              },
              group: 'sparklines',
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            width: 3,
            curve: 'smooth'
          },
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 1,
              opacityFrom: 0.5,
              opacityTo: 0,
            }
          },

          series: [{
            name: 'series1',
            data: [60, 15, 50, 30, 70]
          }],
          colors: ['#ffd400'],

          xaxis: {
            type: 'datetime',
            categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
          },
          tooltip: {
            x: {
              format: 'dd/MM/yy HH:mm'
            },
          }
        }
      );
      chart1.render();
    }

    if(jQuery('#chart-3').length){
      var chart2 = new ApexCharts(
        document.querySelector("#chart-3"),
        {
          chart: {
              height: 80,
              type: 'area',
              sparkline: {
                  enabled: true
              },
              group: 'sparklines',
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            width: 3,
            curve: 'smooth'
          },
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 1,
              opacityFrom: 0.5,
              opacityTo: 0,
            }
          },

          series: [{
            name: 'series1',
            data: [60, 15, 50, 30, 70]
          }],
          colors: ['#00ca00'],

          xaxis: {
            type: 'datetime',
            categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
          },
          tooltip: {
            x: {
              format: 'dd/MM/yy HH:mm'
            },
          }
        }
      );
      chart2.render();
    }

    if(jQuery('#chart-4').length){
      var chart3 = new ApexCharts(
        document.querySelector("#chart-4"),
        {
          chart: {
              height: 80,
              type: 'area',
              sparkline: {
                  enabled: true
              },
              group: 'sparklines',
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            width: 3,
            curve: 'smooth'
          },
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 1,
              opacityFrom: 0.5,
              opacityTo: 0,
            }
          },

          series: [{
            name: 'series1',
            data: [60, 15, 50, 30, 70]
          }],
          colors: ['#e64141'],

          xaxis: {
            type: 'datetime',
            categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
          },
          tooltip: {
            x: {
              format: 'dd/MM/yy HH:mm'
            },
          }
        }
      );
      chart3.render();
    }
  </script>
@endsection