@extends('layout.master')

@push('plugin-styles')
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Contoh</a></li>
    <li class="breadcrumb-item active" aria-current="page">Datatable</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-header bg-white">
        <div class="row">
          <div class="col-12">
            <h6 class="card-title">Data Datatable</h6>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <div class="table-responsive">
              <table id="datatable" class="display responsive nowrap" style="width: 100%;">
                <thead>
                  <tr>
                    <th class="kolomNomor">No.</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Telepon</th>
                    <th>Alamat</th>
                    <th>Provinsi</th>
                    <th>Kota</th>
                    <th>Kode Pos</th>
                    <th>Metode Pengiriman</th>
                    <th>Metode Pembayaran</th>
                    <th>Status</th>
                    <th>Tanggal</th>
                    <th>Profesi</th>
                  </tr>
                </thead>
                <tbody>
                  @for ($i = 1; $i <= 100; $i++)
                    <tr>
                      <td>{{ $i }}</td>
                      <td>{{ fake()->unique()->name() }}</td>
                      <td>{{ fake()->unique()->email() }}</td>
                      <td>{{ fake()->phoneNumber() }}</td>
                      <td>{{ fake()->address() }}</td>
                      <td>{{ fake()->state() }}</td>
                      <td>{{ fake()->city() }}</td>
                      <td>{{ fake()->postcode() }}</td>
                      <td>{{ fake()->randomElement(['JNE', 'J&T', 'POS', 'TIKI']) }}</td>
                      <td>{{ fake()->randomElement(['BCA', 'BNI', 'BRI', 'Mandiri']) }}</td>
                      <td>{{ fake()->randomElement(['Menunggu Pembayaran', 'Menunggu Konfirmasi', 'Dikemas', 'Dikirim', 'Selesai']) }}</td>
                      <td>{{ fake()->date() }}</td>
                      <td>{{ fake()->randomElement(['Pelajar', 'Mahasiswa', 'Pegawai', 'Wiraswasta', 'Lainnya']) }}</td>
                    </tr>
                  @endfor
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('plugin-scripts')
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
  let datatable = $('#datatable').DataTable();
</script>
@endpush