@extends('template.layouts.template-base')
@section('title', 'Report & Analytics')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
  <style>
    .page-content {
      background-color: #F0F4F8 !important;
      padding: 80px 10px;
    }

    .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;
    }

    #dateFilterSection.date-filter-section {
      display: block !important;
    }

    #dateFilterSection .filter-btn {
      height: 27px !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>

  <div class="report-page-content sales-product">
    <div class="container-fluid ">
      <div class="row my-4">
        {{-- Product Sales Report --}}
        <div class="col-lg-8">
            <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">Product Sales Report</h5>
                        </div>
                        <div class="col-lg-8 d-flex justify-content-end align-items-center gap-3">
                            <div class="calender-box-item position-relative">
                                <i class="bx bx-calendar-event"></i>
                                <input type="text" class="date-picker-input"
                                      id="productSalesFrom" 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="productSalesTo" placeholder="To date" />
                            </div>
                            <button class="filter-btn" id="productSalesFilterBtn">
                                <span>Filter</span>
                                <span><i class="ri-equalizer-line"></i></span>
                            </button>
                        </div>
                    </div>
                    <div class="card-body" style="position:relative; min-height:300px;">
                        {{-- Loader --}}
                        <div id="productSalesLoader"
                            style="display:none; position:absolute; inset:0;
                                    background:rgba(255,255,255,0.8); z-index:10;
                                    align-items:center; justify-content:center;">
                            <div class="spinner-border text-primary"></div>
                        </div>
                        {{-- No data --}}
                        <div id="productSalesNoData"
                            style="display:none; text-align:center;
                                    color:#9ca3af; padding:60px 0; font-size:14px;">
                            No sales data found.
                        </div>
                        {{-- Chart --}}
                        <div style="height:300px;">
                            <canvas id="productSalesChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Top 3 Categories --}}
        <div class="col-lg-4">
            <div class="payment-methods-container">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Top 3 Categories</h5>
                        <select class="period-dropdown" id="categoryPeriodSelect">
                            <option value="week">Week</option>
                            <option value="month">Month</option>
                            <option value="year">Year</option>
                        </select>
                    </div>
                    <div class="card-body" style="position:relative;">
                        {{-- Loader --}}
                        <div id="categoryChartLoader"
                            style="display:none; position:absolute; inset:0;
                                    background:rgba(255,255,255,0.8); z-index:10;
                                    align-items:center; justify-content:center;">
                            <div class="spinner-border text-primary"></div>
                        </div>
                        <div class="chart-wrapper">
                            <svg id="categoryChart"
                                width="350" height="195"
                                viewBox="0 0 350 200"></svg>
                        </div>
                        {{-- Legend — dynamically rendered --}}
                        <div class="legend-container" id="categoryLegend"></div>
                        {{-- No data --}}
                        <div id="categoryNoData"
                            style="display:none; text-align:center;
                                    color:#9ca3af; padding:20px 0; font-size:13px;">
                            No category data for this period.
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <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-6 col-12 mb-2 mb-md-0">
            <div class="page-title"><span>Top Selling Products</span></div>
          </div>
          <div class="col-md-12 col-12">
            <div class="row g-2 justify-content-md-end">
              <div class="col-md-1 col-6 view-all">
                <a href="{{ route('backend.products.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>Products</th>
                <th>Price</th>
                <th>Category</th>
                <th>Stock</th>
                <th>Total Revenue</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($topSellingProducts as $product)
                @php
                  $firstPack  = $product->productPackPrice->first();
                  $firstImage = $firstPack?->ProductPackImages->first();
                @endphp
                <tr>
                  <td>
                    <img src="{{ $firstImage?->image_path ? asset($firstImage->image_path) : asset('assets/template/images/cate-img.png') }}"
                          alt="{{ $product->product_name_en }}" class="serv-img" />
                    {{ $product->product_name_en }}
                  </td>
                  <td>{{ $firstPack ? '₹'.number_format($firstPack->selling_price, 2) : 'N/A' }}</td>
                  <td>{{ $product->categories->pluck('category_name_en')->implode(', ') ?: 'N/A' }}</td>
                  <td>{{ $product->productPackPrice->first()?->productPackInventory?->stock_level ?? '' }}</td>
                  <td>₹{{ number_format($product->order_items_sum_total_price ?? 0, 2) }}</td>
                  <td> 
                    @if($product->status == 1)
                        <span class="status-badge active">Active</span>
                    @else
                        <span class="status-badge inactive">Inactive</span>
                    @endif
                  </td>
                  <td>
                    <div class="action-btn-sec">
                      <a href="{{ route('backend.products.show', $product->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 sales data yet.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('scripts')
  <script>
    // Open filter modal
    function openFilterModal() {
      document.getElementById("filterModalOverlay").classList.add("active");
    }

    // Close filter modal
    function closeFilterModal() {
      document
        .getElementById("filterModalOverlay")
        .classList.remove("active");
    }

    // Close modal when clicking on overlay
    function closeFilterOnOverlay(event) {
      if (event.target === document.getElementById("filterModalOverlay")) {
        closeFilterModal();
      }
    }

    // Switch tabs
    function switchTab(event, tabName) {
      const tabs = document.querySelectorAll(".tab");
      const contents = document.querySelectorAll(".tab-content");

      tabs.forEach((tab) => tab.classList.remove("active"));
      contents.forEach((content) => content.classList.remove("active"));

      event.target.classList.add("active");
      document.getElementById(tabName).classList.add("active");
    }


    // Clear all filters
    function clearFilters() {
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach((cb) => (cb.checked = false));

      const radios = document.querySelectorAll('input[type="radio"]');
      radios.forEach((radio) => (radio.checked = false));

      document.getElementById("from-date").value = "";
      document.getElementById("to-date").value = "";

      console.log("Filters cleared");
    }

    // Submit filters
    function submitFilters() {
      const filters = {
        stockStatus: Array.from(
          document.querySelectorAll("#stock-status input:checked"),
        ).map((cb) => cb.id),
        productStatus: Array.from(
          document.querySelectorAll("#product-status input:checked"),
        ).map((cb) => cb.id),
        weight: Array.from(
          document.querySelectorAll("#weight input:checked"),
        ).map((cb) => cb.id),
        price:
          document.querySelector('input[name="price"]:checked')?.id || null,
        soldStatus: Array.from(
          document.querySelectorAll("#sold-status input:checked"),
        ).map((cb) => cb.id),
        fromDate: document.getElementById("from-date").value,
        toDate: document.getElementById("to-date").value,
      };

      console.log("Filters submitted:", filters);
      closeFilterModal();
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  <script>
    document.querySelectorAll(".toggle-link").forEach((link) => {
      link.addEventListener("click", function (e) {
        e.preventDefault();

        document
          .querySelectorAll(".toggle-link")
          .forEach((l) => l.classList.remove("active"));
        this.classList.add("active");

        document
          .querySelectorAll(".content")
          .forEach((c) => c.classList.remove("active"));
        document
          .querySelector("." + this.dataset.target)
          .classList.add("active");
      });
    });
  </script>
  <script>
    // ============================================
    // PRODUCT SALES REPORT — Chart.js Bar
    // ============================================
    var productSalesUrl   = "{{ route('backend.reports.product-sales') }}";
    var topCategoriesUrl  = "{{ route('backend.reports.top-categories') }}";

    let productSalesChart = null;

    function loadProductSalesChart(from, to) {
        const loader  = document.getElementById('productSalesLoader');
        const noData  = document.getElementById('productSalesNoData');
        const canvas  = document.getElementById('productSalesChart');
        if (loader) loader.style.display = 'flex';

        $.get(productSalesUrl, { date_from: from || '', date_to: to || '' }, function(res) {

            if (!res.labels || !res.labels.length) {
                if (noData)  noData.style.display  = 'block';
                if (canvas)  canvas.style.display  = 'none';
                return;
            }

            if (noData)  noData.style.display  = 'none';
            if (canvas)  canvas.style.display  = '';

            if (productSalesChart) {
                productSalesChart.destroy();
            }

            const maxY   = Math.ceil(res.max * 1.3 / 1000) * 1000 || 1000;
            const step   = Math.ceil(maxY / 6 / 1000) * 1000;

            productSalesChart = new Chart(canvas.getContext('2d'), {
                type: 'bar',
                data: {
                    labels:   res.labels,
                    datasets: [{
                        data:            res.totals,
                        backgroundColor: '#0040a0',
                        borderRadius:    { topLeft: 8, topRight: 8 },
                        borderSkipped:   false,
                        maxBarThickness: 40,
                    }]
                },
                options: {
                    responsive:          true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => '₹' + Number(ctx.raw).toLocaleString('en-IN')
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid:  { display: false },
                            ticks: { color: '#6b7280', font: { size: 11 } }
                        },
                        y: {
                            beginAtZero: true,
                            max: maxY,
                            ticks: {
                                stepSize: step,
                                callback: v => v >= 1000
                                    ? '₹' + (v / 1000).toFixed(0) + 'K'
                                    : '₹' + v,
                                color: '#6b7280',
                            },
                            grid: { color: '#f3f4f6' }
                        }
                    }
                }
            });

        })
        .fail(function(xhr) {
            console.error('Product sales chart failed:', xhr.status, xhr.responseText);
        })
        .always(function() {
            if (loader) loader.style.display = 'none';
        });
    }

    // ============================================
    // TOP 3 CATEGORIES — SVG Arc Chart
    // ============================================
    const categoryCenterX = 175;
    const categoryCenterY = 180;

    const categoryArcConfig = [
        { radius: 130, strokeWidth: 40 },
        { radius: 85,  strokeWidth: 35 },
        { radius: 47,  strokeWidth: 28 },
    ];

    function categoryPolarToCartesian(cx, cy, radius, angleDeg) {
        const rad = ((angleDeg - 90) * Math.PI) / 180;
        return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
    }

    function createCategoryArc(cx, cy, radius, startAngle, endAngle) {
        const start        = categoryPolarToCartesian(cx, cy, radius, endAngle);
        const end          = categoryPolarToCartesian(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 renderCategoryChart(categories) {
        const svg    = document.getElementById('categoryChart');
        const legend = document.getElementById('categoryLegend');
        const noData = document.getElementById('categoryNoData');
        if (!svg) return;

        svg.innerHTML = '';

        if (!categories || !categories.length) {
            if (noData)  noData.style.display  = 'block';
            if (svg)     svg.style.display     = 'none';
            if (legend)  legend.innerHTML      = '';
            return;
        }

        if (noData)  noData.style.display  = 'none';
        if (svg)     svg.style.display     = '';

        categories.forEach((cat, i) => {
            const arcCfg     = categoryArcConfig[i];
            if (!arcCfg) return;

            const valueAngle = (cat.percent / 100) * 180;
            const color      = cat.color;

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

            // Value arc
            if (valueAngle > 0) {
                const valPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                valPath.setAttribute('d',
                    createCategoryArc(categoryCenterX, categoryCenterY,
                        arcCfg.radius, -90, -90 + valueAngle));
                valPath.setAttribute('fill',         'none');
                valPath.setAttribute('stroke',       color.main);
                valPath.setAttribute('stroke-width', arcCfg.strokeWidth);
                valPath.setAttribute('stroke-linecap', 'round');
                svg.appendChild(valPath);
            }

            // Label on arc
            if (cat.percent > 5) {
                const midAngle = -90 + valueAngle / 2;
                const pos      = categoryPolarToCartesian(
                    categoryCenterX, categoryCenterY, arcCfg.radius, midAngle);
                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text.setAttribute('x',                  pos.x);
                text.setAttribute('y',                  pos.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 = cat.percent + '%';
                svg.appendChild(text);
            }
        });

        // Update legend dynamically
        if (legend) {
            legend.innerHTML = categories.map((cat, i) => `
                <div class="legend-item">
                    <span class="dot" style="background:${cat.color.main};
                        width:10px; height:10px; border-radius:50%;
                        display:inline-block; margin-right:6px;"></span>
                    ${cat.label}
                    <span style="margin-left:auto; font-weight:600;">
                        ${cat.percent}%
                    </span>
                </div>
            `).join('');
        }
    }

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

        $.get(topCategoriesUrl, { period: period }, function(res) {
            renderCategoryChart(res);
        })
        .fail(function(xhr) {
            console.error('Top categories failed:', xhr.status, xhr.responseText);
        })
        .always(function() {
            if (loader) loader.style.display = 'none';
        });
    }

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

        // Product Sales — initial load (no date filter)
        loadProductSalesChart();

        // Product Sales — date filter button
        flatpickr('#productSalesFrom', { dateFormat: 'Y-m-d' });
        flatpickr('#productSalesTo',   { dateFormat: 'Y-m-d' });

        document.getElementById('productSalesFilterBtn')
            ?.addEventListener('click', function () {
                const from = document.getElementById('productSalesFrom').value;
                const to   = document.getElementById('productSalesTo').value;
                if (!from || !to) {
                    alert('Please select both From and To dates.');
                    return;
                }
                loadProductSalesChart(from, to);
            });

        // Top Categories — initial load
        loadTopCategories('week');

        // Top Categories — period change
        document.getElementById('categoryPeriodSelect')
            ?.addEventListener('change', function () {
                loadTopCategories(this.value);
            });
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script>
    // Initialize date pickers for all tabs
    flatpickr("#fromDate1", { dateFormat: "M d, Y" });
    flatpickr("#toDate1", { dateFormat: "M d, Y" });
    flatpickr("#fromDate2", { dateFormat: "M d, Y" });
    flatpickr("#toDate2", { dateFormat: "M d, Y" });
    flatpickr("#fromDate3", { dateFormat: "M d, Y" });
    flatpickr("#toDate3", { dateFormat: "M d, Y" });
    flatpickr("#fromDate4", { dateFormat: "M d, Y" });
    flatpickr("#toDate4", { dateFormat: "M d, Y" });
  </script>
  <script>
    function switchTab(tabName) {
      const tabs = document.querySelectorAll('.tab');
      const contents = document.querySelectorAll('.tab-content');

      tabs.forEach(tab => tab.classList.remove('active'));
      contents.forEach(content => content.classList.remove('active'));

      event.target.classList.add('active');
      document.getElementById(tabName).classList.add('active');
    }
  </script>
@endsection