@extends('layouts.app')
@section('content')
    @include('layouts.navbar')
    @include('layouts.sidebar')
    <style>
        .form-outline input::placeholder {
            font-size: 0.7em;
            /* Adjust the font size as needed */
        }

        .valuesty {
            font-size: 15px;
        }
        .card-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        
        .card {
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 500px;
            box-sizing: border-box;
        }
        
        .perform {
            display: flex;
            justify-content: space-between;
        }
        
        .chartspace {
            display: flex;
            gap: 2rem;
            padding-right: 100px !important;
        }
        
        .barchart {
            width: 100%;
            margin: 15px auto;
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }
        
        .barchart1 {
            /* width: 50%; */
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }
        
        .chart-container {
            display: flex;
        }
        
        .y-axis {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
            margin-right: 10px;
        }
        
        .y-axis div {
            height: 27px;
            /* Adjust height based on the chart height divided by number of intervals */
        }
        
        .chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            width: 400px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
            padding-left: 10px;
            position: relative;
        }
        
        .bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin: 0 5px;
            position: relative;
        }
        
        .label {
            text-align: center;
            margin-top: 5px;
        }
        
        .value {
            width: 100%;
        }
        
        .chart-container {
            display: flex;
            position: relative;
        }
        
        .y-axis1 {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
            margin-right: 10px;
        }
        
        .y-axis1 div {
            height: 60px;
            /* Adjust height based on the chart height divided by number of intervals */
        }
        
        .chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
            padding-left: 10px;
            position: relative;
        }
        
        .bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin: 0 5px;
            position: relative;
        }
        
        .label1 {
            display: none;
        }
        
        .value1 {
            width: 50%;
        }
        
        .x-axis {
            display: flex;
            margin-top: 10px;
            padding-left: 38px;
            /* Adjust to align with the chart */
        }
        
        .x-axis div {
            text-align: center;
            width: 80px;
            /* Adjust width to align with bars and spacing */
        }
        
        .pie-chart {
            background: radial-gradient(circle closest-side, white 0, white 40%, transparent 40%, transparent 100%, white 0), conic-gradient(#4e79a7 0, #4e79a7 62.3%, #f28e2c 0, #f28e2c 100%);
            position: relative;
            width: 450px;
            min-height: 300px;
            margin: 0;
            outline: 1px solid #ccc;
        }
        
        .pie-chart:hover {
            border: 2px solid red;
        }
        
        .pie-chart h2 {
            position: absolute;
            margin: 1rem;
        }
        
        .pie-chart figcaption {
            position: absolute;
            bottom: 1em;
            right: 1em;
            font-size: smaller;
            text-align: right;
        }
        
        .pie-chart span:after {
            display: inline-block;
            content: "";
            width: 0.8em;
            height: 0.8em;
            margin-left: 0.4em;
            height: 0.8em;
            border-radius: 0.2em;
            background: currentColor;
        }
        
        .pie-chart1 {
            background: radial-gradient(circle closest-side, #fff 0, #fff 43.68%, transparent 43.68%, transparent 84%, #fff 0), conic-gradient(from 42deg, #4e79a7 0, #4e79a7 49.4%, #f28e2c 0, #f28e2c 79.3%, #e15759 0, #e15759 100%);
            position: relative;
            width: 450px;
            min-height: 300px;
            margin: 0;
            outline: 1px solid #ccc
        }
        
        .pie-chart1 h2 {
            position: absolute;
            margin: 1rem
        }
        
        .pie-chart1 cite {
            position: absolute;
            bottom: 0;
            font-size: 80%;
            padding: 1rem;
            color: gray
        }
        
        .pie-chart1 figcaption {
            position: absolute;
            bottom: 1em;
            right: 1em;
            font-size: smaller;
            text-align: right
        }
        
        .pie-chart1 span:after {
            display: inline-block;
            content: "";
            width: .8em;
            height: .8em;
            margin-left: .4em;
            height: .8em;
            border-radius: .2em;
            background: currentColor
        }
        
        .card-container1 {
            display: flex;
            justify-content: space-between;
        }
        
        .carded {
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 500px;
            box-sizing: border-box;
        }
        
        .browser {
            font-size: 11px;
        }
        
        .Countries {
            display: flex;
            justify-content: space-between;
        }
        
        .progress-container {
            width: 100%;
            background-color: #f0f0f0;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress-bar {
            width: 100%;
            height: 15px;
            background-color: #4caf50;
            border-radius: 5px;
            transition: width 0.5s ease-in-out;
        }
    </style>
    <main id="" class="side_user">
        <!-- Hero -->
        <!-- <div class="bg-body-light ">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2">
                        Customers<small class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted"></small>
                    </h1>
                    <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-alt">
                            <li class="breadcrumb-item">View Customer</li>
                            <li class="breadcrumb-item" aria-current="page">
                                <a style="color:black" href="{{ route('customers.index') }}">Customers</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
          </div> -->

        <!-- END Hero -->
        <div class="table_fields">
        <div class="analyse mt-5">
          <div class="sales">
              <h1>Total QR Scans</h1>
          </div>
          <div class="sales">
              <h1>Total QR project</h1>
          </div>
          <div class="sales">
              <h1>Total Registered QR's</h1>
          </div>
      </div>
    </div>
      <br>
      <br>
      <div class="card-container">
          <div class="card">
              <div class="perform">
                  <h2>Partner Details</h2>
                  <!-- <a href="">View all</a> -->
              </div>
              <div class="perform">
                  <p>Name</p>
                  <!-- <p>scans</p> -->
              </div>
              <div class="perform">
                  <p>Rogger Business Card - Tap to share</p>
                  <!-- <p>92</p> -->
              </div>
              <hr>
              <div class="perform">
                  <p>Email Id</p>
                  <!-- <p>50</p> -->
              </div>
              <hr>
  
              <div class="perform">
                  <p>Account</p>
                  <!-- <p>1</p> -->
              </div>
          </div>
          <div class="card">
            <div class="barchart">
                <h2>Hour wise</h2>
                <div class="chart-container">
                    <div class="y-axis1">
                        <div>20</div>
                        <div>15</div>
                        <div>10</div>
                        <div>5</div>
                        <div>0</div>
                    </div>
                    <div class="chart">
                        <div class="bar" style="height: 900px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"></div>
                            <div class="value1" style="background-color: #333; height: 10%;"></div>
                            <div class="label1">Sun</div>
                        </div>
                        <div class="bar" style="height: 650px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"></div>
                            <div class="value1" style="background-color: #333; height: 10%;"></div>
                            <div class="label1">Sun</div>
                        </div>
                        <div class="bar" style="height: 450px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 12%;"></div>
                            <div class="value1" style="background-color: #333; height: 30%;"></div>
                            <div class="label1">Mon</div>
                        </div>
                        <div class="bar" style="height: 200px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 12%;"></div>
                            <div class="value1" style="background-color: #333; height: 30%;"></div>
                            <div class="label1">Mon</div>
                        </div>
                        <div class="bar" style="height: 28.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 19%;"></div>
                            <div class="value1" style="background-color: #333; height: 29%;"></div>
                            <div class="label1">Tue</div>
                        </div>
                        <div class="bar" style="height: 28.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 19%;"></div>
                            <div class="value1" style="background-color: #333; height: 29%;"></div>
                            <div class="label1">Tue</div>
                        </div>
                        <div class="bar" style="height: 290px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Wed</div>
                        </div>
                        <div class="bar" style="height: 400px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Wed</div>
                        </div>
                        <div class="bar" style="height: 34.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 17%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Thu</div>
                        </div>
                        <div class="bar" style="height: 48.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 28%;"></div>
                            <div class="value1" style="background-color: #333; height: 20%;"></div>
                            <div class="label1">Fri</div>
                        </div>
                        <div class="bar" style="height: 24.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%);; height: 7%;"></div>
                            <div class="value1" style="background-color: #333; height: 3%;"></div>
                            <div class="label1">Sat</div>
                        </div>
                    </div>
                </div>
                <div class="x-axis">
                    <div>0</div>
                    <div>8</div>
                    <div>12</div>
                    <div>16</div>
                    <div>20</div>
                </div>
            </div>
        </div>
          
          </div>
  <br>

  
      <!-- end card-->
      <br>
      <!-- bar chart-->
      <div class="chartspace">
          <div class="barchart">
            
                <h2>Day Wise Analysis</h2>
                <div class="chart-container">
                    <div class="y-axis">
                        <div>50</div>
                        <div>45</div>
                        <div>40</div>
                        <div>35</div>
                        <div>30</div>
                        <div>25</div>
                        <div>20</div>
                        <div>15</div>
                        <div>10</div>
                        <div>5</div>
                        <div>0</div>
                    </div>
                    <div class="chart">
                        <div class="bar" style="height: 500px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 7%;"></div>
                            <div class="value" style="background-color: #333; height: 10%;"></div>
                            <div class="label">Sun</div>
                        </div>
                        <div class="bar" style="height: 500px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 12%;"></div>
                            <div class="value" style="background-color: #333; height: 30%;"></div>
                            <div class="label">Mon</div>
                        </div>
                        <div class="bar" style="height: 300px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 19%;"></div>
                            <div class="value" style="background-color: #333; height: 29%;"></div>
                            <div class="label">Tue</div>
                        </div>
                        <div class="bar" style="height: 272px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 3%;"></div>
                            <div class="value" style="background-color: #333; height: 5%;"></div>
                            <div class="label">Wed</div>
                        </div>
                        <div class="bar" style="height: 494px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 17%;"></div>
                            <div class="value" style="background-color: #333; height: 5%;"></div>
                            <div class="label">Thu</div>
                        </div>
                        <div class="bar" style="height: 48%;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 28%;"></div>
                            <div class="value" style="background-color: #333; height: 20%;"></div>
                            <div class="label">Fri</div>
                        </div>
                        <div class="bar" style="height: 400px;">
                            <div class="value" style="background-color: rgb(255 51 107 / 78%); height: 7%;"></div>
                            <div class="value" style="background-color: #333; height: 3%;"></div>
                            <div class="label">Sat</div>
                        </div>
                    </div>
                </div>
            
          </div>
          <div class="barchart ">
            <div class="barchart1">
                <h2>Functionality wise</h2>
                <div class="chart-container">
                    <div class="y-axis1">
                        <div>20</div>
                        <div>15</div>
                        <div>10</div>
                        <div>5</div>
                        <div>0</div>
                    </div>
                    <div class="chart">
                        <div class="bar" style="height: 900px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"></div>
                            <div class="value1" style="background-color: #333; height: 10%;"></div>
                            <div class="label1">Sun</div>
                        </div>
                        <div class="bar" style="height: 650px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"></div>
                            <div class="value1" style="background-color: #333; height: 10%;"></div>
                            <div class="label1">Sun</div>
                        </div>
                        <div class="bar" style="height: 450px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 12%;"></div>
                            <div class="value1" style="background-color: #333; height: 30%;"></div>
                            <div class="label1">Mon</div>
                        </div>
                        <div class="bar" style="height: 200px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 12%;"></div>
                            <div class="value1" style="background-color: #333; height: 30%;"></div>
                            <div class="label1">Mon</div>
                        </div>
                        <div class="bar" style="height: 28.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 19%;"></div>
                            <div class="value1" style="background-color: #333; height: 29%;"></div>
                            <div class="label1">Tue</div>
                        </div>
                        <div class="bar" style="height: 28.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 19%;"></div>
                            <div class="value1" style="background-color: #333; height: 29%;"></div>
                            <div class="label1">Tue</div>
                        </div>
                        <div class="bar" style="height: 290px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Wed</div>
                        </div>
                        <div class="bar" style="height: 400px;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 3%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Wed</div>
                        </div>
                        <div class="bar" style="height: 34.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 17%;"></div>
                            <div class="value1" style="background-color: #333; height: 5%;"></div>
                            <div class="label1">Thu</div>
                        </div>
                        <div class="bar" style="height: 48.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%); height: 28%;"></div>
                            <div class="value1" style="background-color: #333; height: 20%;"></div>
                            <div class="label1">Fri</div>
                        </div>
                        <div class="bar" style="height: 24.5%;">
                            <div class="value1" style="background-color: rgb(255 51 107 / 78%);; height: 7%;"></div>
                            <div class="value1" style="background-color: #333; height: 3%;"></div>
                            <div class="label1">Sat</div>
                        </div>
                    </div>
                </div>
                <div class="x-axis">
                    <div>0</div>
                    <div>8</div>
                    <div>12</div>
                    <div>16</div>
                    <div>20</div>
                </div>
            </div>
          </div>
      </div>
     
  
  
      <!-- end bar chart -->
      <br>
      <!--pie chart -->
      <div class="table_fields">
      <div class="card-container1">
          <div class="carded">
              <figure class="pie-chart1">
                  <p class="browser">DEVICE ANALYSIS</p>
                  <figcaption>Windows<span style="color:#4e79a7"></span><br>Mac<span style="color:#f28e2c"></span><br>Android<span style="color:#e15759"></span></figcaption>
                  <cite>International Energy Agency</cite>
              </figure>
          </div>
          <div class="carded">
              <figure class="pie-chart">
                  <p class="browser">BROWSER ANALYSIS</p>
                  <figcaption>
                      Apple Safari<span style="color:#4e79a7"></span><br> Google Crome<span style="color:#f28e2c"></span>
                  </figcaption>
              </figure>
          </div>
      </div>
      <!--end pie chart -->
      <br>
      <br>
      <!--map chart -->
      <div class="analyse mb-3">
          <div class="sales">
              <h6>Countries - Top 10</h6>
              <div class="Countries">
                  <p>India</p>
                  <p>143(100%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 100%;"></div>
              </div>
          </div>
          <div class="sales">
  
              <h6>State (Country)- Top 10</h6>
              <div class="Countries">
                  <p>Karnataka (IN)</p>
                  <p>91(64%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 64%;"></div>
              </div>
              <div class="Countries">
                  <p>Tamilnadu (IN)</p>
                  <p>51(36%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 36%;"></div>
              </div>
              <div class="Countries">
                  <p>Telugana (IN)</p>
                  <p>91(1%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 1%;"></div>
              </div>
          </div>
          <div class="sales">
  
              <h6>Cities (State) - Top 10</h6>
              <div class="Countries">
                  <p>Bengaluru (IN)</p>
                  <p>91(64%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 64%;"></div>
              </div>
              <div class="Countries">
                  <p>Chennai (IN)</p>
                  <p>51(36%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 36%;"></div>
              </div>
              <div class="Countries">
                  <p>karimanagar (IN)</p>
                  <p>1(1%)</p>
              </div>
              <div class="progress-container">
                  <div class="progress-bar" style="width: 1%;"></div>
              </div>
          </div>
      </div>
    </div>
      <!-- map chart end -->
<!--  -->
<div class="table_fields">
<!-- <div class="tab mt-4">
    <div class="d-flex">
        <div class="tab1 px-3 mb-3">
            <a href="#">Customer</a>
        </div>

        <div class="tab2 mb-3">
            <a href="#">Customer Login</a>
        </div>
    </div>
</div> -->
  <table
  class="table js-dataTable-full dataTable no-footer px-4"
  id="DataTables_Table_0"
  role="grid"
  aria-describedby="DataTables_Table_0_info"
>
  <thead>
      <tr role="row">
          <th
              class="sorting"
              style="text-align: center;"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Name: activate to sort column ascending"
          >S.No</th>

          <th
              class="text-center sorting_asc"
              style="text-align: center; width: 30%"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-sort="ascending"
              aria-label="ID: activate to sort column descending"
          >Qr Unique Name</th>

          <th
              class="sorting"
              style="text-align: center; width:15%"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Name: activate to sort column ascending"
          >Product Id</th>

          <!-- <th
              class="d-none d-sm-table-cell sorting"
              style="text-align: center; width: 30%;"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Email: activate to sort column ascending"
          >Product associated To</th> -->

          <th
              class="d-none d-sm-table-cell sorting"
              style="text-align: center; width: 30%;"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Email: activate to sort column ascending"
          >Current Functionallity</th>

          <th
              class="d-none d-sm-table-cell sorting"
              style="text-align: center; width:30%;"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Email: activate to sort column ascending"
          >Total Scans</th>

          <!-- <th
              style="text-align: center; width: 15%;"
              class="sorting"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Registered: activate to sort column ascending"
          >Latest Scans</th> -->

          <th
              style="text-align: center; width: 15%;"
              class="sorting"
              tabindex="0"
              aria-controls="DataTables_Table_0"
              rowspan="1"
              colspan="1"
              aria-label="Registered: activate to sort column ascending"
          >Status</th>
      </tr>
  </thead>
</div>
  <tbody>
      {{--

      <tr>
          <td
              class="text-center font-size-sm sorting_1"
              style="width: 5%;"
          >{{ 1 }}</td>

          <td
              class="font-w600 font-size-sm"
              style="width: 15%;"
          >{{ 'CMHQ001' }}</td>

          <td
              class="font-w600 font-size-sm"
              style="width: 15%;"
          >{{ 'Charles' }}</td>

          <td
              class="d-none d-sm-table-cell font-size-sm"
              style="width: 15%;"
          >{{ 'kunda' }}</td>

          <td
              class="d-none d-sm-table-cell font-size-sm"
              style="width: 20%;"
          >{{ 'charles@ninosit.com' }}</td>

          <td
              class="d-none d-sm-table-cell"
              style="width: 15%;"
          >
              <label class="switch">
                  <input
                      type="checkbox"
                      checked="checked"
                  ></input>

                  <span class="slider round"></span>
              </label>
          </td>

          <td style="width: 10%;">
              <div class="btn-group">
                  <div class="btn-group">
                      <a href="href">