<?php
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
?>
@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss',
'resources/assets/vendor/libs/apex-charts/apex-charts.scss',
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
'resources/assets/vendor/libs/moment/moment.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
'resources/assets/vendor/libs/apex-charts/apexcharts.js',
])
@endsection

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1 text-sm-small mt-md-4 mt-lg-4"> 
    <i class="bx bx-home-smile d-none d-md-inline-flex d-lg-inline-flex"></i> Dashboard
    <!-- <span class="text-muted fs-6 fw-normal text-primary d-none d-md-inline-flex d-lg-inline-flex"> di {{ \App\Models\Attivita::find(session()->get('attivita_attuale'))->nome }}</span> -->
  </h4>
</div>
@endsection

@section('content')
<style>
  div.upload button:first-child{
    display: none !important;
  }

.bx-chef-hat{
  --svg: url("data:image/svg+xml,%3csvg width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='' xmlns='http://www.w3.org/2000/svg'%3e%3c!--Boxicons v3.0.8 https://boxicons.com %7c License https://docs.boxicons.com/free--%3e%3cpath d='M17.13 5.54C16.33 3.42 14.32 2 12 2S7.67 3.42 6.87 5.54A5.506 5.506 0 0 0 2 11c0 2.07 1.18 3.95 3 4.88V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-2.12c1.82-.93 3-2.81 3-4.88 0-2.82-2.13-5.15-4.87-5.46m.53 8.75c-.4.14-.67.52-.67.94v1.78H7v-1.78c0-.42-.27-.8-.67-.94-1.4-.5-2.33-1.82-2.33-3.28 0-1.93 1.57-3.5 3.42-3.5.04 0 .14.01.18.02.49 0 .9-.31 1-.78.36-1.61 1.76-2.73 3.41-2.73s3.05 1.12 3.41 2.73c.1.47.51.81 1 .78.06 0 .12 0 .09-.01 1.93 0 3.5 1.57 3.5 3.5 0 1.47-.94 2.79-2.33 3.28ZM5 20h14v2H5z'%3e%3c/path%3e%3c/svg%3e");
}
</style>

@include('_partials.status')

<div class="row justify-content-center">


  @include('dashboard._partials.stat_ordini')
  @include('dashboard._partials.totale_redditi')
 
</div>

@endsection

@section('page-script')
@php
  $statOrdiniChart = $statOrdini ?? [];
  $totaleRedditiChart = $totaleRedditi ?? [];
@endphp
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (typeof ApexCharts === 'undefined') {
      return;
    }

    var el = document.querySelector('#orderStatisticsChart');
    if (el) {
    var stat = @json($statOrdiniChart);
    var labels = stat.chart_labels || ['Nessun ordine'];
    var series = stat.chart_series || [1];
    var colors = stat.chart_colors || ['#8592a3'];
    var total = stat.total_ordini || 0;
    var cardColor = 'transparent';
    if (typeof window.templateCustomizer !== 'undefined' && window.templateCustomizer.settings && window.templateCustomizer.settings.chartBgColor) {
      cardColor = window.templateCustomizer.settings.chartBgColor;
    }

    var orderChartConfig = {
      chart: {
        height: 165,
        width: 136,
        type: 'donut',
        offsetX: 15
      },
      labels: labels,
      series: series,
      colors: colors,
      stroke: { width: 5, colors: [cardColor] },
      dataLabels: { enabled: false },
      legend: { show: false },
      grid: { padding: { top: 0, bottom: 0, right: 15 } },
      states: {
        hover: { filter: { type: 'none' } },
        active: { filter: { type: 'none' } }
      },
      plotOptions: {
        pie: {
          donut: {
            size: '75%',
            labels: {
              show: true,
              value: {
                fontSize: '1.125rem',
                fontWeight: 500,
                offsetY: -17,
                formatter: function (val) {
                  var n = parseFloat(val);
                  if (!total || !n) return '0';
                  return Math.round((n / total) * 100) + '%';
                }
              },
              name: { offsetY: 17 },
              total: {
                show: true,
                fontSize: '13px',
                label: 'Ordini',
                formatter: function () {
                  return total ? total.toLocaleString('it-IT') : '0';
                }
              }
            }
          }
        }
      }
    };

    new ApexCharts(el, orderChartConfig).render();
    }

    var incomeEl = document.querySelector('#totalIncomeChart');
    if (incomeEl) {
      var tr = @json($totaleRedditiChart);
      var categories = tr.chart_categories || [];
      var seriesData = tr.chart_series || [];
      var chartMax = tr.chart_max || 100;

      var primaryColor = '#696cff';
      var cardColorBg = '#fff';
      var borderColor = '#e7eef7';
      var labelColor = '#6d6b77';
      if (typeof window.config !== 'undefined' && window.config.colors) {
        if (window.config.colors.primary) primaryColor = window.config.colors.primary;
        if (window.config.colors.borderColor) borderColor = window.config.colors.borderColor;
        if (window.config.colors.bodyColor) labelColor = window.config.colors.bodyColor;
      }
      if (typeof window.templateCustomizer !== 'undefined' && window.templateCustomizer.settings && window.templateCustomizer.settings.chartBgColor) {
        cardColorBg = window.templateCustomizer.settings.chartBgColor;
      }

      var totalIncomeConfig = {
        chart: {
          height: 250,
          type: 'area',
          toolbar: { show: false },
          zoom: { enabled: false },
          dropShadow: {
            enabled: true,
            top: 14,
            left: 2,
            blur: 3,
            color: primaryColor,
            opacity: 0.15
          }
        },
        series: [{ name: 'Incasso', data: seriesData }],
        dataLabels: { enabled: false },
        stroke: { width: 3, curve: 'straight' },
        colors: [primaryColor],
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.3,
            gradientToColors: [cardColorBg],
            opacityTo: 0.3,
            stops: [0, 100]
          }
        },
        grid: {
          show: true,
          strokeDashArray: 10,
          borderColor: borderColor,
          padding: { top: -15, bottom: -10, left: 0, right: 0 }
        },
        xaxis: {
          categories: categories,
          labels: {
            offsetX: 0,
            style: { colors: labelColor, fontSize: '12px' }
          },
          axisBorder: { show: false },
          axisTicks: { show: false }
        },
        yaxis: {
          min: 0,
          max: chartMax,
          tickAmount: 5,
          labels: {
            offsetX: -10,
            formatter: function (val) {
              if (val == null || isNaN(val)) return '0 €';
              var v = parseFloat(val);
              if (Math.abs(v) >= 1000) return (v / 1000).toFixed(1).replace('.', ',') + 'k €';
              return Math.round(v).toLocaleString('it-IT') + ' €';
            },
            style: { fontSize: '12px', colors: labelColor }
          }
        },
        tooltip: {
          y: {
            formatter: function (val) {
              if (val == null || isNaN(val)) return '';
              return parseFloat(val).toLocaleString('it-IT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
            }
          }
        }
      };

      new ApexCharts(incomeEl, totalIncomeConfig).render();
    }
  });
</script>
@endsection
