000

@extends('dashboard.layouts.app')
@section('title','Dashboard')
@section('style')
{{ Html::style("//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css")}}

h4{
  font-weight: bold;
  font-size:14px;
}
.onhover:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  cursor:pointer;
}

.fy{
    height: 23px;
    font-size: 11px;
    float: right;
    margin-top: 10px;
}
.wmq{
  display: flex;
  justify-content: center; 
  align-items: center;"
}
.card1{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-bottom: 300px;
}

.canvasjs-chart-credit
{
    display: none !important;
}

.excel_download{
  margin-top:10px;
  margin-left:18px;
  height: 21px;
  width: 21px;
  border: 1px solid #ddd;
}

.excel_download:hover{
  cursor: pointer;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; 
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
}

</style>
@endsection

@section('content')
<div class="main-content">
    <div class="main-content-inner">
        <div class="page-content">
            <div class="row">
              <div class="col-md-2">
                <select class="form-control" id="session_top" onchange="handleSession(this)">
                <option value="">Select Financial Year</option>
                    @foreach($sessions as $key=>$session)
                        <option value="{{ $session->session }}">FY {{ $session->session }}</option>
                    @endforeach
                </select>    
              </div>
              <div class="col-md-2">
                <select class="form-control" id="quarter_top" onchange="handleQuarter(this)">
                    <option value="">Select Quarter</option>
                    <option value="1">Quarter I</option>
                    <option value="2">Quarter II</option>
                    <option value="3">Quarter III</option>
                    <option value="4">Quarter IV</option>
                </select>
              </div>
            </div>
            <div class="row" id="count_boxes" style="padding:10px;" >
                <div class="col-sm-6 col-md-2">
                  <div class="thumbnail onhover" onclick="generateExcel('open_pr_count')">
                    <div class="caption text-center hover-clickable">
                      <h4>Open PR Count</h4>
                      <h4 class="text-warning"><span id="open_pr_count">{{ $open_pr_count }}</span>
                        <span id="open_pr_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                      </h4>                       
                    </div>                  
                  </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_pr_count')">
                      <div class="caption text-center">
                        <h4>Total PR Count</h4>
                        <h4 class="text-warning"><span id="total_pr_count">{{ $total_pr_count }}</span>
                          <span id="total_pr_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>                        
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_un_app_pr_count')">
                      <div class="caption text-center">
                        <h4>Un-App PR Count</h4>
                        <h4 class="text-warning"><span id="total_un_app_pr_count">{{ $total_un_app_pr_count }}</span>
                          <span id="total_un_app_pr_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_pr_amount')">
                      <div class="caption text-center">
                        <h4>Total PR Amount</h4>
                        <h4 class="text-warning"><span id="total_pr_amount">{{ $total_pr_amount }}</span>
                          <span id="total_pr_amount_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('mrn_po_count')">
                      <div class="caption text-center">
                        <h4>MRN/PO Count</h4>
                        <h4 class="text-warning"><span id="mrn_po_count">{{ $total_mrn_count }} ({{$mrn_by_po_count}}%)</span>
                          <span id="mrn_po_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                 <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover">
                      <div class="caption text-center">
                        <h4>Invoices Count</h4>
                        <h4 class="text-warning">{{ $total_invoice_count }}</h4>
                      </div>
                    </div>
                </div>
                
                
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('open_po_count')">
                      <div class="caption text-center">
                        <h4>Open PO Count</h4>
                        <h4 class="text-warning"><span id="open_po_count">{{ $open_po_count }}</span>
                          <span id="open_po_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_po_count')">
                      <div class="caption text-center">
                        <h4>Total PO Count</h4>
                        <h4 class="text-warning"><span id="total_po_count">{{ $total_po_count }}</span>
                          <span id="total_po_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_un_app_po_count')">
                      <div class="caption text-center">
                        <h4>Un-App PO Count</h4>
                        <h4 class="text-warning"><span id="total_un_app_po_count">{{ $total_un_app_po_count }}</span>
                          <span id="total_un_app_po_count_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_po_amount')">
                      <div class="caption text-center">
                        <h4>Total PO Amount</h4>
                        <h4 class="text-warning"><span id="total_po_amount">{{ $total_po_amount }}</span>
                          <span id="total_po_amount_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_mrn_amount')">
                      <div class="caption text-center">
                        <h4>Total MRN Amt.</h4>
                        <h4 class="text-warning"><span id="total_mrn_amount">{{ $total_mrn_amount }}</span>
                          <span id="total_mrn_amount_btn" style="margin-left:10px;padding:0;color:red;"></span>
                        </h4>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail onhover" onclick="generateExcel('total_suppliers')">
                      <div class="caption text-center">
                        <h4>Active Suppliers</h4>
                        <h4 class="text-warning"><span id="total_suppliers">{{ $total_supliers }}</span><span id="total_suppliers_btn" style="margin-left:10px;padding:0;color:red;"></span>

