@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')


<div class="container-fluid">
<input type="hidden"name="todayorders1[]" id="todayorders1">
<input type="hidden"name="monthlyorders[]" id="monthlyorders">
<input type="hidden"name="yearlyyorders[]" id="yearlyyorders">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  
<!-- <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> -->

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> -->
    
    <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
       
    <script 
    src= https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js>
    </script>
    <script
        src=
"https://cdnjs.cloudflare.com/ajax/libs/momenttimezone/0.5.31/moment-timezone-with-data-2012-2022.min.js">
    </script>
@csrf
<meta charset="utf-8">
    <meta name="csrf-token" content="content">
    <meta name="csrf-token" content="{{csrf_token() }}">

   


    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        <a href="{{ route('ieviewer.reportindex')}}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                class="fas fa-download fa-sm text-white-50"></i>Reports and Others</a>
    </div>
    
    {{-- Alert Messages --}}
    @include('common.alert')
   
    {{-- Page Content --}}
    <!-- Content Row -->
    <div class="row">

        <!-- Orders Card -->
        <div class="col-xl-4 col-md-4 mb-6">
            <div class="card border-left-primary shadow h-100 py-2">
               
            <div class="card-body">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" id="tos">TO:0000
                 
                </div>
                
                <div class="row no-gutters align-items-center">
                <!-- --------------------------------------------     -->
                  <div class="col mr-2">
            
                        
                           
                            <!-- progress bar -->
                            <div class="col">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Today</div>
                            <div id="Todayorders" class="h6 mb-0 font-weight-bold text-gray-800" >
                                0000</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800" id="Todayorderpercent">
                                0000 %</div>
                                    <div class="progress progress-sm mr-2" id="Todayorderypro">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width:0%" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>



                        </div>
<!-- -------------------------------------------------------------------- -->
               
<div class="col mr-2">
                   
                        
                            
                           <!-- progress bar -->
                            <div class="col">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Monthly</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800" id="monthorders">
                                0000
                            </div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800" id="monthorderspercent">
                                0000 %
                            </div>
                                    <div class="progress progress-sm mr-2" id="monthlyorderypro">
                                        <div class="progress-bar bg-info" role="progressbar1"
                                            style="width:0%" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>
                          
                        </div>
                         <!-- ------------------------- -->
                        <!-- <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div> -->
                   
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Cost card -->
        <div class="col-xl-4 col-md-4 mb-6">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Cost Details</div>
                    <div class="row no-gutters align-items-center">
                      <!-- ---------------------------------------- -->
                    <div class="col mr-2">
                            
                           
                            <!-- progress bar -->
                            <div class="col">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Today</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">$215,000</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">----</div>
                            <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" id="pg1"
                                            style="width: 0%" aria-valuenow="50" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>
                                
                        </div>
                        

                        <div class="col mr-2">
                            
                            
                            <!-- progress bar -->
                            <div class="col">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Monthly</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">$215,000</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">---</div>
                            <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width: 0%" aria-valuenow="50" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>
                                
                        </div>
                        <!-- <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
       
        <!-- Labour card-->
        <div class="col-xl-4 col-md-4 mb-6">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Labour Hours
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                           
                            
                           <!-- progress bar -->
                           <div class="col">
                           <div class="text-xs font-weight-bold text-info text-uppercase mb-1" >Today(H:M:S)
                            </div>
                           <div class="h6 mb-0 font-weight-bold text-gray-800" id="totaylabour">H12</div>
                           <div class="h6 mb-0 font-weight-bold text-gray-800">----</div>
                                    <div class="progress progress-sm mr-2" id="proLabourperdayHours">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width:0%" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>
                                </div>
                                
                            <!-- <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
                                </div>
                                
                                
                            </div> -->
                            <div class="col mr-2">
                            
                          
                            <!-- progress bar -->
                            <div class="col">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Monthly(H:M:S)</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800" id="monthlylabour">H300</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">---</div>
                                    <div class="progress progress-sm mr-2" id="proLabourmonthlyHours">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width:0%" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="0"></div>
                                    </div>
                                    
                                </div>
                                
                      
                        </div>
                        </div>
                        <!-- <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        </div>
       
        
        <div class="container-fluid">
 <hr>
        <h2>Production Control  Frontier Graph Analysis</h2>
        <hr>
        <!-- <p>This Graph will display  (<strong>1200px and above</strong>). On large, medium, small and extra small devices, it will automatically stack (100%).</p>
  <p>Resize the browser window to see the effect.</p> -->
 
  <div class="container-fluid">
    <div class="row">
   
      <div class="col-xl-6 mb-4 bg-warning text-dark">
      <h4>PLACED ORDERS</h4>
      <!-- Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           -->
           <div style="width: 80%; margin: auto;">
        <canvas id="lineChart">

        </canvas>
    </div>
      </div>
     
      <div class="col-xl-6 mb-4 bg-danger text-dark" >
      <h4>EMPLOYEE WORK FLOW HOURS</h4>
        <!-- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. -->
        <div style="width: 80%; margin: auto;">
        <canvas id="barChart" >

        </canvas>
    </div>
    
    
    </div>
    
      <div class="col-xl-12 mb-4 bg-info text-dark">
      <h4>PLACED ORDERS THROUGH CHANNELS</h4>
      <!-- Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -->
        <div style="width: 50%; margin:auto;">
        <canvas id="pieChart">

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

   </div>   
   </div>   
