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

@section('page-style')



<style>
  .boxleft {
    text-align: left;
  }

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

  .card-profile .card-body .profile-image-wrapper .profile-image {
    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 img {
    width: fit-content !important;
    height: 123px !important;
    border-radius: 8% !important;
  }

  .storefont {
    position: absolute;
    top: 125px;
    left: 633px;
    color: #3c4b67;
    font-size: 30px;
    font-weight: 700;
  }

  .mb-3 {
    margin-bottom: 1rem !important;
}
</style>


@endsection

@section('content')

<section id="statistics-card">

  <!-- 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">{{$outletInfo->StoreName}}</h3>
        </span>
        <div class="card-body">
          <div class="profile-image-wrapper">
            <div class="profile-image">

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





          <table style="text-align: left;display: inline-block;float:left;margin-top:-65px;">



            <tr>
              <td>Manager &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;&nbsp;<input type="text" class="form-control" value="{{$outletInfo->StoreManagerName}}" disabled></td>

            </tr>
            <tr>
              <td>Mobile &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;&nbsp;<input type="text" class="form-control" value="{{$outletInfo->StoreManagerPhoneNumber}}" disabled></td>

            </tr>


          </table>



          <table style="text-align: left;float: right;margin-top:-65px;">



            <tr>
              <td>Opened On &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;&nbsp;<input type="text" class="form-control" value="{{date('D, d M Y H:i:s', strtotime($recordSales[0]->firstsync))}}" disabled></td>

            </tr>
            <tr>
              <td>Persft Installed On &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;&nbsp;<input type="text" class="form-control" value="{{date('D, d M Y H:i:s', strtotime($outletInfo->ADSRInstalledDate))}}" disabled></td>

            </tr>
            <tr>
              <td>Last Sync &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;&nbsp;<input type="text" class="form-control" value="{{date('D, d M Y H:i:s', strtotime($recordSales[0]->lastsync))}}" disabled></td>

            </tr>

            <tr>
              <td>Status &nbsp;&nbsp;</td>
              <td></td>
              <td>&nbsp;<input type="text" style='font-size: 18px;font-weight: 800;margin-bottom: 10px;color:red;' class="form-control" value="{{$storeStatus}}" disabled></td>

            </tr>

          </table>
          


          
          <hr class="mb-2" style="clear: both;" />

          <ul class="nav nav-pills mb-2" style="clear: both;">
            <!-- 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 -->



          </ul>

          <div class="" style="float: right;margin-top: -65px;">

<div>
  <h6 class="text-muted fw-bolder">Overall Sales</h6>
  <h3 class="mb-0"> ₹ 0.00</h3>
</div>
</div>



          <!-- <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> -->
      
        </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="avatar bg-light-info p-50 mb-1">
            <div class="avatar-content">
              <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 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">
              <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 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">
              <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 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">
              <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 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">
              <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 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">
              <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 -->


  <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>
        <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>
        <div class="card-body" style="height: 400px">
          <canvas id="canvasitem"></canvas>
        </div>
      </div>
    </div>
    <!-- Donut Chart Starts -->

    <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">
                <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">
                <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">
                <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" style="height: 235px;">
        <div class="card-body">
          <div class="flex" style="display:flex;margin-bottom: 30px;">
            <div class="avatar bg-light-primary p-50 mb-1" style="right: 5px;">
              <div class="avatar-content">
                <i data-feather="layers" 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="tradingdensity" name="tradingdensity" class="form-select" 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="centerdivs" style="text-align: center;">
            <h4 class="fw-bolder boxleft" style="text-align: center;">
              ₹ 0.00            </h4>
            <p class="card-text boxleft" style="text-align: center;">--</p>
          </div>
        </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-4 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" style="margin-left: 188px;">

              <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">



          <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">



          <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>
          <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>
          <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>
  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");

    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;
  }


  $('.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',
      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',
      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',
      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);




  });



  $('.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',
      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',
      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',
      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>
  $(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',
      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);





  }
</script>




@endsection