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

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

  {{-- 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">
            <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>
            <a href="{{ route('document.permintaan-tenaga-kerja.print', encrypt($permintaan->id)) }}" target="_blank"
              class="btn btn-primary mb-0">
              <i class="fas fa-print me-1"></i>
              <span class="font-weight-bold">Cetak Dokumen</span>
            </a>
          </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">

                {{-- Nomor Permintaan --}}
                <div class="form-group">
                  <label for="no_permintaan" class="form-control-label">Nomor Permintaan</label>
                  <input type="text" class="form-control bg-primary text-white fw-bold border-primary"
                    name="no_permintaan" id="no_permintaan" readonly value="{{ $permintaan->no_permintaan }}">
                </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 }}">
                </div>

                <div class="form-group">
                  <label for="alasan_keterlambatan" class="form-control-label text-danger fw-bold">Alasan Keterlambatan</label>
                  <textarea class="form-control border-danger" name="alasan_keterlambatan" id="alasan_keterlambatan" rows="2" readonly
                    style="background-color: #ffe6e6;">{{ $permintaan->keterlambatanRealisasi->alasan ?? '-' }}</textarea>
                </div>
              </div>
              {{-- END KOLOM KIRI --}}

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

                {{-- Input Nama Karyawan --}}
                <div class="form-group">
                  <label for="nama_karyawan" class="form-control-label">Karyawan yang Mengajukan</label>
                  <input type="text" class="form-control" name="nama_karyawan" id="nama_karyawan" readonly
                    value="{{ $permintaan->karyawan->nama }}">
                </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="1" readonly>{{ $permintaan->uraian_pekerjaan ?? '-' }}</textarea>
                </div>
              </div>
              {{-- END KOLOM KANAN --}}
            </div>

            @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, 'status_os' => ''],
                              2 => ['id_detail_permintaan' => null, 'jumlah' => 0, 'status_os' => ''],
                              3 => ['id_detail_permintaan' => null, 'jumlah' => 0, 'status_os' => ''],
                          ],
                      ];
                  }

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

              $grandTotalPermintaan = 0;
              $totalShift1 = 0;
              $totalShift2 = 0;
              $totalShift3 = 0;
              foreach ($grouped as $group) {
                  $s1 = (int) ($group['shifts'][1]['jumlah'] ?? 0);
                  $s2 = (int) ($group['shifts'][2]['jumlah'] ?? 0);
                  $s3 = (int) ($group['shifts'][3]['jumlah'] ?? 0);

                  $totalShift1 += $s1;
                  $totalShift2 += $s2;
                  $totalShift3 += $s3;
                  $grandTotalPermintaan += $s1 + $s2 + $s3;
              }

              $viewRealisasiByDate = [];
              if (!empty($hasRealisasi)) {
                  foreach ($grouped as $tanggal => $group) {
                      $viewRealisasiByDate[$tanggal] = [
                          'tanggal' => $tanggal,
                          'display' => \Carbon\Carbon::parse($tanggal)->format('d-m-Y'),
                          'shifts' => [],
                      ];

                      for ($shift = 1; $shift <= 3; $shift++) {
                          $shiftData = $group['shifts'][$shift];
                          $detailId = $shiftData['id_detail_permintaan'];

                          $viewRealisasiByDate[$tanggal]['shifts'][$shift] = [
                              'required' => (int) $shiftData['jumlah'],
                              'status_os' => $shiftData['status_os'] ?? '',
                              'rows' =>
                                  $detailId && isset($detailRealisasi[$detailId]) ? $detailRealisasi[$detailId] : [],
                          ];
                      }
                  }
              }
            @endphp

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

              <div class="table-responsive mt-3">
                <table class="table align-items-center mb-0" style="width: 100%;">
                  <thead style="background-color: #daecff;">
                    <tr>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Tanggal</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Shift 1</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Shift 2</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Shift 3</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Total</th>
                      @if (!empty($hasRealisasi))
                        <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                          Action</th>
                      @endif
                    </tr>
                  </thead>
                  <tbody>
                    @forelse ($grouped as $tanggal => $group)
                      @php
                        $s1 = (int) ($group['shifts'][1]['jumlah'] ?? 0);
                        $s2 = (int) ($group['shifts'][2]['jumlah'] ?? 0);
                        $s3 = (int) ($group['shifts'][3]['jumlah'] ?? 0);
                      @endphp
                      <tr>
                        <td class="text-center text-sm">{{ \Carbon\Carbon::parse($tanggal)->format('d-m-Y') }}</td>
                        <td class="text-center text-sm">{{ $s1 }}</td>
                        <td class="text-center text-sm">{{ $s2 }}</td>
                        <td class="text-center text-sm">{{ $s3 }}</td>
                        <td class="text-center text-sm fw-bold">{{ $s1 + $s2 + $s3 }}</td>
                        @if (!empty($hasRealisasi))
                          <td class="text-center">
                            <button type="button" class="btn btn-primary btn-sm mb-0 js-open-show-realisasi"
                              data-date="{{ $tanggal }}">
                              <i class="fas fa-users me-1"></i>Lihat Karyawan
                            </button>
                          </td>
                        @endif
                      </tr>
                    @empty
                      <tr>
                        <td colspan="{{ !empty($hasRealisasi) ? 6 : 5 }}" class="text-center text-muted">Tidak ada data
                          detail permintaan.</td>
                      </tr>
                    @endforelse
                  </tbody>
                  <tfoot style="background-color: #f8fbff;">
                    <tr>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        Total</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        {{ $totalShift1 }}</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        {{ $totalShift2 }}</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        {{ $totalShift3 }}</th>
                      <th class="text-uppercase font-weight-bolder text-sm align-middle font-weight-normal text-center">
                        {{ $grandTotalPermintaan }}</th>
                      @if (!empty($hasRealisasi))
                        <th></th>
                      @endif
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>

            @if (!empty($hasRealisasi))
              <div class="modal fade" id="modal-show-realisasi" tabindex="-1"
                aria-labelledby="modal-show-realisasi-label" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="modal-show-realisasi-label">Detail Realisasi</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <ul class="nav nav-tabs" id="show-realisasi-shift-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                          <button class="nav-link active" id="show-tab-shift-1" data-bs-toggle="tab"
                            data-bs-target="#show-panel-shift-1" type="button" role="tab">Shift 1</button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="show-tab-shift-2" data-bs-toggle="tab"
                            data-bs-target="#show-panel-shift-2" type="button" role="tab">Shift 2</button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="show-tab-shift-3" data-bs-toggle="tab"
                            data-bs-target="#show-panel-shift-3" type="button" role="tab">Shift 3</button>
                        </li>
                      </ul>

                      <div class="tab-content pt-3">
                        <div class="tab-pane fade show active" id="show-panel-shift-1" role="tabpanel"></div>
                        <div class="tab-pane fade" id="show-panel-shift-2" role="tabpanel"></div>
                        <div class="tab-pane fade" id="show-panel-shift-3" role="tabpanel"></div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Tutup</button>
                    </div>
                  </div>
                </div>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@if (!empty($hasRealisasi))
  @push('js')
    <script>
      $(document).ready(function() {
        const realisasiViewData = @json($viewRealisasiByDate);
        const modalEl = document.getElementById('modal-show-realisasi');
        const titleEl = document.getElementById('modal-show-realisasi-label');
        let activeDate = null;
        let modal = null;

        if (window.bootstrap && bootstrap.Modal && modalEl) {
          modal = new bootstrap.Modal(modalEl);
        }

        const getStatusOsMeta = (value) => {
          const status = String(value || '').trim();
          if (status === 'terpenuhi') {
            return {
              className: 'bg-success',
              label: 'Status: Terpenuhi'
            };
          }

          if (status === 'unmet_os') {
            return {
              className: 'bg-warning text-dark',
              label: 'Status: Tidak Terpenuhi (OS tidak mencukupi)'
            };
          }

          if (status === 'unmet_user') {
            return {
              className: 'bg-secondary',
              label: 'Status: Tidak Terpenuhi (dibatalkan user)'
            };
          }

          return {
            className: 'bg-light text-dark border',
            label: 'Status: Belum ditentukan'
          };
        };

        const renderShiftPanel = (dateKey, shift) => {
          const panel = document.getElementById(`show-panel-shift-${shift}`);
          if (!panel) {
            return;
          }

          const dateData = realisasiViewData[dateKey] || null;
          const shiftData = dateData && dateData.shifts ? dateData.shifts[shift] : null;

          if (!shiftData) {
            panel.innerHTML = '<div class="alert alert-light border mb-0">Data shift tidak ditemukan.</div>';
            return;
          }

          const required = parseInt(shiftData.required || 0, 10);
          const rows = Array.isArray(shiftData.rows) ? shiftData.rows : [];
          const isFull = required > 0 && rows.length === required;
          const statusOsMeta = getStatusOsMeta(shiftData.status_os);

          if (required === 0) {
            panel.innerHTML = `
                <div class="alert mb-0" style="background-color: #daecff; border-color: #daecff; color: #344767;">
                  Tidak ada permintaan tenaga kerja pada Shift ${shift}.
                </div>
              `;
            return;
          }

          const rowHtml = rows.length ? rows.map((row, index) => `
              <tr>
                <td class="text-center">${index + 1}</td>
                <td>${row.nik || '-'}</td>
                <td>${row.nama || '-'}</td>
              </tr>
            `).join('') : `
              <tr>
                <td colspan="3" class="text-center text-muted py-3">Belum ada karyawan terealisasi</td>
              </tr>
            `;

          panel.innerHTML = `
              <div class="d-flex flex-wrap gap-2 mb-3">
                <span class="badge bg-light text-dark border px-3 py-2">Permintaan Shift ${shift}: ${required} orang</span>
                <span class="badge bg-light text-dark border px-3 py-2">Terealisasi: ${rows.length} orang</span>
                <span class="badge ${isFull ? 'bg-success' : 'bg-danger'} px-3 py-2">${isFull ? 'Sudah Memenuhi' : 'Belum Memenuhi'}</span>
                <span class="badge ${statusOsMeta.className} px-3 py-2">${statusOsMeta.label}</span>
              </div>
              <div class="table-responsive border rounded shadow-sm 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: 35%;">NIK</th>
                      <th class="text-white" style="width: 55%;">Nama Karyawan</th>
                    </tr>
                  </thead>
                  <tbody>${rowHtml}</tbody>
                </table>
              </div>
            `;
        };

        const renderDate = (dateKey) => {
          activeDate = dateKey;
          const dateData = realisasiViewData[dateKey];
          if (!dateData) {
            return;
          }

          titleEl.textContent = `Detail Realisasi - ${dateData.display}`;
          [1, 2, 3].forEach((shift) => renderShiftPanel(dateKey, shift));

          const preferredShift = [1, 2, 3].find((shift) => {
            const data = dateData.shifts && dateData.shifts[shift] ? dateData.shifts[shift] : null;
            return data && parseInt(data.required || 0, 10) > 0;
          }) || 1;

          const tabButton = document.getElementById(`show-tab-shift-${preferredShift}`);
          if (tabButton && bootstrap.Tab) {
            bootstrap.Tab.getOrCreateInstance(tabButton).show();
          }
        };

        document.querySelectorAll('.js-open-show-realisasi').forEach((button) => {
          button.addEventListener('click', function() {
            const dateKey = this.getAttribute('data-date');
            if (!dateKey) {
              return;
            }

            renderDate(dateKey);
            if (modal) {
              modal.show();
            }
          });
        });

        document.querySelectorAll('#show-realisasi-shift-tabs [data-bs-toggle="tab"]').forEach((tabEl) => {
          tabEl.addEventListener('shown.bs.tab', function() {
            if (!activeDate) {
              return;
            }

            const tabId = this.getAttribute('id') || '';
            const match = tabId.match(/show-tab-shift-(\d+)/);
            const shift = match ? parseInt(match[1], 10) : 0;

            if (shift >= 1 && shift <= 3) {
              renderShiftPanel(activeDate, shift);
            }
          });
        });
      });
    </script>
  @endpush
@endif