</h4>
                      </div>
                    </div>
                </div>
            </div>           
            <div class="row">
              <div class="col-md-4">
                <div class="card1">
                    <div class="row" style="padding: 0px 7px;">
                      <div class="col-sm-7">
                        <h4>Total Purchase w.r.t Item Category</h4>
                      </div>
                      <div class="col-sm-2">
                        <div class="excel_download" onclick="download_excel('total_purchase_item_category')">
                          <img src="{{ asset('excel_thumbnail.png') }}" height="20px" width="20px">
                        </div>                        
                      </div>
                      <div class="col-sm-3">
                        <select class="fy" id="item_cat_fy" onchange="assign_null('item_cat_fy'); po_itemCategoryWise(this.val)">
                          @foreach($sessions as $session)
                            <option value="{{$session->session}}">FY {{$session->session}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="row" style="padding: 6px 7px;">
                      <div class="col-sm-4 wmq">
                        <input type="week" name="week" id="item_cat_week" min="2021-W12" onchange="assign_null('item_cat_week'); po_itemCategoryWise(this.val);" style="height: 23px;font-size: 11px">
                      </div>
                      <div class="col-sm-4 wmq">
                        <select id="item_cat_month" name="month" style="height: 23px;font-size: 11px;" onchange="assign_null('item_cat_month'); po_itemCategoryWise(this.val)">
                          <option value="">Select Month</option>
                          <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>
                        </select>
                      </div>
                      <div class="col-sm-4 wmq">
                      <select id="item_cat_quarterly" name="quarterly" style="height: 23px;font-size: 11px;margin-right:8px" onchange="assign_null('item_cat_quarterly'); po_itemCategoryWise(this.val)">
                        <option value="">Select Quarterly</option>
                        <option value="1">Quarter 1</option>
                        <option value="2">Quarter 2</option>
                        <option value="3">Quarter 3</option>
                        <option value="4">Quarter 4</option>
                      </select>
                      </div>
                    </div>
                    <div class="row" style="margin-top:7px;">
                      <div class="col-sm-12">
                        <div id="pieChart1" style="width: 100%;"></div>
                      </div>
                    </div>
                </div> 
              </div>
              <div class="col-md-4">
                <div class="card1">
                    <div class="row" style="padding: 0px 7px;">
                      <div class="col-sm-7">
                        <h4>Total Purchase w.r.t Department</h4>
                      </div>
                      <div class="col-sm-2">
                        <div class="excel_download" onclick="download_excel('total_purchase_department')">
                          <img src="{{ asset('excel_thumbnail.png') }}" height="20px" width="20px">
                        </div>                        
                      </div>
                      <div class="col-sm-3">
                        <select class="fy" id="department_fy" onchange="assign_null_department('department_fy'); po_department(this.val)">
                          @foreach($sessions as $session)
                            <option value="{{$session->session}}">FY {{$session->session}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="row" style="padding: 6px 7px;">
                      <div class="col-sm-4 wmq">
                        <input type="week" name="week" id="department_week" min="2021-W12" onchange="assign_null_department('department_week'); po_department(this.val);" style="height: 23px;font-size: 11px">
                      </div>
                      <div class="col-sm-4 wmq">
                        <select id="department_month" name="month" style="height: 23px;font-size: 11px;" onchange="assign_null_department('department_month'); po_department(this.val)">
                          <option value="">Select Month</option>
                          <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>
                        </select>
                      </div>
                      <div class="col-sm-4 wmq">
                      <select id="department_quarterly" name="quarterly" style="height: 23px;font-size: 11px;margin-right:8px" onchange="assign_null_department('department_quarterly'); po_department(this.val)">
                        <option value="">Select Quarterly</option>
                        <option value="1">Quarter 1</option>
                        <option value="2">Quarter 2</option>
                        <option value="3">Quarter 3</option>
                        <option value="4">Quarter 4</option>
                      </select>
                      </div>
                    </div>
                    <div class="row" style="margin-top:7px;">
                      <div class="col-sm-12">
                        <div id="pieChart2" style="width: 100%;"></div>
                      </div>
                    </div>
                </div> 
              </div>
              <div class="col-md-4">
                <div class="card1">
                  <div class="row" style="padding: 0px 7px;">
                    <div class="col-sm-7">
                      <h4>Total Purchase w.r.t Circle</h4>
                    </div>
                    <div class="col-sm-2">
                      <div class="excel_download" onclick="download_excel('total_purchase_circle')">
                        <img src="{{ asset('excel_thumbnail.png') }}" height="20px" width="20px">
                      </div>                        
                    </div>
                    <div class="col-sm-3">
                      <select class="fy" id="circle_fy" onchange="assign_null_circle('circle_fy'); po_circle(this.val)">
                        @foreach($sessions as $session)
                          <option value="{{$session->session}}">FY {{$session->session}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="row" style="padding: 6px 7px;">
                    <div class="col-sm-4 wmq">
                        <input type="week" name="week" id="circle_week" min="2021-W12" onchange="assign_null_circle('circle_week'); po_circle(this.val);" style="height: 23px;font-size: 11px">
                    </div>
                    <div class="col-sm-4 wmq">
                      <select id="circle_month" name="month" style="height: 23px;font-size: 11px;" onchange="assign_null_circle('circle_month'); po_circle(this.val)">
                          <option value="">Select Month</option>
                          <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>
                      </select>
                    </div>
                    <div class="col-sm-4 wmq">
                      <select id="circle_quarterly" name="quarterly" style="height: 23px;font-size: 11px;margin-right:8px" onchange="assign_null_circle('circle_quarterly'); po_circle(this.val)">
                        <option value="">Select Quarterly</option>
                        <option value="1">Quarter 1</option>
                        <option value="2">Quarter 2</option>
                        <option value="3">Quarter 3</option>
                        <option value="4">Quarter 4</option>
                      </select>
                    </div>
                  </div>
                  <div class="row" style="margin-top:7px;">
                    <div class="col-sm-12">
                      <div id="pieChart3" style="width: 100%;"></div>
                    </div>
                  </div>
                </div> 
              </div>
            </div>
            <div class="row" style="margin-top: 23px;">
              <div class="col-md-4">
                <div class="card1">
                    <div class="row" style="padding: 0px 7px;">
                      <div class="col-sm-7">
                        <h4>Top 5 Suppliers</h4>
                      </div>
                      <div class="col-sm-2">
                        <div class="excel_download" onclick="download_excel('top_five_suppliers')">
                          <img src="{{ asset('excel_thumbnail.png') }}" height="20px" width="20px">
                        </div>                        
                      </div>
                      <div class="col-sm-3">
                        <select class="fy" id="supplier_fy" onchange="assign_null_supplier('supplier_fy'); po_supplierWise()">
                          @foreach($sessions as $session)
                            <option value="{{$session->session}}">FY {{$session->session}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="row" style="padding: 6px 7px;">
                      <div class="col-sm-4 wmq">
                        <input type="week" name="week" id="supplier_week" min="2021-W12" onchange="assign_null_supplier('supplier_week'); po_supplierWise();" style="height: 23px;font-size: 11px">
                      </div>
                      <div class="col-sm-4 wmq">
                        <select id="supplier_month" name="month" style="height: 23px;font-size: 11px;" onchange="assign_null_supplier('supplier_month'); po_supplierWise()">
                          <option value="">Select Month</option>
                          <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>
                        </select>
                      </div>
                      <div class="col-sm-4 wmq">
                      <select id="supplier_quarterly" name="quarterly" style="height: 23px;font-size: 11px;margin-right:8px" onchange="assign_null_supplier('supplier_quarterly'); po_supplierWise()">
                        <option value="">Select Quarterly</option>
                        <option value="1">Quarter 1</option>
                        <option value="2">Quarter 2</option>
                        <option value="3">Quarter 3</option>
                        <option value="4">Quarter 4</option>
                      </select>
                      </div>
                    </div>
                    <div class="row" style="margin-top:7px;">
                      <div class="col-sm-12">
                        <div id="barChart1" style="width: 100%;"></div>
                      </div>
                    </div>
                </div> 
              </div>
              <div class="col-md-4">
                <div class="card1">
                    <div class="row" style="padding: 0px 7px;">
                      <div class="col-sm-7">
                        <h4>Top 5 Items</h4>
                      </div>
                      <div class="col-sm-2">
                        <div class="excel_download" onclick="download_excel('top_five_items')">
                          <img src="{{ asset('excel_thumbnail.png') }}" height="20px" width="20px">
                        </div>                        
                      </div>
                      <div class="col-sm-3">
                        <select class="fy" id="item_fy" onchange="assign_null_supplier('supplier_fy'); po_itemWise()">
                          @foreach($sessions as $session)
                            <option value="{{$session->session}}">FY {{$session->session}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="row" style="padding: 6px 7px;">
                      <div class="col-sm-4 wmq">
                        <input type="week" name="week" id="item_week" min="2021-W12" onchange="assign_null_supplier('supplier_week'); po_itemWise();" style="height: 23px;font-size: 11px">
                      </div>
                      <div class="col-sm-4 wmq">
                        <select id="item_month" name="month" style="height: 23px;font-size: 11px;" onchange="assign_null_supplier('supplier_month'); po_itemWise()">
                          <option value="">Select Month</option>
                          <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>
                        </select>
                      </div>
                      <div class="col-sm-4 wmq">
                      <select id="item_quarterly" name="quarterly" style="height: 23px;font-size: 11px;margin-right:8px" onchange="assign_null_supplier('supplier_quarterly'); po_itemWise()">
                        <option value="">Select Quarterly</option>
                        <option value="1">Quarter 1</option>
                        <option value="2">Quarter 2</option>
                        <option value="3">Quarter 3</option>
                        <option value="4">Quarter 4</option>
                      </select>
                      </div>
                    </div>
                    <div class="row" style="margin-top:7px;">
                      <div class="col-sm-12">
                        <div id="barChart2" style="width: 100%;"></div>
                      </div>
                    </div>
                </div> 
              </div>

<div class="col-md-4">
                <div class="card1">
                    <div class="row" style="padding: 0px 7px;">
                      <div class="col-sm-9">
                        <h4>Purchase Analysis</h4>
                      </div>
                      <div class="col-sm-3">
                        <select class="fy" id="purchase_analysis_fy" onchange="assign_null_supplier('purchase_analysis_fy'); purchase_analysis()">
                          @foreach($sessions as $session)
                            <option value="{{$session->session}}">FY {{$session->session}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="row" style="padding: 6px 7px;">
                      <div class="col-sm-12" style="height: 23px;"></div>
                    </div>
                    <div class="row" style="margin-top:7px;margin-left: 10px;">
                      <div class="col-sm-12">
                        <div id="slineChart" style="width: 100%;"></div>
                      </div>
                    </div>
                </div> 
              </div>

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

@endsection

@section('content')
@section('script')
{{ Html::script("https://code.jquery.com/ui/1.12.1/jquery-ui.js")}}
{{ Html::script("assets/js/jquery-ui.custom.min.js")}}
{{ Html::script("assets/js/jquery.ui.touch-punch.min.js")}}
{{ Html::script("assets/js/jquery.easypiechart.min.js")}}
{{ Html::script("assets/js/jquery.sparkline.index.min.js")}}
{{ Html::script("assets/js/jquery.flot.min.js")}}
{{ Html::script("assets/js/jquery.flot.pie.min.js")}}
{{ Html::script("assets/js/jquery.flot.resize.min.js")}}

{{ Html::script("assets/js/ace-elements.min.js")}}
{{ Html::script("assets/js/ace.min.js")}}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

po_itemCategoryWise();
po_department();
po_circle();
po_supplierWise();
po_itemWise();
purchase_analysis();

/*---------Category Start----------*/
function assign_null(id){
  if(id=="item_cat_week"){
    $("#item_cat_month").val('');
    $("#item_cat_quarterly").val('');
  }
  if(id=="item_cat_month"){
    $("#item_cat_week").val('');
    $("#item_cat_quarterly").val('');
  }
  if(id=="item_cat_quarterly"){
    $("#item_cat_week").val('');
    $("#item_cat_month").val('');
  }
  if(id=="item_cat_fy"){
    $("#item_cat_week").val('');
    $("#item_cat_month").val('');
    $("#item_cat_quarterly").val('');
  }
}

// function formatIndianNumber(number) {
//   console.log("number is : "+number);
//   var formattedNumber = number.toString().replace(/\B(?=(\d{2})+(?!\d))/g, ",");
//   console.log("formatted Number is "+formattedNumber);
//   return formattedNumber;
// }

function formatIndianNumber(number) {
  if (typeof number !== 'number') {
    return number;
  }

const formatter = new Intl.NumberFormat('en-IN');
  return formatter.format(number);
}

function renderPieChart1(values) {

// Format the indexLabel property for each data point
  values.forEach(function (dataPoint) {
    dataPoint.formattedY = formatIndianNumber(dataPoint.y);
  });

var chart = new CanvasJS.Chart("pieChart1", {
    backgroundColor: "white",
    colorSet: "colorSet2",

height:300,
  width:350,
  legend: {
      horizontalAlign: "left",
      verticalAlign: "top",
      fontSize:11 
    },  
  animationEnabled: true,
  data: [{
    indexLabelFontSize: 11,
    indexLabelFontFamily: "Monospace",
    indexLabelFontWeight:"bold",
    indexLabelPlacement: "outside",
    type: "pie",
    radius: 70,
    toolTipContent: "{category}: <strong>#percent%(₹{formattedY})</strong>",
    indexLabel: "{category}-#percent%(₹{formattedY})",
    showInLegend: true,
    dataPoints: values
  }]
  });
  chart.render();
}
/*---------Category End----------*/

/*---------Department Start----------*/
function assign_null_department(id){
  if(id=="department_week"){
    $("#department_month").val('');
    $("#department_quarterly").val('');
  }
  if(id=="department_month"){
    $("#department_week").val('');
    $("#department_quarterly").val('');
  }
  if(id=="department_quarterly"){
    $("#department_week").val('');
    $("#department_month").val('');
  }
  if(id=="department_fy"){
    $("#department_week").val('');
    $("#department_month").val('');
    $("#department_quarterly").val('');
  }
}

if(res.length<=5){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";} 
                var temObj = {
                  y: res[i].po_amount,
                  department: res[i].department_name,
                  color: col,
                  legendText: res[i].department_name
                }
                pieChartValues.push(temObj);
              }
            }else if(res.length>=6){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";}
                if(i<4){
                  var temObj = {
                  y: res[i].po_amount,
                  department: res[i].department_name,
                  color: col,
                  legendText: res[i].department_name
                }
                pieChartValues.push(temObj);
                }else if(i==4){
                  var temCount=0;
                  for (var j = 4; j < res.length; j++) {
                      temCount += res[j].po_amount;
                    }
                  var temObj = {
                    y: temCount,
                    department: "Others",
                    color: "#F1E368",
                    legendText: "Others"
                  }
                  pieChartValues.push(temObj);
                }
              }
            }                 
            renderPieChart2(pieChartValues);
          }else{
              alert("PO Department Record Not Found!");
          }
        }
    });
}