</div>
@endsection



@section('scripts')

<script src="{{ asset('js/app.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
 <script>
 // totalyearly orders--------------------------------------------------------------------
$(document).ready(function(){ 

   
    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var years = year;

    $.ajax({   
                  
        
        url: "{{ url('orderlist/getYearlynewdorderscoun/') }}" ,
                    type: "post",
                    data: {
                        years:years,
                       // todate:lastdate,
                      //  process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                       // $('#monthqty').html(res);
                        // Todayqtypercent
                        // Todayqtypro
                     $("#yearlyyorders").val(res);
                        
 
// $('#completedpro')
// .css("width", totalcompletedpercentage_f+'%', function() {
//                           return $('#completedpro')
//                           .attr("aria-valuenow", totalcompletedpercentage_f) + "%";

//  });           
                           
// });              
}            
                        });


});
</script>
 
 
 
 <script>




// Monthly total orders--------------------------------------------------------------------
$(document).ready(function(){ 

   
const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";

    $.ajax({   
                  
        
        url: "{{ url('orderlist/getnewdorderscount/') }}" ,
                    type: "post",
                    data: {
                        fromdate:firstdate,
                        todate:lastdate,
                      //  process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                       // $('#monthqty').html(res);
                        // Todayqtypercent
                        // Todayqtypro
                     $("#monthorders").html(res);
                        
 
// $('#completedpro')
// .css("width", totalcompletedpercentage_f+'%', function() {
//                           return $('#completedpro')
//                           .attr("aria-valuenow", totalcompletedpercentage_f) + "%";

//  });           
                           
// });              
}            
                        });


});
</script>





<!-- today order -->
<script>

$(document).ready(function(){ 

    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
var fromdate = year +"-" + month + "-" + day+" "+ "00" + ":"+ "00" +":"+ "00";
var todate = year +"-" + month + "-" + day +" "+ "23" + ":"+ "59" +":"+ "59";
var timeStr= hours + ":"+ minutes +":"+ seconds;
// var date = new Date();
// var firstDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0"), 1);
// var lastDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0") + 1, 0);
// var date = new Date(), y = date.getFullYear(), m = date.getMonth();
// var firstDay = new Date(y, m, 1);
// var lastDay = new Date(y, m + 1, 0);
const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";

    $.ajax({   
                  
        
        url: "{{ url('orderlist/getnewdorderscount/') }}" ,
                    type: "post",
                    data: {
                        fromdate:fromdate,
                        todate:todate,
                     //   process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                      //  $('#Todayqty').html(res);
                        // Todayqtypercent
                        // Todayqtypro
                        $("#Todayorders").html(res);

                        var orderdetailer="T:M:Y Orders:-"+$("#Todayorders").html()  +":" +$("#monthorders").html()+":"+$("#yearlyyorders").val();
                        $("#tos").html(orderdetailer);
                    
 
// $('#completedpro')
// .css("width", totalcompletedpercentage_f+'%', function() {
//                           return $('#completedpro')
//                           .attr("aria-valuenow", totalcompletedpercentage_f) + "%";

//  });           
                           
// });              
}            
                        });


});
</script>
<!-- // total orders--------------------------------------------------------------------


