@extends('backoffice.template.app')
@section('script')
  <script>
    $(document).ready(function() {
      $('#table_id').DataTable();
    });
  </script>
@endsection
@section('content')
  <div class="d-flex justify-content-between align-items-center mb-4">
    <nav
      style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
      aria-label="breadcrumb" class="fs-5">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ route('backoffice.pengajuan-dokumen') }}">Pengajuan Dokumen</a></li>
        <li class="breadcrumb-item"><a class="text-primary">{{ $perizinan->nama }}</a></li>
      </ol>
    </nav>
  </div>
  <div class="card">
    <div class="card-body">
      <table class="table table-bordered table-striped" id="table_id">
        <thead>
          <tr>
            <th>#</th>
            <th class="w-100">Nama Dokumen</th>
            <th class="w-100">Jumlah Pengajuan</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($forms as $i => $f)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $f->nama }}</td>
              <td class="text-center"><span
                  class="badge {{ $f->user_has_forms->count() > 0 ? 'bg-danger' : 'bg-secondary' }} fs-6">{{ $f->user_has_forms->count() }}</span>
              </td>
              <td class="text-nowrap">
                <a href="{{ route('backoffice.pengajuan-dokumen.list-pengajuan-form', $f->id) }}"
                  class="btn btn-info">Detail</a>
              </td>
            </tr>
          @endforeach

        </tbody>
      </table>
    </div>
  </div>
@endsection