@section('styles')
<link rel="stylesheet" href="/assets/vendor/libs/apex-charts/apex-charts.css" />
<link rel="stylesheet" href="/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
<link rel="stylesheet" href="/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
<link rel="stylesheet" href="/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
<link rel="stylesheet" href="/assets/vendor/css/pages/app-academy.css" />
@endsection
<div class="row g-6">

    <!-- View sales -->
    <div class="col-lg-6 col-sm-6">
        <div class="card card-border-shadow-primary h-60">
            <div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="avatar me-4">
                <span class="avatar-initial rounded bg-label-primary"
                    ><i class="ti ti-truck ti-28px"></i
                ></span>
                </div>
                <h4 class="mb-0">{{ $pedidos }}</h4>
            </div>
            <p class="mb-1">Pedidos generados</p>
            <p class="mb-0">
                <span class="text-heading fw-medium me-2">+18.2%</span>
                <small class="text-muted">than last week</small>
            </p>
            </div>
        </div>
        </div>
        <div class="col-lg-6 col-sm-6">
        <div class="card card-border-shadow-warning h-60">
            <div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="avatar me-4">
                <span class="avatar-initial rounded bg-label-warning"
                    ><i class="ti ti-clock ti-28px"></i
                ></span>
                </div>
                <h4 class="mb-0">{{ $pendientes }}</h4>
            </div>
            <p class="mb-1">Pedidos pendientes</p>
            <p class="mb-0">
                <span class="text-heading fw-medium me-2">-8.7%</span>
                <small class="text-muted">than last week</small>
            </p>
            </div>
        </div>
        </div>
        <div class="col-lg-4 col-sm-6">
        <div class="card card-border-shadow-info h-60">
            <div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="avatar me-4">
                <span class="avatar-initial rounded bg-label-info"
                    ><i class="ti ti-check ti-28px"></i
                ></span>
                </div>
                <h4 class="mb-0">{{ $asignados }}</h4>
            </div>
            <p class="mb-1">Pedidos asignados</p>
            <p class="mb-0">
                <span class="text-heading fw-medium me-2">+4.3%</span>
                <small class="text-muted">than last week</small>
            </p>
            </div>
        </div>
        </div>
        <div class="col-lg-4 col-sm-6">
        <div class="card card-border-shadow-success h-60">
            <div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="avatar me-4">
                <span class="avatar-initial rounded bg-label-success"
                    ><i class="ti ti-box ti-28px"></i
                ></span>
                </div>
                <h4 class="mb-0">{{ $entregados }}</h4>
            </div>
            <p class="mb-1">Pedidos entregados</p>
            <p class="mb-0">
                <span class="text-heading fw-medium me-2">+4.3%</span>
                <small class="text-muted">than last week</small>
            </p>
            </div>
        </div>
        </div>

        <div class="col-lg-4 col-sm-6">
        <div class="card card-border-shadow-danger h-60">
            <div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="avatar me-4">
                <span class="avatar-initial rounded bg-label-danger"><i class="ti ti-alert-triangle ti-28px"></i></span>
                </div>
                <h4 class="mb-0">{{ $cancelados }}</h4>
            </div>
            <p class="mb-1">Pedidos cancelados</p>
            <p class="mb-0">
                <span class="text-heading fw-medium me-2">-2.5%</span>
                <small class="text-muted">than last week</small>
            </p>
            </div>
        </div>
    </div>

    <div class="app-academy">

        <div class="row gy-6 mb-6">
            @foreach ($pedidoInfo as $item)
                  <div class="col-sm-6 col-lg-4">
                <div class="card p-2 h-100 shadow-none border">
                  <div class="rounded-2 text-center mb-4">
                    <a target="_blank" href="/front/pedido/detalle/{{ $item->codigo }}" class="my-5"
                      ><h4 class="text-primary mt-5">Pedido #{{ $item->codigo }}</h4> </a>
                  </div>
                  <div class="card-body p-4 pt-2">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <span class="badge bg-label-primary">{{ \Carbon\Carbon::parse($item->fecha)->format('d/m/Y') }}</span>
                      <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
                         {{ money($item->total_usd) }} -

                         <span class="fw-normal">( {{ moneyBS($item->total_bs) }})</span>
                      </p>

                    </div>
                    <span class="fw-normal">Cliente: {{ $item->user->name }}</span><br>
                    <span class="fw-normal">Teléfono: {{ $item->user->telefono }}</span><br>
                    <span class="fw-normal">Método de pago: {{ $item->metodo_pago }}</span><br>
                    <span class="fw-normal">Estado del pedido: <span class=" badge bg-label-warning">{{ $item->estado }}</span></span>

                    <div
                      class="my-5 d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
                      <a
                        class="w-100 btn btn-label-primary d-flex align-items-center"
                        href="/front/pedido/detalle/{{ $item->codigo }}" target="_blank">
                        <i class="ti ti-rotate-clockwise-2 ti-xs align-middle scaleX-n1-rtl me-2"></i
                        ><span>Ver detalle</span>
                      </a>

                    </div>
                  </div>
                </div>
              </div>
              @endforeach
        </div>
     </div>
  </div>
