@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;
    }
  </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.report.index') }}"
                class="tab-link {{ request()->routeIs('backend.report.index') ? 'active' : '' }}">
                Sales Amount
              </a>


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

          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="report-page-content">
    <div class="container-fluid ">
      <h5 class="sales-title">Sales Amount Report</h5>

      <div class="row g-2">
        <!-- Total Sales -->
        <div class="col-lg-3 col-md-6">
          <div class="report-card">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <h6 class="card-title">Total Sales</h6>
                <h4 class="amount">₹84,587.30</h4>
              </div>
              <div class="icon green">₹</div>
            </div>
            <p class="growth percentage-item mt-2">
              +35% <span>vs All Month</span>
            </p>
          </div>
        </div>

        <!-- Total Orders -->
        <div class="col-lg-3 col-md-6">
          <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">1000</h4>
              </div>
              <div class="icon orange">
                <i class='bx bxs-cart fs-3'></i>

              </div>
            </div>
            <p class="growth percentage-item mt-2">
              +35% <span>vs All Month</span>
            </p>
          </div>
        </div>

        <!-- GST Collected -->
        <div class="col-lg-3 col-md-6">
          <div class="report-card">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h6 class="card-title">GST Collected</h6>
                <h4 class="amount">₹1000</h4>
              </div>
              <div class="icon blue">G</div>
            </div>
            <p class="growth percentage-item mt-2">
              +35% <span>vs All Month</span>
            </p>
          </div>
        </div>

        <!-- Avg Sales -->
        <div class="col-lg-3 col-md-6">
          <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">%</div>
            </div>
            <p class="text-muted mt-2">Per Month</p>
          </div>
        </div>
      </div>
      <div class="row my-4">
        <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">Sales Amount Analysis</h5>
                </div>

                <!-- Date Filter Section (Shows only for Weekly) -->
                <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="toDate2" placeholder="To Date" />
                        </div>
                      </div>

                    </div>

                    <!-- <div class="date-inputs">
                  <div class="date-group">
                    <label for="fromDate">From Date</label>
                    <input type="date" id="fromDate" />
                  </div>
                  <div class="date-group">
                    <label for="toDate">To Date</label>
                    <input type="date" id="toDate" />
                  </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: 300px; position: relative">
                <div id="highlightBadge" class="highlight-badge" style="display: none"></div>
                <canvas id="salesChart" height="350"></canvas>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="payment-methods-container">
            <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="card-body">
                <div class="chart-wrapper">
                  <svg id="paymentChart" width="450" height="195" viewBox="0 0 350 200"></svg>
                </div>

                <div class="legend-container">
                  <div class="legend-item">
                    <span class="dot blue"></span> UPI <span id="upiValue">60</span>%
                  </div>
                  <div class="legend-item">
                    <span class="dot green"></span> Card <span id="cardValue">35</span>%
                  </div>
                  <div class="legend-item">
                    <span class="dot orange"></span> Cash
                    <span id="cashValue">10</span>%
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid product-table-sec customer-page">
    <div class="content-wrapper">
      <div class="filter-section ">
        <div class="col">
          <div class="page-title">
            Top 5 Invoices
          </div>
        </div>

        <a href="javascript:void(0);" class="report-view">View All </a>

      </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 scope="col">SI.No</th>
                <th scope="col">Invoice ID</th>
                <th scope="col">Customer Name</th>
                <th scope="col">Order Date</th>
                <th scope="col">Method</th>
                <th scope="col">Total</th>
                <th scope="col">Status</th>
              </tr>
            </thead>
            <tbody id="categoryList">
              <tr>
                <td>01</td>
                <td>#INV2540</td>
                <td>
                  <div>Parthiban</div>
                  <small class="text-muted">+91 09876 54321</small>
                </td>
                <td>Jan 26,2026</td>
                <td>UPI</td>
                <td>₹0000</td>
                <td><span class="status-badge">Paid</span></td>
              </tr>
              <tr>
                <td>02</td>
                <td>#INV2540</td>
                <td>
                  <div>Parthiban</div>
                  <small class="text-muted">+91 09876 54321</small>
                </td>
                <td>Jan 26,2026</td>
                <td>UPI</td>
                <td>₹0000</td>
                <td><span class="status-badge">Paid</span></td>
              </tr>
              <tr>
                <td>03</td>
                <td>#INV2540</td>
                <td>
                  <div>Parthiban</div>
                  <small class="text-muted">+91 09876 54321</small>
                </td>
                <td>Jan 26,2026</td>
                <td>UPI</td>
                <td>₹0000</td>
                <td><span class="status-badge">Paid</span></td>
              </tr>
              <tr>
                <td>04</td>
                <td>#INV2540</td>
                <td>
                  <div>Parthiban</div>
                  <small class="text-muted">+91 09876 54321</small>
                </td>
                <td>Jan 26,2026</td>
                <td>UPI</td>
                <td>₹0000</td>
                <td><span class="status-badge">Paid</span></td>
              </tr>
              <tr>
                <td>05</td>
                <td>#INV2540</td>
                <td>
                  <div>Parthiban</div>
                  <small class="text-muted">+91 09876 54321</small>
                </td>
                <td>Jan 26,2026</td>
                <td>UPI</td>
                <td>₹0000</td>
                <td><span class="status-badge">Paid</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

