<x-app-layout>
    <style>
    .sub_menu_dropdown{
    display: block;
}
        .Dashboard .SideBar ul.navigation {
            height: 100vh;
            overflow-y: scroll;
            width: 100%;
            padding: 0 20px 100px 20px;
        }
        .sales_analytics_section .right_section .sales_graph_container h5 
        {
            padding:10px 30px 0 0;
        }

            .sales_analytics_section .right_section .sales_graph_container {
                background-color: #fff;
                padding: 20px;
                border-radius: 10px;
                height: auto;
                box-sizing: border-box;
                box-sizing: border-box;
            }
                .sales_analytics_section .right_section .sales_graph_container .graph_box {
                    height: 100%;
                }
                .filter_box,.filter_box1{
           border: 1px solid #d9dbde !important;
           line-height:25px;
           margin-right:10px;
           height:30px;
           padding:0px 10px;
           font-size:12px;
           color:#696d61;
           border-radius:5px;
           cursor:pointer;
        }
        
        .filter_box1{
            display:none;
            
        }
        .filter_box1:hover{
            color:white;
            background-color:#75b1eb;
            cursor:pointer;
        }
        .google-map {
  padding-bottom: 50%;
  position: relative;
}

.google-map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.header_left_side {
    padding-right: 25px;
}
.card{
    cursor:pointer;
}

  .active1{
           border: 1px solid blue !important;
       }
        .analytics_section .top .date_box  {
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid #4d4d4d;
    padding: 0px 5px;
    border-radius: 2px;
    height: 24px;
    line-height: 20px;
}
.analytics_section .top .date_box input{
    cursor: pointer;
    
}
    </style>
	<header>
		<div class="d-flex justify-content-between header_box">
			<h3>Analytics<span class="text_18 grey">/Product</span></h3>
			<div class="header_left_side">
				<span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36">
						<path class="clr-i-outline clr-i-outline-path-1" fill="currentColor"
							d="M32.51 27.83A14.4 14.4 0 0 1 30 24.9a12.63 12.63 0 0 1-1.35-4.81v-4.94A10.81 10.81 0 0 0 19.21 4.4V3.11a1.33 1.33 0 1 0-2.67 0v1.31a10.81 10.81 0 0 0-9.33 10.73v4.94a12.63 12.63 0 0 1-1.35 4.81a14.4 14.4 0 0 1-2.47 2.93a1 1 0 0 0-.34.75v1.36a1 1 0 0 0 1 1h27.8a1 1 0 0 0 1-1v-1.36a1 1 0 0 0-.34-.75M5.13 28.94a16.17 16.17 0 0 0 2.44-3a14.24 14.24 0 0 0 1.65-5.85v-4.94a8.74 8.74 0 1 1 17.47 0v4.94a14.24 14.24 0 0 0 1.65 5.85a16.17 16.17 0 0 0 2.44 3Z" />
						<path class="clr-i-outline clr-i-outline-path-2" fill="currentColor"
							d="M18 34.28A2.67 2.67 0 0 0 20.58 32h-5.26A2.67 2.67 0 0 0 18 34.28" />
						<path fill="none" d="M0 0h36v36H0z" />
					</svg>
				</span>
				<span class="second"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
						<path fill="currentColor"
							d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1" />
					</svg> Download</span>
			</div>
		</div>
	</header>
	<div class="user_container">
		<div class="analytics_section">
			<div class="d-flex justify-content-between mb-4 flex-wrap">
				<div class="d-flex top">
					<h3 class="text_14 black d-flex b_500">Sales Analytics
					</h3>
					<span class="date_box">
						<form action="">
							<input type="date">
						</form>
					</span>
				</div>
			 <div class="d-flex  closeDropdown">
					<div class="filter_box1" onclick="optionClick('Day')">Day</div>
					<div class="filter_box1" onclick="optionClick('Month')">Month </div>
					<div class="filter_box1" onclick="optionClick('Year')">Year </div>
					<div class="filter_box filt" onclick="handleClick()"> <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"
							viewBox="0 0 24 24">
							<path fill="currentColor"
								d="M14 12v7.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0l-2.01-2.01a.989.989 0 0 1-.29-.83V12h-.03L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L14.03 12z" />
						</svg></div>
					<div class="filter_box" id="selectedOption">Month </div>
				</div>
			</div>


			<div class="row sales_analytics_section">
				<div class="col-lg-6 col-md-6 col-sm-12 left_section">
					<div class="row mb-3">
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
							<div class="card active1">
								<p class="text_12 mb-3">Active Hours</p>
								<h4 class="d-flex justify-content-between black b_600" id="active-hours">0</h4>
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
							<div class="card">
								<p class="text_12 mb-3">Average Orders Value</p>
								<h4 class="d-flex justify-content-between black b_600" id="average-order-value">0 <span class="green text_12 mt-3">+2.5%</span></h4>
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
							<div class="card">
								<p class="text_12 mb-3">Average Sales per day</p>
								<h4 class="d-flex justify-content-between black b_600" id="average-sales-per-day">0 <span class="green text_12 mt-3">+2.5%</span></h4>
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
							<div class="card">
								<p class="text_12 mb-3">Returning customers</p>
								<h4 class="d-flex justify-content-between black b_600" id="returning-customers">0 <span class="orange text_12 mt-3">+2.5%</span></h4>
							</div>
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
							<div class="card">
								<p class="text_12 mb-3">Geography</p>
								<h4 class="d-flex justify-content-between black b_500 text_14" id="geography">Hot Areas
									<span>
										<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 24 24">
											<path fill="currentColor"
												d="m15 21l-6-2.1l-4.65 1.8q-.5.2-.925-.112T3 19.75v-14q0-.325.188-.575T3.7 4.8L9 3l6 2.1l4.65-1.8q.5-.2.925.113T21 4.25v14q0 .325-.187.575t-.513.375zm-1-2.45V6.85l-4-1.4v11.7zm2 0l3-1V5.7l-3 1.15zM5 18.3l3-1.15V5.45l-3 1zM16 6.85v11.7zm-8-1.4v11.7z" />
										</svg>
									</span>
								</h4>
							</div>
						</div>

					</div>


  <script>
    $(document).ready(function() {
      const apiUrl = 'http://localhost:8000/order_api';

      // Fetch orders from the API
      $.ajax({
        url: apiUrl,
        method: 'GET',
        success: function(response) {
          if (response.success) {
            const allOrders = response.allOrders;

            // Calculate and update metrics
            updateMetrics(allOrders);

            // Display orders in the list
            displayOrders(allOrders);
          } else {
            $('#orders-list').html('<p>Error fetching orders.</p>');
          }
        },
        error: function() {
          $('#orders-list').html('<p>Error fetching orders.</p>');
        }
      });

      // Function to update metrics
      function updateMetrics(orders) {
        const activeHours = calculateActiveHours(orders);
        const averageOrderValue = calculateAverageOrderValue(orders);
        const { averageSales, countOfOrders } = calculateAverageSalesPerDay(orders);
        const returningCustomers = calculateReturningCustomers(orders);

        $('#active-hours').text(activeHours);
        $('#average-order-value').text(averageOrderValue);
        $('#average-sales-per-day').text(`${averageSales} (${countOfOrders} orders)`);
        $('#returning-customers').text(returningCustomers);

        // Fetch and update geography
        calculateGeography(orders)
          .then(geography => {
            $('#geography').text(geography);
          })
          .catch(error => {
            console.error('Error fetching geography:', error);
            $('#geography').text('Location not available');
          });

        // Update Active Hours section
        $('.active1 h4').text(activeHours);
      }

      // Function to calculate active hours
      function calculateActiveHours(orders) {
        const hoursCount = {};

        orders.forEach(order => {
          const created_at = new Date(order.created_at);
          const hour = created_at.getHours();

          countOrdersForHourRange(hoursCount, hour);
        });

        let maxOrders = 0;
        let activeHours = '';

        for (const hourRange in hoursCount) {
          if (hoursCount.hasOwnProperty(hourRange)) {
            if (hoursCount[hourRange] > maxOrders) {
              maxOrders = hoursCount[hourRange];
              activeHours = hourRange;
            }
          }
        }

        return activeHours;
      }

      // Helper function to count orders for a specific hour range
      function countOrdersForHourRange(hoursCount, hour) {
        if (hour >= 9 && hour < 11) {
          incrementHourCount(hoursCount, "9 AM to 11 AM");
        } else if (hour >= 11 && hour < 13) {
          incrementHourCount(hoursCount, "11 AM to 1 PM");
        } else if (hour >= 13 && hour < 15) {
          incrementHourCount(hoursCount, "1 PM to 3 PM");
        } else if (hour >= 15 && hour < 17) {
          incrementHourCount(hoursCount, "3 PM to 5 PM");
        } else if (hour >= 17 && hour < 19) {
          incrementHourCount(hoursCount, "5 PM to 7 PM");
        }
        // Add more cases as needed for different hour ranges
      }

      // Helper function to increment count for an hour range
      function incrementHourCount(hoursCount, hourRange) {
        hoursCount[hourRange] = (hoursCount[hourRange] || 0) + 1;
      }

      // Function to calculate average order value
      function calculateAverageOrderValue(orders) {
        const totalValue = orders.reduce((sum, order) => sum + parseFloat(order.UserTotalCost), 0);
        const averageValue = totalValue / orders.length || 0; // Prevent division by zero
        return averageValue.toFixed(2);
      }

      // Function to calculate average sales per day
      function calculateAverageSalesPerDay(orders) {
        const startDate = new Date(orders[0].created_at);
        const endDate = new Date(orders[orders.length - 1].created_at);
        const daysDiff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) || 1; // Prevent division by zero
        const totalSales = orders.reduce((sum, order) => sum + parseFloat(order.UserTotalCost), 0);
        const averageSales = totalSales / daysDiff || 0; // Prevent division by zero
        const countOfOrders = orders.length;

        return { averageSales: averageSales.toFixed(2), countOfOrders };
      }

      // Function to calculate returning customers
      function calculateReturningCustomers(orders) {
        return (orders.length * 0.2).toFixed(0); // Example calculation of returning customers
      }

      // Function to calculate geography using Google Maps API
      function calculateGeography(orders) {
        const latitude = orders[0].UserLatitude;
        const longitude = orders[0].UserLongitude;
        const apiKey = 'AIzaSyAlcZM-RHySJIQmUwOaJmJCVPZcuMKS70Y';
        const apiUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${apiKey}`;

        return new Promise((resolve, reject) => {
          $.ajax({
            url: apiUrl,
            method: 'GET',
            success: function(response) {
              if (response.results && response.results.length > 0) {
                const formattedAddress = response.results[0].formatted_address;
                resolve(`Hot Areas: ${formattedAddress}`);
              } else {
                reject('Location not found');
              }
            },
            error: function() {
              reject('Error fetching location');
            }
          });
        });
      }

      // Function to display orders in the list
      function displayOrders(orders) {
        let ordersHtml = '';

        orders.forEach(order => {
          const formattedDate = new Date(order.created_at).toLocaleDateString();
          const items = JSON.parse(order.Items);

          const orderHtml = `
            <div class="border border-gray-200 p-4 mb-4">
              <h2 class="text-xl font-bold">Order ID: ${order.OrderID}</h2>
              <p>Created At: ${formattedDate}</p>
              <p>Total Cost: ${order.UserTotalCost}</p>
              <p>Payment Mode: ${order.PaymentMode}</p>
              <p>Items:</p>
              <ul>
                ${items.map(item => `<li>${item.quantity} x ${item.name} - ${item.price}</li>`).join('')}
              </ul>
              <p>Vendor: ${order.VendorId}</p>
              <p>Vendor Address: ${order.VendorAddress}</p>
              <p>Delivery Agent: ${order.DeliveryAgentName}</p>
              <p>Status: ${order.status}</p>
            </div>
          `;

          ordersHtml += orderHtml;
        });

        $('#orders-list').html(ordersHtml);
      }
    });
  </script>

					<div class="row product_service_graph_container mt-5 px-1">
						<div class="col-lg-10">
							<ul class="nav nav-tabs" id="myTab" role="tablist">
								<div class="filt"><i class="fa-solid fa-filter"></i></div>

								<li class="nav-item" role="presentation">
									<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
										role="tab" aria-controls="home" aria-selected="true">Product</button>
								</li>
								<li class="nav-item" role="presentation">
									<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button"
										role="tab" aria-controls="profile" aria-selected="false">Services</button>
								</li>

							</ul>
							<div class="tab-content" id="myTabContent">
								<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
									<div class="row">
										<div class="col-lg-12 mt-3">
											<div class="product_graph_cont">
												<div class="row py-3">
													<div class="col-lg-12">
														<div class="slideshow-container">
															<div class="mySlides">
																<div class="text text_16 b_600 black">2023</div>
															</div>
															<div class="mySlides">
																<div class="text text_16 b_600 black">2024</div>
															</div>
															<div class="mySlides">
																<div class="text text_16 b_600 black">2025</div>
															</div>
															<!--<a class="prev" onclick="plusSlides(-1)">❮</a>-->
															<!--<a class="next" onclick="plusSlides(1)">❯</a>-->
														</div>
														<!---- slidershow container end  ---->
													</div>
												</div>

												<div class="row">
													<div class="col-lg-12">
														<div class="donut_chart_product_service">
															<canvas id="donut_chart" style="margin-top:-70px;">
															</canvas>

															<div class="cont">
																<h4 class="text_16 b_500 black mb-0">22.870</h4>
																<span class="text_8 grey">Product
																	Analytics</span>
															</div>

															<script>
																document.addEventListener("DOMContentLoaded",
																	function() {
																		const yValues1 = [50, 10, 20, 20];
																		const barColors1 = ["#FACF55",
																			"#FF974A", "#3DD598",
																			"#0062FF"
																		];

																		new Chart("donut_chart", {
																			type: "doughnut",
																			data: {
																				labels: [],
																				datasets: [{
																					backgroundColor: barColors1,
																					data: yValues1,
																					borderWidth: 2,
																				}]
																			},
																			options: {
																				title: {
																					display: true,
																				},
																				cutoutPercentage: 85
																			}
																		});
																	});
															</script>

														</div>
														<!--- donut_chart_product_services_end --->
													</div>
												</div>

												<div class="row mt-3">
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 blue"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Shirt</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 light_orange"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Hoodie</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 green"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Pant</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 yellow"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">T-shirt</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>

												</div>
											</div>
											<!---- product_graph_cont end  --->
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
									<div class="row">
										<div class="col-lg-12 mt-3">
											<div class="product_graph_cont">
												<div class="row py-3">
													<div class="col-lg-12">
														<div class="slideshow-container-ser">
															<div class="mySlides_service">
																<div class="text_ser text_16 b_600 black">2023
																</div>
															</div>
															<div class="mySlides_service">
																<div class="text_ser text_16 b_600 black">2024
																</div>
															</div>
															<div class="mySlides_service">
																<div class="text_ser text_16 b_600 black">2025
																</div>
															</div>
															<!--<a class="prev_ser" onclick="plusSlides_ser(-1)">❮</a>-->
															<!--<a class="next_ser" onclick="plusSlides_ser(1)">❯</a>-->
														</div>
														<!---- slidershow container end  ---->
													</div>

												</div>

												<div class="row">
													<div class="col-lg-12">
														<div class="donut_chart_product_service">
															<canvas id="donut_chart_2" style="margin-top:-70px;">
															</canvas>

															<div class="cont">
																<h4 class="text_16 b_500 black mb-0">22.870</h4>
																<span class="text_8 grey">Product
																	Analytics</span>
															</div>

															<script>
																document.addEventListener("DOMContentLoaded",
																	function() {
																		const yValues1 = [50, 10, 20, 20];
																		const barColors1 = ["#FACF55",
																			"#FF974A", "#3DD598",
																			"#0062FF"
																		];

																		new Chart("donut_chart_2", {
																			type: "doughnut",
																			data: {
																				labels: [],
																				datasets: [{
																					backgroundColor: barColors1,
																					data: yValues1
																				}]
																			},
																			options: {
																				title: {
																					display: true,
																				},
																				cutoutPercentage: 85
																			}
																		});
																	});
															</script>

														</div>
														<!--- donut_chart_product_services_end --->
													</div>
												</div>

												<div class="row mt-3">
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 blue"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Wash</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 light_orange"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Dry Clean</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 green"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">Pant</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>
													<!-- -- -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 py-2">
														<div class="d-flex">
															<span class="text_10 yellow"><i class="fa-solid fa-circle"></i></span>
															<div class="d-flex justify-content-between w-100 px-2">
																<span class="text_12">T-shirt</span>
																<h6 class="text_12 b_600 black">2.1k</h6>
															</div>
														</div>
													</div>

												</div>
											</div>
											<!---- product_graph_cont end  --->
										</div>
									</div>
								</div>

							</div>
						</div>


					</div>
				</div>

				<div class="col-lg-6 col-md-6 col-sm-12 right_section">
					<div class="sales_graph_container mb-4">
						<h5 class="text_16 b_600 black d-flex justify-content-between"> Active Hours
							<span>3PM to 6PM</span>
						</h5>
						<div class="graph_box">
							<canvas id="sales_graph" style="bottom: 0;"></canvas>
							<script>
								const xValues = ['3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', ' ', ' '];
								const yValues = ['150', '300', '100', '100', '120', '200', '400'];

								new Chart("sales_graph", {
									type: "line",
									data: {
										labels: xValues,
										datasets: [{
											fill: true,
											lineTension: 0,
											backgroundColor: "#C8E9FF",
											borderColor: "#1B59F8",
											borderWidth: 1.1,
											pointBackgroundColor: "#1B59F8",
											data: yValues
										}]
									},
									options: {
										responsive: true,
										maintainAspectRatio: true,
										legend: {
											display: false
										},
										scales: {
											xAxes: [{
												ticks: {
													min: 'January',
													max: 'July'
												},
												gridLines: {
													display: false
												}
											}],
											yAxes: [{
												ticks: {
													min: 0,
													max: 400,
													stepSize: 100,
													callback: function(value, index, values) {
														return value;
													}
												},
												gridLines: {
													display: false
												},
												position: 'left'
											}],
										}
									}
								});
							</script>
						</div>
					</div>
					<div class="sales_graph_container mb-4">
				<div class="google-map">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2990.274257380938!2d-70.56068388481569!3d41.45496659976631!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e52963ac45bbcb%3A0xf05e8d125e82af10!2sDos%20Mas!5e0!3m2!1sen!2sus!4v1671220374408!5m2!1sen!2sus&z=1" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>




     
						<div>
							<h5 class="text_16 b_600 black d-flex mb-3">
								Top Retail Sales Locations
								<span class="px-3"></span>
							</h5>
							<div>
								<h4 class="black mb-0">19.870</h4>
								<p class="text_12 grey">Active User Geography Areas in IND</p>
							</div>

							<div class="sales_graph_names mt-3">
								<!-- -- -->
								<div class="d-flex py-2">
									<span class="color_box blue_bg"></span>
									<div class="d-flex justify-content-between w-100 px-2">
										<span class="text_12 grey">Massive</span>
										<span class="text_12 grey b_600">15,000</span>
									</div>
								</div>
								<!-- -- -->
								<div class="d-flex py-2">
									<span class="color_box orange_bg"></span>
									<div class="d-flex justify-content-between w-100 px-2">
										<span class="text_12 grey">Large</span>
										<span class="text_12 grey b_600">4900</span>
									</div>
								</div>
								<!-- -- -->
								<div class="d-flex py-2">
									<span class="color_box yellow_bg"></span>
									<div class="d-flex justify-content-between w-100 px-2">
										<span class="text_12 grey">Medium</span>
										<span class="text_12 grey b_600">2000</span>
									</div>
								</div>

								<!-- -- -->
								<div class="d-flex py-2">
									<span class="color_box silver_bg"></span>
									<div class="d-flex justify-content-between w-100 px-2">
										<span class="text_12 grey">Small</span>
										<span class="text_12 grey b_600">980</span>
									</div>
								</div>

							</div>

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

	</div>
	<script>
	    function handleClick() {
        var filter_box1 = document.querySelectorAll('.filter_box1');
        filter_box1.forEach(function (element) {
            if (element.style.display === 'none') {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        });
    }
	</script>
	    	<script>
	 function optionClick(value) {
    //  document.getElementById('selectedOption').innerText = value;
              document.getElementById('selectedOption').innerText = value;
    var filterBoxes = document.getElementsByClassName('filter_box1');
    for (var i = 0; i < filterBoxes.length; i++) {
        filterBoxes[i].style.display = 'none';
    }
    }
  

	</script>
	
	<!--------------active----->
	
   <script>
    function makeActive(element) {
        var allCards = document.querySelectorAll(".card");
        allCards.forEach(function(card) {
            card.classList.remove('active1'); // Remove 'active' class from all cards
            var paragraph = card.querySelector("p"); // Select the <p> tag inside the card
            paragraph.style.color ='#8F9BB3'; 
        });

        var clickedCard = element.querySelector(".card");
        clickedCard.classList.add('active1'); // Add 'active' class to the clicked card
        var clickedParagraph = clickedCard.querySelector("p"); // Select the <p> tag inside the clicked card
        clickedParagraph.style.color = '#333333'; 
    }
</script>

	

</x-app-layout>
