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

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

  {{-- Alert Messages --}}
  @include('components.alert')

  @if ($errors->any())
    <div class="px-4 pt-2">
      <div class="alert alert-danger alert-dismissible fade show p-2" role="alert">
        <span class="alert-icon"><i class="ni ni-fat-remove"></i></span>
        <span class="alert-text"><strong>Error</strong> {{ $errors->first() }}</span>
        <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  @endif

  {{-- Action Buttons --}}
  <div class="card shadow-lg mx-4">
    <div class="card-body p-3">
      <div class="row gx-4">
        <div class="col-lg">
          <div class="nav-wrapper d-flex gap-2">
            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
              <i class="fas fa-circle-left me-1"></i>
              <span class="font-weight-bold">Kembali</span>
            </button>
            <button type="submit" form="form-realisasi" class="btn btn-success mb-0">
              <i class="fas fa-save me-1"></i>
              <span class="font-weight-bold">Update Realisasi</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Form Content --}}
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <p class="text-uppercase text-sm">Detail Permintaan</p>
            <hr class="horizontal dark mt-0">

            <div class="row">
              {{-- KOLOM KIRI --}}
              <div class="col-md-6">
                {{-- Input Nama Karyawan --}}
                <div class="form-group">
                  <label for="nama_karyawan" class="form-control-label">Nama Karyawan yang Mengajukan</label>
                  <input type="text" class="form-control" name="nama_karyawan" id="nama_karyawan" readonly
                    value="{{ $permintaan->nama_karyawan }}">
                </div>

                {{-- Input Select Values untuk Jabatan --}}
                <div class="form-group">
                  <label for="id_jabatan" class="form-control-label">Posisi yang Dibutuhkan</label>
                  <input type="text" class="form-control" readonly value="{{ $permintaan->jabatan->nama }}">
                </div>

                {{-- Input Select Values untuk Alasan --}}
                <div class="form-group">
                  <label for="id_alasan" class="form-control-label">Alasan</label>
                  <input type="text" class="form-control" readonly value="{{ $permintaan->nama_alasan }}">

                  <textarea class="form-control mt-2" name="detail_alasan" id="detail_alasan" rows="3" readonly>{{ $permintaan->detail_alasan }}</textarea>
                </div>
              </div>
              {{-- END KOLOM KIRI --}}

              {{-- KOLOM KANAN --}}
              <div class="col-md-6">

                {{-- Status Permintaan --}}
                @php
                  $status = $permintaan->status_pemenuhan_os;
                  $badgeClass = 'warning'; // Default kuning

                  if ($status == 'Terlambat') {
                      $badgeClass = 'danger';
                  }
                  if ($status == 'Menunggu Persetujuan HRD') {
                      $badgeClass = 'secondary';
                  }
                @endphp
                <div class="form-group">
                  <label for="status" class="form-control-label">Status Permintaan</label>
                  <input type="text"
                    class="form-control text-center text-uppercase fw-bold text-white bg-{{ $badgeClass }} w-auto"
                    value="{{ $status }}" readonly>
                </div>

                {{-- Select Bagian --}}
                <div class="form-group">
                  <label for="id_bagian" class="form-control-label">Ditempatkan di Bagian</label>
                  <input type="text" class="form-control"
                    value="{{ $permintaan->departemen->nama }} - {{ $permintaan->bagian->nama }}" readonly>
                </div>

                {{-- Textarea Uraian Pekerjaan --}}
                <div class="form-group">
                  <label for="uraian_pekerjaan" class="form-control-label">Uraian Pekerjaan</label>
                  <textarea class="form-control" name="uraian_pekerjaan" id="uraian_pekerjaan" rows="5" readonly>{{ $permintaan->uraian_pekerjaan }}</textarea>
                </div>
              </div>
              {{-- END KOLOM KANAN --}}
            </div>

            <form action="{{ url('realisasi/' . encrypt($permintaan->id)) }}" method="POST" id="form-realisasi">
              @csrf
              @method('PUT')

              <div class="form-group">
                <label class="form-control-label d-block mb-3">Tanggal dan Jumlah Permintaan Tenaga Kerja</label>

                @error('dataRealisasi')
                  <small class="text-danger d-block mb-2">{{ $message }}</small>
                @enderror

                @php
                  $grouped = [];
                  foreach ($detailPermintaan as $item) {
                      if (!isset($grouped[$item->tanggal])) {
                          $grouped[$item->tanggal] = [
                              'tanggal' => $item->tanggal,
                              'shifts' => [
                                  1 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                                  2 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                                  3 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                              ],
                          ];
                      }

                      $grouped[$item->tanggal]['shifts'][(int) $item->shift] = [
                          'id_detail_permintaan' => $item->id,
                          'jumlah' => (int) $item->jumlah,
                      ];
                  }

                  $oldByDetail = [];
                  foreach (old('dataRealisasi', []) as $oldItem) {
                      if (!empty($oldItem['id_detail_permintaan'])) {
                          $detailId = (int) $oldItem['id_detail_permintaan'];
                          $oldByDetail[$detailId][] = $oldItem['nik'] ?? '';
                      }
                  }

                  $existingByDetail = $existingByDetail ?? [];
                @endphp

                @forelse ($grouped as $tanggal => $group)
                  <div class="badge bg-warning text-dark rounded px-3 py-2 mb-3 fs-6" style="text-transform: none;">
                    Realisasi Tenaga Kerja - {{ \Carbon\Carbon::parse($tanggal)->format('d/m/Y') }}
                  </div>

                  <div class="bg-primary rounded text-white p-3 mb-4">
                    <div class="row g-3 align-items-end">
                      <div class="col-md-3">
                        <label class="form-control-label text-white d-block text-center">Tanggal Permintaan</label>
                        <input type="text" class="form-control text-center fw-bold"
                          value="{{ \Carbon\Carbon::parse($tanggal)->format('d-m-Y') }}" readonly>
                      </div>
                      <div class="col-md-3">
                        <label class="form-control-label text-white d-block text-center">Jumlah Tenaga Kerja Shift
                          1</label>
                        <input type="text" class="form-control text-center fw-bold"
                          value="{{ $group['shifts'][1]['jumlah'] }}" readonly>
                      </div>
                      <div class="col-md-3">
                        <label class="form-control-label text-white d-block text-center">Jumlah Tenaga Kerja Shift
                          2</label>
                        <input type="text" class="form-control text-center fw-bold"
                          value="{{ $group['shifts'][2]['jumlah'] }}" readonly>
                      </div>
                      <div class="col-md-3">
                        <label class="form-control-label text-white d-block text-center">Jumlah Tenaga Kerja Shift
                          3</label>
                        <input type="text" class="form-control text-center fw-bold"
                          value="{{ $group['shifts'][3]['jumlah'] }}" readonly>
                      </div>
                    </div>
                  </div>

                  @for ($shift = 1; $shift <= 3; $shift++)
                    @php
                      $shiftData = $group['shifts'][$shift];
                      $requiredCount = (int) $shiftData['jumlah'];
                      $detailId = $shiftData['id_detail_permintaan'];
                      $defaultRows = $requiredCount > 0 ? array_fill(0, $requiredCount, '') : [];
                      $existingRows =
                          $detailId && isset($existingByDetail[$detailId]) ? $existingByDetail[$detailId] : [];
                      $rows =
                          $detailId && isset($oldByDetail[$detailId])
                              ? $oldByDetail[$detailId]
                              : (!empty($existingRows)
                                  ? $existingRows
                                  : $defaultRows);
                    @endphp

                    <div class="shift-section mb-3" data-required="{{ $requiredCount }}"
                      data-detail-id="{{ $detailId ?? '' }}">
                      <div
                        class="border rounded bg-white d-flex flex-wrap align-items-stretch justify-content-between gap-2 mb-2 overflow-hidden">
                        <span class="badge bg-primary rounded-0 rounded-end px-4 d-flex align-items-center fs-6 fw-bold"
                          style="text-transform: none;">
                          Shift {{ $shift }}
                        </span>

                        @if ($requiredCount > 0 && $detailId)
                          <div class="d-flex flex-wrap align-items-center justify-content-end gap-2 p-2 grow">
                            <span class="badge bg-light text-dark border py-2 px-3 d-flex align-items-center">
                              Jumlah Diminta: {{ $requiredCount }} orang
                            </span>
                            <span
                              class="badge bg-light text-dark border js-terealisasi-count py-2 px-3 d-flex align-items-center">Jumlah
                              Terealisasi: {{ count($rows) }} orang
                            </span>
                            <div class="d-flex align-items-center">
                              <button type="button" class="btn btn-primary btn-sm js-add-row mb-0 py-2 px-4">
                                <i class="fas fa-plus-circle me-1"></i> Tambah Karyawan
                              </button>
                            </div>
                          </div>
                        @else
                          <div
                            class="d-flex align-items-center justify-content-end text-end text-dark fw-semibold p-2 grow">
                            Tidak Ada Realisasi Untuk Shift Ini
                          </div>
                        @endif
                      </div>

                      @if ($requiredCount > 0 && $detailId)
                        <div class="table-responsive border rounded shadow-sm mb-3 bg-white">
                          <table class="table mb-0" style="table-layout: fixed; width: 100%;">
                            <thead class="bg-primary text-white">
                              <tr>
                                <th class="text-center text-white" style="width: 10%;">No</th>
                                <th class="text-white" style="width: 70%;">Nama Karyawan</th>
                                <th class="text-center text-white" style="width: 20%;">Aksi</th>
                              </tr>
                            </thead>
                            <tbody class="js-rows-body">
                              @forelse ($rows as $nik)
                                <tr class="js-data-row">
                                  <td class="text-center js-row-no"></td>
                                  <td>
                                    <input type="hidden" class="js-detail-input" value="{{ $detailId }}">
                                    <select class="form-control custom-select js-nik-select w-100" required>
                                      <option value="">Pilih karyawan</option>
                                      @foreach ($karyawans as $karyawan)
                                        <option value="{{ $karyawan->nik }}"
                                          {{ $nik == $karyawan->nik ? 'selected' : '' }}>
                                          {{ $karyawan->nik }} - {{ $karyawan->nama }}
                                        </option>
                                      @endforeach
                                    </select>
                                  </td>
                                  <td class="text-center">
                                    <button type="button" class="btn btn-danger btn-sm js-delete-row">
                                      <i class="fas fa-trash-alt"></i>
                                    </button>
                                  </td>
                                </tr>
                              @empty
                                <tr class="js-empty-row">
                                  <td colspan="3" class="text-center text-muted py-3">Tidak ada karyawan yang
                                    ditambahkan
                                  </td>
                                </tr>
                              @endforelse
                            </tbody>
                          </table>
                        </div>
                      @endif
                    </div>
                  @endfor
                  @empty
                    <div class="alert alert-info">Tidak ada data detail permintaan.</div>
                  @endforelse

                  <div class="row mt-4">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="keterangan_os" class="form-control-label">Keterangan OS</label>
                        <textarea class="form-control" name="keterangan_os" id="keterangan_os" rows="3">{{ old('keterangan_os', $permintaan->keterangan_os) }}</textarea>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="status_os" class="form-control-label">Status OS <span
                            class="text-danger">*</span></label>
                        <select class="form-control custom-select" name="status_os" id="status_os">
                          <option value="">-- Pilih status --</option>
                          <option value="terpenuhi"
                            {{ old('status_os', $permintaan->status_os) == 'terpenuhi' ? 'selected' : '' }}>Terpenuhi
                          </option>
                          <option value="parsial"
                            {{ old('status_os', $permintaan->status_os) == 'parsial' ? 'selected' : '' }}>Terpenuhi
                            Sebagian / Parsial</option>
                          <option value="unmet_os"
                            {{ old('status_os', $permintaan->status_os) == 'unmet_os' ? 'selected' : '' }}>Tidak Terpenuhi
                            karena OS tidak bisa mencukupi</option>
                          <option value="unmet_user"
                            {{ old('status_os', $permintaan->status_os) == 'unmet_user' ? 'selected' : '' }}>Tidak
                            Terpenuhi karena OS dibatalkan oleh user</option>
                        </select>
                        @error('status_os')
                          <small class="text-danger">{{ $message }}</small>
                        @enderror
                      </div>
                    </div>
                  </div>
                </div>

                <select id="karyawan-options-template" class="d-none">
                  <option value="">Pilih karyawan</option>
                  @foreach ($karyawans as $karyawan)
                    <option value="{{ $karyawan->nik }}">{{ $karyawan->nik }} - {{ $karyawan->nama }}</option>
                  @endforeach
                </select>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endsection

  @push('js')
    <script>
      $(document).ready(function() {
        function toggleEmptyRow($section) {
          const $tbody = $section.find('.js-rows-body');
          const $rows = $tbody.find('tr.js-data-row');
          const $emptyRow = $tbody.find('tr.js-empty-row');

          if ($rows.length === 0) {
            if (!$emptyRow.length) {
              $tbody.append(`
              <tr class="js-empty-row">
                <td colspan="3" class="text-center text-muted py-3">Tidak ada karyawan yang dipilih</td>
              </tr>
            `);
            }
          } else {
            $emptyRow.remove();
          }
        }

        function reindexRows() {
          let index = 0;

          $('.shift-section').each(function() {
            const $section = $(this);
            const required = parseInt($section.data('required') || 0, 10);
            const $rows = $section.find('.js-rows-body tr.js-data-row');

            $rows.each(function(rowIndex) {
              const $row = $(this);
              $row.find('.js-row-no').text(rowIndex + 1);

              $row.find('.js-detail-input').attr('name', 'dataRealisasi[' + index + '][id_detail_permintaan]');
              $row.find('.js-nik-select').attr('name', 'dataRealisasi[' + index + '][nik]');
              index++;
            });

            $section.find('.js-terealisasi-count').text('Jumlah Terealisasi: ' + $rows.length + ' orang');

            const $addButton = $section.find('.js-add-row');
            if ($addButton.length) {
              const isMax = $rows.length >= required;
              $addButton.prop('disabled', isMax);
              $addButton.attr('title', isMax ? 'Jumlah realisasi sudah terpenuhi' : 'Tambah karyawan');
            }

            toggleEmptyRow($section);
          });
        }

        function createRow(detailId) {
          const optionsHtml = $('#karyawan-options-template').html();

          return `
          <tr class="js-data-row">
            <td class="text-center js-row-no"></td>
            <td>
              <input type="hidden" class="js-detail-input" value="${detailId}">
              <select class="form-control custom-select js-nik-select w-100" required>
                ${optionsHtml}
              </select>
            </td>
            <td class="text-center">
              <button type="button" class="btn btn-danger btn-sm js-delete-row">
                <i class="fas fa-trash-alt"></i>
              </button>
            </td>
          </tr>
        `;
        }

        function initKaryawanSelect($elements) {
          $elements.each(function() {
            const $el = $(this);
            if ($el.hasClass('select2-hidden-accessible')) {
              $el.select2('destroy');
            }

            $el.select2({
              width: '100%',
              placeholder: 'Pilih karyawan...'
            });
          });
        }

        initKaryawanSelect($('.js-nik-select'));

        $('.shift-section').on('click', '.js-add-row', function() {
          const $section = $(this).closest('.shift-section');
          const detailId = $section.data('detail-id');

          if (!detailId) {
            return;
          }

          const required = parseInt($section.data('required') || 0, 10);
          const $tbody = $section.find('.js-rows-body');

          if ($tbody.find('tr.js-data-row').length >= required) {
            return;
          }

          const rowHtml = createRow(detailId);
          $tbody.append(rowHtml);
          const $select = $tbody.find('tr:last .js-nik-select');
          initKaryawanSelect($select);

          reindexRows();
        });

        $('.shift-section').on('click', '.js-delete-row', function() {
          $(this).closest('tr').remove();
          reindexRows();
        });

        reindexRows();
      });
    </script>
  @endpush