@extends('template.layouts.template-base')
@section('title', 'Dashboard')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />

  <style>
    /* ── Order Summary Dropdown ────────────────────────────────── */
    .dropdown-wrapper {
      position: relative;
      display:  inline-block;
    }

    .dropdown-btn {
      display:         flex;
      align-items:     center;
      gap:             6px;
      padding:         6px 12px;
      background:      #f3f4f6;
      border:          1px solid #e5e7eb;
      border-radius:   8px;
      font-size:       13px;
      font-weight:     500;
      color:           #374151;
      cursor:          pointer;
      transition:      background 0.2s, border-color 0.2s;
      white-space:     nowrap;
    }

    .dropdown-btn:hover {
      background:    #e9eaf0;
      border-color:  #d1d5db;
    }

    .dropdown-btn svg {
      width:      10px;
      height:     6px;
      fill:       #6b7280;
      transition: transform 0.25s ease;
    }

    .dropdown-btn.open svg {
      transform: rotate(180deg);
    }

    .order-dropdown-menu {
      display:          none;        /* hidden by default */
      position:         absolute;
      top:              calc(100% + 6px);
      right:            0;
      min-width:        120px;
      background:       #ffffff;
      border:           1px solid #e5e7eb;
      border-radius:    10px;
      box-shadow:       0 8px 24px rgba(0,0,0,0.10);
      z-index:          9999;
      overflow:         hidden;
      animation:        dropFadeIn 0.18s ease;
    }

    .order-dropdown-menu.show {
      display: block;
    }

    @keyframes dropFadeIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0);    }
    }

    .order-dropdown-item {
      padding:     9px 16px;
      font-size:   13px;
      font-weight: 500;
      color:       #374151;
      cursor:      pointer;
      transition:  background 0.15s;
    }

    .order-dropdown-item:hover {
      background: #f3f4f6;
      color:      #111827;
    }

    .order-dropdown-item.active {
      background:  #eff6ff;
      color:       #2563eb;
      font-weight: 600;
    }

     .tab-switch {
      display: inline-flex;
      background: #fff;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
    }

    .tab-link {
      padding: 6px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-decoration: none;
      transition: all 0.25s ease;
    }
    .tab-link.active {
      background: #0040a0;
      color: #fff;

    }

    .tab-link:hover:not(.active) {
      background: #0040a0;
      color: #fff;
    }
    .status-delivered  {
      background: #009207 !important;
      color: #ffffff !important;
    }
  </style>
@endsection