@section('scripts')
<script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
<script>
   /**
 * Dashboard eCommerce
 */

'use strict';

(function () {
  let cardColor, labelColor, headingColor, borderColor, legendColor;

  if (isDarkStyle) {
    cardColor = config.colors_dark.cardColor;
    labelColor = config.colors_dark.textMuted;
    legendColor = config.colors_dark.bodyColor;
    headingColor = config.colors_dark.headingColor;
    borderColor = config.colors_dark.borderColor;
  } else {
    cardColor = config.colors.cardColor;
    labelColor = config.colors.textMuted;
    legendColor = config.colors.bodyColor;
    headingColor = config.colors.headingColor;
    borderColor = config.colors.borderColor;
  }

  // Donut Chart Colors
  const chartColors = {
    donut: {
      series1: '#24B364',
      series2: '#53D28C',
      series3: '#7EDDA9',
      series4: '#A9E9C5'
    }
  };


  // Earning Reports Bar Chart
  // --------------------------------------------------------------------
  const reportBarChartEl = document.querySelector('#reportBarChart'),
    reportBarChartConfig = {
      chart: {
        height: 230,
        type: 'bar',
        toolbar: {
          show: false
        }
      },
      plotOptions: {
        bar: {
          barHeight: '60%',
          columnWidth: '60%',
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadius: 4,
          distributed: true
        }
      },
      grid: {
        show: false,
        padding: {
          top: -20,
          bottom: 0,
          left: -10,
          right: -10
        }
      },
      colors: [
        config.colors_label.primary,
        config.colors_label.primary,
        config.colors_label.primary,
        config.colors_label.primary,
        config.colors.primary,
        config.colors_label.primary,
        config.colors_label.primary
      ],
      dataLabels: {
        enabled: false
      },
      series: [
        {
          data: [{{ $pedido5 }}, {{ $pedido4 }}, {{ $pedido3 }}, {{ $pedido2 }}, {{ $pedido1 }}]
        }
      ],
      legend: {
        show: false
      },
      xaxis: {
        categories: ['Lun.', 'Mar.', 'Mie.', 'Jue.', 'Vie.'],
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },
        labels: {
          style: {
            colors: labelColor,
            fontSize: '13px'
          }
        }
      },
      yaxis: {
        labels: {
          show: false
        }
      },
      responsive: [
        {
          breakpoint: 1025,
          options: {
            chart: {
              height: 190
            }
          }
        },
        {
          breakpoint: 769,
          options: {
            chart: {
              height: 250
            }
          }
        }
      ]
    };
  if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
    const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
    barChart.render();
  }




  // Filter form control to default size
  // ? setTimeout used for multilingual table initialization
  setTimeout(() => {
    $('.dataTables_filter .form-control').removeClass('form-control-sm');
    $('.dataTables_length .form-select').removeClass('form-select-sm');
  }, 300);
})();

</script>
@endsection