@extends('layouts.app-2')
@section('title')
    Order Progress
@endsection
@section('content')

   <!-- Content Header (Page header) -->
   <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Order Progress</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item">Order </li>
              <li class="breadcrumb-item active">Progress </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

    <!-- Main content -->
   <section class="content">
      <div class="container-fluid">
         <div class="card">
            <div class="card-header">
              <h3 class="card-title">DataTable with default features</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
               <table id="example1" class="table table-bordered table-striped">
                  <thead>
                     <tr>
                        <th>No</th>
                        <th>Site</th>
                        <th>status</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach ($orders as $order)
                         <tr>
                           <td>{{++$i}}</td>
                           <td>
                              <a href="{{route('order.detail.teknisi', enkripRambo($order->id))}}"> {{$order->site}}</a>
                             
                           </td>
                           <td>
                              @if ($order->status == 5)
                                 <p class="badge badge-primary">On Progress</p>
                              @endif
                              @if ($order->status == 202)
                                 <p class="badge badge-danger">Pending</p>
                              @endif
                           </td>
                           
                         </tr>
                     @endforeach
                  
                  </tbody>
               </table>
            </div>
            <!-- /.card-body -->
          </div>
      </div><!-- /.container-fluid -->
   </section>
    <!-- /.content --> 
@endsection

@push('datatables')
<script>
   $(function () {
     $("#example1").DataTable({
       "responsive": true,
       "autoWidth": false,
     });
     $('#example2').DataTable({
       "paging": true,
       "lengthChange": false,
       "searching": false,
       "ordering": true,
       "info": true,
       "autoWidth": false,
       "responsive": true,
     });
   });
 </script>
@endpush