@extends('layouts.app')

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2 align-items-center">
      <div class="col-sm-6">
        <h1 class="m-0">Dashboard</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">

    {{-- Date Filter --}}
    <div class="card card-outline card-primary mb-3">
      <div class="card-body py-2">
        <div class="row align-items-end g-2">
          <div class="col-auto">
            <label class="mb-0 small font-weight-bold">From</label>
            <input type="date" id="date_from" class="form-control form-control-sm">
          </div>
          <div class="col-auto">
            <label class="mb-0 small font-weight-bold">To</label>
            <input type="date" id="date_to" class="form-control form-control-sm">
          </div>
          <div class="col-auto">
            <button id="btn-apply-filter" class="btn btn-primary btn-sm">
              <i class="fas fa-filter mr-1"></i> Apply Filter
            </button>
            <button id="btn-reset-filter" class="btn btn-secondary btn-sm ml-1">
              <i class="fas fa-redo mr-1"></i> Reset
            </button>
          </div>
          <div class="col-auto ml-auto">
            <div id="global-spinner" class="text-muted small" style="display:none;">
              <i class="fas fa-spinner fa-spin mr-1"></i> Loading…
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- KPI Cards --}}
    <div class="row" id="kpi-row">
      <div class="col-lg-3 col-md-6 col-sm-6 col-12">
        <div class="info-box shadow-sm">
          <span class="info-box-icon bg-info elevation-1"><i class="fas fa-users"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Total Users</span>
            <span class="info-box-number kpi-spinner"><i class="fas fa-spinner fa-spin"></i></span>
            <span class="info-box-number d-none" id="kpi-users">—</span>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-12">
        <div class="info-box shadow-sm">
          <span class="info-box-icon bg-success elevation-1"><i class="fas fa-tags"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Total Products</span>
            <span class="info-box-number kpi-spinner"><i class="fas fa-spinner fa-spin"></i></span>
            <span class="info-box-number d-none" id="kpi-products">—</span>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-12">
        <div class="info-box shadow-sm">
          <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-layer-group"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Total Categories</span>
            <span class="info-box-number kpi-spinner"><i class="fas fa-spinner fa-spin"></i></span>
            <span class="info-box-number d-none" id="kpi-categories">—</span>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-12">
        <div class="info-box shadow-sm">
          <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-pound-sign"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Total Transactions</span>
            <span class="info-box-number kpi-spinner"><i class="fas fa-spinner fa-spin"></i></span>
            <span class="info-box-number d-none" id="kpi-transactions">—</span>
          </div>
        </div>
      </div>
    </div>

    {{-- Charts Row --}}
    <div class="row">
      {{-- Users Line Chart --}}
      <div class="col-lg-7 col-12">
        <div class="card card-outline card-info shadow-sm">
          <div class="card-header">
            <h3 class="card-title"><i class="fas fa-chart-line mr-2"></i>User Registrations (Monthly)</h3>
            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            <div id="users-chart-spinner" class="text-center py-5">
              <i class="fas fa-spinner fa-spin fa-2x text-info"></i>
            </div>
            <canvas id="usersChart" height="120" style="display:none;"></canvas>
          </div>
        </div>
      </div>

      {{-- Orders Bar Chart --}}
      <div class="col-lg-5 col-12">
        <div class="card card-outline card-success shadow-sm">
          <div class="card-header">
            <h3 class="card-title"><i class="fas fa-chart-bar mr-2"></i>Orders by Status</h3>
            <div class="card-tools d-flex align-items-center">
              <select id="orders-status-filter" class="form-control form-control-sm mr-2" style="width:140px;">
                <option value="">All Statuses</option>
                <option value="0">Pending</option>
                <option value="1">Processing</option>
                <option value="2">Shipped</option>
                <option value="3">Delivered</option>
                <option value="4">Cancelled</option>
              </select>
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            <div id="orders-chart-spinner" class="text-center py-5">
              <i class="fas fa-spinner fa-spin fa-2x text-success"></i>
            </div>
            <canvas id="ordersChart" height="160" style="display:none;"></canvas>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