@section('content')
  <div class="page-header product-main service-list">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="page-title">
            <a href="javascript:void(0);">Report & Analytics </a>
          </div>
        </div>
        <div class="col-lg-6 d-flex justify-content-end">
          <div class="report-page">

            <div class="tab-switch">

              <a href="{{ route('backend.dashboard') }}"
                class="tab-link {{ request()->routeIs('backend.dashboard') ? 'active' : '' }}">
                Sales Amount
              </a>


              <a href="{{ route('backend.reports.sales-product') }}"
                class="tab-link {{ request()->routeIs('backend.reports.sales-product') ? 'active' : '' }}">
                Sales Product
              </a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <section>
    <div class="row">
      <div class="col-lg-12 home-screen">
        <div class="swiper myStatsSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="report-card">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="card-title">Total Sales</h6>
                    <h4 class="amount">₹{{ number_format($stats['total_sales'], 2) }}</h4>
                  </div>
                   <div class="icon green">₹</div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="report-card">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="card-title">Total Orders</h6>
                    <h4 class="amount">{{ $stats['total_orders'] }}</h4>
                  </div>
                  <div class="icon pink">
                    <i class='bx bxs-cart fs-2'></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="report-card">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="card-title">Delivered</h6>
                    <h4 class="amount">{{ $stats['delivered'] }}</h4>
                  </div>
                  <div class="icon orange">
                    <i class='bx bx-cube fs-2'></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="report-card">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="card-title">In Progress</h6>
                    <h4 class="amount">{{ $stats['in_progress'] }}</h4>
                  </div>
                  <div class="icon blue">
                    <i class='bx bxs-group fs-2'></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="report-card">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="card-title">Ava Sales</h6>
                    <h4 class="amount">1000</h4>
                  </div>
                  <div class="icon pink">
                    <i class="bx bxs-shopping-bag fs-2"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row home-page-screen">
      <div class="col-lg-12">
        <div class="graph-sec">
          <div class="card">
            <div class="card-header row d-flex align-items-center">
              <div class="col-lg-4">
                <h5 class="card-title">Sales Overview</h5>
              </div>
              <div class="col-lg-4">
                <div id="dateFilterSection" class="date-filter-section">
                  <div class="date-search-item">
                    <div class="d-flex gap-4">
                      <div class="calender-box-item position-relative">
                        <i class="bx bx-calendar-event"></i>
                        <input type="text" class="date-picker-input" id="fromDate1" placeholder="From date" />
                      </div>
                      <div class="calender-box-item position-relative">
                        <i class="bx bx-calendar-event"></i>
                        <input type="text" class="date-picker-input" id="toDate1" placeholder="To Date" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="tab-buttons">
                  <button class="tab-btn" data-period="weekly">Weekly</button>
                  <button class="tab-btn active" data-period="monthly">Monthly</button>
                  <button class="tab-btn" data-period="yearly">Yearly</button>
                </div>
              </div>
            </div>
            <div class="card-body" style="height: 280px; position: relative">
              <div id="highlightBadge" class="highlight-badge" style="display: none"></div>
              <canvas id="salesChart" height="350"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row home-page-table">
      <div class="col-lg-6">
        <div class="payment-methods-container">
          <div class="home-page-bar">
            <div class="card">
              <div class="card-header">
                <span class="card-title">Order Summary</span>
                <div class="dropdown-wrapper">
                  <button class="dropdown-btn" id="dropdownBtn" type="button">
                    <span id="dropdownLabel">Week</span>
                    <svg viewBox="0 0 10 6">
                      <path d="M0 0l5 6 5-6z" />
                    </svg>
                  </button>
                  <div class="order-dropdown-menu" id="dropdownMenu">
                    <div class="order-dropdown-item active" data-value="Week">Week</div>
                    <div class="order-dropdown-item" data-value="Month">Month</div>
                    <div class="order-dropdown-item" data-value="Year">Year</div>
                  </div>
                </div>
              </div>
              <div class="chart-wrapper">
                <div class="pie-container" style="position:relative; width:210px; height:210px; margin:0 auto;">
                  <canvas id="pieChart"></canvas>
                </div>
              </div>
              <div class="legend">
                @foreach($orderSummary['labels'] as $i => $label)
                  <div class="legend-item">
                    <div class="legend-dot" style="background: {{ $orderSummary['colors'][$i] }}"></div>
                    <span id="leg{{ $i }}">{{ $label }} {{ $orderSummary['data'][$i] }}%</span>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="payment-methods-container">
          <div class="home-page-bar">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Payment Methods</h5>
                    <select class="period-dropdown" id="periodSelect">
                        <option value="week">Week</option>
                        <option value="month">Month</option>
                        <option value="year">Year</option>
                    </select>
                </div>
                <div class="chart-wrapper">
                    <div id="paymentChartLoader"
                        style="display:none; position:absolute; inset:0;
                                background:rgba(255,255,255,0.7);
                                z-index:10; align-items:center; justify-content:center;">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                    <svg id="paymentChart" width="450" height="195" viewBox="0 0 350 200"></svg>
                </div>
                <div class="legend">
                    <div class="legend-item">
                        <span class="dot blue"></span>
                        UPI <span id="upiValue">—</span>%
                    </div>
                    <div class="legend-item">
                        <span class="dot green"></span>
                        Card <span id="cardValue">—</span>%
                    </div>
                    <div class="legend-item">
                        <span class="dot orange"></span>
                        Cash <span id="cashValue">—</span>%
                    </div>
                </div>
                <div id="paymentNoData"
                    style="display:none; text-align:center; color:#9ca3af; padding:20px 0; font-size:13px;">
                    No payment data for this period.
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row home-page-table" style="margin-top: 20px;">
      <div class="col-lg-6">
        <div class="container-fluid product-table-sec invoice-page">
          <div class="content-wrapper">
            <div class="container-fluid invoice-header">
              <div class="row align-items-center">
                <div class="col-md-4 col-12 mb-2 mb-md-0">
                  <div class="page-title"><span>Today Orders</span></div>
                </div>
                <div class="col-md-8 col-12">
                  <div class="row g-2 justify-content-md-end">
                    <div class="col-md-3 col-6 view-all">
                      <a href="{{ route('backend.order-management.index') }}">View All</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="table-responsive table-card">
                <table class="table align-middle mb-0 orders-table-container">
                  <thead class="custom-table-header">
                    <tr>
                      <th>Order ID</th>
                      <th>Quantity</th>
                      <th>Amount</th>
                      <th>Order Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @forelse($todayOrders as $order)
                      @php
                        $badges = [
                            'order_placed'     => 'status-order-placed',
                            'order_confirmed'  => 'status-order-confirmed',
                            'packed'           => 'status-packed',
                            'shipped'          => 'status-shipped',
                            'out_for_delivery' => 'status-out-for-delivery',
                            'delivered'        => 'status-delivered',
                            'cancelled'        => 'status-cancelled',
                            'refund_initiated' => 'status-refund-initiated',
                            'refunded'         => 'status-refunded',
                            'failed'           => 'status-failed',
                        ];
                        $class = $badges[$order->order_status] ?? 'status-order-placed';
                      @endphp
                      <tr>
                        <td>{{ $order->order_number }}</td>
                        <td>{{ $order->items->count() }} {{ $order->items->count() === 1 ? 'Item' : 'Items' }}</td>
                        <td>₹{{ number_format($order->total_amount, 2) }}</td>
                        <td>
                          <span class="badge {{ $class }}">
                            {{ ucfirst(str_replace('_', ' ', $order->order_status)) }}
                          </span>
                        </td>
                        <td>
                          <div class="action-btn-sec">
                            <a href="{{ route('backend.order-management.details', $order->id) }}" class="action-icon">
                              <i class="ri-eye-fill fs-5"></i>
                            </a>
                          </div>
                        </td>
                      </tr>
                    @empty
                      <tr>
                        <td colspan="5" class="text-center text-muted py-3">No orders today.</td>
                      </tr>
                    @endforelse
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="container-fluid product-table-sec invoice-page">
          <div class="content-wrapper">
            <div class="container-fluid invoice-header">
              <div class="row align-items-center">
                <div class="col-md-4 col-12 mb-2 mb-md-0">
                  <div class="page-title"><span>Top Customer</span></div>
                </div>
                <div class="col-md-8 col-12">
                  <div class="row g-2 justify-content-md-end">
                    <div class="col-md-3 col-6 view-all">
                      <a href="{{ route('backend.customers.index') }}">View All</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="table-responsive table-card">
                <table class="table align-middle mb-0 orders-table-container">
                  <thead class="custom-table-header">
                    <tr>
                      <th>Name</th>
                      <th>Phone Number</th>
                      <th>Orders</th>
                      <th>Revenue</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @forelse($topCustomers as $customer)
                      <tr>
                        <td>
                          <div>{{ $customer->user?->name }}</div>
                          <small class="text-muted">{{ $customer->addresses->first()?->district ?? 'N/A' }}</small>
                        </td>
                        <td>+91 {{ $customer->user?->mobile }}</td>
                        <td>{{ $customer->orders_count }}</td>
                        <td>₹{{ number_format($customer->orders_sum_total_amount ?? 0, 2) }}</td>
                        <td>
                          <div class="action-btn-sec">
                            <a href="{{ route('backend.customers.details', $customer->id) }}" class="action-icon">
                              <i class="ri-eye-fill fs-5"></i>
                            </a>
                          </div>
                        </td>
                      </tr>
                    @empty
                      <tr>
                        <td colspan="5" class="text-center text-muted py-3">No customers yet.</td>
                      </tr>
                    @endforelse
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('scripts')
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

  <script>
    // ── Swiper ────────────────────────────────────────────────────────────────
    new Swiper(".myStatsSwiper", {
      slidesPerView: "auto",
      spaceBetween: 15,
      freeMode: true,
    });

    // ── Flatpickr ─────────────────────────────────────────────────────────────
    flatpickr("#fromDate1", { dateFormat: "Y-m-d" });
    flatpickr("#toDate1",   { dateFormat: "Y-m-d" });

    // ── Global AJAX setup — forces Laravel to return JSON errors ──────────────
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN':      $('meta[name="csrf-token"]').attr('content'),
        'Accept':            'application/json',
        'X-Requested-With':  'XMLHttpRequest',
      }
    });

    // ── Route URLs ────────────────────────────────────────────────────────────
    var salesChartRouteUrl   = "{{ route('backend.dashboard.sales-chart') }}";
    var orderSummaryRouteUrl = "{{ route('backend.dashboard.order-summary') }}";
    var initialSalesData     = @json($salesData);
    var initialOrderSummary  = @json($orderSummary);

    // =========================================================================
    // SALES CHART — Chart.js Bar
    // =========================================================================
    let salesChart = null;

    function createSalesGradient(ctx, chartArea) {
      const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
      gradient.addColorStop(0, '#0040a0');
      gradient.addColorStop(1, '#0040a0');
      return gradient;
    }

    function updateSalesHighlightBadge(chart, index, value) {
      const badge = document.getElementById('highlightBadge');
      if (!badge) return;
      const meta = chart.getDatasetMeta(0);
      const bar  = meta.data[index];
      if (bar) {
        const formattedValue = value >= 1000 ? `${(value / 1000).toFixed(0)}k` : value;
        badge.textContent   = formattedValue;
        badge.style.display = 'block';
        badge.style.left    = bar.x - 25 + 'px';
        badge.style.top     = bar.y - 45 + 'px';
      }
    }

    function initSalesChart(labels, totals) {
      const salesCtx = document.getElementById('salesChart');
      if (!salesCtx) return;

      const ctx    = salesCtx.getContext('2d');
      const maxVal = Math.max(...totals) || 100;
      const maxIdx = totals.indexOf(maxVal);
      const maxY   = Math.ceil(maxVal * 1.3 / 50) * 50;
      const step   = Math.ceil(maxY / 6 / 10) * 10;

        if (salesChart) salesChart.destroy();

      salesChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels:   labels,
          datasets: [{
            data: totals,
            backgroundColor: function(context) {
              const chart = context.chart;
              const { ctx, chartArea } = chart;
              if (!chartArea) return '#3b82f6';
              return createSalesGradient(ctx, chartArea);
            },
            borderRadius:    { topLeft: 8, topRight: 8, bottomLeft: 0, bottomRight: 0 },
            borderSkipped:   false,
            barThickness:    'flex',
            maxBarThickness: 40,
          }],
        },
        options: {
          responsive:          true,
          maintainAspectRatio: false,
          animation:           { duration: 800, easing: 'easeInOutQuart' },
          plugins: {
            legend: { display: false },
            tooltip: {
              enabled: false,
              external: function(context) {
                let tooltipEl = document.querySelector('.chartjs-tooltip');
                if (!tooltipEl) {
                  tooltipEl           = document.createElement('div');
                  tooltipEl.className = 'chartjs-tooltip';
                  document.body.appendChild(tooltipEl);
                }
                const tooltip = context.tooltip;
                if (!tooltip || tooltip.opacity === 0) {
                  tooltipEl.style.opacity = 0;
                  return;
                }
                const value          = tooltip.dataPoints[0].raw;
                const formattedValue = value >= 1000
                  ? `₹${(value / 1000).toFixed(1)}K`
                  : `₹${value.toLocaleString()}`;
                tooltipEl.innerHTML = `
                  <div style="font-size:12px;color:#6b7280;">${tooltip.title[0]}</div>
                  <div style="font-size:15px;font-weight:700;color:#1f2937;">${formattedValue}</div>
                `;
                const rect          = context.chart.canvas.getBoundingClientRect();
                tooltipEl.style.opacity = 1;
                tooltipEl.style.left    = rect.left + window.pageXOffset + tooltip.caretX - 30 + 'px';
                tooltipEl.style.top     = rect.top  + window.pageYOffset + tooltip.caretY - 60 + 'px';
              }
            }
          },
          scales: {
            x: {
              grid:  { display: false, drawBorder: false },
              ticks: { color: '#6b7280', font: { size: 12, weight: '500' } },
            },
            y: {
              beginAtZero: true,
              max: maxY,
              ticks: {
                stepSize: step,
                callback: (value) => value >= 1000
                  ? `₹${(value / 1000).toFixed(0)}K`
                  : `₹${value}`,
                color: '#6b7280',
                font:  { size: 11 },
                padding: 8,
              },
              grid: { color: '#f3f4f6', drawBorder: false, lineWidth: 1 },
            }
          },
          onHover: (event, activeElements) => {
            event.native.target.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
          },
        },
        plugins: [{
          afterDatasetsDraw: function(chart) {
            updateSalesHighlightBadge(chart, maxIdx, maxVal);
          }
        }]
      });
    }

    function loadSalesChart(period, fromDate, toDate) {
      $.get(salesChartRouteUrl, {
        period:    period,
        date_from: fromDate || '',
        date_to:   toDate   || '',
      }, function(res) {
        const data = (res && res.data) ? res.data : res;
        if (!data || !Array.isArray(data.totals)) {
          console.error('Invalid sales data', res);
          return;
        }
        initSalesChart(data.labels, data.totals);
      }).fail(function(xhr) {
        console.error('Sales chart AJAX failed:', xhr.status, xhr.responseText);
      });
    }

    // =========================================================================
    // PIE CHART — Chart.js Doughnut
    // =========================================================================
    let pieChart     = null;
    let currentPeriod = 'Week';

    function initPieChart(labels, data, colors) {
      const canvas = document.getElementById('pieChart');
      if (!canvas) return;

      if (pieChart) {
        pieChart.destroy();
        pieChart = null;
      }

      pieChart = new Chart(canvas.getContext('2d'), {
        type: 'doughnut',
        data: {
          labels: labels,
          datasets: [{
            data:            data,
            backgroundColor: colors,
            borderColor:     '#fff',
            borderWidth:     3,
            hoverOffset:     8,
          }]
        },
        options: {
          responsive:          true,
          maintainAspectRatio: true,
          cutout:              '60%',
          animation:           { duration: 700, easing: 'easeInOutQuart' },
          plugins: {
            legend: { display: false },
            tooltip: {
              callbacks: {
                label: function(context) {
                  return ` ${context.label}: ${context.parsed}%`;
                }
              }
            }
          }
        }
      });
    }

    function loadPieChart(period) {
      $.get(orderSummaryRouteUrl, { period: period.toLowerCase() }, function(res) {

        // res is already parsed as object because of Accept: application/json header
        const labels = res.labels ?? null;
        const data   = res.data   ?? null;
        const colors = res.colors ?? null;

        if (!Array.isArray(labels) || !Array.isArray(data) || !Array.isArray(colors)) {
          console.error('Invalid order summary data:', res);
          return;
        }

        // Update legend
        labels.forEach(function(label, i) {
          const el = document.getElementById('leg' + i);
          if (el) el.textContent = label + ' ' + (data[i] ?? 0) + '%';
        });

        initPieChart(labels, data, colors);

      }).fail(function(xhr) {
        console.error('Order summary AJAX failed:', xhr.status, xhr.responseText);
      });
    }

    // =========================================================================
    // DOM READY
    // =========================================================================
    document.addEventListener('DOMContentLoaded', function () {

      // 1. Sales chart — initial load
      initSalesChart(initialSalesData.labels, initialSalesData.totals);
      loadSalesChart('monthly');

      // 2. Sales tab buttons
      document.querySelectorAll('.tab-btn[data-period]').forEach(function(btn) {
        btn.addEventListener('click', function() {
          document.querySelectorAll('.tab-btn[data-period]')
                  .forEach(b => b.classList.remove('active'));
          this.classList.add('active');

          const period      = this.getAttribute('data-period');
          const dateSection = document.getElementById('dateFilterSection');
          if (dateSection) {
            dateSection.classList.toggle('active', period === 'custom');
          }
          loadSalesChart(period);
        });
      });

      // 3. Date range filter
      function applyDateFilter() {
        const from = document.getElementById('fromDate1')?.value;
        const to   = document.getElementById('toDate1')?.value;
        if (from && to) loadSalesChart('custom', from, to);
      }
      document.getElementById('fromDate1')?.addEventListener('change', applyDateFilter);
      document.getElementById('toDate1')?.addEventListener('change', applyDateFilter);

      // 4. Pie chart — initial load
      loadPieChart('Week');


      // 5. Pie chart dropdown
      const dropBtn   = document.getElementById('dropdownBtn');
      const dropMenu  = document.getElementById('dropdownMenu');
      const dropLabel = document.getElementById('dropdownLabel');

      if (dropBtn && dropMenu) {
        dropBtn.addEventListener('click', function(e) {
          e.stopPropagation();
          dropMenu.classList.toggle('show');
          dropBtn.classList.toggle('open');
        });

        document.addEventListener('click', function() {
          dropMenu.classList.remove('show');
          dropBtn.classList.remove('open');
        });

        dropMenu.querySelectorAll('.order-dropdown-item').forEach(function(item) {
          item.addEventListener('click', function(e) {
            e.stopPropagation();
            const val = this.dataset.value;
            if (dropLabel) dropLabel.textContent = val;
            dropMenu.querySelectorAll('.order-dropdown-item')
                    .forEach(i => i.classList.remove('active'));
            this.classList.add('active');
            dropMenu.classList.remove('show');
            dropBtn.classList.remove('open');
            currentPeriod = val;
            loadPieChart(val);
          });
        });
      }

      // 6. Window resize
      window.addEventListener('resize', function() {
        if (salesChart) salesChart.resize();
      });

     
      // PAYMENT CHART — Dynamics

      var paymentMethodsUrl = "{{ route('backend.dashboard.payments.methods') }}";

      const paymentColors = {
          upi:  { main: '#0047AB', bg: '#E8F0FF' },
          card: { main: '#00AA00', bg: '#E6F7E6' },
          cash: { main: '#E89422', bg: '#FFF4E6' },
      };

      const paymentArcs = [
          { key: 'upi',  radius: 130, strokeWidth: 40 },
          { key: 'card', radius: 85,  strokeWidth: 35 },
          { key: 'cash', radius: 47,  strokeWidth: 28 },
      ];

      const paymentCenterX = 175;
      const paymentCenterY = 180;

      function paymentPolarToCartesian(cx, cy, radius, angleInDegrees) {
          const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
          return {
              x: cx + radius * Math.cos(angleInRadians),
              y: cy + radius * Math.sin(angleInRadians),
          };
      }

      function createPaymentArc(cx, cy, radius, startAngle, endAngle) {
          const start       = paymentPolarToCartesian(cx, cy, radius, endAngle);
          const end         = paymentPolarToCartesian(cx, cy, radius, startAngle);
          const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
          return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
      }

      function renderPaymentChart(data) {
          const svg      = document.getElementById('paymentChart');
          const noData   = document.getElementById('paymentNoData');
          if (!svg) return;

          svg.innerHTML = '';

          // Check if all zero
          const allZero = data.upi === 0 && data.card === 0 && data.cash === 0;
          if (noData) noData.style.display = allZero ? 'block' : 'none';
          svg.style.display = allZero ? 'none' : '';

          if (allZero) return;

          paymentArcs.forEach((arc) => {
              const value      = data[arc.key] ?? 0;
              const valueAngle = (value / 100) * 180;
              const color      = paymentColors[arc.key];

              // Background arc
              const bgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
              bgPath.setAttribute('d', createPaymentArc(paymentCenterX, paymentCenterY, arc.radius, -90, 90));
              bgPath.setAttribute('fill', 'none');
              bgPath.setAttribute('stroke', color.bg);
              bgPath.setAttribute('stroke-width', arc.strokeWidth);
              bgPath.setAttribute('stroke-linecap', 'round');
              svg.appendChild(bgPath);

              // Value arc
              const endAngle  = -90 + valueAngle;
              const valuePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
              valuePath.setAttribute('d',
                  valueAngle > 0
                      ? createPaymentArc(paymentCenterX, paymentCenterY, arc.radius, -90, endAngle)
                      : ''
              );
              valuePath.setAttribute('fill', 'none');
              valuePath.setAttribute('stroke', color.main);
              valuePath.setAttribute('stroke-width', arc.strokeWidth);
              valuePath.setAttribute('stroke-linecap', 'round');
              svg.appendChild(valuePath);

              // Percentage label on arc
              if (value > 5) {
                  const midAngle = -90 + (valueAngle / 2);
                  const textPos  = paymentPolarToCartesian(paymentCenterX, paymentCenterY, arc.radius, midAngle);
                  const text     = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                  text.setAttribute('x', textPos.x);
                  text.setAttribute('y', textPos.y);
                  text.setAttribute('fill', 'white');
                  text.setAttribute('font-size', '11');
                  text.setAttribute('font-weight', 'bold');
                  text.setAttribute('text-anchor', 'middle');
                  text.setAttribute('dominant-baseline', 'middle');
                  text.textContent = value + '%';
                  svg.appendChild(text);
              }
          });

          // Update legend
          ['upi', 'card', 'cash'].forEach(key => {
              const el = document.getElementById(key + 'Value');
              if (el) el.textContent = data[key] ?? 0;
          });
      }

      function loadPaymentChart(period) {
          const loader = document.getElementById('paymentChartLoader');
          if (loader) loader.style.display = 'flex';

          $.get(paymentMethodsUrl, { period: period }, function(res) {
              renderPaymentChart(res);
          })
          .fail(function(xhr) {
              console.error('Payment methods failed:', xhr.status, xhr.responseText);
          })
          .always(function() {
              if (loader) loader.style.display = 'none';
          });
      }

      // ── Init ──────────────────────────────────────────────────────────
      document.addEventListener('DOMContentLoaded', function() {

          // Initial load
          loadPaymentChart('week');

          // Period dropdown change
          const periodSelect = document.getElementById('periodSelect');
          if (periodSelect) {
              periodSelect.addEventListener('change', function() {
                  loadPaymentChart(this.value);
              });
          }
      });

    });
  </script>
@endsection