@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
  @include('layouts.navbars.auth.topnav', ['title' => ''])

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row mx-1">
          <div class="card">
            <div class="row">
              <div class="card-header col-md-auto">
                <h5 class="mb-0">Permintaan Tenaga Kerja</h5>
              </div>
              <div class="col">
                {{-- alert --}}
                @include('components.alert')
              </div>
            </div>
            <hr class="horizontal dark mt-0">

            {{-- Data Table --}}
            <div class="row px-4 py-2">
              <div class="table-responsive">
                <table class="table display" id="list_table">
                  <thead class="thead-light" style="background-color: #daecff;">
                    <tr>
                      <th class="text-center">Action</th>
                      <th>No</th>
                      <th class="text-center">Nomor Permintaan</th>
                      <th class="text-center">Departemen</th>
                      <th class="text-center">Bagian</th>
                      <th class="text-center">Posisi</th>
                      <th class="text-center">Alasan</th>
                      <th class="text-center">Tanggal</th>
                      <th class="text-center">Jumlah Tenaga Kerja</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($permintaans as $permintaan)
                      <tr>
                        {{-- Action Buttons --}}
                        <td class="text-sm font-weight-normal text-nowrap">
                          <button type="button" class="btn btn-primary btn-sm mb-0 px-4" title="View Data"
                            onclick="window.location='{{ url('trdept/show/' . encrypt($permintaan->id)) }}'">
                            <i class="fas fa-eye me-1"></i>
                            <span class="font-weight-bold">View</span>
                          </button>
                        </td>
                        <td class="text-sm align-middle font-weight-normal">{{ $loop->iteration }}
                        </td>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->no_permintaan }}</td>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->departemen->nama }}</td>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->bagian->nama }}</td>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->jabatan->nama }}</td>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->nama_alasan }}</td>
                        @php
                          $tanggal_awal = \Carbon\Carbon::parse($permintaan->detail_permintaan_min_tanggal)->format(
                              'd/m/Y',
                          );
                          $tanggal_akhir = \Carbon\Carbon::parse($permintaan->detail_permintaan_max_tanggal)->format(
                              'd/m/Y',
                          );
                        @endphp
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $tanggal_awal === $tanggal_akhir ? $tanggal_awal : $tanggal_awal . ' - ' . $tanggal_akhir }}
                        </td>
                        <td class="text-sm align-middle font-weight-normal text-center">
                          {{ $permintaan->detail_permintaan_sum_jumlah }}
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
    $(document).ready(function() {
      $('#list_table').DataTable({
        paging: true,
        info: true,
        searching: true,
        responsive: true,
        order: [],
        columnDefs: [{
            targets: [0],
            searchable: false
          }, // Kolom Action tidak bisa di-search
        ],
        language: {
          search: "Cari :",
          lengthMenu: "Tampilkan _MENU_ baris",
          zeroRecords: "Maaf - Data tidak ada",
          info: "Data _START_ - _END_ dari _TOTAL_",
          infoEmpty: "Tidak ada data",
          infoFiltered: "(pencarian dari _MAX_ data)"
        },
        dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
        buttons: [{
            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
            action: function() {
              window.location.href = "{{ url('permintaan') }}?export=excel";
            }
          },
          {
            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
            action: function() {
              window.location.href = "{{ url('permintaan') }}?export=pdf";
            }
          }
        ],
        initComplete: function() {
          var table = this.api();

          var departemens = @json($departemens);

          var departemenFilter = `
              <div class="mb-0">
                  <select id="filter-departemen" class="form-select form-select-sm" style="width:220px;">
                      <option value="">Semua Departemen</option>
                  </select>
              </div>
          `;

          var dataTablesFilter = $('#list_table_wrapper .dataTables_filter');
          dataTablesFilter.addClass('d-flex align-items-center gap-4 mb-0');
          dataTablesFilter.find('label').addClass('mb-0');
          dataTablesFilter.prepend(departemenFilter);

          $('#filter-departemen').css({
            height: '40px',
            border: '1px solid #aaaaaa',
            borderRadius: '0.5rem',
            fontSize: '0.9rem'
          });

          departemens.forEach(function(departemen) {
            $('#filter-departemen').append(
              `<option value="${departemen.nama}">${departemen.nama}</option>`
            );
          });

          var departemenColumnIndex = 3;

          $('#filter-departemen').on('change', function() {
            table.column(departemenColumnIndex).search(this.value).draw();
          });
        }
      });

      // Set color button datatables
      $('.dt-button').addClass('btn btn-secondary');
      $('.dt-button').removeClass('dt-button');
    });

  </script>
@endpush