function renderPieChart2(values) {

// Format the indexLabel property for each data point
  values.forEach(function (dataPoint) {
    dataPoint.formattedY = formatIndianNumber(dataPoint.y);
  });

var chart = new CanvasJS.Chart("pieChart2", {
    backgroundColor: "white",
    colorSet: "colorSet2",

height:300,
  width:350,
    legend: {
        horizontalAlign: "center",
        verticalAlign: "top",
        fontSize:11  
      },

animationEnabled: true,
    data: [{
      indexLabelFontSize: 11,
      indexLabelFontFamily: "Monospace",
      indexLabelFontWeight:"bold",
      indexLabelPlacement: "outside",
      type: "pie",
      radius: 70,
      toolTipContent: "{department}: <strong>#percent%(₹{formattedY})</strong>",
      indexLabel: "{department}-#percent%(₹{formattedY})",
      showInLegend: true,
      dataPoints: values
    }]
  });
  chart.render();
}

/*---------Department End----------*/

/*---------Circle Start----------*/
function assign_null_circle(id){
  if(id=="circle_week"){
    $("#circle_month").val('');
    $("#circle_quarterly").val('');
  }
  if(id=="circle_month"){
    $("#circle_week").val('');
    $("#circle_quarterly").val('');
  }
  if(id=="circle_quarterly"){
    $("#circle_week").val('');
    $("#circle_month").val('');
  }
  if(id=="circle_fy"){
    $("#circle_week").val('');
    $("#circle_month").val('');
    $("#circle_quarterly").val('');
  }
}