$(function () {

  /* ── Helpers ─────────────────────────────────────── */
  var usersChartInstance  = null;
  var ordersChartInstance = null;

  var ORDERS_COLORS = [
    'rgba(255, 193,   7, 0.85)',  // Pending   – amber
    'rgba( 23, 162, 184, 0.85)',  // Processing – teal
    'rgba( 13, 110, 253, 0.85)',  // Shipped   – blue
    'rgba( 40, 167,  69, 0.85)',  // Delivered – green
    'rgba(220,  53,  69, 0.85)',  // Cancelled – red
  ];

  function getFilterParams() {
    return {
      date_from: $('#date_from').val() || '',
      date_to  : $('#date_to').val()   || '',
    };
  }

  /* ── KPI Cards ───────────────────────────────────── */
  function loadStats() {
    $('#global-spinner').show();
    $('.kpi-spinner').show();
    $('.info-box-number:not(.kpi-spinner)').addClass('d-none');

    $.ajax({
      url   : '{{ route("dashboard.stats") }}',
      data  : getFilterParams(),
      success: function (res) {
        $('#kpi-users').text(res.users_count.toLocaleString());
        $('#kpi-products').text(res.products_count.toLocaleString());
        $('#kpi-categories').text(res.categories_count.toLocaleString());
        $('#kpi-transactions').text('QAR ' + res.total_transactions);

        $('.kpi-spinner').hide();
        $('.info-box-number:not(.kpi-spinner)').removeClass('d-none');

        renderUsersChart(res.users_chart_data);
        renderOrdersChart(res.orders_chart_data);
      },
      error: function () {
        toastr.error('Failed to load dashboard stats.');
        $('.kpi-spinner').hide();
      },
      complete: function () {
        $('#global-spinner').hide();
      }
    });
  }

  /* ── Users Chart ─────────────────────────────────── */
  function renderUsersChart(chartData) {
    $('#users-chart-spinner').hide();
    $('#usersChart').show();

    if (usersChartInstance) {
      usersChartInstance.data.labels   = chartData.labels;
      usersChartInstance.data.datasets[0].data = chartData.data;
      usersChartInstance.update({ duration: 600 });
      return;
    }

    var ctx = document.getElementById('usersChart').getContext('2d');
    usersChartInstance = new Chart(ctx, {
      type: 'line',
      data: {
        labels  : chartData.labels,
        datasets: [{
          label          : 'New Users',
          data           : chartData.data,
          borderColor    : 'rgba(23, 162, 184, 1)',
          backgroundColor: 'rgba(23, 162, 184, 0.15)',
          borderWidth    : 2,
          pointRadius    : 4,
          pointHoverRadius: 6,
          tension        : 0.4,
          fill           : true,
        }]
      },
      options: {
        responsive       : true,
        animation        : { duration: 600 },
        plugins: {
          legend: { display: false },
          tooltip: { mode: 'index', intersect: false }
        },
        scales: {
          y: {
            beginAtZero : true,
            ticks       : { precision: 0 },
            grid        : { color: 'rgba(0,0,0,0.06)' }
          },
          x: {
            grid: { display: false }
          }
        }
      }
    });
  }

  /* ── Orders Chart ────────────────────────────────── */
  function renderOrdersChart(chartData) {
    $('#orders-chart-spinner').hide();
    $('#ordersChart').show();

    var bgColors  = chartData.labels.map(function (_, i) { return ORDERS_COLORS[i % ORDERS_COLORS.length]; });
    var brdColors = bgColors.map(function (c) { return c.replace('0.85', '1'); });

    if (ordersChartInstance) {
      ordersChartInstance.data.labels                    = chartData.labels;
      ordersChartInstance.data.datasets[0].data          = chartData.data;
      ordersChartInstance.data.datasets[0].backgroundColor = bgColors;
      ordersChartInstance.data.datasets[0].borderColor     = brdColors;
      ordersChartInstance.update({ duration: 600 });
      return;
    }

    var ctx = document.getElementById('ordersChart').getContext('2d');
    ordersChartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels  : chartData.labels,
        datasets: [{
          label          : 'Orders',
          data           : chartData.data,
          backgroundColor: bgColors,
          borderColor    : brdColors,
          borderWidth    : 1,
          borderRadius   : 4,
        }]
      },
      options: {
        responsive       : true,
        animation        : { duration: 600 },
        plugins: {
          legend: { display: false },
          tooltip: { mode: 'index', intersect: false }
        },
        scales: {
          y: {
            beginAtZero : true,
            ticks       : { precision: 0 },
            grid        : { color: 'rgba(0,0,0,0.06)' }
          },
          x: {
            grid: { display: false }
          }
        }
      }
    });
  }

  /* ── Orders status dropdown (AJAX-only update) ───── */
  $('#orders-status-filter').on('change', function () {
    var status = $(this).val();
    $('#orders-chart-spinner').show();
    $('#ordersChart').hide();

    var params = $.extend(getFilterParams(), { status: status });

    $.ajax({
      url    : '{{ route("dashboard.orders-chart") }}',
      data   : params,
      success: function (res) { renderOrdersChart(res); },
      error  : function ()    { toastr.error('Failed to load orders chart.'); $('#orders-chart-spinner').hide(); }
    });
  });

  /* ── Date filter buttons ─────────────────────────── */
  $('#btn-apply-filter').on('click', function () {
    var from = $('#date_from').val();
    var to   = $('#date_to').val();
    if (from && to && from > to) {
      toastr.warning('"From" date cannot be after "To" date.');
      return;
    }
    $('#orders-status-filter').val('');
    loadStats();
  });

  $('#btn-reset-filter').on('click', function () {
    $('#date_from').val('');
    $('#date_to').val('');
    $('#orders-status-filter').val('');
    loadStats();
  });

  /* ── Initial load ────────────────────────────────── */
  loadStats();
});
</script>
@endpush