@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="card-header">
              <h5 class="mb-0">Result {{ $title_menu }}</h5>
            </div>
            <hr class="horizontal dark mt-0">

            <div class="row px-4 py-2">
              <div class="col-lg">
                <div class="nav-wrapper row">
                  <div class="col">
                    <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>
                  </div>
                  <div class="col-md-8">
                    <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                      <span class="badge bg-light text-dark">Dari: {{ $filterSummary['from'] ?? '-' }}</span>
                      <span class="badge bg-light text-dark">Sampai: {{ $filterSummary['to'] ?? '-' }}</span>
                      <span class="badge bg-light text-dark">Departemen: {{ $filterSummary['departemen'] ?? '-' }}</span>
                      @if (($filter['show_bagian'] ?? '0') === '1')
                        <span class="badge bg-light text-dark">Bagian: {{ $filterSummary['bagian'] ?? '-' }}</span>
                      @endif
                      <span class="badge bg-light text-dark">Status:
                        {{ strtoupper((string) ($filterSummary['status'] ?? '')) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row px-4 py-2">
              <div class="col-lg-12 mb-4">
                <div class="card z-index-2 h-100">
                  <div class="card-header pb-0 p-3">
                    <h6 class="mb-1">Grafik Kebutuhan Tenaga Kerja Per
                      {{ ($filter['show_bagian'] ?? '0') === '1' ? 'Bagian' : 'Departemen' }}</h6>
                    <p class="text-sm mb-0">Perbandingan tenaga kerja diminta vs dipenuhi pada periode yang dipilih.</p>
                  </div>
                  <div class="card-body p-3">
                    <div class="chart">
                      <canvas id="chart-rpdept" class="chart-canvas" height="300"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row px-4 py-2">
              <div class="col-12">
                <div class="card">
                  <div class="card-header pb-0 p-3">
                    <h6 class="mb-0">Ringkasan Per
                      {{ ($filter['show_bagian'] ?? '0') === '1' ? 'Bagian' : 'Departemen' }}</h6>
                  </div>
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                      <thead>
                        <tr>
                          @if (($filter['show_bagian'] ?? '0') === '1')
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Departemen</th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Bagian</th>
                          @else
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Departemen</th>
                          @endif
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Diminta
                          </th>
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Dipenuhi
                          </th>
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Terealisasi
                          </th>
                          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Kebutuhan
                            Orang</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($summaryRows ?? [] as $row)
                          <tr>
                            @if (($filter['show_bagian'] ?? '0') === '1')
                              <td><h6 class="mb-0 text-sm">{{ $row['departemen_nama'] ?? '-' }}</h6></td>
                              <td><span class="text-xs font-weight-bold">{{ $row['bagian_nama'] ?? '-' }}</span></td>
                            @else
                              <td><h6 class="mb-0 text-sm">{{ $row['nama'] }}</h6></td>
                            @endif
                            <td><span class="text-xs font-weight-bold">{{ $row['diminta'] }}</span></td>
                            <td><span class="text-xs font-weight-bold">{{ $row['dipenuhi'] }}</span></td>
                            <td><span class="text-xs font-weight-bold">{{ $row['terealisasi'] }}</span></td>
                            <td><span class="text-xs font-weight-bold">{{ $row['kebutuhan'] }}</span></td>
                          </tr>
                        @empty
                          <tr>
                            <td colspan="{{ ($filter['show_bagian'] ?? '0') === '1' ? 6 : 5 }}" class="text-center text-muted">Tidak ada data ringkasan.</td>
                          </tr>
                        @endforelse
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="row px-4 py-4">
              <div class="col-12">
                <div class="card">
                  <div class="card-header pb-0 p-3">
                    <h6 class="mb-0">Daftar Permintaan Realisasi</h6>
                  </div>
                  <div class="table-responsive">
                    <table class="table display" id="list_{{ $dmenu }}">
                      @php
                        $columns = [
                            'No Permintaan',
                            'Departemen',
                            'Bagian',
                            'Posisi',
                            'Alasan',
                            'Peminta',
                            'Tanggal',
                            'Jumlah Permintaan',
                            'Jumlah Pemenuhan',
                        ];
                      @endphp

                      <thead class="thead-light" style="background-color: #daecff;">
                        <tr>
                          <th>No</th>
                          @foreach ($columns as $column)
                            <th>{{ $column }}</th>
                          @endforeach
                        </tr>
                      </thead>
                      <tbody>
                        @if ($table_result && count($table_result) > 0)
                          @foreach ($table_result as $detail)
                            @php
                              $jumlahPemenuhan = $detail->detailPermintaan->sum('realisasi_count');
                            @endphp
                            <tr>
                              <td>{{ $loop->iteration }}</td>
                              <td class="text-sm font-weight-normal">
                                <a href="{{ URL::to('rpdept/show/' . encrypt($detail->id)) }}"
                                  class="text-decoration-underline fw-bold">
                                  {{ $detail->no_permintaan }}
                                </a>
                              </td>
                              <td class="text-sm font-weight-normal">{{ $detail->departemen->nama ?? '-' }}</td>
                              <td class="text-sm font-weight-normal">{{ $detail->bagian->nama ?? '-' }}</td>
                              <td class="text-sm font-weight-normal">{{ $detail->jabatan->nama ?? '-' }}</td>
                              <td class="text-sm font-weight-normal">{{ $detail->nama_alasan ?? '-' }}</td>
                              <td class="text-sm font-weight-normal">{{ $detail->karyawan->nama ?? '-' }}</td>
                              <td class="text-sm font-weight-normal">{{ $detail->tanggal_range ?? '-' }}</td>
                              <td class="text-sm font-weight-normal text-center">{{ $detail->total_tenaga_kerja ?? 0 }}
                              </td>
                              <td class="text-sm font-weight-normal text-center">{{ $jumlahPemenuhan }}</td>
                            </tr>
                          @endforeach
                        @endif
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="row px-4 py-2">
              <div class="col-lg">
                @if ($table_result && count($table_result) > 0)
                  <div class="nav-wrapper" id="noted"><code>Total data: {{ count($table_result) }}</code></div>
                @else
                  <div class="nav-wrapper"><code>Data not found!</code></div>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script src="./assets/js/plugins/chartjs.min.js"></script>
  <script>
    const departemenLabels = @json($departemenLabels ?? []);
    const chartDiminta = @json($chartDiminta ?? []);
    const chartDipenuhi = @json($chartDipenuhi ?? []);
    const chartCtx = document.getElementById('chart-rpdept').getContext('2d');

    const chartRpdept = new Chart(chartCtx, {
      type: 'bar',
      data: {
        labels: departemenLabels,
        datasets: [{
            label: 'Diminta',
            data: chartDiminta,
            backgroundColor: '#5e72e4',
            borderRadius: 6,
            maxBarThickness: 18
          },
          {
            label: 'Dipenuhi',
            data: chartDipenuhi,
            backgroundColor: '#2dce89',
            borderRadius: 6,
            maxBarThickness: 18
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              boxWidth: 12,
              padding: 16,
              color: '#344767'
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              color: '#67748e',
              stepSize: 5
            },
            grid: {
              drawBorder: false,
              borderDash: [5, 5]
            }
          },
          x: {
            ticks: {
              color: '#67748e'
            },
            grid: {
              display: false,
              drawBorder: false
            }
          }
        }
      }
    });

    $('#list_{{ $dmenu }}').DataTable({
      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)'
      },
      responsive: true,
      order: [],
      columnDefs: [{
        targets: [0],
        searchable: false
      }]
    });

    $('.dt-button').addClass('btn btn-secondary');
    $('.dt-button').removeClass('dt-button');
  </script>
@endpush