@extends('layouts.master')
@extends('sidebar.dashboard')

@section('page-style')



<style>
  @media only screen and (min-width : 1224px) {

    /* .weekendgraphmob{

    margin-left: 188px;

  } */

    .leftsidetable {
      margin-top: -105px;
    }

    .rightsidetable {
      float: right;
      margin-top: -92px;
    }

    .storefont {
      position: relative;
      top: -179px;
      color: #3c4b67;
      font-size: 30px;
      font-weight: 700;

    }

    .card-profile .card-body .profile-image-wrapper .profile-image-2 {
      position: absolute !important;
      top: 96px !important;
      padding: 0 !important;
      margin-bottom: 1.15rem !important;
      left: 117px;
    }

    .card-profile .card-body .profile-image-wrapper .profile-image-2 img {
      width: fit-content !important;
      height: 123px !important;
      border-radius: 8% !important;
    }
  }

  @media only screen and (max-width: 768px) {

    .combody {
      padding: 10px !important;
    }

    .mobileres {
      height: 35px;
      margin-left: -147px;
      /* position: absolute; */
      margin-top: -59px;
      position: absolute;
    }

    .leftsidetable {
      margin-top: -32px;
      font-size: 12px;
    }

    .rightsidetable {
      font-size: 12px;
    }

    .storefont {

      color: #3c4b67;
      font-size: 12px;
      font-weight: 700;
      margin-top: -43px;
    }

    .ovaralsales {
      padding: 76px;
    }


  }

  .boxleft {
    text-align: left;
  }

  .card-profile .card-body {
    position: unset !important;
  }





  .mb-3 {
    margin-bottom: 1rem !important;
  }



  .avatar .avatar-content {

    width: 75px;
    height: 75px;

  }

  .imgavatar {

    width: 32px !important;
    height: 32px !important;

  }

  .avatar [class*=avatar-status-] {
    width: 14px;
    height: 14px;
    right: 10px !important;
    bottom: 3px !important;

  }

  .demo-inline-spacing {
    display: inherit;
  }


  #user-profile .profile-header {
    overflow: hidden;
  }

  #user-profile .profile-header .profile-img-container {
    position: absolute;
    bottom: -2rem;
    left: 2.14rem;
    z-index: 2;
  }

  #user-profile .profile-header .profile-img-container .profile-img {
    height: 8.92rem;
    width: 8.92rem;
    border: 0.357rem solid #fff;
    background-color: #fff;
    border-radius: 0.428rem;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  }

  #user-profile .profile-header .profile-header-nav .navbar {
    padding: 0.8rem 1rem;
  }

  #user-profile .profile-header .profile-header-nav .navbar .navbar-toggler {
    line-height: 0;
  }

  #user-profile .profile-header .profile-header-nav .navbar .profile-tabs .nav-item i,
  #user-profile .profile-header .profile-header-nav .navbar .profile-tabs .nav-item svg {
    margin-right: 0;
  }

  #user-profile #profile-info .profile-star {
    color: #babfc7;
  }

  #user-profile #profile-info .profile-star i.profile-favorite,
  #user-profile #profile-info .profile-star svg.profile-favorite {
    fill: #ff9f43;
    stroke: #ff9f43;
  }

  #user-profile #profile-info .profile-likes {
    fill: #ea5455;
    stroke: #ea5455;
  }

  #user-profile #profile-info .profile-polls-info .progress {
    height: 0.42rem;
  }

  #user-profile .profile-latest-img {
    transition: all 0.2s ease-in-out;
  }

  #user-profile .profile-latest-img:hover {
    transform: translateY(-4px) scale(1.2);
    z-index: 10;
  }

  #user-profile .profile-latest-img img {
    margin-top: 1.28rem;
  }

  #user-profile .block-element .spinner-border {
    border-width: 0.14rem;
  }

  @media (max-width: 991.98px) {
    #user-profile .profile-latest-img img {
      width: 100%;
    }
  }

  @media (min-width: 768px) {
    .profile-header-nav .profile-tabs {
      width: 100%;
      margin-left: 13.2rem;
    }
  }

  @media (max-width: 575.98px) {
    #user-profile .profile-header .profile-img-container .profile-img {
      height: 100px;
      width: 100px;
    }

    #user-profile .profile-header .profile-img-container .profile-title h2 {
      font-size: 1.5rem;
    }
  }
</style>













@endsection

@section('content')



<section id="avatar-icons-status">
  <div class="row match-height">

    <!-- Avatar Icons Ends -->

    <!-- Avatar Status Starts -->
    <div class="col-xl-12 col-lg-12">
      <div class="card">
        <div class="card-header">
          @if(!empty(request()->pcuser))
          <ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
            <li class="nav-item {{ Route::is('pc_dashboard') ? 'active' : '' }}"><a class="nav-link d-flex align-items-center" href="{{route('pc_dashboard',['pcuser'=> request()->pcuser])}}"><i data-feather='home'></i> &nbsp; {{request()->pcuser}} </a></li>Outlets
   

            <li class="nav-item {{ Route::is('manageOutlets') ? 'active' : '' }}"><a class="nav-link d-flex align-items-center" href="{{route('manageOutlets',['pcuser'=> request()->pcuser])}}"><i data-feather="layers"></i>Manage Outlets</a></li>


          
          </ul>
          @endif

        </div>
        <div class="card-body">

          <div class="demo-inline-spacing">
            @foreach($outlets as $outlet)
                        <a href="{{route('viewStore',['pcuser'=> $pcuser,'store'=> $outlet['StoreName']])}}">
              <div class="avatar" style="padding: 5px;background-color:#f3f2f7;border-radius:50%;" data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="" class="avatar avatar-sm pull-up" data-bs-original-title="{{$outlet['StoreName']}}">
                <span class="avatar-content"> <img src="{{$outlet['outlet_logo']}}" alt="avatar img" width="75" height="75" /></span>
                <span class="avatar-status-offline" style="background-color: "></span>
              </div>
            </a>
            @endforeach

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

<div id="user-profile">
  <!-- profile header -->
  <div class="row">
    <div class="col-12">
      <div class="card profile-header mb-2">
        <!-- profile cover photo -->
        <img class="card-img-top" src="{{URL::to('app-assets/images/logo/rmz_bg_img.jpg')}}" alt="User Profile Image" />
        <!--/ profile cover photo -->

        <div class="position-relative">
          <!-- profile picture -->
          <div class="profile-img-container d-flex align-items-center">
            <div class="profile-img">
              <img src="{{$outletInfo->outlet_logo}}" class="rounded img-fluid" alt="Card image" />
            </div>
            <!-- profile title -->
            <div class="profile-title ms-3">
              <h2 class="">{{strtoupper($outletInfo->StoreName)}}</h2>
              <p class="">{{$pcuser}}</p>
            </div>
          </div>
        </div>

        <!-- tabs pill -->
        <div class="profile-header-nav">
          <!-- navbar -->
          <nav class="navbar navbar-expand-md navbar-light justify-content-end justify-content-md-between w-100">
            <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <i data-feather="align-justify" class="font-medium-5"></i>
            </button>

            <!-- collapse  -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <div class="profile-tabs d-flex justify-content-between flex-wrap mt-1 mt-md-0">
                <ul class="nav nav-pills mb-0">
                  <li class="nav-item">
                    <a class="nav-link fw-bold active" href="#">
                      <i data-feather="activity" class="font-medium-3 me-50 d-none d-md-block"></i>
                      <span class="d-none d-md-block">Overview</span>
                      <i data-feather="activity" class="d-block d-md-none"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link fw-bold" href="#">
                      <span class="d-none d-md-block">About</span>
                      <i data-feather="info" class="d-block d-md-none"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link fw-bold" href="#">
                      <span class="d-none d-md-block">Photos</span>
                      <i data-feather="image" class="d-block d-md-none"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link fw-bold" href="#">
                      <span class="d-none d-md-block">Friends</span>
                      <i data-feather="users" class="d-block d-md-none"></i>
                    </a>
                  </li>
                </ul>
                <!-- edit button -->
                <button class="btn btn-primary">
                  <i data-feather="edit" class="d-block d-md-none"></i>
                  <span class="fw-bold d-none d-md-block">Edit</span>
                </button>
              </div>
            </div>
            <!--/ collapse  -->
          </nav>
          <!--/ navbar -->
        </div>
      </div>
    </div>
  </div>

  <section id="profile-info">
    <div class="row">
      <!-- left profile info section -->
      <div class="col-lg-3 col-12 order-2 order-lg-1">
        <!-- about -->
        <div class="card">
          <div class="card-body">
            <h5 class="mb-75">Manager</h5>
            <p class="card-text">
              {{ $outletInfo->StoreManagerName}}
            </p>
            <div class="mt-2">
              <h5 class="mb-75">Mobile</h5>
              <p class="card-text">{{$outletInfo->StoreManagerPhoneNumber}}</p>
            </div>
            <div class="mt-2">
              <h5 class="mb-75">Opened On</h5>
              <p class="card-text">{{date('D, d M Y H:i:s', strtotime($recordSales[0]->firstsync))}}</p>
            </div>
            <div class="mt-2">
              <h5 class="mb-75">Persft Installed On</h5>
              <p class="card-text">{{date('D, d M Y H:i:s', strtotime($outletInfo->ADSRInstalledDate))}}</p>
            </div>
            <div class="mt-2">
              <h5 class="mb-50">Last Sync</h5>
              <p class="card-text mb-0">{{date('D, d M Y H:i:s', strtotime($recordSales[0]->lastsync))}}</p>
            </div>
            <div class="mt-2">
              <h5 class="mb-50">Status</h5>
              <p class="card-text mb-0"><span class="" style='font-size: 18px;font-weight: 800;color:;'>
                  {{$storeStatus}}
                </span></p>
            </div>
            <div class="mt-2">
              <h5 class="mb-50">Overall Sales</h5>
              <p class="card-text mb-0">
                ₹ 0.00              </p>
            </div>
          </div>
        </div>
      </div>




      

      
    </div>

    
  </section>

