@extends('layouts.app')

@section('title', 'Shippment CheckList')

@section('content')
<div class="container-fluid">
<form action="#" method="POST" name="employeeworkflow" id="employeeworkflow">
    <!-- Page Heading -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <div class="row">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Operational Employees work flow</h1>
</div>
       
    </div>
  
      
    
           
   
<!-- ------------------------------------- -->
<div class="card shadow mb-4">
    
        <div class="card-header py-3">
            <!-- <h6 class="m-0 font-weight-bold text-primary">Orders</h6> -->
          
        <div class="card-body">
      
        <div class="row mt-1">

<div class="col-md-4">
<label for="employee">Employee:</label>
                                 <select id="employee" name="employee" class="form-control ">
                            <option value="0" selected disabled >Select employee.....</option>
                            @foreach ($users as $data) 
  <option value="{{$data->id}}">{{$data->first_name}}
  </option>
  @endforeach
                          
                          
                        
                           </select>
                           @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                                <label class="labels">From_Date</label>
                                <input type="datetime-local" class="form-control @error('fromdate') is-invalid @enderror" name="fromdate[]" id="fromdate"
                                    placeholder="FromDate" onchange="FDhandler(event)">
                                @error('orderdate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror    
                            
                                <label class="labels">To_Date</label>
                                <input type="datetime-local" class="form-control @error('todate') is-invalid @enderror" name="todate[]" id="todate"
                                    placeholder="ToDate" onchange="TDhandler(event)">
                                @error('orderdate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            
                            </div>

                                <div class="col-md-2">                           
<div class="float-right mt-4">
           <button  id ="btn_get" href="#" class="btn btn-md btn-success">
        <i class="fa fa-list-ul" aria-hidden="true"></i>Get</button>
</div>

    </div>

  <div class="col-md-2">    
    <div class="float-right mt-4">
           <a href="#" class="btn btn-md btn-dark ">
        <i class="fa fa-list-ul" aria-hidden="true"></i>Download_PDF</a>
   
</div>                      
</div> 
    <div class="col-md-4">   
    <div class="float-right mt-4">
         <a href="{{ route('ieviewer.reportindex')}}" class="btn btn-md btn-primary"><i
     class="fas fa-arrow-left fa-sm text-white-50"></i> Back</a>
    </div>
    </div>               
                                </div>   
                 
</body>

</div>
                          
                           
                           
                          </div>       
                          </div>  
                          
                         
<!-- ----------------------------------------------- -->
   <div class="card shadow mb-4">
    
        <div class="card-header py-3">
            <!-- <h6 class="m-0 font-weight-bold text-primary">Orders</h6> -->
          
        <div class="card-body">

<div class="row"> 
        <div class="col-md-4" > 
       
                                 
                            </div>
                          
                           
                           
                           </div>                  
</body>

    {{-- Alert Messages --}}
    @include('common.alert')
   
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Employee Work Flow</h6>
            
        </div>
        <div class="card-body">
      
            <div class="table-responsive">
           
                <table class="table table-bordered" id="dataTableworkflow" width="100%" cellspacing="0">
                    <thead>
                   
                        <tr>
                         <!-- <th style='width:5%;'>Select</th> -->
                            <!-- <th style='width:5%; display:none;'>ID</th> -->
                            <!-- <th style='width:5%; display:none;'>ID</th> -->
                            <th width="10%">Order_Number</th>
                            <th width="20%">Item</th> 
                            <th width="5%">Section</th>
                            <th width="10%">Start_Date</th>
                            <th width="10%">End_Date</th>
                            <th width="5%">Time_Consumtion</th>
                          <th width="5%">Job_Status</th> 
                          <!-- <th width="5%">Action</th>  -->
                       
                       
                        </tr>
                       
                    </thead>
                   
                    <tbody>

                   <!-- ---------add data rows -->
                  
                
                    </tbody>
                    <tfoot>
            <tr>
                <td><strong>Total Time:</strong></td>
                <td id="totalTime"><strong>00:00</strong></td>
            </tr>
        </tfoot>
                </table>
   
           
              
            </div>
           <!-- <div>
            <p>Total Hours:</p>
           </div> -->
        </div>
    

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

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr">
        
    </script>

<script>
    flatpickr("input[type=datetime-local]");
</script>
    @endpush

    @section('scripts')
    <script>
function FDhandler(e) {
       // alert(e.target.value);
var od = e.target.value;
od = od.replace("T", " ");
$('#from_date').val(od);
//alert(od)


    }
</script>
<script>
function TDhandler(e) {
      //  alert(e.target.value);
        var pd = e.target.value;
pd = pd.replace("T", " ");
$('#to_date').val(pd);
//alert(pd);
    }
</script>

<script>
 $(document).on('click', '#btn_get', function(event) {
       event.preventDefault();
   
 
  
if (confirm('Are you sure?')) {

    $('#dataTableworkflow >tbody >tr').remove();

    var od = document.getElementById("fromdate").value;
    fd = od.replace("T", " ");

var pd = document.getElementById("todate").value;
td = pd.replace("T", " ");
var employee =$("#employee option:selected").text();
//var dateStr = year +"-" + month + "-" + day +" "+ hours + ":"+ minutes +":"+ seconds;
//var timeStr= hours + ":"+ minutes +":"+ seconds;
var fromdate = fd;
var todate = td;        
          
          
            $.ajax({   
                    url: "{{ url('process/viewemployeeworkflow/') }}" ,
                    type: "GET",
                    data: {
                        employee:employee,
                        fromdate:fromdate,
                        todate:todate,
                        //order_date:dateStr,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                        if(res != null){

                          
                        $.each(res, function (key, value) {
                            //$('#employee').prop('disabled', false);  
                            var order_number=value.order_number;
                            var item=value.item;
                         var section=value.section;
                         var start_date=value.start_date; 
 var start_time=value.start_time;
 var end_date=value.end_date;
 var end_time=value.end_time;
 var totalhours=value.totalhours;
 var sectionjobstatus=value.sectionjobstatus;
  //var employee=$('#user_emp option:selected').text();
                var html = '';
 html += '<tr>';
 //html += '<td ><input type="checkbox" id ="itemchk0" name="itemchk['+id+']" value="'+id+'" >'+'</td>';
html += '<td >'+order_number+'</td>'; 
 html += '<td >'+item+'</td>'; 
 html += '<td >'+section+'</td>';
 html += '<td >'+start_date+'</td>';
 html += '<td >'+end_date+'</td>';
 html += '<td class="totalhours">'+totalhours+'</td>';
 html += '<td >'+sectionjobstatus+'</td>';
// html += '<td style="font-weight:bold" id ="item" name="item['+id+']">' + item + "-:" + quantity +'</td>';
html +='</tr>';
  $('#dataTableworkflow').append(html);
                           
});  
calculateTotalTime();
}     
}       
                        });

}
 });

 // Function to calculate total time
 // Function to calculate total time including seconds
 function calculateTotalTime() {
                var totalSeconds = 0;

                // Loop through each cell in the "Time_Consumption" column with class "totalhours"
                $('.totalhours').each(function () {
                    var timeText = $(this).text(); // Get the text in HH:MM:SS format
                    var timeParts = timeText.split(':'); // Split by ':'

                    // Convert time to total seconds and add to total
                    var hours = parseInt(timeParts[0], 10); // Hours
                    var minutes = parseInt(timeParts[1], 10); // Minutes
                    var seconds = parseInt(timeParts[2], 10); // Seconds
                    totalSeconds += (hours * 3600) + (minutes * 60) + seconds;
                });

                // Convert total seconds back to HH:MM:SS format
                var totalHours = Math.floor(totalSeconds / 3600);
                var remainingSeconds = totalSeconds % 3600;
                var totalMinutes = Math.floor(remainingSeconds / 60);
                var seconds = remainingSeconds % 60;

                // Format as HH:MM:SS (pad with zeros if needed)
                var formattedTime = String(totalHours).padStart(2, '0') + ':' + 
                                    String(totalMinutes).padStart(2, '0') + ':' + 
                                    String(seconds).padStart(2, '0');

                // Update the total time in the table footer
                $('#totalTime').text(formattedTime);
            }

            // Call the function to calculate the total time
            calculateTotalTime();
</script>

<!-- <script>
        $(document).ready(function () {
            // Function to calculate total time
            function calculateTotalTime() {
                var totalMinutes = 0;

                // Loop through each cell in the "time" column
                $('.time').each(function () {
                    var timeText = $(this).text(); // Get the text in HH:MM format
                    var timeParts = timeText.split(':'); // Split by ':'

                    // Convert time to minutes and add to total
                    var hours = parseInt(timeParts[0], 10); // Hours
                    var minutes = parseInt(timeParts[1], 10); // Minutes
                    totalMinutes += (hours * 60) + minutes;
                });

                // Convert total minutes back to HH:MM format
                var totalHours = Math.floor(totalMinutes / 60);
                var remainingMinutes = totalMinutes % 60;

                // Format as HH:MM (pad with zeros if needed)
                var formattedTime = String(totalHours).padStart(2, '0') + ':' + String(remainingMinutes).padStart(2, '0');

                // Update the total time in the table footer
                $('#totalTime').text(formattedTime);
            }

            // Call the function to calculate the total time
            calculateTotalTime();
        });
    </script> -->
    @endsection