<?php $__env->startSection('title','Dashboard'); ?>
<?php $__env->startSection('content'); ?>
<div class="app-title">
    <div>
        <h1><i class="bi bi-speedometer"></i> <?php echo e(__('lang.dashboard')); ?></h1>
        
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
        <li class="breadcrumb-item"><a href="#"><?php echo e(__('lang.dashboard')); ?></a></li>
    </ul>
</div>
<div class="row">
    <div class="col-lg-6 col-xl-3">
        <div class="widget-small primary coloured-icon"><i class="icon bi bi-people fs-1"></i>
            <div class="info">
                <h4><?php echo e(__('lang.user')); ?></h4>
                <p><b class="counter" data-target="<?php echo e(App\Models\User::count()); ?>" data-duration="1000">0</b></p>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-xl-3">
        <div class="widget-small info coloured-icon"><i class="icon bi bi-diagram-2 fs-1"></i>
            <div class="info">
                <h4><?php echo e(__('lang.categories')); ?></h4>
                <p><b class="counter" data-target="<?php echo e(App\Models\Category::count()); ?>" data-duration="1000">0</b></p>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-xl-3">
        <div class="widget-small warning coloured-icon"><i class="icon bi bi-book-half fs-1"></i>
            <div class="info">
                <h4><?php echo e(__('lang.books')); ?></h4>
                <p><b class="counter" data-target="<?php echo e(App\Models\Book::count()); ?>" data-duration="1000">0</b></p>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-xl-3">
        <div class="widget-small danger coloured-icon"><i class="icon bi bi-person-vcard fs-1"></i>
            <div class="info">
                <h4><?php echo e(__('lang.not_returned')); ?></h4>
                <p><b class="counter" data-target="<?php echo e(App\Models\Borrow::where('is_returned',0)->count()); ?>"
                        data-duration="1000">0</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title"><?php echo e(__('messages.last_seven_days_borrows')); ?></h3>
            <div id="salesChart" style="height: 300px;"></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title"><?php echo e(__('lang.borrows')); ?></h3>
            <div id="borrowCharts" style="height: 300px;"></div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script type="text/javascript" src="<?php echo e(asset('admin/js/echarts.min.js')); ?>"></script>
<script type="text/javascript">
    // Function to animate counters
    function animateCounter(counterElement, targetValue, duration) {
        let currentValue = 0;
        const increment = targetValue / (duration / 10); // Calculate the increment step

        const counterInterval = setInterval(() => {
            currentValue += increment;
            if (currentValue >= targetValue) {
                currentValue = targetValue;
                clearInterval(counterInterval); // Stop the interval when target value is reached
            }
            counterElement.textContent = Math.floor(currentValue); // Update the displayed value
        }, 10); // Update every 10ms
    }
    // Automatically apply counter animation to all elements with the class 'counter'
    document.addEventListener('DOMContentLoaded', function () {
        const counters = document.querySelectorAll('.counter');
        counters.forEach(counter => {
            const targetValue = parseInt(counter.getAttribute('data-target'));
            const duration = parseInt(counter.getAttribute('data-duration'));
            animateCounter(counter, targetValue, duration);
        });
    });
</script>
<script type="text/javascript">
    const salesData = {
      xAxis: {
          type: 'category',
          data: <?php echo json_encode($days, 15, 512) ?>
      },
      yAxis: {
          type: 'value',
          axisLabel: {
              formatter: '{value}'
          }
      },
      series: [
          {
              data: <?php echo json_encode($borrowCounts, 15, 512) ?>,
              type: 'line',
              smooth: true
          }
      ],
      tooltip: {
          trigger: 'axis',
          formatter: "<b>{b0}:</b> {c0}"
      }
  }
  
  const borrowData = {
      tooltip: {
          trigger: 'item'
      },
      legend: {
          orient: 'vertical',
          left: 'left'
      },
      series: [
          {
              name: '<?php echo e(__('lang.borrows')); ?>',
              type: 'pie',
              radius: '50%',
              data: [
                  { value: <?php echo e($returned); ?>, name: '<?php echo e(__('lang.returned')); ?>' },
                  { value: <?php echo e($notReturned); ?>, name: '<?php echo e(__('lang.not_returned')); ?>' },
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  
  const salesChartElement = document.getElementById('salesChart');
  const salesChart = echarts.init(salesChartElement, null, { renderer: 'svg' });
  salesChart.setOption(salesData);
  new ResizeObserver(() => salesChart.resize()).observe(salesChartElement);
  
  const borrowChartElement = document.getElementById("borrowCharts")
  const borrowChart = echarts.init(borrowChartElement, null, { renderer: 'svg' });
  borrowChart.setOption(borrowData);
  new ResizeObserver(() => borrowtChart.resize()).observe(borrowCharts);
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Laravel\library\resources\views/home.blade.php ENDPATH**/ ?>