@extends('layouts.adminlte')
@section('title', 'No Job Sync Master Project')
@section('content')
<div class="container-fluid">
  <style>
    #jobsTable tbody tr.row-closed-project > td {
      background-color: #fff5f5 !important;
    }
    #jobsTable tbody tr.row-outside-effective > td {
      background-color: #fffdf0 !important;
    }
    #jobsTable tbody tr.row-active-today > td {
      background-color: #f4fff7 !important;
    }
  </style>
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <div class="d-flex align-items-center gap-2">
        <h3 class="mb-0">No Job Sync Master Project</h3>
        <button
          type="button"
          class="btn btn-outline-secondary btn-sm rounded-circle d-inline-flex align-items-center justify-content-center"
          style="width: 28px; height: 28px;"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          title="<div class='text-start small'>
            <div><span class='badge text-bg-success'>Aktif Hari Ini</span> No Job bisa dipakai untuk transaksi baru hari ini.</div>
            <div class='mt-1'><span class='badge text-bg-warning text-dark'>Di Luar Tanggal Efektif</span> Project masih aktif, tapi tanggal kerja di luar start/end work. Transaksi baru diblok.</div>
            <div class='mt-1'><span class='badge text-bg-danger'>Closed Project</span> Project sudah ditutup. Transaksi baru diblok, histori lama tetap tampil.</div>
          </div>">
          ?
        </button>
      </div>
      <div class="text-muted small">Mulai dari sini jika `No Job` belum muncul. Semua halaman project job memakai urutan tombol yang sama.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'jobs'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('master_project.index') }}" class="btn btn-outline-secondary btn-sm">
          Buka Master Project
        </a>
        <button class="btn btn-outline-success btn-sm" id="btnSyncMaster">Sync dari Master Project</button>
      </div>
    </div>
  </div>
  <div class="alert alert-light border">
    Sumber utama No Job sekarang mengikuti <b>Master Project</b> (`code_project` sebagai `no_job`). Halaman ini sekarang <b>read-only</b>. Jika ada project baru, project close, atau perubahan nama/rentang kerja, lakukan di <b>Master Project</b> lalu klik <b>Sync dari Master Project</b>.
    <div class="d-flex flex-wrap gap-2 mt-2">
      <span class="badge text-bg-success">Aktif Hari Ini</span>
      <span class="badge text-bg-warning text-dark">Di Luar Tanggal Efektif</span>
      <span class="badge text-bg-danger">Closed Project</span>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="row g-2 align-items-end mb-3">
        <div class="col-md-4 col-lg-3">
          <label class="form-label">Filter Status</label>
          <select id="filterStatus" class="form-select form-select-sm">
            <option value="">Semua Status</option>
            <option value="active_today">Aktif Hari Ini</option>
            <option value="outside_effective">Di Luar Tanggal Efektif</option>
            <option value="closed_project">Closed Project</option>
          </select>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered table-striped" id="jobsTable">
          <thead>
            <tr>
              <th>Kode (No Job)</th>
              <th>Nama</th>
              <th>Status Project</th>
              <th>WO</th>
              <th>Efektif</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(function(){
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
    new bootstrap.Tooltip(tooltipTriggerEl);
  });

  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
  let jobStatusFilter = '';

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    if (settings.nTable.id !== 'jobsTable') return true;
    if (!jobStatusFilter) return true;
    const rowData = table.row(dataIndex).data();
    if (!rowData) return true;
    if (jobStatusFilter === 'closed_project') {
      return !rowData.is_active;
    }
    if (jobStatusFilter === 'active_today') {
      return !!rowData.is_active_today;
    }
    if (jobStatusFilter === 'outside_effective') {
      return !!rowData.is_active && !rowData.is_active_today;
    }
    return true;
  });

  const table = $('#jobsTable').DataTable({
    ajax: { url: '{{ route('project_jobs.data') }}', dataSrc: 'data' },
    createdRow: function(row, data) {
      if (!data.is_active) {
        $(row).addClass('row-closed-project');
      } else if (data.is_active_today) {
        $(row).addClass('row-active-today');
      } else {
        $(row).addClass('row-outside-effective');
      }
    },
    columns: [
      { data: 'code' },
      { data: 'name' },
      { data: 'master_project_status', render: (v)=> {
        const value = (v || '').toString();
        if (!value) return '<span class="text-muted">-</span>';
        if (value === 'on_going') return '<span class="badge text-bg-primary">On Going</span>';
        if (value === 'approved_client') return '<span class="badge text-bg-info">Approved Client</span>';
        if (value === 'closed') return '<span class="badge text-bg-secondary">Closed</span>';
        if (value === 'draft_penawaran') return '<span class="badge text-bg-warning text-dark">Draft Penawaran</span>';
        if (value === 'rejected_client') return '<span class="badge text-bg-danger">Rejected Client</span>';
        return `<span class="badge text-bg-light text-dark border">${value}</span>`;
      }},
      { data: null, render: (d)=> {
        if (d.has_work_order) {
          const wo = (d.wo_number || '').toString().trim();
          return `<div><span class="badge text-bg-success">WO Released</span>${wo ? `<div class="small text-muted mt-1">${wo}</div>` : ''}</div>`;
        }
        return '<span class="badge text-bg-warning text-dark">Belum WO</span>';
      }},
      { data: null, render: (d)=> `${d.effective_start||'-'} s/d ${d.effective_end||'-'}` },
      { data: null, render: (d)=> {
        if (!d.is_active) return '<span class="badge text-bg-danger">Closed Project</span>';
        return d.is_active_today
          ? '<span class="badge text-bg-success">Aktif Hari Ini</span>'
          : '<span class="badge text-bg-warning text-dark">Di Luar Tanggal Efektif</span>';
      }}
    ]
  });

  $('#filterStatus').on('change', function(){
    jobStatusFilter = $(this).val() || '';
    table.draw();
  });

  $('#btnSyncMaster').on('click', function(){
    $.post('{{ route('project_jobs.sync_master') }}')
      .done((resp)=>{ table.ajax.reload(null,false); Swal.fire('OK', `${resp.message||'Sync selesai'} (${resp.total||0} row)`, 'success'); })
      .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal sync master project', 'error'));
  });
});
</script>
@endpush