// completed orders-------------------------------------------------------------------- -->

<script>

$(document).ready(function(){ 

   
const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";

    $.ajax({   
                  
        
        url: "{{ url('orderlist/getnewdorderscount/') }}" ,
                    type: "post",
                    data: {
                        fromdate:firstdate,
                        todate:lastdate,
                      //  process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                        $('#monthorders').val(res);
                        var mnorders= $("#monthorders").val();
                        var yrorders= $("#yearlyyorders").val();
                      var totalcompletedpercentage_f= (mnorders /yrorders *100); 
                      //var limiteddecimeltotalcompletedpercentage_f=totalcompletedpercentage_f
                      var cleanNum = totalcompletedpercentage_f.toFixed(2);
                      $('#monthorderspercent').html(cleanNum +"%");
//                         $.each(res, function (key, value) {
//                             var qty=value.qty;


$('#monthlyorderypro')
    .css({
        "width": totalcompletedpercentage_f + '%', 
        "background-color": "royalblue",
        "color": "white",                    // Text color for better contrast
        "text-align": "center",              // Center text horizontally
        "line-height": "30px",               // Center text vertically (adjust to element height)
        "height": "30px",                    // Set the height of the element
        "border-radius": "5px"               // Optional: rounded corners
    })
    .attr("aria-valuenow", totalcompletedpercentage_f)
    .text(totalcompletedpercentage_f + '%');







}            
                        });


});
</script>

<script>

$(document).ready(function(){ 

    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
var fromdate = year +"-" + month + "-" + day+" "+ "00" + ":"+ "00" +":"+ "00";
var todate = year +"-" + month + "-" + day +" "+ "23" + ":"+ "59" +":"+ "59";
var timeStr= hours + ":"+ minutes +":"+ seconds;
// var date = new Date();
// var firstDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0"), 1);
// var lastDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0") + 1, 0);
// var date = new Date(), y = date.getFullYear(), m = date.getMonth();
// var firstDay = new Date(y, m, 1);
// var lastDay = new Date(y, m + 1, 0);
const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";
var totalcompletedpercentage_f='0';
var cleanNum1='0';
    $.ajax({   
                  
        
        url: "{{ url('orderlist/getcompletedorderscount/') }}" ,
                    type: "post",
                    data: {
                        fromdate:fromdate,
                        todate:todate,
                        process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                      //  $('#Todayorders').html(res);
                        var torders= $("#Todayorders").html();
                        var mnorders= $("#monthorders").val();
                        if (torders=='0'){
                        totalcompletedpercentage_f=0;
                        cleanNum1 =0;
                        $('#Todayorderpercent').html(cleanNum1 +"%");
                    }else{
                      totalcompletedpercentage_f=(torders /mnorders *100); 
                   
                       cleanNum1 = totalcompletedpercentage_f.toFixed(2);
                      $('#Todayorderpercent').html(cleanNum1 +"%");

                    }
                         
//                         $.each(res, function (key, value) {
//                             var qty=value.qty;

              
$('#Todayorderypro')
    .css({
        "width": totalcompletedpercentage_f + '%', 
        "background-color": "royalblue",
        "color": "white",                    // Text color for better contrast
        "text-align": "center",              // Center text horizontally
        "line-height": "30px",               // Center text vertically (adjust to element height)
        "height": "30px",                    // Set the height of the element
        "border-radius": "5px"               // Optional: rounded corners
    })
    .attr("aria-valuenow", totalcompletedpercentage_f)
    .text(totalcompletedpercentage_f + '%');




}            
                        });


});
</script>
<!-- // completed orders-------------------------------------------------------------------- -->

<!-- today's labour hours--------------------------------------- -->
<script>

