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

@section('content')
  <style>
    .dashboard-card-link {
      display: block;
      text-decoration: none !important;
      color: inherit !important;
    }

    .dashboard-card {
      border: 1px solid transparent;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
      will-change: transform;
    }

    /* Semua card bergerak saat hover */
    .dashboard-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(18, 38, 63, 0.08);
    }

    /* Card yang clickable */
    .dashboard-card-link .dashboard-card {
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    /* Hover modern untuk clickable */
    .dashboard-card-link:hover .dashboard-card {
      background-color: #eef3ff;
      background-image: linear-gradient(135deg,
          rgba(94, 114, 228, 0.18),
          rgba(94, 114, 228, 0.06));
      border-color: rgba(94, 114, 228, 0.3);
      box-shadow:
        0 0 0 1px rgba(94, 114, 228, 0.18),
        0 18px 36px rgba(94, 114, 228, 0.18),
        0 10px 18px rgba(18, 38, 63, 0.08);
      transform: translateY(-6px);
    }

    /* Glow tipis di atas */
    .dashboard-card-link .dashboard-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.18),
          transparent);
      transition: left 0.6s ease;
    }

    .dashboard-card-link:hover .dashboard-card::before {
      left: 130%;
    }

    /* Icon sedikit hidup */
    .dashboard-card-link .icon-shape {
      transition: transform 0.2s ease;
    }

    .dashboard-card-link:hover .icon-shape {
      transform: scale(1.06);
    }

    /* Hindari warna link bawaan */
    .dashboard-card-link:hover,
    .dashboard-card-link:focus,
    .dashboard-card-link:active {
      color: inherit !important;
      text-decoration: none !important;
    }

    .dashboard-card-link:focus-visible .dashboard-card {
      box-shadow:
        0 0 0 0.2rem rgba(94, 114, 228, 0.2),
        0 12px 24px rgba(18, 38, 63, 0.08);
    }

    @media (prefers-reduced-motion: reduce) {

      .dashboard-card,
      .dashboard-card-link .icon-shape {
        transition: none;
        transform: none;
      }
    }
  </style>
  @include('layouts.navbars.auth.topnav', ['title' => ''])
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-header p-3">
            <div class="row align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h6 class="mb-1">Dashboard</h6>
                <p class="text-sm mb-0">Data monitoring permintaan tenaga kerja</p>
              </div>
              <div class="col-md-6">
                <div class="d-flex justify-content-md-end align-items-center">
                  <label for="filter-bulan" class="text-sm mb-0 me-2">Filter</label>
                  <select id="filter-bulan" class="form-select form-select-sm w-auto me-2">
                    @foreach ($monthOptions as $value => $label)
                      <option value="{{ $value }}" {{ $defaultMonth === $value ? 'selected' : '' }}>
                        {{ $label }}</option>
                    @endforeach
                  </select>
                  <select id="filter-tahun" class="form-select form-select-sm w-auto">
                    @foreach ($availableYears as $year)
                      <option value="{{ $year }}" {{ $defaultYear === $year ? 'selected' : '' }}>
                        {{ $year }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      @foreach ($cardConfig as $card)
        <div class="col-xl-3 col-sm-6 {{ $loop->last ? '' : 'mb-xl-0 mb-4' }}">
          @if (!empty($card['url']))
            <a href="{{ url($card['url']) }}" class="dashboard-card-link">
              <div class="card dashboard-card">
                <div class="card-body p-3">
                  <div class="row">
                    <div class="col-8">
                      <div class="numbers">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold">{{ $card['label'] }}</p>
                        <h5 class="font-weight-bolder">
                          <span class="card-value" data-card-key="{{ $card['key'] }}">
                            {{ $defaultDashboard['card'][$card['key']] ?? 0 }}
                          </span> {{ $card['suffix'] }}
                        </h5>
                        <p class="mb-0 text-sm card-period-text" data-card-period>
                          Data bulan berjalan
                        </p>
                      </div>
                    </div>
                    <div class="col-4 text-end">
                      <div class="icon icon-shape {{ $card['iconBg'] }} text-center rounded-circle">
                        <i class="{{ $card['icon'] }} text-lg opacity-10" aria-hidden="true"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          @else
            <div class="card dashboard-card">
              <div class="card-body p-3">
                <div class="row">
                  <div class="col-8">
                    <div class="numbers">
                      <p class="text-sm mb-0 text-uppercase font-weight-bold">{{ $card['label'] }}</p>
                      <h5 class="font-weight-bolder">
                        <span class="card-value" data-card-key="{{ $card['key'] }}">
                          {{ $defaultDashboard['card'][$card['key']] ?? 0 }}
                        </span> {{ $card['suffix'] }}
                      </h5>
                      <p class="mb-0 text-sm card-period-text" data-card-period>
                        Data bulan berjalan
                      </p>
                    </div>
                  </div>
                  <div class="col-4 text-end">
                    <div class="icon icon-shape {{ $card['iconBg'] }} text-center rounded-circle">
                      <i class="{{ $card['icon'] }} text-lg opacity-10" aria-hidden="true"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endif
        </div>
      @endforeach
    </div>

    <div class="row mt-4">
      <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 Bulan</h6>
            <p class="text-sm mb-0">Perbandingan tenaga kerja diminta vs dipenuhi per departemen (sesuai bulan terpilih)
            </p>
          </div>
          <div class="card-body p-3">
            <div class="chart">
              <canvas id="chart-tenaga-kerja" class="chart-canvas" height="300"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header pb-0 p-3">
            <h6 class="mb-0">Daftar Permintaan Per Departemen</h6>
          </div>
          <div class="table-responsive">
            <table class="table align-items-center mb-0">
              <thead>
                <tr>
                  <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">Menunggu</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Diterima</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 id="tabel-permintaan-body">
                @foreach ($defaultDashboard['tabel'] ?? [] as $row)
                  <tr>
                    <td>
                      <h6 class="mb-0 text-sm">{{ $row['nama'] }}</h6>
                    </td>
                    <td><span class="text-xs font-weight-bold">{{ $row['menunggu'] }}</span></td>
                    <td><span class="text-xs font-weight-bold">{{ $row['diterima'] }}</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>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script src="./assets/js/plugins/chartjs.min.js"></script>
  <script>
    var filterBulan = document.getElementById('filter-bulan');
    var filterTahun = document.getElementById('filter-tahun');
    var tableBody = document.getElementById('tabel-permintaan-body');
    var tenagaKerjaCtx = document.getElementById('chart-tenaga-kerja').getContext('2d');

    var departemenLabels = @json($departemenLabels);
    var dashboardPerBulan = @json($dashboardPerBulan);
    var cardConfig = @json($cardConfig);

    var chartTenagaKerja = new Chart(tenagaKerjaCtx, {
      type: 'bar',
      data: {
        labels: departemenLabels,
        datasets: [{
            label: 'Diminta',
            data: [],
            backgroundColor: '#5e72e4',
            borderRadius: 6,
            maxBarThickness: 18
          },
          {
            label: 'Dipenuhi',
            data: [],
            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
            }
          }
        }
      }
    });

    function renderTabel(dataTabel) {
      tableBody.innerHTML = '';

      dataTabel.forEach(function(item) {
        var row = document.createElement('tr');
        row.innerHTML =
          '<td><h6 class="mb-0 text-sm">' + item.nama + '</h6></td>' +
          '<td><span class="text-xs font-weight-bold">' + item.menunggu + '</span></td>' +
          '<td><span class="text-xs font-weight-bold">' + item.diterima + '</span></td>' +
          '<td><span class="text-xs font-weight-bold">' + item.terealisasi + '</span></td>' +
          '<td><span class="text-xs font-weight-bold">' + item.kebutuhan + '</span></td>';
        tableBody.appendChild(row);
      });
    }

    function buildEmptyCard() {
      var card = {};
      cardConfig.forEach(function(item) {
        card[item.key] = 0;
      });
      return card;
    }

    function updateCardValues(cardData) {
      cardConfig.forEach(function(item) {
        var value = cardData && typeof cardData[item.key] !== 'undefined' ? cardData[item.key] : 0;
        var target = document.querySelector('[data-card-key="' + item.key + '"]');
        if (target) {
          target.textContent = value;
        }
      });
    }

    function updateCardPeriod() {
      var selectedMonthLabel = filterBulan.options[filterBulan.selectedIndex].text.trim();
      var selectedYear = filterTahun.value;
      var periodText = 'Data bulan ' + selectedMonthLabel + ' ' + selectedYear;

      document.querySelectorAll('[data-card-period]').forEach(function(target) {
        target.textContent = periodText;
      });
    }

    function updateDashboardByBulan(bulanKey) {
      var selectedData = dashboardPerBulan[bulanKey];
      if (!selectedData) {
        selectedData = {
          diminta: Array(departemenLabels.length).fill(0),
          dipenuhi: Array(departemenLabels.length).fill(0),
          tabel: departemenLabels.map(function(label) {
            return {
              nama: label,
              menunggu: 0,
              diterima: 0,
              terealisasi: 0,
              kebutuhan: 0
            };
          }),
          card: buildEmptyCard()
        };
      }

      chartTenagaKerja.data.datasets[0].data = selectedData.diminta;
      chartTenagaKerja.data.datasets[1].data = selectedData.dipenuhi;
      chartTenagaKerja.update();

      renderTabel(selectedData.tabel);

      updateCardValues(selectedData.card || buildEmptyCard());
    }

    function getBulanKey() {
      return filterTahun.value + '-' + filterBulan.value;
    }

    updateCardPeriod();
    updateDashboardByBulan(getBulanKey());

    filterBulan.addEventListener('change', function() {
      updateCardPeriod();
      updateDashboardByBulan(getBulanKey());
    });

    filterTahun.addEventListener('change', function() {
      updateCardPeriod();
      updateDashboardByBulan(getBulanKey());
    });
  </script>
@endpush