</div>

<section id="statistics-card">


  <!--/ profile header -->

  <!-- Stats Vertical Card -->
  <div class="row">



    <div class="col-lg-12 col-md-6 col-12">
      <div class="card card-profile">
        <img src="{{URL::to('app-assets/images/logo/rmz_bg.jpg')}}" class="img-fluid card-img-top" alt="Profile Cover Photo" />


        <span>
          <h3 class="storefont">{{strtoupper($outletInfo->StoreName)}}</h3>
        </span>
        <div class="card-body combody">
          <div class="profile-image-wrapper">
            <div class="profile-image-2">

              <div>
                <img src="{{$outletInfo->outlet_logo}}" class="mobileres" alt="Profile Picture" />
              </div>
            </div>
          </div>



          <br />



          <br />
          <br />



          <table class="leftsidetable" style="text-align: left;">



            <tr>
              <td><strong>Manager</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{ $outletInfo->StoreManagerName}}</td>

            </tr>
            <tr>
              <td><strong>Mobile</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{$outletInfo->StoreManagerPhoneNumber}}</td>

            </tr>


          </table>



          <table class="rightsidetable" style="text-align: left;">



            <tr>
              <td><strong>Opened On</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($recordSales[0]->firstsync))}}</td>

            </tr>
            <tr>
              <td><strong>Persft Installed On</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($outletInfo->ADSRInstalledDate))}}</td>

            </tr>
            <tr>
              <td><strong>Last Sync</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($recordSales[0]->lastsync))}}</td>

            </tr>

            <tr>
              <td><strong>Status</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td><span class="" style='font-size: 18px;font-weight: 800;color:;margin-left: 3px;'>
                  &nbsp;{{$storeStatus}}
                </span></td>

            </tr>

          </table>





          <!-- <span class="badge badge-light-primary profile-badge">Manager : {{$outletInfo->StoreManagerName}}<br/>Mobile : {{$outletInfo->StoreManagerPhoneNumber}}</span><br/>
        <span class="badge badge-light-primary profile-badge">Mobile : {{$outletInfo->StoreManagerPhoneNumber}}</span> -->
          <hr class="mb-2" />





          <ul class="nav nav-pills mb-2">
            <!-- Account -->
            <li class="nav-item">
              <a class="nav-link {{ Route::is('viewStore') ? 'active' : '' }}" href="{{route('viewStore',['pcuser'=>$pcuser, 'store'=>$outletInfo->StoreName])}}">
                <i data-feather="activity" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Overview</span>
              </a>
            </li>

            <!-- billing and plans -->
            <li class="nav-item">
              <a class="nav-link {{ Route::is('storeReports') ? 'active' : '' }}" href="{{route('storeReports',['pcuser'=>$pcuser,'store'=>$outletInfo->StoreName])}}">
                <i data-feather="link" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Reports</span>
              </a>
            </li>
            <!-- notification -->

            <li class="nav-item">
              <a class="nav-link {{ Route::is('salesUpload') ? 'active' : '' }}" href="{{route('salesUpload',['pcuser'=>$pcuser,'store'=>$outletInfo->StoreName])}}">
                <i data-feather="upload-cloud" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Sales Upload</span>
              </a>
            </li>



          </ul>
          <div class="" style="float: right;margin-top: -65px;">
            <!-- <div>
            <h6 class="text-muted fw-bolder">Followers</h6>
            <h3 class="mb-0">10.3k</h3>
          </div>
          <div>
            <h6 class="text-muted fw-bolder">Projects</h6>
            <h3 class="mb-0">156</h3>
          </div> -->
            <div class="ovaralsales">
              <h6 class="text-muted fw-bolder">Overall Sales</h6>
              <h3 class="mb-0"> ₹ 0.00</h3>
            </div>
          </div>
        </div>
      </div>
    </div>



    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-info p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="activity" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            ₹ 0.00          </h4>
          <p class="card-text">Today Sales</p>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-warning p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="bar-chart" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            ₹ 0.00
          </h4>
          <p class="card-text">Week to day</p>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-danger p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="monitor" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            ₹ 0.00          </h4>
          <p class="card-text">Month to day</p>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-primary p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="layers" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            ₹ 0.00          </h4>
          <p class="card-text">Year to day</p>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-warning p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="navigation" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            ₹ 0.00          </h4>
          <p class="card-text">Last Year Sales</p>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 col-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="avatar bg-light-primary p-50 mb-1 ">
            <div class="avatar-content imgavatar">
              <i data-feather="trending-up" class="font-medium-5"></i>
            </div>
          </div>
          <h4 class="fw-bolder">
            0 %          </h4>
          <p class="card-text">TY vs LY Sales %</p>
        </div>
      </div>
    </div>

  </div>
  <!--/ Stats Vertical Card -->

  <!-- <button id="download" class="download">download</button> -->
  <div class="row">
    <input type="hidden" id="firstSyncyear" value="{{date('Y', strtotime($recordSales[0]->firstsync))}}">
    <input type="hidden" id="firstSyncmonth" value="{{date('n', strtotime($recordSales[0]->firstsync))}}">
    <!-- Scatter Chart Starts  -->
    <div class="col-lg-6 col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-baseline align-items-sm-center flex-sm-row flex-column">
          <h4 class="card-title">Annual Sales Summary</h4>


          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group">

            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-top: 8px;margin-right: 14px;">Year</label>
            <select id="" class="form-control sm:w-56 box pl-10 yearsales">
              <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>            </select>

          </div>

          <div class="dropdown">
            <button type="button" class="btn dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="align-justify" class="font-medium-3 me-50"></i></button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" id="annualsales" download="annual_sales_summery.jpg" href=""><i data-feather="image" class="font-medium-3 me-50"></i>Image</a></li>
              <li><a class="dropdown-item" onclick="downloadPDF('canvasneww')" href="javascript:void(0)"><i data-feather="clipboard" class="font-medium-3 me-50"></i>Pdf</a></li>


            </ul>
          </div>
        </div>
        <div class="card-body" style="height: 400px">
          <canvas id="canvasneww"></canvas>
        </div>
      </div>
    </div>
    <!-- Scatter Chart Ends  -->
    <!-- Donut Chart Starts -->
    <div class="col-lg-6 col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-baseline align-items-sm-center flex-sm-row flex-column">
          <h4 class="card-title">Monthly Sales Summary</h4>
          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group">

            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-top: 8px;margin-right: 14px;">Year</label>
            <select id="" class="form-control sm:w-56 box pl-10 itemyearsales">
              <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>            </select>

          </div>

          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group">

            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-top: 8px;margin-right: 14px;">Month</label>
            <select class='form-control sm:w-56 box pl-10 itemmonthsales'>
              <option value="01" >January</option>
              <option value="02"  selected>February</option>
              <option value="03" >March</option>
              <option value="04" >April</option>
              <option value="05" >May</option>
              <option value="06" >June</option>
              <option value="07" >July</option>
              <option value="08" >August</option>
              <option value="09" >September</option>
              <option value="10" >October</option>
              <option value="11" >November</option>
              <option value="12" >December</option>
            </select>

          </div>

          <div class="dropdown">
            <button type="button" class="btn dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="align-justify" class="font-medium-3 me-50"></i></button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" id="monthlysales" download="monthly_sales_summery.jpg" href=""><i data-feather="image" class="font-medium-3 me-50"></i>Image</a></li>
              <li><a class="dropdown-item" onclick="downloadPDF('canvasitem')" href="javascript:void(0)"><i data-feather="clipboard" class="font-medium-3 me-50"></i>Pdf</a></li>
            </ul>
          </div>
        </div>
        <div class="card-body" style="height: 400px">
          <canvas id="canvasitem"></canvas>
        </div>
      </div>
    </div>
    <!-- Donut Chart Starts -->

  <!-- asset outlet start-->

    <div class="col-xl-12 col-md-12 col-sm-12 box-dis">
      <!-- <div class="card text-center" style="height: 500px;">--Height Fix with only 500 px--</div> -->
      <div class="card text-center" >
        <div class="card-body table-responsive">
          <h4 class="card-title" style="float: left;">Asset Outlets Details : </h4>
          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group" style="float: right;">
            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-right: 14px;">Assets: </label>
            <select id="" class="form-control sm:w-56 box pl-10 assetoutlet" style="margin-top: -8px;">
              <!-- ' . ($assets_list->a_name === $assets_list->a_name ? ' selected="selected"' : '') . ' -->
                <!-- <option value="">--Select Asset--</option> -->
                @foreach($ps_assets as $assets_list)
                  <option value="{{ $assets_list->id }}" name="search" id="search_ass">{{ $assets_list->a_name .' - '.$assets_list->l_name }} </option>
                  @endforeach
              </select>
          </div>
          
            <table class="table table-hover table-bordered" style="color: #3d4a66;">
              <thead>
                <tr>
                    <th>Store Name</th>
                    <th>Store Manager Name</th>
                    <th>Manager Phone Number</th>
                    <th>LastOnline</th>
                    <th>LocationName</th>
                    <th>LastUpdate</th>
                    <th>ADSRInstalledDate</th>
                </tr>
              </thead>
              <tbody class="assetoutletsview">
                    @foreach($ao_data as $outlet_list)
                <tr>
                    <td>{{$outlet_list->StoreName}}</td>
                    <td>@if($outlet_list->StoreManagerName!=''){{$outlet_list->StoreManagerName}} @else <b>{{ "Not Found in Database"; }}</b> @endif</td>
                    <td>@if($outlet_list->StoreManagerPhoneNumber!=''){{$outlet_list->StoreManagerPhoneNumber}} @else <b>{{ "Not Found in Database"; }} @endif</td>
                    <td>{{$outlet_list->LastOnline}}</td>
                    <td>{{$outlet_list->LocationName}}</td>
                    <td>{{$outlet_list->LastUpdate}}</td>
                    <td>{{$outlet_list->ADSRInstalledDate}}</td>
                </tr>
                        @endforeach
              </tbody>
            </table>
          
        </div>
      </div>
    </div>

    <!-- AssetOutlet Listing End -->
  
    <div class="col-xl-3 col-md-4 col-sm-6 box-dis">
      <div class="card text-center" style="height: 235px;">
        <div class="card-body">
          <div class="">

            <div class="btn-group mt-md-0 mt-1 weekendgraphmob">

              <div class="" role="group" aria-label="" style="margin-left: 15px;margin-top: 4px;">
                <select id="" class="form-select onoffyearsales" style="width: 85px;">
                  <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>                </select>

              </div>
              <div class="" role="group" aria-label="" style="margin-left: 15px;margin-top: 4px;">
                <select id="" name="" class="form-select onoffmonthsales" style="width: 123px;">
                  <option value="01" >January</option>
                  <option value="02"  selected>February</option>
                  <option value="03" >March</option>
                  <option value="04" >April</option>
                  <option value="05" >May</option>
                  <option value="06" >June</option>
                  <option value="07" >July</option>
                  <option value="08" >August</option>
                  <option value="09" >September</option>
                  <option value="10" >October</option>
                  <option value="11" >November</option>
                  <option value="12" >December</option>
                </select>
              </div>

            </div>
            <div class="chart-container-donut">
              <canvas class="chartjs6 chartjs-render-monitor9" id="doughnut-chart-ex-online"></canvas>
            </div>

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

    <div class="col-xl-2 col-md-4 col-sm-6 box-dis">
      <div class="card text-center" style="height: 235px;">
        <div class="card-body">
          <div class="flex" style="display:flex;margin-bottom: 30px;">
            <div class="avatar bg-light-info p-50 mb-1 " style="right: 5px;">
              <div class="avatar-content imgavatar">
                <i data-feather="activity" class="font-medium-5"></i>

              </div>

            </div>
            <div class="" role="group" aria-label="Basic radio toggle button group" style="margin-left: 15px;margin-top: 4px;">
              <select id="avaragesales" required name="avaragesales" class="form-select" style="width: 123px;">
                <option value="Today">Today</option>
                <option value="This Month">This Month</option>
                <option value="This Year">This Year</option>
                <option value="Overall">Overall</option>
              </select>
            </div>
          </div>
          <div class="centerdivs" style="text-align: center;">
            <h4 class="fw-bolder boxleft valueamountavarage" style="text-align: center;">
                              {{ \Hp::currencyFormat(round($totgrand3,2)) }}

                          </h4>
            <p class="card-text boxleft" style="text-align: center;">Average Sale</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 box-dis">
      <div class="card text-center" style="height: 235px;">
        <div class="card-body">
          <div class="flex" style="display:flex;margin-bottom: 30px;">
            <div class="avatar bg-light-warning p-50 mb-1 " style="right: 5px;">
              <div class="avatar-content imgavatar">
                <i data-feather="bar-chart" class="font-medium-5"></i>
              </div>

            </div>
            <div class="" role="group" aria-label="Basic radio toggle button group" style="margin-left: 15px;margin-top: 4px;">
              <select id="highestsales" required name="highestsales" class="form-select" style="width: 123px;">
                <option value="Today">Today</option>
                <option value="This Week">This Week</option>
                <option value="This Month">This Month</option>
                <option value="This Year">This Year</option>
              </select>
            </div>
          </div>
          <div class="centerdivs" style="text-align: center;">
            <h4 class="fw-bolder boxleft valueamount" style="text-align: center;">
              ₹ 0.00            </h4>
            <p class="card-text boxleft" style="text-align: center;">Highest Transaction</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-2 col-md-4 col-sm-6 box-dis">
      <div class="card text-center" style="height: 235px;">
        <div class="card-body">
          <div class="flex" style="display:flex;margin-bottom: 30px;">

            <div class="avatar bg-light-danger p-50 mb-1 " style="right: 5px;">
              <div class="avatar-content imgavatar">
                <i data-feather="monitor" class="font-medium-5"></i>
              </div>
            </div>
            <div class="" role="group" aria-label="Basic radio toggle button group" style="margin-left: 15px;margin-top: 4px;">
              <select id="nooftransactions" required name="nooftransactions" class="form-select" style="width: 123px;">
                <option value="Today">Today</option>
                <option value="This Month">This Month</option>
                <option value="This Year">This Year</option>
                <option value="Overall">Overall</option>
              </select>
            </div>
          </div>
          <h4 class="fw-bolder boxleft nooftransvalue" style="text-align: center;">
            {{ $recordSales[0]->currentDateCount }}
          </h4>
          <p class="card-text boxleft" style="text-align: center;">No of Transactions</p>
        </div>
      </div>
    </div>


    <!-- <div class="col-xl-2 col-md-4 col-sm-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="flex" style="display:flex;">

          <canvas class="doughnut-chart-ex chartjs chartjs-render-monitor"></canvas>
          
          </div>

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

    <div class="col-xl-3 col-md-4 col-sm-6 box-dis">
      <div class="card text-center">
        <div class="card-body">
          <div class="">

            <div class="btn-group mt-md-0 mt-1 weekendgraphmob">

              <div class="" role="group" aria-label="" style="margin-left: 15px;margin-top: 4px;">
                <select id="" class="form-select weekyearsales" style="width: 85px;">
                  <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>                </select>

              </div>
              <div class="" role="group" aria-label="" style="margin-left: 15px;margin-top: 4px;">
                <select id="" name="" class="form-select weekmonthsales" style="width: 123px;">
                  <option value="01" >January</option>
                  <option value="02"  selected>February</option>
                  <option value="03" >March</option>
                  <option value="04" >April</option>
                  <option value="05" >May</option>
                  <option value="06" >June</option>
                  <option value="07" >July</option>
                  <option value="08" >August</option>
                  <option value="09" >September</option>
                  <option value="10" >October</option>
                  <option value="11" >November</option>
                  <option value="12" >December</option>
                </select>
              </div>

            </div>
            <div class="chart-container-donut">
              <canvas class="chartjs chartjs-render-monitor" id="doughnut-chart-ex"></canvas>
            </div>

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

    </div>


    <div class="col-xl-6 col-md-6 col-sm-6 box-dis">
      <div class="card text-center" style="height: 260px;">
        <div class="card-body table-responsive">



          <h4 class="card-title" style="float: left;">Top 3 Performing Months</h4>

          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group" style="float: right;">

            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-right: 14px;">Year</label>
            <select id="" class="form-control sm:w-56 box pl-10 topsales" style="margin-top: -8px;">
              <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>            </select>

          </div>



          <table class="table table-hover table-bordered" style="color: #3d4a66;">
            <thead>
              <tr>
                <th>Year</th>
                <th>Month</th>
                <th>No of Transactions</th>
                <th>Total Amount</th>

              </tr>
            </thead>
            <tbody class="topthreesalesview">
              @if(isset($topthreesales) && !empty($topthreesales))
              @foreach($topthreesales as $topthree)
              <tr>
                <td>{{$topthree->year}}</td>
                <td>{{$topthree->month}}</td>
                <td>{{$topthree->no_of_transactions}}</td>
                <td>{{ \Hp::currencyFormat(round($topthree->amount,2)) }}</td>

              </tr>
              @endforeach
              @endif

            </tbody>
          </table>



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

    <div class="col-xl-6 col-md-6 col-sm-6 box-dis">
      <div class="card text-center" style="height: 260px;">
        <div class="card-body table-responsive">



          <h4 class="card-title" style="float: left;">Bottom 3 Performing Months</h4>

          <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group" style="float: right;">

            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-right: 14px;">Year</label>
            <select id="" class="form-control sm:w-56 box pl-10 bottomsales" style="margin-top: -8px;">
              <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>            </select>

          </div>



          <table class="table table-hover table-bordered" style="color: #3d4a66;">
            <thead>
              <tr>
                <th>Year</th>
                <th>Month</th>
                <th>No of Transactions</th>
                <th>Total Amount</th>

              </tr>
            </thead>
            <tbody class="bottomthreesalesview">
              @if(isset($bottomthreesales) && !empty($bottomthreesales))
              @foreach($bottomthreesales as $bottomthree)
              <tr>
                <td>{{$bottomthree->year}}</td>
                <td>{{$bottomthree->month}}</td>
                <td>{{$bottomthree->no_of_transactions}}</td>
                <td>{{ \Hp::currencyFormat(round($bottomthree->amount,2)) }}</td>

              </tr>
              @endforeach
              @endif

            </tbody>
          </table>



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


    <div class="row">
      <!-- Medal Card -->

      <!--/ Medal Card -->

      <!-- Statistics Card -->
      <div class="col-xl-12 col-md-12 col-12">
        <div class="card" style="width: 1440px;">
          <div class="card-header d-flex justify-content-between align-items-baseline align-items-sm-center flex-sm-row flex-column">

            <h4 class="card-title">Hourly Sales Summary</h4>
            <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group">
              <input type="text" class="form-control" name="daterange" value="02/02/2026 - 02/12/2026" />
            </div>

            <div class="dropdown">
              <button type="button" class="btn dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="align-justify" class="font-medium-3 me-50"></i></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" id="hourlysales" download="hourly_sales_summery.jpg" href=""><i data-feather="image" class="font-medium-3 me-50"></i>Image</a></li>
                <li><a class="dropdown-item" onclick="downloadPDF('canvashoursales')" href="javascript:void(0)"><i data-feather="clipboard" class="font-medium-3 me-50"></i>Pdf</a></li>
              </ul>
            </div>




          </div>
          <div class="card-body" style="height: 500px">
            <canvas id="canvashoursales"></canvas>
          </div>
        </div>
      </div>
      <!--/ Statistics Card -->
    </div>




    <div class="row">
      <!-- Medal Card -->

      <!--/ Medal Card -->

      <!-- Statistics Card -->
      <div class="col-xl-12 col-md-12 col-12">
        <div class="card" style="width: 1440px;">
          <div class="card-header">
            <div>
              <h4 class="card-title">Year on Year Comparision</h4>
              <!-- <span class="card-subtitle text-muted">Commercial networks and enterprises</span> -->


            </div>
            <div class="dropdown">
              <button type="button" class="btn dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="align-justify" class="font-medium-3 me-50"></i></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" id="yearlysales" download="year-on-year-comparision.jpg" href=""><i data-feather="image" class="font-medium-3 me-50"></i>Image</a></li>
                <li><a class="dropdown-item" onclick="downloadPDF('canvasfinal2')" href="javascript:void(0)"><i data-feather="clipboard" class="font-medium-3 me-50"></i>Pdf</a></li>
              </ul>
            </div>
          </div>

          <div class="card-body" style="height: 500px">
            <canvas id="canvasfinal2"></canvas>
          </div>
        </div>
      </div>
      <!--/ Statistics Card -->
    </div>



    <!-- <div class="row table-responsive">
    <div class="col-12">
      <div class="card">
        <div class="card-header border-bottom">
          <h4 class="card-title">Reports</h4> 
        </div>
        <div class="card-datatable">
          <table class="dt-responsive table" id="salestable">

          <thead>
              <tr>

                <th>Year</th>
                <th>Month</th>
                <th>Net Amount</th>
                <th>Tax Amount</th>
                <th>Grand Total</th>
              </tr>
            </thead>

            <tfoot>
              <tr>

                <th>Year</th>
                <th>Month</th>
                <th>Net Amount</th>
                <th>Tax Amount</th>
                <th>Grand Total</th>
              </tr>
            </tfoot>
           
          </table>
        </div>
      </div>
    </div>
  </div> -->