$(document).ready(function(){ 

    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
var fromdate = year +"-" + month + "-" + day+" "+ "00" + ":"+ "00" +":"+ "00" + "."+"000";
var todate = year +"-" + month + "-" + day +" "+ "23" + ":"+ "59" +":"+ "59" + "." +"000";
var timeStr= hours + ":"+ minutes +":"+ seconds;
// var date = new Date();
// var firstDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0"), 1);
// var lastDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0") + 1, 0);
// var date = new Date(), y = date.getFullYear(), m = date.getMonth();
// var firstDay = new Date(y, m, 1);
// var lastDay = new Date(y, m + 1, 0);
// const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
// const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";

    $.ajax({   
                  
        
        url: "{{ url('process/gettotalhousebydaterange/') }}" ,
                    type: "get",
                    data: {
                        fromdate:fromdate,
                        todate:todate,
                     //   process_status:"Completed",
                       _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    async:false,
                    success: function (res) {
                    //  $.each(res, function (key, value) {
                       if(res != null){
                        var labourth=res[0];
                        var labourth1=res[1];
                        
                        $("#totaylabour").html(labourth);
//24 *60 * 60=86400
                        var totalcompletedpercentage_f=( 100/86400  *labourth1); 
                     // var cleanNum1 = totalcompletedpercentage_f.toFixed(2);
                    
                    //   $('#proLabourperdayHours').css("width", totalcompletedpercentage_f+'%', function() {
                    //     return $('#proLabourperdayHours')
                    //     .attr("aria-valuenow", totalcompletedpercentage_f) + "%"}); 
                       
                    $('#proLabourperdayHours')
    .css({
        "width": totalcompletedpercentage_f + '%', 
        "background-color": "royalblue",
        "color": "white",                    // Text color for better contrast
        "text-align": "center",              // Center text horizontally
        "line-height": "30px",               // Center text vertically (adjust to element height)
        "height": "30px",                    // Set the height of the element
        "border-radius": "5px"               // Optional: rounded corners
    })
    .attr("aria-valuenow", totalcompletedpercentage_f)
    .text(totalcompletedpercentage_f + '%');
                 
                 
                 
                 
            
                
                   
}else{
                            $("#totaylabour").html(0); 
                        }
                       
                       
                       
                 //     });
                       
                        
 
    
                           
// });              
}            
                        });


});
</script>
<!-- monthly  labour hours -->
<script>

$(document).ready(function(){ 

    var dateObj = new Date();
      //  var form_data = $(this).serialize();
var month = (dateObj.getMonth() + 1).toString().padStart(2, "0");      
var day = dateObj.getDate().toString().padStart(2, "0");
var year = dateObj.getFullYear().toString().padStart(4, "0");
var hours = dateObj.getHours().toString().padStart(2, "0");
var minutes = dateObj.getMinutes().toString().padStart(2, "0");
var seconds = dateObj.getSeconds().toString().padStart(2, "0");

var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
var fromdate = year +"-" + month + "-" + day+" "+ "00" + ":"+ "00" +":"+ "00";
var todate = year +"-" + month + "-" + day +" "+ "23" + ":"+ "59" +":"+ "59";
var timeStr= hours + ":"+ minutes +":"+ seconds;
// var date = new Date();
// var firstDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0"), 1);
// var lastDay = new Date(date.getFullYear().toString().padStart(4, "0"), (date.getMonth()+1).toString().padStart(2, "0") + 1, 0);
// var date = new Date(), y = date.getFullYear(), m = date.getMonth();
// var firstDay = new Date(y, m, 1);
// var lastDay = new Date(y, m + 1, 0);
const firstdate = moment().startOf('month').format('YYYY-MM-DD')+ " "+ "00" + ":"+ "00" +":"+ "00" ;
const lastdate = moment().endOf('month').format("YYYY-MM-DD")+" "+ "23" + ":"+ "59" +":"+ "59";
var months = dateObj.toLocaleString('default', { month: 'short' });



$.ajax({   
                  
        
                  url: "{{ url('process/gettotalhousebymonthly/') }}" ,
                              type: "get",
                              data: {
                                years:year,
                                months:months,
                                 // todate:todate,
                               //   process_status:"Completed",
                                 _token: '{{csrf_token()}}'
                              },
                              dataType: 'json',
                              async:false,
                              success: function (res) {
                              //  $.each(res, function (key, value) {
                                  if(res != null){
                                  var labourth=res[0];
                                  var labourth1=res[1];
                                  $("#monthlylabour").html(labourth);
//24 *60 * 60 *31=2678400
var totalcompletedpercentage_f=( 100/2678400  *labourth1); 
                                
$('#proLabourmonthlyHours')
    .css({
        "width": totalcompletedpercentage_f + '%', 
        "background-color": "royalblue",
        "color": "white",                    // Text color for better contrast
        "text-align": "center",              // Center text horizontally
        "line-height": "30px",               // Center text vertically (adjust to element height)
        "height": "30px",                    // Set the height of the element
        "border-radius": "5px"               // Optional: rounded corners
    })
    .attr("aria-valuenow", totalcompletedpercentage_f)
    .text(totalcompletedpercentage_f + '%');


                                
                                
                                }else{
                                      $("#monthlylabour").html(0); 
                                  }
                                 
                                 
                                 
                           //     });
                                 
                                  
           
              
                                     
          // });              
          }            
                                  });


});
</script>





<!-- Orders------------------------------------------- -->
<script>
fetch('/home/monthly-order-data')
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.month);
        const orderCounts = data.map(item => item.order_count);
        const totals = data.map(item => item.total);

        const ctx = document.getElementById('lineChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Total Orders',
                        data: orderCounts,
                        backgroundColor: 'rgba(54, 162, 235, 1)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        yAxisID: 'y1',
                    },
                    
                    {
                        label: 'Total Amount ($)',
                        data: totals,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        yAxisID: 'y2',
                    }
                ]
            },
            options: {
                scales: {
                    y1: {
                        type: 'linear',
                        position: 'left',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Order Count',
                        },
                    },
                    y2: {
                        type: 'linear',
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Total Amount ($)',
                        },
                        grid: {
                            drawOnChartArea: false, // Prevent grid lines on right axis
                        }
                    }
                }
            }
        });
    });