@endsection

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

  <script>
    // ============================================
    // SALES ANALYTICS CHART
    // ============================================

    // Data for different periods

    const salesChartData = {
      weekly: {
        labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        data: [50, 50, 50, 50, 50, 120, 0],

        maxY: 150,
        stepSize: 25,
        unit: "K",
      },
      monthly: {
        labels: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        data: [
          50, 50, 50, 50, 50, 50, 50, 50, 50,
          50, 50, 125,
        ],
        maxY: 150,
        stepSize: 25,
        unit: "K",
      },
      yearly: {
        labels: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
        data: [150, 150, 150, 150, 150, 150, 150],
        maxY: 800,
        stepSize: 100,
        unit: "K",
      },
    };

    let currentSalesPeriod = "monthly";
    let salesChart = null;

    // Set default date values (last 7 days)
    function setDefaultSalesDates() {
      const today = new Date();
      const lastWeek = new Date(today);
      lastWeek.setDate(today.getDate() - 6);

      const toDateElement = document.getElementById("toDate");
      const fromDateElement = document.getElementById("fromDate");

      if (toDateElement) toDateElement.valueAsDate = today;
      if (fromDateElement) fromDateElement.valueAsDate = lastWeek;
    }

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

    // Initialize Sales Chart
    function initSalesChart(period = "monthly") {
      const salesCtx = document.getElementById("salesChart");
      if (!salesCtx) return;

      const ctx = salesCtx.getContext("2d");
      const config = salesChartData[period];
      const maxValue = Math.max(...config.data);
      const maxIndex = config.data.indexOf(maxValue);

      // Destroy existing chart
      if (salesChart) {
        salesChart.destroy();
      }

      salesChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: config.labels,
          datasets: [
            {
              data: config.data,
              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) {
                // Custom tooltip
                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(0)}K`
                    : `₹${value}`;

                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: config.maxY,
              ticks: {
                stepSize: config.stepSize,
                callback: (value) => `${value}${config.unit}`,
                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, maxIndex, maxValue);
            },
          },
        ],
      });
    }

    // Update highlight badge position
    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 x = bar.x;
        const y = bar.y;
        const formattedValue =
          value >= 1000 ? `${(value / 1000).toFixed(0)}k` : value;

        badge.textContent = formattedValue;
        badge.style.display = "block";
        badge.style.left = x - 25 + "px";
        badge.style.top = y - 45 + "px";
      }
    }

    // Toggle date filter section
    function toggleSalesDateFilter(show) {
      const dateSection = document.getElementById("dateFilterSection");
      if (!dateSection) return;

      if (show) {
        dateSection.classList.add("active");
      } else {
        dateSection.classList.remove("active");
      }
    }

    // Apply date filter
    function applySalesDateFilter() {
      const fromDate = document.getElementById("fromDate");
      const toDate = document.getElementById("toDate");

      if (!fromDate || !toDate) return;

      const fromDateValue = fromDate.value;
      const toDateValue = toDate.value;

      if (!fromDateValue || !toDateValue) {
        alert("Please select both From Date and To Date");
        return;
      }

      if (new Date(fromDateValue) > new Date(toDateValue)) {
        alert("From Date cannot be later than To Date");
        return;
      }

      console.log("Filtering data from", fromDateValue, "to", toDateValue);
      // Here you would typically fetch or filter data based on the date range
      // For now, we'll just refresh the chart with existing data
      initSalesChart("weekly");
    }

    // Initialize Sales Chart functionality
    function initSalesChartFunctionality() {
      // Tab button functionality
      document.querySelectorAll(".tab-btn").forEach((btn) => {
        btn.addEventListener("click", function () {
          // Remove active class from all buttons
          document
            .querySelectorAll(".tab-btn")
            .forEach((b) => b.classList.remove("active"));

          // Add active class to clicked button
          this.classList.add("active");

          // Get period and update chart
          const period = this.getAttribute("data-period");
          currentSalesPeriod = period;

          // Show/hide date filter based on period
          toggleSalesDateFilter(period === "weekly");

          initSalesChart(period);
        });
      });

      // Initialize chart
      setDefaultSalesDates();
      initSalesChart(currentSalesPeriod);

      // Handle window resize
      window.addEventListener("resize", function () {
        if (salesChart) {
          salesChart.resize();
        }
      });
    }


    // ============================================
    // PAYMENT CHART
    // ============================================

    // Chart configuration
    const paymentChartData = {
      week: { upi: 60, card: 35, cash: 10 },
      month: { upi: 55, card: 30, cash: 15 },
      year: { upi: 65, card: 25, cash: 10 },
    };

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

    // Arc configuration (outer to inner)
    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;

    // Helper: Convert polar to cartesian
    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),
      };
    }

    // Helper: Create SVG arc path
    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}`;
    }

    // Helper: Get text position on arc
    function getPaymentTextPosition(radius, percentage) {
      const angle = -90 + ((percentage / 100) * 180) / 2;
      return paymentPolarToCartesian(paymentCenterX, paymentCenterY, radius, angle);
    }

    // Render the payment chart
    function renderPaymentChart(data) {
      const svg = document.getElementById("paymentChart");
      if (!svg) return;

      svg.innerHTML = "";

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

        // Background arc (full semi-circle)
        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 (percentage filled)
        const valuePath = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "path",
        );
        valuePath.setAttribute(
          "d",
          createPaymentArc(paymentCenterX, paymentCenterY, arc.radius, -90, -90 + valueAngle),
        );
        valuePath.setAttribute("fill", "none");
        valuePath.setAttribute("stroke", color.main);
        valuePath.setAttribute("stroke-width", arc.strokeWidth);
        valuePath.setAttribute("stroke-linecap", "round");
        valuePath.classList.add("arc-value");
        svg.appendChild(valuePath);
      });

      // Add percentage label on outer arc
      const textPos = getPaymentTextPosition(130, data.upi);
      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", "18");
      text.setAttribute("font-weight", "bold");
      text.setAttribute("text-anchor", "middle");
      text.setAttribute("dominant-baseline", "middle");
      text.textContent = data.upi + "%";
      svg.appendChild(text);

      // Update legend values
      const upiValueEl = document.getElementById("upiValue");
      const cardValueEl = document.getElementById("cardValue");
      const cashValueEl = document.getElementById("cashValue");

      if (upiValueEl) upiValueEl.textContent = data.upi;
      if (cardValueEl) cardValueEl.textContent = data.card;
      if (cashValueEl) cashValueEl.textContent = data.cash;
    }

    // Initialize Payment Chart functionality
    function initPaymentChartFunctionality() {
      renderPaymentChart(paymentChartData.week);

      // Period change handler
      const periodSelect = document.getElementById("periodSelect");
      if (periodSelect) {
        periodSelect.addEventListener("change", function (e) {
          renderPaymentChart(paymentChartData[e.target.value]);
        });
      }
    }


    // ============================================
    // INITIALIZE ALL CHARTS ON PAGE LOAD
    // ============================================

    document.addEventListener("DOMContentLoaded", function () {
      // Initialize Sales Chart
      initSalesChartFunctionality();

      // Initialize Payment Chart
      initPaymentChartFunctionality();
    });
  </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>
    // 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");
    }

    // Initialize Flatpickr for date inputs
    flatpickr("#from-date", {
      dateFormat: "d M, Y",
      position: "below",
      defaultDate: new Date(),
      onChange: function (selectedDates, dateStr, instance) {
        console.log("From Date selected:", dateStr);
      },
    });

    flatpickr("#to-date", {
      dateFormat: "d M, Y",
      position: "auto",
      defaultDate: new Date(),
      onChange: function (selectedDates, dateStr, instance) {
        console.log("To Date selected:", dateStr);
      },
    });

    // 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>
@endsection