<x-app-layout>
   <style>
      .sub_menu_dropdown{
      display: block;
      }
      #button12_1{
      background-color: #e8eefe !important;
      }
      @media (max-width:960px) {
      .col-md-6 {
      flex: 0 0 auto;
      width: 45%;
      }
      .sales_day
      {
      margin-right:75px;
      }
      #sales_graph, #sales_graph_2
      {
      height:300px !important;
      }
      .sales_graph_container
      {
      width:690px !important;
      }
      }
      .filter_box{
      border: 1px solid #d9dbde !important;
      line-height:25px;
      cursor:pointer;
      }
      .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;
      }
      .filter_box1{
      display:none;
      }
      .filter_box1:hover{
      background-color:#75b1eb;
      color:white;
      cursor:pointer;
      }
      .active{
      border: 1px solid blue !important;
      }
      .analytics_section {
      width: 100%;
      }
      .analytics_section .top .date_box  {
      cursor: pointer;
      margin-left: 10px;
      border: none;
      padding: 0px 5px;
      border-radius: 2px;
      height: 24px;
      line-height: 20px;
      }
      .analytics_section .top .date_box input {
      font-size: 14px;
      color: #000000;
      }
      .header_left_side {
      padding-right: 25px;
      }
      .card{
      cursor:pointer;
      }
   </style>
   <header>
      <div class="d-flex justify-content-between header_box">
         <h3>Analytics<span class="text_18 grey"></span></h3>
 
      </div>
   </header>
   <div class="user_container">
   <div class="analytics_section">
      <div class="d-flex justify-content-between flex-wrap mb-4">
         <div class="d-flex top">
            <h3 class="">Sales Analytics </h3>
            <span class="date_box">
            </span>
         </div>
      
      </div>
      <div class="row sales_analytics_section ">
         <div class="col-lg-12 left_section">
            <div class="row mb-3">
               <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
                  <div class="card active">
                     <p class=" mb-2 ">Average Orders per day</p>
                     <script>
                        $(document).ready(function() {
                          // Fetch orders from the API
                          $.ajax({
                            url: 'https://drycleaneo.com/admin/order_api',
                            method: 'GET',
                            success: function(response) {
                              if (response.success) {
                                const orders = response.allOrders;
                                const orderCountsByDate = {};
                                const customerOrders = {};
                        
                                let totalOrderValue = 0;
                        
                                // Process orders
                                orders.forEach(function(order) {
                                  const date = new Date(order.created_at).toLocaleDateString();
                                  totalOrderValue += parseFloat(order.UserTotalCost);
                        
                                  // Count orders by date
                                  if (orderCountsByDate[date]) {
                                    orderCountsByDate[date]++;
                                  } else {
                                    orderCountsByDate[date] = 1;
                                  }
                        
                                  // Track orders by customer
                                  const customer = order.customer_name;
                                  if (customerOrders[customer]) {
                                    customerOrders[customer]++;
                                  } else {
                                    customerOrders[customer] = 1;
                                  }
                                });
                        
                                // Calculate average orders per day
                                const totalDays = Object.keys(orderCountsByDate).length;
                                const totalOrders = orders.length;
                                const averageOrdersPerDay = (totalOrders / totalDays).toFixed(2);
                        
                                // Calculate average order value
                                const averageOrderValue = (totalOrderValue / totalOrders).toFixed(2);
                        
                                // Calculate average sales per day
                                const averageSalesPerDay = (totalOrderValue / totalDays).toFixed(2);
                        
                                // Calculate returning customers
                                const returningCustomers = Object.values(customerOrders).filter(count => count > 1).length;
                        
                                // Display statistics
                                $('#average-orders').text(`${averageOrdersPerDay}`);
                                $('#average-order-value').text(` ₹${averageOrderValue}`);
                                $('#average-sales-per-day').text(` ₹${averageSalesPerDay}`);
                                $('#returning-customers').text(`${returningCustomers}`);
                              } else {
                                $('#statistics').text('Error fetching orders.');
                              }
                            },
                            error: function() {
                              $('#statistics').text('Error fetching orders.');
                            }
                          });
                        });
                     </script>
                     <h4 class="d-flex justify-content-between  b_600" id="average-orders"><span
                        class="green  mt-2">+2.5%</span></h4>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
                  <div class="card ">
                     <p class=" mb-2 ">Average Orders Value</p>
                     <h4 class="d-flex justify-content-between  b_600" id="average-order-value">0
                        <span class="green  mt-2">+2.5%</span>
                     </h4>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
                  <div class="card">
                     <p class=" mb-2 ">Average Sales per day</p>
                     <h4 class="d-flex justify-content-between  b_600" id="average-sales-per-day">0
                        <span class="green mt-2">+2.5%</span>
                     </h4>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-3" onclick="makeActive(this)">
                  <div class="card">
                     <p class="text_12 mb-2 ">Frequent customers</p>
                     <h4 class="d-flex justify-content-between  b_600" id="returning-customers">0 <span class="orange  mt-2">+2.5%</span>
                     </h4>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-lg-6 col-md-12">
            <div class="sales_graph_container mb-5" style="box-sizing: content-box;width:auto;">
               <h5 class=" d-flex gap-5">Total Orders
                  <span id="total_cost1">₹ 0</span>
               </h5>
               <div id="reportrange" class="form-control inpt inpt_date mb-2" style="background: #fff;cursor: pointer;padding: 5px 10px;border: 1px solid #ccc;width: 100%;max-width: fit-content;">
                  <i class="fa fa-calendar"></i>&nbsp;
                  <span></span> <i class="fa fa-caret-down"></i>
               </div>
               <div class="total_sales_graph" style="">
                  <canvas id="total_sales_chart" style="height:280px !important; margin-top:10px;"></canvas>
                  <x-chartdash/>
               </div>
               <style>
                  #total_sales_chart ,     #total_sales_chart1 {
                  height: 300px !important; /* Set height to 300px */
                  margin-top: 10px;
                  }
               </style>
            </div>
         </div>
         <div class="col-lg-6 col-md-12">
            <div class="sales_graph_container mb-5">
               <h5 class="d-flex gap-5">
                  Cleaneo Profit
                  <span id="total_cost2">₹ 0</span>
               </h5>
               <div id="reportrange1" class="form-control inpt inpt_date mb-2">
                  <i class="fa fa-calendar"></i>&nbsp;
                  <span></span> <i class="fa fa-caret-down"></i>
               </div>
               <div class="total_sales_graph">
                  <canvas id="total_sales_chart1"></canvas>
               </div>
            </div>
         </div>
      </div>
<x-ana_sale/>
   </div>
</x-app-layout>