@extends('layouts.app-2')
@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">JO DP</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">JO </li>
          <li class="breadcrumb-item active">Draft </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">Daftar JO belum di DP</h3>
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        <table id="example1" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Jo Number</th>
              <th>Client</th>
              <!-- <th>Jumlah</th> -->
              <th style="text-align: right">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($joborders as $jo)
            <tr>
              <td>{{$jo->kode_jo}}</td>
              <td>{{$jo->pelanggan->nama}}</td>
              {{-- <td>{{$jo->jumlah_site}}</td> --}}
              <td style="text-align: right">
                <div class="btn-group">
                  {{-- <button type="button" class="btn btn-default text-secondary"><i class="fa fa-edit"></i> </button> --}}
                  <a href="{{route('job.down.payment.detail', $jo->id)}}" class="btn btn-default text-secondary"><i class="fa fa-eye"></i></a>
                  {{-- <button type="button" class="btn btn-default text-danger"><i class="fa fa-trash"></i></button> --}}
                </div>
              </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