@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">

            {{-- Action Buttons --}}
            <div class="row px-4 py-2">
              <div class="col-lg">
                <div class="nav-wrapper">
                  <button type="button" class="btn btn-primary mb-0"
                    onclick="window.location='{{ URL::to('trptka/add') }}'">
                    <i class="fas fa-plus me-1"></i>
                    <span class="font-weight-bold">Tambah</span>
                  </button>
                </div>
              </div>
            </div>

            {{-- 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;">
                    {{-- #00b7bd4f -> daecff --}}
                    {{-- Header --}}
                    <tr>
                      <th width="110">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>
                      <th class="text-center">Status</th>
                    </tr>
                  </thead>

                  {{-- Body --}}
                  <tbody>
                    @foreach ($permintaans as $permintaan)
                      <tr>
                        {{-- Action Buttons --}}
                        <td class="text-sm font-weight-normal">
                          @include('trptkr.trptka.partials.action-buttons')
                        </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>
                        <td class="text-sm align-middle font-weight-normal">
                          {{ $permintaan->tanggal_range }}
                        </td>
                        <td class="text-sm align-middle font-weight-normal text-center">
                          {{ $permintaan->detail_permintaan_sum_jumlah }}
                        </td>
                        <td class="text-sm align-middle font-weight-normal">
                          <span class="badge bg-secondary px-3 py-2">
                            {{ $permintaan->status_permintaan }}
                          </span>
                        </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('trptka') }}?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('trptka') }}?export=pdf";
            }
          }
        ],
        initComplete: function() {
          var table = this.api();
          var dataTablesFilter = $('#list_table_wrapper .dataTables_filter');

          dataTablesFilter.addClass('d-flex align-items-center gap-4 mb-0');
          dataTablesFilter.find('label').addClass('mb-0');

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

          function registerSelectFilter(config) {
            var wrapper = $('<div>', {
              class: 'mb-0'
            });

            var select = $('<select>', {
              id: config.id,
              class: 'form-select form-select-sm'
            }).css('width', '250px');

            select.append($('<option>', {
              value: '',
              text: config.placeholder
            }));

            config.options.forEach(function(option) {
              select.append($('<option>', {
                value: option.value,
                text: option.text
              }));
            });

            wrapper.append(select);
            dataTablesFilter.prepend(wrapper);

            applyFilterStyle('#' + config.id);

            $('#' + config.id).on('change', function() {
              var value = this.value;

              if (!value) {
                table.column(config.columnIndex).search('').draw();
                return;
              }

              var escaped = $.fn.dataTable.util.escapeRegex(value);
              table.column(config.columnIndex).search('^\\s*' + escaped + '\\s*$', true, false, true)
                .draw();
            });
          }
        }
      });

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

    // SweetAlert Posting Confirmation
    function confirmPosting(id) {
      Swal.fire({
        title: 'Konfirmasi Posting',
        text: "Apakah Anda yakin ingin memposting permintaan ini? Jika posting, permintaan akan dikirim ke Head of Department dan tidak dapat diedit",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Ya, Posting!',
        cancelButtonText: 'Batal',
        reverseButtons: true
      }).then((result) => {
        if (result.isConfirmed) {
          // Create form and submit
          const form = document.createElement('form');
          form.method = 'POST';
          form.action = "{{ url('trptka/posting') }}/" + id;

          const csrfToken = document.createElement('input');
          csrfToken.type = 'hidden';
          csrfToken.name = '_token';
          csrfToken.value = '{{ csrf_token() }}';

          const methodField = document.createElement('input');
          methodField.type = 'hidden';
          methodField.name = '_method';
          methodField.value = 'PUT';

          form.appendChild(csrfToken);
          form.appendChild(methodField);
          document.body.appendChild(form);
          form.submit();
        }
      });
    }
  </script>
@endpush