if(res.length<=5){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";} 
                var temObj = {
                  y: res[i].po_amount,
                  circle: res[i].circle_name,
                  color: col,
                  legendText: res[i].circle_name
                }
                pieChartValues.push(temObj);
              }
            }else if(res.length>=6){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";}
                if(i<4){
                  var temObj = {
                  y: res[i].po_amount,
                  circle: res[i].circle_name,
                  color: col,
                  legendText: res[i].circle_name
                }
                pieChartValues.push(temObj);
                }else if(i==4){
                  var temCount=0;
                  for (var j = 4; j < res.length; j++) {
                      temCount += res[j].po_amount;
                    }
                  var temObj = {
                    y: temCount,
                    circle: "Others",
                    color: "#F1E368",
                    legendText: "Others"
                  }
                  pieChartValues.push(temObj);
                }
              }
            }                 
            renderPieChart3(pieChartValues);
          }else{
              alert("PO Circle Record Not Found!");
          }
        }
    });
}

function renderPieChart3(values) {

// Format the indexLabel property for each data point
    values.forEach(function (dataPoint) {
      dataPoint.formattedY = formatIndianNumber(dataPoint.y);
    });

var chart = new CanvasJS.Chart("pieChart3", {
      backgroundColor: "white",
      colorSet: "colorSet2",

height:300,
    width:350,
      legend: {
          horizontalAlign: "center",
          verticalAlign: "top",
          fontSize:11 
        },

animationEnabled: true,
      data: [{
        indexLabelFontSize: 11,
        indexLabelFontFamily: "Monospace",
        indexLabelFontWeight:"bold",
        indexLabelPlacement: "outside",
        type: "pie",
        radius: 70,
        toolTipContent: "{circle}: <strong>#percent%(₹{formattedY})</strong>",
        indexLabel: "{circle}-#percent%(₹{formattedY})",
        showInLegend: true,
        dataPoints: values
      }]
    });
    chart.render();
}
/*---------Circle End----------*/