</script>

<!-- <script>
      var labels = @json($data['labels']);
      var labels_f = [labels];
      var data = @json($data['data']);
      var data_f = [data];
      var ctx = document.getElementById('lineChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels_f[0],
                //labels:$data['labels'],
                datasets: [{
                    label: 'Orders',
                    data: data_f[0],
                   
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    fill: false

                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script> -->
<!-- Labours hours------------------------------------------- -->
<script>
fetch('/home/monthly-total-hours')
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.month);
        const totalHours = data.map(item => item.total_hours);

        const ctx = document.getElementById('barChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar', // You can use 'line' or 'bar' based on preference
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Hours',
                    data: totalHours,
                    backgroundColor: 'rgba(255, 240, 0, 0.2)',
                    borderColor: 'rgba(255, 255, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Total Hours'
                        }
                    }
                }
            }
        });
    });


</script>
<!-- <script>
      var labels = @json($data['labels']);
      var labels_f = [labels];
      var data = @json($data['data']);
      var data_f = [data];
      var ctx = document.getElementById('barChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels_f[0],
                //labels:$data['labels'],
                datasets: [{
                    label: 'Labours',
                    data: data_f[0],
                   
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    fill: false

                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script> -->
<!-- channels Orders------------------------------------------- -->

<script>
// fetch('/home/monthly-order-data-by-channel')
//     .then(response => response.json())
//     .then(data => {
//         const labels = [...new Set(data.flatMap(channel => channel.data.map(item => item.month)))];

//         const datasets = data.map(channel => ({
//             label: `${channel.channel} (Order Count)`,
//             data: labels.map(label => {
//                 const monthData = channel.data.find(item => item.month === label);
//                 return monthData ? monthData.order_count : 0;
//             }),
//             backgroundColor: 'rgba(54, 162, 235, 0.2)',
//             borderColor: 'rgba(54, 162, 235, 1)',
//             borderWidth: 1,
//         }));

//         const totalDatasets = data.map(channel => ({
//             label: `${channel.channel} (Total Amount)`,
//             data: labels.map(label => {
//                 const monthData = channel.data.find(item => item.month === label);
//                 return monthData ? monthData.total : 0;
//             }),
//             backgroundColor: 'rgba(75, 192, 192, 0.2)',
//             borderColor: 'rgba(75, 192, 192, 1)',
//             borderWidth: 1,
//         }));

//         const ctx = document.getElementById('pieChart').getContext('2d');
//         new Chart(ctx, {
//             type: 'pie',
//             data: {
//                 labels: labels,
//                 datasets: [...datasets, ...totalDatasets], // Combines order count and total amount datasets
//             },
//             options: {
//                 responsive: true,
//                 plugins: {
//                     tooltip: {
//                         mode: 'index',
//                         intersect: false,
//                     },
//                 },
//                 scales: {
//                     x: {
//                         stacked: false,
//                     },
//                     y: {
//                         beginAtZero: true,
//                     },
//                 },
//             },
//         });
//     });

fetch('/home/monthly-order-data-by-channel')
    .then(response => response.json())
    .then(data => {
        const labels = [...new Set(data.flatMap(channel => channel.data.map(item => item.month)))];

        const datasets = data.map(channel => ({
            label: `${channel.channel} (Order Count)`,
            data: labels.map(label => {
                const monthData = channel.data.find(item => item.month === label);
                return monthData ? monthData.order_count : 0;
            }),
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1,
        }));

        const totalDatasets = data.map(channel => ({
            label: `${channel.channel} (Total Amount)`,
            data: labels.map(label => {
                const monthData = channel.data.find(item => item.month === label);
                return monthData ? monthData.total : 0;
            }),
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
        }));

        const ctx = document.getElementById('pieChart').getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [...datasets, ...totalDatasets], // Combines order count and total amount datasets
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    },
                },
                scales: {
                    x: {
                        stacked: false,
                    },
                    y: {
                        beginAtZero: true,
                    },
                },
            },
        });
    });
