<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <style>
  .filter_container {
    position: relative;
    display: inline-block;
  }

  .filter_trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sub_menu_dropdown{
    display: block;
}
.filter_trigger .filter_box {
  margin-right: 5px; /* Adjust as needed */
}

  .filter_options {
    position: absolute;
    /*top: calc(100% + 5px);*/
    left: 0;
    /*background-color: #fff;*/
    /*border: 1px solid #ccc;*/
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
  }

  .filter_box {
      margin-top:5px;
    padding: 10px;
    cursor: pointer;
     border: 1px solid #ccc;
     background-color: #fff;
  }
/*.filter_options{*/
/*    margin:5px ;*/
/*}*/
  
  /*.filter_options.active {*/
  /*  display: block;*/
  /*}*/
  .filter-icon{
      margin-top:-20px;
  }
  .filter_container{
      margin-bottom:10px;
  }
  
  .selected_option{
      border:1px solid lightgray;
      padding:5px 10px;
      border-radius:5px;
  }
  .analytics_section .filter_box{
      line-height:0px;
  }
  .analytics_section .filter_box.filt {
    width: 38px;
    line-height: 28px;
}
 .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{
            margin-top:5px;
        }
       .filter_box1:hover{
            background-color:#75b1eb;
            color:white;
        }
        .filter_box1{
            display:none;
            
        }
 @media (max-width:1100px) {
     
    .sales_graph_container
     {
        height: 250px !important;
     }
}
.analytics_section .filter_box{
    line-height:25px;
}
.filter_box{
    background-color:transparent;
    
}

  .google-map {
  padding-bottom: 50%;
  position: relative;
}

.google-map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
 .sales_graph_container{
    height:fit-content;
}
.sales_analytics_section .right_section .sales_graph_container_traffic{
    height:600px;
}
#sales_graph{
    height:300px;
}

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

  .active{
           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;
    
}
.place-card-medium {
    display: none;
}
</style>
    <header>
        <div class="d-flex justify-content-between header_box">
            <h3>Analytics<span class="text_18 grey">/Traffic</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 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"
                            class="clr-i-outline clr-i-outline-path-1" />
                        <path 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"
                            class="clr-i-outline clr-i-outline-path-2" />
                        <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 flex-wrap mb-4">
                <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 active">
                                <p class=" mb-3 ">Active Hours</p>
                                <h4 class="d-flex justify-content-between  b_600">3 PM to 6 PM</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=" mb-3 ">Average Orders Value</p>
                                <h4 class="d-flex justify-content-between  b_600">1204 <span
                                        class="green text_12 mt-2">+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=" mb-3 ">Average Sales per day</p>
                                <h4 class="d-flex justify-content-between  b_600">5004 <span
                                        class="green text_12 mt-2">+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=" mb-3 ">Returning customers</p>
                                <h4 class="d-flex justify-content-between  b_600">504 <span
                                        class="orange text_12 mt-2">+2.5%</span></h4>
                            </div>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-6 col-xs-6  mb-1" onclick="makeActive(this)">
                            <div class="card">
                                <p class=" mb-3 ">Geography</p>
                                <h4 class="d-flex justify-content-between  b_500 " style="font-size:14px;">Areas
                                    <span id="toggle_content">
                                        <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>

                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 active_btns_traffic">
                            <div class=""><span class=" ">Active User Geography
                                    Areas</span>
                            </div>
                            <div class=""><span class=" ">Active Vendor
                                    Geography Areas</span>
                            </div>
                            <div class=""><span class="  ">Active Rider Geography
                                    Areas</span>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 right_section">
                    <div class="sales_graph_container mb-4" style="box-sizing: content-box; ">
                        <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="margin: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 sales_graph_container_traffic mb-4">
                        <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 d-flex  mb-3">
                                Top Retail Sales Locations
                                <span class="px-3"></span>
                            </h5>
                            <div>
                                <h4 class="h4 mb-0">19.870</h4>
                                <p class="text_10 grey">Active User Geography Areas in IND</p>
                            </div>

                            <div class="mt-3 sales_graph_names">
                                 
                                <div class="d-flex py-2">
                                    <span class="color_box blue_bg"></span>
                                    <div class="d-flex justify-content-between px-2 w-100">
                                        <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 px-2 w-100">
                                        <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 px-2 w-100">
                                        <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 px-2 w-100">
                                        <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('active'); // Remove 'active' class from all cards
            var paragraph = card.querySelector("p"); 
            paragraph.style.color ='#8F9BB3'; 
        });

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


 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/analystic_traffic.blade.php ENDPATH**/ ?>