/*---------Suppliers Start----------*/
function assign_null_supplier(id){
  if(id=="supplier_week"){
    $("#supplier_month").val('');
    $("#supplier_quarterly").val('');
  }
  if(id=="supplier_month"){
    $("#supplier_week").val('');
    $("#supplier_quarterly").val('');
  }
  if(id=="supplier_quarterly"){
    $("#supplier_week").val('');
    $("#supplier_month").val('');
  }
  if(id=="supplier_fy"){
    $("#supplier_week").val('');
    $("#supplier_month").val('');
    $("#supplier_quarterly").val('');
  }
}

if(res.length<=5){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";} 
                var temObj = {
                  y: res[i].po_amount,
                  supplier: res[i].vendor_name,
                  color: col,
                  legendText: res[i].vendor_name
                }
                pieChartValues.push(temObj);
              }
            }else if(res.length>=6){
              var pieChartValues = [];
              for (var i = 0; i< res.length; i++) {
                var col;
                if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";}
                if(i<5){
                  var temObj = {
                    y: res[i].po_amount,
                    supplier: res[i].vendor_name,
                    color: col,
                    legendText: res[i].vendor_name
                  }
                  pieChartValues.push(temObj);
                }else if(i==5){
                  var temCount=0;
                  for (var j = 5; j < res.length; j++) {
                    temCount += res[j].po_amount;
                  }
                  var temObj = {
                    y: temCount,
                    supplier: "Others",
                    color: "#F1E368",
                    legendText: "Others"
                  }
                  pieChartValues.push(temObj);
                }
              }
            }                 
            renderBarChart1(pieChartValues);
          }else{
            alert("PO Supplier Wise Record Not Found!");
          }
        }
    });
}

