@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
<form action="#" method="POST" name="employeeworkflow" id="employeeworkflow">
    <!-- Page Heading -->
   
    <div class="row">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Rejected Mechines From the Process</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">

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

                             
                            
                            </div>

                            <div class="col-md-8 mt-4">
                          
     <a href="{{ route('ieviewer.reportindex')}}" class="btn btn-md btn-primary float-right"><i
     class="fas fa-arrow-left fa-sm text-white-50"></i> Back</a>
     <button id="btn_cancel" href="#" class="btn btn-md btn-dark float-right mr-2" disabled>
     <i class="fa fa-arrow-up" aria-hidden="true"></i> Export</button>
    </div>     
                     
  </div>   
  
  
                 
</body>
<hr>

                                
</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">Rejected Item List</h6>
            
        </div>
        <div class="card-body">
      
            <div class="table-responsive">
           
                <table class="table table-bordered" id="dataTableorders" 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="5%">Order_Number</th>
                            <!-- <th width="10%">Customer</th> -->
                            <th width="10%">Event_Date</th>
                            <th width="10%">Started_Date</th>
                            <th width="5%">Started_Time</th>
                            <th width="10%">Ended_Date</th>
                            <th width="5%">Ended_Time</th>
                            <th width="10%">I_SerialNo</th>
                            <th width="35%">Item</th> 
                            <th width=5%">Employee</th> 
                            <!-- <th width="20%">Section</th> -->
                           
                       
                        </tr>
                       
                    </thead>
                   
                    <tbody id="jobResults">

                   <!-- ---------ajax  data rows -->
                  
                
                    </tbody>
                </table>
   
           
              
            </div>
           <div>
            <p>List Ended</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>
$(document).ready(function(){
   // var more_loader = $("<img id='hiddenL' src='../ForePost/icons/spin.gif'/>");
  //  href="{{route('productlist.createinventory')}}"
 $('#orders').on('change', function(){
    var order_number = this.value;
    $('#dataTableorders >tbody >tr').remove();



        $.ajax({   
                url: "{{ url('process/getJobDetailsByOrderNumber/') }}" ,
                type: "GET",
                data: {
                    order_number:order_number,
                   page:1,
                    _token: '{{csrf_token()}}'
                },
                //dataType: 'json',
                success: function(response) {
        // response.data contains the paginated results
        console.log("Paginated Records:", response.data);
        
        // Optional: display results in a table or HTML container
        response.data.forEach(function(job) {
            $('#jobResults').append(`
                <tr>
                    <td>${job.order_number}</td>
                    <td>${job.event_date}</td>
                    <td>${job.start_date}</td>
                    <td>${job.start_time}</td>
                    <td>${job.end_date}</td>
                    <td>${job.end_time}</td>
                    <td>${job.itemserialno}</td>
                    <td>${job.item}</td>
                   
                    <td>${job.employee}</td>
                </tr>
            `);
        });

        // Optional: update pagination info
        console.log("Current Page:", response.current_page);
        console.log("Last Page:", response.last_page);
    },
    error: function(xhr, status, error) {
        console.error("Error fetching job details:", error);
    }
                    });


 });

});
 </script>
  
    @endsection