@extends('layouts.app')

@section('contents')
    <!-- content -->
    <div class="content ">
           
       <div class="row row-cols-1 row-cols-md-3 g-4">
       <!--     <div class="col-lg-4 col-md-12">
               <div class="card widget h-100">
                   <div class="card-header d-flex">
                       <h6 class="card-title">
                           Channels
                           <a href="#" class="bi bi-question-circle ms-1 small" data-bs-toggle="tooltip"
                              title="Channels where your products are sold"></a>
                       </h6>
                       <div class="d-flex gap-3 align-items-center ms-auto">
                           <div class="dropdown">
                               <a href="#" data-bs-toggle="dropdown" class="btn btn-sm" aria-haspopup="true"
                                  aria-expanded="false">
                                   <i class="bi bi-three-dots"></i>
                               </a>
                               <div class="dropdown-menu dropdown-menu-end">
                                   <a href="#" class="dropdown-item">View Detail</a>
                                   <a href="#" class="dropdown-item">Download</a>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="card-body">
                       <div id="sales-channels"></div>
                       <div class="row text-center mb-4 mt-4">
                           <div class="col-4">
                               <div class="display-7">{{$orderCount}}</div>
                               <div class="d-flex align-items-center justify-content-center">
                                   <i class="bi bi-circle-fill text-orange me-2 small"></i>
                                   <span class="text-muted"> Smart Orders</span>
                               </div>
                           </div>
                           <div class="col-4">
                               <div class="display-7">{{$inventoryCount}}</div>
                               <div class="d-flex align-items-center justify-content-center">
                                   <i class="bi bi-circle-fill text-cyan me-2 small"></i>
                                   <span class="text-muted">Smart Inventory</span>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div> -->
           <div class="col-lg-4 col-md-12">
               <div class="card h-100">
                   <div class="card-body">
                       <div class="d-flex mb-3">
                           <div class="display-7">
                               <i class="bi bi-receipt"></i>
                           </div>
                       </div>
                       <h4 class="mb-3"> Orders Count</h4>
                       <div class="d-flex mb-3">
                           <div class="display-7">{{$orderCount}}</div>
                           <div class="ms-auto" id="total-orders"></div>
                       </div>
                   </div>
               </div>
           </div>
           <div class="col-lg-4 col-md-12">
               <div class="card h-100">
                   <div class="card-body">
                       <div class="d-flex mb-3">
                           <div class="display-7">
                               <i class="bi bi-printer"></i>
                           </div>
                       </div>
                       <h4 class="mb-3"> Inventories Count</h4>
                       <div class="d-flex mb-3">
                           <div class="display-7">{{$inventoryCount}}</div>
                           <div class="ms-auto" id="total-sales"></div>
                       </div>
                   </div>
               </div>
           </div>
           <div class="col-lg-4 col-md-12">
               <div class="card h-100">
                   <div class="card-body">
                       <div class="d-flex mb-3">
                           <div class="display-7">
                               <i class="bi bi-receipt"></i>
                           </div>
                       </div>
                       <h4 class="mb-3"> Receipts Count</h4>
                       <div class="d-flex mb-3">
                           <div class="display-7">{{$receiptCount}}</div>
                           <div class="ms-auto" id="total-sales"></div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
       <!-- ./ content -->   
@endsection
@push('script')
    <script>
        $(function () {
        const body_styles = window.getComputedStyle(document.body);
        const colors = {
            primary: $.trim(body_styles.getPropertyValue('--bs-primary')),
            secondary: $.trim(body_styles.getPropertyValue('--bs-secondary')),
            info: $.trim(body_styles.getPropertyValue('--bs-info')),
            success: $.trim(body_styles.getPropertyValue('--bs-success')),
            danger: $.trim(body_styles.getPropertyValue('--bs-danger')),
            warning: $.trim(body_styles.getPropertyValue('--bs-warning')),
            light: $.trim(body_styles.getPropertyValue('--bs-light')),
            dark: $.trim(body_styles.getPropertyValue('--bs-dark')),
            blue: $.trim(body_styles.getPropertyValue('--bs-blue')),
            indigo: $.trim(body_styles.getPropertyValue('--bs-indigo')),
            purple: $.trim(body_styles.getPropertyValue('--bs-purple')),
            pink: $.trim(body_styles.getPropertyValue('--bs-pink')),
            red: $.trim(body_styles.getPropertyValue('--bs-red')),
            orange: $.trim(body_styles.getPropertyValue('--bs-orange')),
            yellow: $.trim(body_styles.getPropertyValue('--bs-yellow')),
            green: $.trim(body_styles.getPropertyValue('--bs-green')),
            teal: $.trim(body_styles.getPropertyValue('--bs-teal')),
            cyan: $.trim(body_styles.getPropertyValue('--bs-cyan')),
            chartTextColor: $('body').hasClass('dark') ? '#6c6c6c' : '#b8b8b8',
            chartBorderColor: $('body').hasClass('dark') ? '#444444' : '#ededed',
        };
       function salesChannels() {
           if ($('#sales-channels').length) {
               const options = {
                   chart: {
                       height: 250,
                       type: 'donut',
                       offsetY: 0
                   },
                   plotOptions: {
                       pie: {
                           donut: {
                               size: '40%',
                           }
                       }
                   },
                   stroke: {
                       show: false,
                       width: 0
                   },
                   colors: [colors.orange, colors.cyan, colors.indigo],
                   series: [48, 30, 22],
                   labels: ['Social Media', 'Google', 'Email'],
                   legend: {
                       show: false
                   }
               }

               new ApexCharts(document.querySelector('#sales-channels'), options).render();
           }
       }

       salesChannels();
   });
    </script>
@endpush