function renderBarChart1(values) {
  
    // Format the indexLabel property for each data point
    values.forEach(function (dataPoint) {
      dataPoint.formattedY = formatIndianNumber(dataPoint.y);
    });

var chart = new CanvasJS.Chart("barChart1", {
      backgroundColor: "white",
      colorSet: "colorSet2",

height:250,
      width:400,
      legend: {
        horizontalAlign: "left",
        verticalAlign: "top",
        fontSize:11        
      },     
      animationEnabled: true,
      data: [{
        indexLabelFontSize: 11,
        indexLabelFontFamily: "Monospace",
        indexLabelFontWeight:"bold",
        indexLabelPlacement: "outside",
        type: "bar",
        toolTipContent: "{supplier}: <strong>₹{formattedY}</strong>",
        indexLabel: "{supplier} - ₹{formattedY}",
        // indexLabel: "{label}",
        // showInLegend: true,
        // legendText:"₹{y}",
        dataPoints: values
      }]
    });
    chart.render();
}
/*---------Suppliers Start----------*/

if(res.length<=5){
             var pieChartValues = [];
             for (var i = 0; i< res.length; i++) {
               var col;
               if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";} 
               var temObj = {
                 y: res[i].po_amount,
                 supplier: res[i].vendor_name,
                 color: col,
                 legendText: res[i].vendor_name
               }
               pieChartValues.push(temObj);
             }
           }else if(res.length>=6){
             var pieChartValues = [];
             for (var i = 0; i< res.length; i++) {
               var col;
               if(i==0){col="#2968B0";}else if(i==1){col="#DA7221";} else if(i==2){col="#DC4B41";} else if(i==3){col="#159286";} else if(i==4){col="#2A87D9";}
               if(i<5){
                 var temObj = {
                 y: res[i].po_amount,
                 supplier: res[i].vendor_name,
                 color: col,
                 legendText: res[i].vendor_name
               }
               pieChartValues.push(temObj);
               }else if(i==5){
                 var temCount=0;
                 for (var j = 5; j < res.length; j++) {
                     temCount += res[j].po_amount;
                   }
                 var temObj = {
                   y: temCount,
                   supplier: "Others",
                   color: "#F1E368",
                   legendText: "Others"
                 }
                 pieChartValues.push(temObj);
               }
             }
           }                 
           renderBarChart2(pieChartValues);
         }else{
             alert("PO Item Wise Record Not Found!");
         }
       }
   });
}

