@extends('layouts.adminlte')
@section('title', 'Summary Cost No Job')

@push('styles')
  <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
  <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
  <style>
    .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
    .metric-card {
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 18px;
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      height: 100%;
    }
    .metric-card .label { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
    .metric-card .value { font-size: 28px; font-weight: 700; color: #111827; }
    .src-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .src-pill.work_log { background: #dbeafe; color: #1d4ed8; }
    .src-pill.assignment_default { background: #fef3c7; color: #b45309; }
    .detail-row { background: #fafcff; }
    .detail-toggle { white-space: nowrap; }
  </style>
@endpush

@section('content')
<div class="container-fluid">
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <h3 class="mb-0">Summary Cost No Job</h3>
      <div class="text-muted small">Rekap beban cost per No Job. Prioritas sumber: work log, lalu fallback ke assignment harian + jam hadir aktual.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'summary'])
      <div class="d-flex flex-wrap gap-2">
        <button class="btn btn-outline-danger btn-sm" id="btnExportPdf">Export PDF</button>
        <button class="btn btn-outline-success btn-sm" id="btnExportXlsx">Export XLSX</button>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-2">
          <label class="form-label">Dari</label>
          <input type="date" id="dateFrom" class="form-control" value="{{ now()->startOfMonth()->format('Y-m-d') }}">
        </div>
        <div class="col-md-2">
          <label class="form-label">Sampai</label>
          <input type="date" id="dateTo" class="form-control" value="{{ now()->format('Y-m-d') }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">No Job</label>
          <select id="filterJob" class="form-select"></select>
        </div>
        <div class="col-md-3">
          <label class="form-label">Karyawan</label>
          <select id="filterKaryawan" class="form-select"></select>
        </div>
        <div class="col-md-1 d-grid">
          <button class="btn btn-primary" id="btnLoad">Load</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-md-4">
      <div class="metric-card">
        <div class="label">Total No Job</div>
        <div class="value" id="metricJobs">0</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric-card">
        <div class="label">Total Jam</div>
        <div class="value" id="metricHours">0</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric-card">
        <div class="label">Total Menit</div>
        <div class="value" id="metricMinutes">0</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric-card">
        <div class="label">Total Cost</div>
        <div class="value" id="metricCost">Rp 0</div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width:70px;">Detail</th>
              <th>No Job</th>
              <th>Nama</th>
              <th>Total Jam</th>
              <th>Total Menit</th>
              <th>Rate/Jam</th>
              <th>Total Cost</th>
              <th>Sumber</th>
            </tr>
          </thead>
          <tbody id="summaryBody">
            <tr><td colspan="8" class="text-center text-muted">Belum ada data.</td></tr>
          </tbody>
          <tfoot id="summaryFoot">
            <tr>
              <th colspan="3" class="text-end">Grand Total</th>
              <th id="footHours">0.00</th>
              <th id="footMinutes">0</th>
              <th>-</th>
              <th id="footCost">Rp 0</th>
              <th>-</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function(){
  $('#filterJob').select2({
    theme: 'bootstrap-5',
    allowClear: true,
    placeholder: '- semua -',
    ajax: {
      url: '{{ route('project_job_refs.jobs') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '', work_date: $('#dateFrom').val() || '' }),
      processResults: (data) => data,
      cache: true
    }
  });
  $('#filterKaryawan').select2({
    theme: 'bootstrap-5',
    allowClear: true,
    placeholder: '- semua -',
    ajax: {
      url: '{{ route('project_job_refs.karyawans') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '' }),
      processResults: (data) => data,
      cache: true
    }
  });

  function render(rows){
    const totalHours = rows.reduce((sum, row) => sum + Number(row.hours_total || 0), 0);
    const totalMinutes = rows.reduce((sum, row) => sum + Number(row.minutes_total || 0), 0);
    const totalCost = rows.reduce((sum, row) => sum + Number(row.cost_total || 0), 0);
    $('#metricJobs').text(rows.length);
    $('#metricHours').text(totalHours.toFixed(2));
    $('#metricMinutes').text(totalMinutes.toLocaleString('id-ID'));
    $('#metricCost').text(`Rp ${totalCost.toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}`);
    $('#footHours').text(totalHours.toFixed(2));
    $('#footMinutes').text(totalMinutes.toLocaleString('id-ID'));
    $('#footCost').text(`Rp ${totalCost.toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}`);

    if (!rows.length) {
      $('#summaryBody').html('<tr><td colspan="8" class="text-center text-muted">Belum ada data.</td></tr>');
      return;
    }

    $('#summaryBody').html(rows.map((row) => {
      const sources = Array.isArray(row.sources) ? row.sources : [];
      const details = Array.isArray(row.details) ? row.details : [];
      const detailId = `detail-${row.job_id}`;
      const detailHtml = details.length
        ? `
          <tr class="detail-row d-none" id="${detailId}">
            <td colspan="8">
              <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                  <thead class="table-light">
                    <tr>
                      <th>Karyawan</th>
                      <th>Total Jam</th>
                      <th>Total Menit</th>
                      <th>Rate/Jam</th>
                      <th>Total Cost</th>
                      <th>Sumber</th>
                      <th>Tanggal Kerja</th>
                    </tr>
                  </thead>
                  <tbody>
                    ${details.map((detail) => `
                      <tr>
                        <td>${detail.employee_code || '-'} - ${detail.employee_name || '-'}</td>
                        <td>${Number(detail.hours_total || 0).toFixed(2)}</td>
                        <td>${Number(detail.minutes_total || 0).toLocaleString('id-ID')}</td>
                        <td>Rp ${Number(detail.rate_per_hour || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:4})}</td>
                        <td>Rp ${Number(detail.cost_total || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</td>
                        <td>${(detail.sources || []).map((src) => `<span class="src-pill ${src}">${src}</span>`).join('')}</td>
                        <td>${(detail.work_dates || []).join(', ') || '-'}</td>
                      </tr>
                    `).join('')}
                  </tbody>
                </table>
              </div>
            </td>
          </tr>`
        : '';
      return `
        <tr>
          <td>
            ${details.length ? `<button class="btn btn-sm btn-outline-secondary detail-toggle" data-target="${detailId}">Lihat (${details.length})</button>` : '<span class="text-muted small">-</span>'}
          </td>
          <td>${row.job_code || '-'}</td>
          <td>${row.job_name || '-'}</td>
          <td>${Number(row.hours_total || 0).toFixed(2)}</td>
          <td>${Number(row.minutes_total || 0).toLocaleString('id-ID')}</td>
          <td>Rp ${Number(row.rate_per_hour || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:4})}</td>
          <td>Rp ${Number(row.cost_total || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</td>
          <td>${sources.map((src) => `<span class="src-pill ${src}">${src}</span>`).join('')}</td>
        </tr>
        ${detailHtml}
      `;
    }).join(''));
  }

  function load(){
    $.get('{{ route('project_job_work_logs.summary') }}', {
      date_from: $('#dateFrom').val(),
      date_to: $('#dateTo').val(),
      job_id: $('#filterJob').val(),
      karyawan_id: $('#filterKaryawan').val()
    }).done((resp) => render(resp.data || []))
      .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load summary', 'error'));
  }

  function exportUrl(baseUrl){
    const params = new URLSearchParams({
      date_from: $('#dateFrom').val() || '',
      date_to: $('#dateTo').val() || '',
      job_id: $('#filterJob').val() || '',
      karyawan_id: $('#filterKaryawan').val() || ''
    });
    return `${baseUrl}?${params.toString()}`;
  }

  $('#btnLoad').on('click', load);
  $('#btnExportPdf').on('click', function(){
    window.open(exportUrl('{{ route('project_job_work_logs.summary_export_pdf') }}'), '_blank');
  });
  $('#btnExportXlsx').on('click', function(){
    window.location.href = exportUrl('{{ route('project_job_work_logs.summary_export_xlsx') }}');
  });
  $(document).on('click', '.detail-toggle', function(){
    const target = $(this).data('target');
    const $row = $('#' + target);
    const isHidden = $row.hasClass('d-none');
    $row.toggleClass('d-none', !isHidden);
    $(this).text(isHidden ? 'Sembunyikan' : $(this).text().replace('Sembunyikan', 'Lihat'));
    if (!isHidden) {
      const count = $('#' + target).find('tbody tr').length;
      $(this).text(`Lihat (${count})`);
    }
  });
  load();
});
</script>
@endpush