</section>






@endsection



@section('page-script')




<script>
  const plugin = {
    id: 'custom_canvas_background_color',
    beforeDraw: (chart) => {
      const {
        ctx
      } = chart;
      ctx.save();
      ctx.globalCompositeOperation = 'destination-over';
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, chart.width, chart.height);
      ctx.restore();
    }
  };

  function round(num, decimalPlaces = 0) {
    var p = Math.pow(10, decimalPlaces);
    var n = (num * p) * (1 + Number.EPSILON);
    return Math.round(n) / p;
  }


  $(function() {
    //get the pie chart canvas
    var cDatanut = JSON.parse(``);
    var ctxs = $("#doughnut-chart-ex-online");

    var amountnew = cDatanut.camount;


    var latest = amountnew.toString();
    var strarray = latest.split(',');



    var amountnewper = cDatanut.camountper;


    var latestper = amountnewper.toString();
    var strarrayper = latestper.split(',');

    // console.log(str_array[0]);
    // console.log('testt');

    const number1 = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'INR'
    }).format(strarray[0]);
    const number2 = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'INR'
    }).format(strarray[1]);



    //pie chart data
    var data = {
      labels: ['Delivery (' + round(strarrayper[0], 2) + '%)', 'DineIn (' + round(strarrayper[1], 2) + '%)'],
      datasets: [{
        label: "Sales",
        data: [strarray[0], strarray[1]],
        backgroundColor: ["#4bc0c0", "#528fba"],
        hoverBackgroundColor: ["#4bc0c0", "#528fba"],
        borderWidth: 2,
      }]
    };

    //options
    var options = {
      responsive: true,
      maintainAspectRatio: false,
      // responsiveAnimationDuration: 500,
      // cutoutPercentage: 60,
      legend: {
        position: "right",
        align: "end"
      },
      tooltips: {
        callbacks: {
          // this callback is used to create the tooltip label
          label: function(tooltipItem, data) {
            // get the data label and data value to display
            // convert the data value to local string so it uses a comma seperated number
            var dataLabel = data.labels[tooltipItem.index];
            //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

            var value = ': ' + Intl.NumberFormat('hi', {
                style: 'currency',
                currency: 'INR',
                minimumFractionDigits: 0
              })
              .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

            //   if (Chart.helpers.isArray(dataLabel)) {
            //     // show value on first line of multiline label
            //     // need to clone because we are changing the value
            //     dataLabel = dataLabel.slice();
            //     dataLabel[0] += value;
            //   } else {
            dataLabel += value;
            //   }

            // return the text to display on the tooltip
            return dataLabel;

          }
        }
      }
    };

    //create Pie Chart class object
    window.myLine9 = new Chart(ctxs, {
      type: "doughnut",
      data: data,
      options: options
    });

  });


  $(function() {
    //get the pie chart canvas
    var cDatanut = JSON.parse(``);
    var ctxs = $("#doughnut-chart-ex");

    var amountnew = cDatanut.camount;


    var latest = amountnew.toString();
    var strarray = latest.split(',');



    var amountnewper = cDatanut.camountper;


    var latestper = amountnewper.toString();
    var strarrayper = latestper.split(',');

    // console.log(str_array[0]);
    // console.log('testt');

    const number1 = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'INR'
    }).format(strarray[0]);
    const number2 = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'INR'
    }).format(strarray[1]);



    //pie chart data
    var data = {
      labels: ['Week Days (' + round(strarrayper[0], 2) + '%)', 'Weekends (' + round(strarrayper[1], 2) + '%)'],
      datasets: [{
        label: "Sales",
        data: [strarray[0], strarray[1]],
        backgroundColor: ["#5EBAF5", "#ffb4b4"],
        hoverBackgroundColor: ["#5EBAF5", "#ffb4b4"],
        borderWidth: 2,
      }]
    };

    //options
    var options = {
      responsive: true,
      maintainAspectRatio: false,
      // responsiveAnimationDuration: 500,
      // cutoutPercentage: 60,
      legend: {
        position: "right",
        align: "end"
      },
      tooltips: {
        callbacks: {
          // this callback is used to create the tooltip label
          label: function(tooltipItem, data) {
            // get the data label and data value to display
            // convert the data value to local string so it uses a comma seperated number
            var dataLabel = data.labels[tooltipItem.index];
            //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

            var value = ': ' + Intl.NumberFormat('hi', {
                style: 'currency',
                currency: 'INR',
                minimumFractionDigits: 0
              })
              .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

            //   if (Chart.helpers.isArray(dataLabel)) {
            //     // show value on first line of multiline label
            //     // need to clone because we are changing the value
            //     dataLabel = dataLabel.slice();
            //     dataLabel[0] += value;
            //   } else {
            dataLabel += value;
            //   }

            // return the text to display on the tooltip
            return dataLabel;

          }
        }
      }
    };

    //create Pie Chart class object
    window.myLine3 = new Chart(ctxs, {
      type: "doughnut",
      data: data,
      options: options
    });

  });



  function getRandomColor(strt) {


    var newArray = new Array();
    // var arrayNew = [];
    for (let i = 0; i < strt.length; i++) {
      // console.log(strt[i]);
      var date1 = strt[i].split('-');
      var date2 = date1[2] + '-' + date1[1] + '-' + date1[0];


      var dt = new Date(date2);


      if (dt.getDay() == 6 || dt.getDay() == 0) {
        // console.log(date2 + "weekend");
        newArray.push('#ffb4b4');
      } else {
        // console.log(date2 + "weekday");
        newArray.push('#5EBAF5');
      }




    }

    console.log(newArray);

    return newArray;

    // var arr = ['#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#ffb4b4', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#ffb4b4', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5', '#5EBAF5'];
    // return arr;
  }


  $('.onoffmonthsales').change(function() {
    var month = $(this).val();
    var year = $(".onoffyearsales").val();
    var storeName = '';
    getOnOffChartData(storeName, month, year);





  });

  $('.onoffyearsales').change(function() {
    var year = $(this).val();
    var month = $(".onoffmonthsales").val();
    var storeName = '';
    // getWeekChartData(storeName, month, year);



    var firstsyncyear = $('#firstSyncyear').val();
    var firstsyncmonth = $('#firstSyncmonth').val();

    if (firstsyncyear == year) {

      var monthsNames = {
        '1': 'January',
        '2': 'February',
        '3': 'March',
        '4': 'April',
        '5': 'May',
        '6': 'June',
        '7': 'July',
        '8': 'August',
        '9': 'September',
        '10': 'October',
        '11': 'November',
        '12': 'December'
      };
      // alert( months['01'] );

      let selectMonth = $(".onoffmonthsales");

      selectMonth.html('');

      // alert(firstsyncmonth);

      for (var m = firstsyncmonth; m <= 12; m++) {
        let month = monthsNames[m];
        let monthElem = document.createElement("option");
        monthElem.value = m;
        monthElem.textContent = month;
        selectMonth.append(monthElem);
      }

      getOnOffChartData(storeName, firstsyncmonth, firstsyncyear);

    } else {



      let selectMonth = $(".onoffmonthsales");

      selectMonth.html('');



      monthnameslist = '<option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>';

      selectMonth.html(monthnameslist);


      var monthnew = $(".onoffmonthsales").val();

      var yearnew = $(this).val();

      // alert(monthnew);

      getOnOffChartData(storeName, monthnew, yearnew);



    }


  });



  function getOnOffChartData(storeName, month, year) {

    // var base = "{{route('monthWiseSaleBarChart')}}";
    // var baseurl = base + '?storeName=' + storeName + '&year=' + year + '&month=' + month;

    $.ajax({
      url: "{{route('onoffSaleBarChart')}}",
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        "month": month,
        _method: 'post'
      },
      dataType: 'json',
      success: function(responce) {

        console.log(responce);
        var amountnew = responce.camount;


        var latest = amountnew.toString();
        var strarray = latest.split(',');



        var amountnewper = responce.camountper;


        var latestper = amountnewper.toString();
        var strarrayper = latestper.split(',');




        renderOnOffChartItem(strarray, strarrayper);
      },
      error: function(responce) {

        console.log(responce);
      }
    });
  }


  function renderOnOffChartItem(itemData, itemDataPer) {
    // var progress = document.getElementById('animationProgress');

    // alert(itemData);
    var config4 = {
      type: 'doughnut',
      data: {
        labels: ['Delivery (' + round(itemDataPer[0], 2) + '%)', 'DineIn (' + round(itemDataPer[1], 2) + '%)'],
        datasets: [{
          label: "Sales",
          data: [itemData[0], itemData[1]],
          backgroundColor: ["#4bc0c0", "#528fba"],
          hoverBackgroundColor: ["#4bc0c0", "#528fba"],
          borderWidth: 2,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        // responsiveAnimationDuration: 500,
        // cutoutPercentage: 60,
        legend: {
          position: "right",
          align: "end"
        },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = ': ' + Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return dataLabel;

            }
          }
        }
      },
    }

    var ctx4 = document.getElementById("doughnut-chart-ex-online").getContext('2d');
    ctx4.canvas.width = 200;
    ctx4.canvas.height = 200;
    if (
      window.myLine9 !== undefined &&
      window.myLine9 !== null
    ) {
      window.myLine9.destroy();
    }
    window.myLine9 = new Chart(ctx4, config4);
  }


  $('.weekmonthsales').change(function() {
    var month = $(this).val();
    var year = $(".weekyearsales").val();
    var storeName = '';
    getWeekChartData(storeName, month, year);





  });

  $('.weekyearsales').change(function() {
    var year = $(this).val();
    var month = $(".weekmonthsales").val();
    var storeName = '';
    // getWeekChartData(storeName, month, year);



    var firstsyncyear = $('#firstSyncyear').val();
    var firstsyncmonth = $('#firstSyncmonth').val();

    if (firstsyncyear == year) {

      var monthsNames = {
        '1': 'January',
        '2': 'February',
        '3': 'March',
        '4': 'April',
        '5': 'May',
        '6': 'June',
        '7': 'July',
        '8': 'August',
        '9': 'September',
        '10': 'October',
        '11': 'November',
        '12': 'December'
      };
      // alert( months['01'] );

      let selectMonth = $(".weekmonthsales");

      selectMonth.html('');

      // alert(firstsyncmonth);

      for (var m = firstsyncmonth; m <= 12; m++) {
        let month = monthsNames[m];
        let monthElem = document.createElement("option");
        monthElem.value = m;
        monthElem.textContent = month;
        selectMonth.append(monthElem);
      }

      getWeekChartData(storeName, firstsyncmonth, firstsyncyear);

    } else {



      let selectMonth = $(".weekmonthsales");

      selectMonth.html('');



      monthnameslist = '<option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>';

      selectMonth.html(monthnameslist);


      var monthnew = $(".weekmonthsales").val();

      var yearnew = $(this).val();

      // alert(monthnew);

      getWeekChartData(storeName, monthnew, yearnew);



    }


  });



  function getWeekChartData(storeName, month, year) {

    // var base = "{{route('monthWiseSaleBarChart')}}";
    // var baseurl = base + '?storeName=' + storeName + '&year=' + year + '&month=' + month;

    $.ajax({
      url: "{{route('weekWiseSaleBarChart')}}",
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        "month": month,
        _method: 'post'
      },
      dataType: 'json',
      success: function(responce) {

        console.log(responce);
        var amountnew = responce.camount;


        var latest = amountnew.toString();
        var strarray = latest.split(',');



        var amountnewper = responce.camountper;


        var latestper = amountnewper.toString();
        var strarrayper = latestper.split(',');




        renderWeekChartItem(strarray, strarrayper);
      },
      error: function(responce) {

        console.log(responce);
      }
    });
  }


  function renderWeekChartItem(itemData, itemDataPer) {
    // var progress = document.getElementById('animationProgress');

    // alert(itemData);
    var config3 = {
      type: 'doughnut',
      data: {
        labels: ['Week Days (' + round(itemDataPer[0], 2) + '%)', 'Weekends (' + round(itemDataPer[1], 2) + '%)'],
        datasets: [{
          label: "Sales",
          data: [itemData[0], itemData[1]],
          backgroundColor: ["#5EBAF5", "#ffb4b4"],
          hoverBackgroundColor: ["#5EBAF5", "#ffb4b4"],
          borderWidth: 2,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        // responsiveAnimationDuration: 500,
        // cutoutPercentage: 60,
        legend: {
          position: "right",
          align: "end"
        },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = ': ' + Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return dataLabel;

            }
          }
        }
      },
    }

    var ctx3 = document.getElementById("doughnut-chart-ex").getContext('2d');
    ctx3.canvas.width = 200;
    ctx3.canvas.height = 200;
    if (
      window.myLine3 !== undefined &&
      window.myLine3 !== null
    ) {
      window.myLine3.destroy();
    }
    window.myLine3 = new Chart(ctx3, config3);
  }


  $('.itemmonthsales').change(function() {
    var month = $(this).val();
    var year = $(".itemyearsales").val();
    var storeName = '';
    getChartDataItem(storeName, month, year);
  });

  $('.itemyearsales').change(function() {
    var year = $(this).val();
    var month = $(".itemmonthsales").val();
    var storeName = '';
    // getChartDataItem(storeName, month, year);

    var firstsyncyear = $('#firstSyncyear').val();
    var firstsyncmonth = $('#firstSyncmonth').val();

    if (firstsyncyear == year) {

      var monthsNames = {
        '1': 'January',
        '2': 'February',
        '3': 'March',
        '4': 'April',
        '5': 'May',
        '6': 'June',
        '7': 'July',
        '8': 'August',
        '9': 'September',
        '10': 'October',
        '11': 'November',
        '12': 'December'
      };
      // alert( months['01'] );

      let selectMonth = $(".itemmonthsales");

      selectMonth.html('');

      // alert(firstsyncmonth);

      for (var m = firstsyncmonth; m <= 12; m++) {
        let month = monthsNames[m];
        let monthElem = document.createElement("option");
        monthElem.value = m;
        monthElem.textContent = month;
        selectMonth.append(monthElem);
      }

      getChartDataItem(storeName, firstsyncmonth, firstsyncyear);

    } else {



      let selectMonth = $(".itemmonthsales");

      selectMonth.html('');



      monthnameslist = '<option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>';

      selectMonth.html(monthnameslist);


      var monthnew = $(".itemmonthsales").val();

      var yearnew = $(this).val();

      // alert(monthnew);

      getChartDataItem(storeName, monthnew, yearnew);



    }




  });


  function renderChartItem(itemData, labelData) {
    // var progress = document.getElementById('animationProgress');
    var config2 = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: labelData,
        datasets: [{
          label: 'Sales',
          data: itemData,
          borderWidth: 1,
          backgroundColor: getRandomColor(labelData),
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
        }]
      },
      options: {

        legend: {
          display: false
        },
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return value;

            }
          }
        },
        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, ],
        },
      },
    }

    var ctx2 = document.getElementById("canvasitem").getContext('2d');
    if (
      window.myLine2 !== undefined &&
      window.myLine2 !== null
    ) {
      window.myLine2.destroy();
    }
    window.myLine2 = new Chart(ctx2, config2);
  }


  function getChartDataItem(storeName, month, year) {

    // alert(month);
    // alert(year);

    // var base = "{{route('monthWiseSaleBarChart')}}";
    // var baseurl = base + '?storeName=' + storeName + '&year=' + year + '&month=' + month;

    $.ajax({
      url: "{{route('monthWiseSaleBarChart')}}",
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        "month": month,
        _method: 'post'
      },
      dataType: 'json',
      success: function(responce) {

        console.log(responce);
        var itemData = [];
        var labelData = [];
        // var countData = [];
        for (var i in responce) {
          itemData.push(responce[i].sale_amount);
          labelData.push(responce[i].date_new);
          // countData.push(responce[i].totalCount);
        }
        renderChartItem(itemData, labelData);
      },
      error: function(responce) {

        console.log(responce);
      }
    });
  }

  $(function() {
    //get the pie chart canvas
    var cDatanutNew = JSON.parse(``);

    //   alert(cDatanut);

    var ctxsnewitem = $("#canvasitem");

    var configvaritem = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: cDatanutNew.datenew,
        datasets: [{
          label: 'Sales',
          data: cDatanutNew.sale_amount,
          borderWidth: 1,
          backgroundColor: getRandomColor(cDatanutNew.datenew),
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
        }]
      },
      options: {
        legend: {
          display: false
        },
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return value;

            }
          }
        },
        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, ],
        },
      },
    }




    if (
      window.myLine2 !== undefined &&
      window.myLine2 !== null
    ) {
      window.myLine2.destroy();
    }



    //create Pie Chart class object
    window.myLine2 = new Chart(ctxsnewitem, configvaritem);






  });


  $(function() {


    var color = ["rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(231,233,237)", "rgb(255, 205, 86)", "rgb(153, 102, 255)"];

    var cDatanut = JSON.parse(``);


    datasetsValue = [];

    var i = 0;
    for (var key in cDatanut) {
      // console.log(key, cDatanut[key].values());

      // console.log(cDatanut[key]);

      const iterator = cDatanut[key];


      // const january = iterator.find(item => item.key === "Jan");

      // console.log(january);
      iter = [];
      for (const value of iterator) {
        console.log(value.year);
        if (cDatanut[value.year]) {
          iter.push(value.Jan, value.Feb, value.Mar, value.Apr, value.May, value.June, value.July, value.Aug, value.Sept, value.Oct, value.Nov, value.Dec);
        }
      }

      // console.log(iter);


      datasetsValue.push({
        label: key,
        backgroundColor: color[i],
        borderColor: color[i],
        data: iter,
        lineTension: 0,
        pointRadius: 4,
        fill: false,
      });

      // lineChartData.datasets.push({
      i++;
    }





    var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var config = {
      type: 'line',
      plugins: [plugin],
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        datasets: datasetsValue
      },
      options: {
        maintainAspectRatio: false,
        responsive: true,
        title: {
          display: false,
          text: 'Chart.js Line Chart'
        },
        tooltips: {
          mode: 'label',
          label: 'mylabel',
          beginAtZero: true,
          callbacks: {
            label: function(tooltipItem, data) {
              //    return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 

              var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return value;



            },
            // footer: (tooltipItems, data) => {
            //     let total = tooltipItems.reduce((a, e) => a + parseFloat(e.yLabel), 0);
            //     //   return 'Total: ' + total;
            //     return 'Total: ' + Intl.NumberFormat('hi', {
            //             style: 'currency',
            //             currency: 'INR',
            //             minimumFractionDigits: 0
            //         })
            //         .format(total).replace(/^(\D+)/, '$1 ');
            // }
          },
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: false,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              // beginAtZero: true,
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                // return "₹" + value.toLocaleString();
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            display: true,
            scaleLabel: {
              display: false,
              labelString: 'Value'
            }
          }]
        }
      }
    };


    var ctx = document.getElementById("canvasfinal2").getContext("2d");
    window.canvasnew = new Chart(ctx, config);




  });


  //asset with outlets purose Start

  $('.assetoutlet').change(function() {
    var pc_id = $(".assetoutlet").val();
    // alert(pc_id);
    $.ajax({
      url: "{{route('assetoutlets')}}",
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "pc_id": pc_id,
        _method: 'post'
      },
      success: function(responce) {
        $('.assetoutletsview').html(responce);
      },
      error: function(responce) {
        console.log(responce);
      }
    });

  });

  //asset with outlets purose End


  $('.topsales').change(function() {
    var year = $(this).val();
    var storeName = '';
    // alert(storeName);
    $.ajax({
      url: "{{route('topthreeSales')}}",
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        _method: 'post'
      },
      success: function(responce) {
        $('.topthreesalesview').html(responce);
      },
      error: function(responce) {
        console.log(responce);
      }
    });

  });


  $('.bottomsales').change(function() {
    var year = $(this).val();
    var storeName = '';
    // alert(storeName);
    $.ajax({
      url: "{{route('bottomthreeSales')}}",
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        _method: 'post'
      },
      success: function(responce) {
        $('.bottomthreesalesview').html(responce);
      },
      error: function(responce) {
        console.log(responce);
      }
    });

  });



  $('.yearsales').change(function() {
    var year = $(this).val();
    var month = $(".monthsales").val();
    var storeName = '';
    // alert(storeName);
    getChartData(year, storeName);




  });


  function renderChart(totalAmount, Lable) {

    // alert(totalAmount);
    // var progress = document.getElementById('animationProgress');
    var config6 = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: Lable,
        datasets: [{
          label: 'Sales',
          data: totalAmount,
          borderWidth: 1,
          backgroundColor: "#359ee4",
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
        }]
      },
      options: {
        maintainAspectRatio: false,
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return value;

            }
          }
        },


        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, ],
        },
      },
    }

    var ctx6 = document.getElementById("canvasneww").getContext('2d');
    if (
      window.myLinevar !== undefined &&
      window.myLinevar !== null
    ) {
      window.myLinevar.destroy();
    }
    window.myLinevar = new Chart(ctx6, config6);
  }


  function getChartData(year, storeName) {

    $.ajax({
      url: "{{route('yearWiseSaleBarChartStore')}}",
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "year": year,
        _method: 'post'
      },
      dataType: 'json',
      success: function(responce) {

        console.log(responce);
        var totalAmount = [];
        var Lable = [];
        for (var i in responce) {
          totalAmount.push(responce[i].amount);
          Lable.push(responce[i].month);
        }

        console.log(totalAmount);
        renderChart(totalAmount, Lable);
      },
      error: function(responce) {

        console.log(responce);
      }
    });
  }


  $(function() {

    // alert("testest");
    //get the pie chart canvas
    var cDatanut = JSON.parse(``);

    //   alert(cDatanut);

    // var ctxsnew = $("#canvasneww");

    var configvar = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: cDatanut.month,
        datasets: [{
          label: 'Sales',
          data: cDatanut.amount,
          borderWidth: 1,
          backgroundColor: "#359ee4",
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
        }]
      },
      options: {
        maintainAspectRatio: false,
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              var value = Intl.NumberFormat('hi', {
                  style: 'currency',
                  currency: 'INR',
                  minimumFractionDigits: 0
                })
                .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip
              return value;

            }
          }
        },




        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, ],
        },
      },
    }



    var ctxsnew = document.getElementById("canvasneww").getContext('2d');

    if (
      window.myLinevar !== undefined &&
      window.myLinevar !== null
    ) {
      window.myLinevar.destroy();
    }





    //create Pie Chart class object
    window.myLinevar = new Chart(ctxsnew, configvar);






  });