function renderBarChart2(values) {

// Format the indexLabel property for each data point
  values.forEach(function (dataPoint) {
    dataPoint.formattedY = formatIndianNumber(dataPoint.y);
  });
  
  var chart = new CanvasJS.Chart("barChart2", {
    backgroundColor: "white",
    colorSet: "colorSet2",

height:250,
    width:400,
    legend: {
      horizontalAlign: "left",
      verticalAlign: "top",
      fontSize:11,
      valueFormatString: "#,##0.##"
    },

animationEnabled: true,
    data: [{
      indexLabelFontSize: 11,
      indexLabelFontFamily: "Monospace",
      indexLabelFontWeight:"bold",
      indexLabelPlacement: "outside",
      type: "bar",
      toolTipContent: "{supplier}: <strong>{formattedY}</strong>",
      indexLabel: "{supplier}-{formattedY}",
      // showInLegend: true,
      // legendText:"{y}",
      dataPoints: values
    }]
  });
  chart.render();
}

}

function generateExcel(file_name) {
  var session_top = $('#session_top').val();
  var quarter_top = $('#quarter_top').val();
  var token = document.querySelector('meta[name="_token"]').content;

var params = '_token='+token+'&session='+session_top+'&quarter='+quarter_top;

request.onload = function(e) {
    if (this.status === 200) {
      document.getElementById(file_name+'_btn').innerHTML = '';
        var blob = this.response;
        if(window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveBlob(blob, file_name);
        } else{
          var downloadLink = window.document.createElement('a');
          var contentTypeHeader = request.getResponseHeader("Content-Type");
          downloadLink.href = window.URL.createObjectURL(new Blob([blob], { type: contentTypeHeader }));
          downloadLink.download = file_name;
          document.body.appendChild(downloadLink);
          downloadLink.click();
          document.body.removeChild(downloadLink);
       }
    } else {
      document.getElementById(file_name+'_btn').innerHTML = 'Error...';    
      setTimeout(() => document.getElementById(file_name+'_btn').innerHTML = '', 3000);    
    }
  };
  request.onerror = function() {
    document.getElementById(file_name+'_btn').innerHTML = 'Network Error...';    
    setTimeout(() => document.getElementById(file_name+'_btn').innerHTML = '', 3000);
  };

document.getElementById(file_name+'_btn').innerHTML = 'Downloading...';
  request.send(params);
}