// fetch('/home/monthly-order-data-by-channel')
//     .then(response => response.json())
//     .then(data => {
//         const labels = [...new Set(data.flatMap(channel => channel.data.map(item => item.month)))];

//         const datasets = data.map(channel => ({
//             label: `${channel.channel} (Order Count)`,
//             data: labels.map(label => {
//                 const monthData = channel.data.find(item => item.month === label);
//                 return monthData ? monthData.order_count : 0;
//             }),
//             backgroundColor: 'rgba(54, 162, 235, 0.2)', // Lighter fill color
//             borderColor: 'rgba(54, 162, 235, 1)',
//             borderWidth: 2,
//             fill: true, // Enables the area fill
//             tension: 0.4, // Adds smooth curves
//         }));

//         const totalDatasets = data.map(channel => ({
//             label: `${channel.channel} (Total Amount)`,
//             data: labels.map(label => {
//                 const monthData = channel.data.find(item => item.month === label);
//                 return monthData ? monthData.total : 0;
//             }),
//             backgroundColor: 'rgba(75, 192, 192, 0.2)', // Lighter fill color
//             borderColor: 'rgba(75, 192, 192, 1)',
//             borderWidth: 2,
//             fill: true, // Enables the area fill
//             tension: 0.4, // Adds smooth curves
//         }));

//         const ctx = document.getElementById('pieChart').getContext('2d');
//         new Chart(ctx, {
//             type: 'line', // Changed to 'line' for area chart
//             data: {
//                 labels: labels,
//                 datasets: [...datasets, ...totalDatasets], // Combines order count and total amount datasets
//             },
//             options: {
//                 responsive: true,
//                 plugins: {
//                     tooltip: {
//                         mode: 'index',
//                         intersect: false,
//                     },
//                     legend: {
//                         display: true
//                     }
//                 },
//                 elements: {
//                     line: {
//                         tension: 0.4 // Smooth curves
//                     }
//                 },
//                 scales: {
//                     x: {
//                         display: true
//                     },
//                     y: {
//                         beginAtZero: true
//                     }
//                 },
//             },
//         });
//     });

</script>
<!-- <script>
      var labels = @json($data['labels']);
      var labels_f = [labels];
      var data = @json($data['data']);
      var data_f = [data];
      var ctx = document.getElementById('pieChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels_f[0],
                //labels:$data['labels'],
                datasets: [{
                    label: 'Channels',
                    data: data_f[0],
                   lineTension:0.3,
                   pointRadius:3,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    pointHitRadius:5,
                    fill: false

                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script> -->
@endsection