</script>





<script>
  $(document).ready(function() {



    // $(document).on('click', '.monthclick', function() {

    //   $('#salestable').DataTable().clear().draw();
    //   var year = $(this).attr('year');
    //   var month = $(this).attr('month');
    //   var store = $(this).attr('store');

    //   // alert(year);
    //   // alert(month);
    //   // alert(store);



    //   var urlnew = "{{ url('storeview-reports-daily-sales') }}" + '/'+ store + '/' + year + '/' + month;



    //   var table_table = $('#salestable').DataTable({
    //     initComplete: function() {
    //       this.api().columns([1]).every(function() {
    //         var column = this;
    //         var select = $('<select><option value=""></option></select>')
    //           .appendTo($(column.footer()).empty())
    //           .on('change', function() {
    //             var val = $.fn.dataTable.util.escapeRegex(
    //               $(this).val()
    //             );

    //             column
    //               .search(val ? '^' + val + '$' : '', true, false)
    //               .draw();
    //           });


    //       });
    //     },
    //     "bDestroy": true,
    //     responsive: true,
    //     fixedHeader: {
    //       header: true,
    //       footer: true
    //     },

    //     processing: true,



    //     serverSide: true,
    //     ajax: {
    //       url: urlnew,
    //     },

    //     columns: [{
    //         data: 'bill_date',
    //         name: 'bill_date',
    //       }, {
    //         data: 'TotalPrice',
    //         name: 'TotalPrice',
    //       },
    //       {
    //         data: 'TotalTax',
    //         name: 'TotalTax',
    //       },
    //       {
    //         data: 'TotalPriceWithTax',
    //         name: 'TotalPriceWithTax',
    //       }

    //     ],



    //     "order": [],
    //     "pageLength": 50,
    //     'language': {
    //       'lengthMenu': '_MENU_',
    //       "info": '_START_ - _END_ (_TOTAL_)',
    //       "search": '',
    //       'paginate': {
    //         'previous': 'Previous',
    //         'next': 'Next'
    //       },
    //       'loadingRecords': '&nbsp;',
    //       'processing': '<img src="http://adsr.escapadetech.com/dist/images/loading.gif"></img>'
    //     },
    //     'columnDefs': [{
    //       "orderable": false,
    //       "createdCell": function(td, cellData, rowData, row, col) {
    //         $(td).addClass('show_new');
    //         $(td).attr('id', rowData.id);
    //       },
    //     }],
    //     'select': {
    //       style: 'multi',
    //       selector: 'td:first-child'
    //     },
    //     'lengthMenu': [
    //       [10, 25, 50, -1],
    //       [10, 25, 50, "All"]
    //     ],
    //     dom: '<"row"lfB>rtip',
    //     buttons: [{
    //         extend: 'pdf',
    //         text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
    //         exportOptions: {
    //           columns: ':visible:Not(.not-exported)',
    //           rows: ':visible'
    //         },
    //       },
    //       {
    //         extend: 'csv',
    //         text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
    //         exportOptions: {
    //           columns: ':visible:Not(.not-exported)',
    //           rows: ':visible'
    //         },
    //       },
    //       {
    //         extend: 'print',
    //         text: '<i title="print" class="fa fa-print"></i>',
    //         exportOptions: {
    //           columns: ':visible:Not(.not-exported)',
    //           rows: ':visible'
    //         },
    //       },
    //       {
    //         extend: 'colvis',
    //         text: '<i title="column visibility" class="fa fa-eye"></i>',
    //         columns: ':gt(0)'
    //       },
    //     ],
    //   });
    //   new $.fn.dataTable.FixedHeader(table_table);







    // });


    var table_table = $('#salestable').DataTable({
      initComplete: function() {
        this.api().columns([1]).every(function() {
          var column = this;
          var select = $('<select><option value=""></option></select>')
            .appendTo($(column.footer()).empty())
            .on('change', function() {
              var val = $.fn.dataTable.util.escapeRegex(
                $(this).val()
              );

              column
                .search(val ? '^' + val + '$' : '', true, false)
                .draw();
            });


        });
      },
      "bDestroy": true,
      responsive: true,
      fixedHeader: {
        header: true,
        footer: true
      },

      processing: true,



      serverSide: true,
      ajax: {
        url: "{{ route('storeviewReports',['store'=> $outletInfo->StoreName]) }}",
      },

      columns: [{
          data: 'year',
          name: 'year',
        },
        {
          data: 'month',
          name: 'month',
        },
        {
          data: 'TotalPrice',
          name: 'TotalPrice',
        },
        {
          data: 'TotalTax',
          name: 'TotalTax',
        },
        {
          data: 'TotalPriceWithTax',
          name: 'TotalPriceWithTax',
        }

      ],



      "order": [],
      "pageLength": 50,
      'language': {
        'lengthMenu': '_MENU_',
        "info": '_START_ - _END_ (_TOTAL_)',
        "search": '',
        'paginate': {
          'previous': 'Previous',
          'next': 'Next'
        },
        'loadingRecords': '&nbsp;',
        'processing': '<img src="http://adsr.escapadetech.com/dist/images/loading.gif"></img>'
      },
      'columnDefs': [{
        "orderable": false,
        "createdCell": function(td, cellData, rowData, row, col) {
          $(td).addClass('show_new');
          $(td).attr('id', rowData.id);
        },
      }],
      'select': {
        style: 'multi',
        selector: 'td:first-child'
      },
      'lengthMenu': [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
      ],
      dom: '<"row"lfB>rtip',
      buttons: [{
          extend: 'pdf',
          text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
          exportOptions: {
            columns: ':visible:Not(.not-exported)',
            rows: ':visible'
          },
        },
        {
          extend: 'csv',
          text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
          exportOptions: {
            columns: ':visible:Not(.not-exported)',
            rows: ':visible'
          },
        },
        {
          extend: 'print',
          text: '<i title="print" class="fa fa-print"></i>',
          exportOptions: {
            columns: ':visible:Not(.not-exported)',
            rows: ':visible'
          },
        },
        {
          extend: 'colvis',
          text: '<i title="column visibility" class="fa fa-eye"></i>',
          columns: ':gt(0)'
        },
      ],
    });
    new $.fn.dataTable.FixedHeader(table_table);
  });


  $("#avaragesales").change(function() {
    var changevalue = $(this).val();
    $.ajax({
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "{{route('changeAvarage')}}",
      data: {
        'id': $(this).val(),
        'storeName': ''
      },
      success: function(response) {
        if (response == '0') {
          var newww = '₹ 0.00';
          $(".valueamountavarage").html(newww);
        } else {

          $(".valueamountavarage").html('₹ ' + response);
        }

      },
      error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
      }
    });
  })

  $("#highestsales").change(function() {
    var changevalue = $(this).val();
    $.ajax({
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "{{route('changeTransaction')}}",
      data: {
        'id': $(this).val(),
        'storeName': ''
      },
      success: function(response) {
        // console.log(response); 
        if (response == '') {
          var newww = '₹ 0.00';
          $(".valueamount").html(newww);
        } else {

          $(".valueamount").html('₹ ' + response);
        }
        // $(".valuechange").html(changevalue);

      },
      error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
      }
    });
  })

  $("#nooftransactions").change(function() {
    var changevalue = $(this).val();
    $.ajax({
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "{{route('changeNoOfTransaction')}}",
      data: {
        'id': $(this).val(),
        'storeName': ''
      },
      success: function(response) {

        $(".nooftransvalue").html(response);


      },
      error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
      }
    });
  })