function generateExcelGraph(file_name) {
  var session_top = $('#session_top').val();
  var quarter_top = $('#quarter_top').val();
  var token = document.querySelector('meta[name="_token"]').content;

var params = '_token='+token+'&session='+session_top+'&quarter='+quarter_top;

document.getElementById(file_name+'_btn').innerHTML = 'Downloading...';
  request.send(params);
}

function download_excel(file_name) {
    if(file_name == 'total_purchase_item_category') {

var cat_session = $('#item_cat_fy').val();
      var cat_week = $('#item_cat_week').val();
      var cat_month = $('#item_cat_month').val();
      var cat_quarter = $('#item_cat_quarterly').val();

} else if(file_name == 'total_purchase_department') {

var cat_session = $('#department_fy').val();
      var cat_week = $('#department_week').val();
      var cat_month = $('#department_month').val();
      var cat_quarter = $('#department_quarterly').val();

} else if(file_name == 'total_purchase_circle') {

var cat_session = $('#circle_fy').val();
      var cat_week = $('#circle_week').val();
      var cat_month = $('#circle_month').val();
      var cat_quarter = $('#circle_quarterly').val();

} else if(file_name == 'top_five_suppliers') {
      
      var cat_session = $('#supplier_fy').val();
      var cat_week = $('#supplier_week').val();
      var cat_month = $('#supplier_month').val();
      var cat_quarter = $('#supplier_quarterly').val();

} else if(file_name == 'top_five_items') {

var cat_session = $('#item_fy').val();
      var cat_week = $('#item_week').val();
      var cat_month = $('#item_month').val();
      var cat_quarter = $('#item_quarterly').val();

}

var token = "{{ csrf_token() }}";
    var params = '_token='+token+'&item_cat_fy='+cat_session+'&item_cat_week='+cat_week+'&item_cat_month='+cat_month+'&item_cat_quarterly='+cat_quarter;

function downloadExcelNew(file_name) {
    var session_top = $('#session_top').val();
    var quarter_top = $('#quarter_top').val();
    // var params = 'session='+session_top+'&quarter='+quarter_top;
    var url = `{{ url('user/get/`+file_name+`') }}`;

$.ajax({
      // xhrFields: {
      //     responseType: 'blob',
      // },
      type: 'POST',
      url: url,
      cache: false,
      xhr:function(){// Seems like the only way to get access to the xhr object
        var xhr = new XMLHttpRequest();
        xhr.responseType= 'blob'
        return xhr;
      },
      data: {
        session : session_top,
        quarter : quarter_top        
      },
      beforeSend: function () {          
          $('#'+file_name+'btn').attr('disabled', true).html("downloading...");
      },
      success: function(result, status, xhr) {
          $('#'+file_name+'btn').attr('disabled', false).html("");
          var disposition = xhr.getResponseHeader('content-disposition');
          var matches = /"([^"]*)"/.exec(disposition);
          var filename = (matches != null && matches[1] ? matches[1] : 'open_pr_count.xlsx');

// The actual download
          var blob = new Blob([result], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          });
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = filename;

document.body.appendChild(link);

link.click();
          document.body.removeChild(link);
      }
  });
}

</script>
@endsection
@endsection