</script>



<script>
  $(function() {

    // alert("testest");
    //get the pie chart canvas
    var cDatanut = JSON.parse(``);

    
    // var ctxsnew = $("#canvasneww");

    var configvar = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: cDatanut.labels,
        datasets: [{
          label: 'Sales',
          data: cDatanut.amount,
          borderWidth: 1,
          backgroundColor: "#359ee4",
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
          yAxisID: 'A',
        }, {
          label: 'No of Transactions',
          data: cDatanut.count,
          type: "line",
          backgroundColor: '#f8f8f8',
          pointBackgroundColor: '#ffe800',
          borderColor: "#ff9f9f",
          yAxisID: 'B',
          borderDash: [5, 5],
          // lineTension: 0,
          pointRadius: 7,
          fill: true
        }]
      },
      options: {
        maintainAspectRatio: false,
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              if (tooltipItem.datasetIndex === 0) {

                var value = Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

                return 'Sales : ' + value;

              } else {


                var newvaluee = 0;
                if (tooltipItem.yLabel != '') {
                  var newvaluee = tooltipItem.yLabel;
                }
                return 'No of Transactions : ' + newvaluee;
              }



              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip


            }
          }
        },


        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            id: 'A',
            type: 'linear',
            position: 'left',
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, {
            id: 'B',
            type: 'linear',
            position: 'right',
            ticks: {
              beginAtZero: true,
              callback: function(value) {
                if (value % 1 === 0) {
                  return value;
                }
              }
            }
          }],
        },
      },
    }



    var ctxsnew = document.getElementById("canvashoursales").getContext('2d');

    if (
      window.myLinevarhour !== undefined &&
      window.myLinevarhour !== null
    ) {
      window.myLinevarhour.destroy();
    }





    //create Pie Chart class object
    window.myLinevarhour = new Chart(ctxsnew, configvar);






  });
</script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>


<script>
  $(function() {
    $('input[name="daterange"]').daterangepicker({
      opens: 'left',
      minDate: new Date('1969/12/31 16:00:00'),
    }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

      var startDate = start.format('YYYY-MM-DD');
      var endDate = end.format('YYYY-MM-DD');
      var storeName = '';
      getChartDataHourWise(storeName, startDate, endDate);


    });
  });


  function getChartDataHourWise(storeName, startDate, endDate) {

    // var base = "{{route('monthWiseSaleBarChart')}}";
    // var baseurl = base + '?storeName=' + storeName + '&year=' + year + '&month=' + month;

    $.ajax({
      url: "{{route('hourWiseSaleBarChart')}}",
      type: 'GET',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "storeName": storeName,
        "startDate": startDate,
        "endDate": endDate,
        _method: 'post'
      },
      dataType: 'json',
      success: function(responce) {

        console.log(responce.amount);
        // var itemData = [];
        // var labelData = [];
        // // var countData = [];
        // for (var i in responce) {
        //   itemData.push(responce[i].sale_amount);
        //   labelData.push(responce[i].date_new);
        //   // countData.push(responce[i].totalCount);
        // }
        renderChartHour(responce.labels, responce.amount, responce.count);
      },
      error: function(responce) {

        console.log(responce);
      }
    });
  }


  function renderChartHour(labels, amount, count) {


    var configvarHour = {
      type: 'bar',
      plugins: [plugin],
      data: {
        labels: labels,
        datasets: [{
          label: 'Sales',
          data: amount,
          borderWidth: 1,
          backgroundColor: "#359ee4",
          barPercentage: 2,
          barThickness: 15,
          maxBarThickness: 8,
          minBarLength: 2,
          yAxisID: 'A',
        }, {
          label: 'No of Transactions',
          data: count,
          type: "line",
          backgroundColor: '#f8f8f8',
          pointBackgroundColor: '#ffe800',
          borderColor: "#ff9f9f",
          yAxisID: 'B',
          borderDash: [5, 5],
          // lineTension: 0,
          pointRadius: 7,
          fill: true
        }]
      },
      options: {
        maintainAspectRatio: false,
        // animation: {
        //     duration: 2000,
        //     onProgress: function(animation) {
        //         progress.value = animation.currentStep / animation.numSteps;
        //     },
        //     onComplete: function(animation) {
        //         window.setTimeout(function() {
        //             progress.value = 0;
        //         }, 2000);
        //     }
        // },
        tooltips: {
          callbacks: {
            // this callback is used to create the tooltip label
            label: function(tooltipItem, data) {
              // get the data label and data value to display
              // convert the data value to local string so it uses a comma seperated number
              //   var dataLabel = data.labels[tooltipItem.index];
              //   var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

              if (tooltipItem.datasetIndex === 0) {

                var value = Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).replace(/^(\D+)/, '$1 ');

                return 'Sales : ' + value;

              } else {


                var newvaluee = 0;
                if (tooltipItem.yLabel != '') {
                  var newvaluee = tooltipItem.yLabel;
                }
                return 'No of Transactions : ' + newvaluee;
              }



              //   if (Chart.helpers.isArray(dataLabel)) {
              //     // show value on first line of multiline label
              //     // need to clone because we are changing the value
              //     dataLabel = dataLabel.slice();
              //     dataLabel[0] += value;
              //   } else {
              // dataLabel += value;
              //   }

              // return the text to display on the tooltip


            }
          }
        },


        scales: {
          xAxes: [{
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
            },
            gridLines: {
              display: false,
            },
          }, ],
          yAxes: [{
            id: 'A',
            type: 'linear',
            position: 'left',
            ticks: {
              fontSize: "12",
              fontColor: "#777777",
              callback: function(value, index, values) {
                // return "₹" + value;
                return Intl.NumberFormat('hi', {
                    style: 'currency',
                    currency: 'INR',
                    minimumFractionDigits: 0
                  })
                  .format(value).replace(/^(\D+)/, '$1 ');
              },
            },
            gridLines: {
              color: "#D8D8D8",
              zeroLineColor: "#D8D8D8",
              borderDash: [2, 2],
              zeroLineBorderDash: [2, 2],
              drawBorder: true,
            },
          }, {
            id: 'B',
            type: 'linear',
            position: 'right',
            ticks: {
              beginAtZero: true,
              callback: function(value) {
                if (value % 1 === 0) {
                  return value;
                }
              }
            }
          }],
        },
      },
    }



    var ctxsnewHour = document.getElementById("canvashoursales").getContext('2d');

    if (
      window.myLinevarhour !== undefined &&
      window.myLinevarhour !== null
    ) {
      window.myLinevarhour.destroy();
    }





    //create Pie Chart class object
    window.myLinevarhour = new Chart(ctxsnewHour, configvarHour);








  }


  // download.addEventListener("click", function () {
  //   var reportPageHeight = $('#canvasitem').innerHeight();
  // var reportPageWidth = $('#canvasitem').innerWidth();
  //       var imgData = document.getElementById('canvasitem').toDataURL("image/jpeg", 1.0);
  //       // var pdf = new jsPDF();

  //       var pdf = new jsPDF('l', 'pt');
  // pdf.addImage($(imgData)[0], 'PNG', 0, 0);

  // // download the pdf
  // pdf.save('filename.pdf');
  //   }, false);

  document.getElementById("annualsales").addEventListener('click', function() {
    /*Get image of canvas element*/
    var url_base64jp = document.getElementById("canvasneww").toDataURL("image/jpg");
    /*get download button (tag: <a></a>) */
    var a = document.getElementById("annualsales");
    /*insert chart image url to download button (tag: <a></a>) */
    a.href = url_base64jp;
  });


  document.getElementById("monthlysales").addEventListener('click', function() {
    /*Get image of canvas element*/
    var url_base64jp = document.getElementById("canvasitem").toDataURL("image/jpg");
    /*get download button (tag: <a></a>) */
    var a = document.getElementById("monthlysales");
    /*insert chart image url to download button (tag: <a></a>) */
    a.href = url_base64jp;
  });


  document.getElementById("hourlysales").addEventListener('click', function() {
    /*Get image of canvas element*/
    var url_base64jp = document.getElementById("canvashoursales").toDataURL("image/jpg");
    /*get download button (tag: <a></a>) */
    var a = document.getElementById("hourlysales");
    /*insert chart image url to download button (tag: <a></a>) */
    a.href = url_base64jp;
  });


  document.getElementById("yearlysales").addEventListener('click', function() {
    /*Get image of canvas element*/
    var url_base64jp = document.getElementById("canvasfinal2").toDataURL("image/jpg");
    /*get download button (tag: <a></a>) */
    var a = document.getElementById("yearlysales");
    /*insert chart image url to download button (tag: <a></a>) */
    a.href = url_base64jp;
  });


  function downloadPDF(pdfval) {
    const canvas = document.getElementById(pdfval);
    const canvasImage = canvas.toDataURL('image/jpeg', 1.0);
    let pdf = new jsPDF({
      orientation: 'landscape'
    });
    pdf.setFontSize(20);
    pdf.addImage(canvasImage, 'jpeg', 15, 15, 280, 150);
    if (pdfval == 'canvasneww') {
      pdf.save('annual-sales-summery.pdf');
    } else if (pdfval == 'canvasitem') {
      pdf.save('monthly-sales-summery.pdf');
    } else if (pdfval == 'canvashoursales') {
      pdf.save('hourly-sales-summery.pdf');
    } else if (pdfval == 'canvasfinal2') {
      pdf.save('year-on-year-comparision.pdf');
    }

  }
</script>




@endsection