@extends('layouts.adminlte')
@section('title', 'Assignment No Job Harian')

@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; }
    .present-list {
      max-height: 520px;
      overflow: auto;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      background: #fff;
    }
    .present-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid #eef2f6;
    }
    .present-row:last-child { border-bottom: 0; }
    .present-row.assigned {
      background: #fff7ed;
      border-left: 4px solid #f97316;
    }
    .present-row.assigned.replace-mode {
      background: #fff1f2;
      border-left-color: #dc2626;
      box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
    }
    .present-row .identity { min-width: 260px; }
    .present-row .meta { color: #6c757d; font-size: 12px; }
    .present-row .badge-job {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: #eef6ff;
      color: #0d6efd;
      font-size: 12px;
      border: 1px solid #cfe2ff;
    }
    .present-row .status-box {
      min-width: 220px;
      font-size: 12px;
      color: #495057;
    }
    .present-row .check-slot {
      width: 26px;
      min-width: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .present-row .replace-note {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
      font-size: 12px;
      font-weight: 600;
    }
    .present-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }
  </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">Assignment No Job Harian</h3>
      <div class="text-muted small">Pakai untuk set `job default` per tanggal. Jika pindah job per jam, lanjutkan ke Work Log atau Timeline Job.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'assignments'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('project_job_assignments.template') }}" class="btn btn-outline-success btn-sm">Template Excel</a>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnExportExisting">Export Existing</button>
        <button type="button" class="btn btn-primary btn-sm" id="btnOpenImport">Import Excel</button>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <form id="assignForm" class="row g-2 align-items-end">
        <div class="col-md-2">
          <label class="form-label">Tanggal</label>
          <input type="date" id="workDate" class="form-control" value="{{ now()->format('Y-m-d') }}" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">No Job</label>
          <select id="jobId" class="form-select" required></select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Cari Pegawai Hadir</label>
          <input type="text" id="employeeSearch" class="form-control" placeholder="kode / nama pegawai">
        </div>
        <div class="col-md-2 d-grid">
          <button class="btn btn-outline-primary" type="button" id="btnLoadPresent">Tampilkan Pegawai Masuk</button>
        </div>
      </form>
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mt-3">
        <div class="present-toolbar">
          <label class="m-0 d-flex align-items-center gap-2">
            <input type="checkbox" id="checkAllPresent">
            <span>Pilih semua yang bisa diassign</span>
          </label>
          <label class="m-0 d-flex align-items-center gap-2">
            <input type="checkbox" id="replaceExistingMode">
            <span>Mode ganti assignment lama</span>
          </label>
          <span class="small text-muted" id="presentSummary">Daftar ini mengambil pegawai yang benar-benar `checkin` di tanggal terpilih.</span>
        </div>
        <button class="btn btn-primary" type="submit" form="assignForm" id="btnSaveAssignments">Tandai ke No Job</button>
      </div>
      <div class="present-list mt-3" id="presentList">
        <div class="p-3 text-muted small">Pilih tanggal lalu tekan `Tampilkan Pegawai Masuk`.</div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="d-flex gap-2 mb-2">
        <input type="date" id="filterDate" class="form-control form-control-sm" style="max-width:200px;">
        <select id="filterKaryawan" class="form-select form-select-sm" style="max-width:360px;"></select>
        <button class="btn btn-outline-secondary btn-sm" id="btnFilter">Filter</button>
        <button class="btn btn-outline-secondary btn-sm" id="btnClear">Clear</button>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered table-striped" id="assignTable">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Karyawan</th>
              <th>No Job</th>
              <th style="width:90px;">Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Import Assignment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="importForm">
        <div class="modal-body">
          <div class="alert alert-light border">
            Format file Excel: <b>work_date</b>, <b>employee_code</b>, <b>job_code</b><br>
            Gunakan file <b>XLSX / XLS</b>.
          </div>
          <div class="mb-3">
            <label class="form-label">File Import</label>
            <input type="file" class="form-control" id="importFile" accept=".xlsx,.xls" required>
          </div>
          <label class="d-flex align-items-center gap-2 m-0">
            <input type="checkbox" id="importReplaceExisting">
            <span>Ganti assignment lama jika sudah ada</span>
          </label>
          <div class="alert alert-light border mt-3 d-none" id="assignmentPreviewBox"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-outline-info" id="btnPreviewAssignmentImport">Preview</button>
          <button type="submit" class="btn btn-primary">Import</button>
        </div>
      </form>
    </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 src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function(){
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
  const importModal = new bootstrap.Modal(document.getElementById('importModal'));
  let presentRows = [];
  $('#filterDate').val($('#workDate').val());

  $('#jobId').select2({
    theme: 'bootstrap-5',
    placeholder: '- pilih -',
    ajax: {
      url: '{{ route('project_job_refs.jobs') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '', work_date: $('#workDate').val() || '' }),
      processResults: (data) => data,
      cache: true
    }
  });
  $('#filterKaryawan').select2({
    theme: 'bootstrap-5',
    allowClear: true,
    placeholder: '- cari user assignment -',
    ajax: {
      url: '{{ route('project_job_refs.karyawans') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '' }),
      processResults: (data) => data,
      cache: true
    }
  });

  const table = $('#assignTable').DataTable({
    ajax: {
      url: '{{ route('project_job_assignments.data') }}',
      data: function(d){
        d.work_date = $('#filterDate').val();
        d.karyawan_id = $('#filterKaryawan').val();
      },
      dataSrc: 'data'
    },
    columns: [
      { data: 'work_date' },
      { data: null, render: (d)=> `${d.employee_code||''} - ${d.employee_name||''}` },
      { data: null, render: (d)=> `${d.job_code||''} - ${d.job_name||''}` },
      { data: null, orderable:false, render: (d)=> `<button class="btn btn-sm btn-outline-danger btn-del" data-id="${d.id}">Delete</button>` },
    ]
  });

  $('#btnFilter').on('click', ()=> table.ajax.reload());
  $('#btnClear').on('click', ()=> {
    $('#filterDate').val('');
    $('#filterKaryawan').val(null).trigger('change');
    table.ajax.reload();
  });

  function renderPresentList(rows) {
    const list = $('#presentList');
    const replaceMode = $('#replaceExistingMode').is(':checked');
    if (!rows.length) {
      list.html('<div class="p-3 text-muted small">Tidak ada pegawai yang checkin pada tanggal ini.</div>');
      $('#presentSummary').text('Tidak ada pegawai hadir pada tanggal ini.');
      return;
    }

    const totalAssigned = rows.filter((row) => !!row.assigned_job_id).length;
    const totalAvailable = rows.length - totalAssigned;
    $('#presentSummary').text(`Hadir: ${rows.length} pegawai | Belum ada assignment: ${totalAvailable} | Sudah ada assignment: ${totalAssigned}${replaceMode ? ' | Mode replace aktif' : ''}`);

    list.html(rows.map((row) => {
      const canCheck = !row.assigned_job_id || replaceMode;
      const assigned = row.assigned_job_id
        ? `
          <div class="d-flex flex-column align-items-end gap-1">
            <span class="badge-job">${row.assigned_job_code || ''}${row.assigned_job_name ? ' - ' + row.assigned_job_name : ''}</span>
            ${replaceMode ? '<span class="replace-note">Akan diganti jika dicentang</span>' : '<span class="small text-muted">Sudah punya assignment</span>'}
          </div>`
        : '<span class="text-muted small">Belum ada assignment</span>';
      return `
        <label class="present-row ${row.assigned_job_id ? 'assigned' : ''} ${row.assigned_job_id && replaceMode ? 'replace-mode' : ''}">
          <div class="check-slot">
            ${canCheck
              ? `<input type="checkbox" class="present-check" value="${row.karyawan_id}" data-assigned="${row.assigned_job_id ? 1 : 0}">`
              : '<i class="fas fa-lock text-muted" title="Sudah punya assignment"></i>'}
          </div>
          <div class="identity">
            <div class="fw-semibold">${row.employee_code || ''} - ${row.full_name || ''}</div>
            <div class="meta">Plan: ${row.planned_shift_start || '-'} - ${row.planned_shift_end || '-'}</div>
          </div>
          <div class="status-box">
            <div>Masuk: <b>${row.checkin_at || '-'}</b></div>
            <div>Pulang: <b>${row.checkout_at || '-'}</b></div>
          </div>
          <div class="ms-auto">${assigned}</div>
        </label>
      `;
    }).join(''));
  }

  function selectedPresentIds() {
    return $('.present-check:checked').map(function(){ return Number($(this).val()); }).get().filter((x) => x > 0);
  }

  function loadPresentEmployees() {
    const workDate = $('#workDate').val();
    if (!workDate) {
      Swal.fire('Info', 'Pilih tanggal dulu.', 'info');
      return;
    }
    const query = $('#employeeSearch').val() || '';
    $('#presentList').html('<div class="p-3 text-muted small">Memuat pegawai hadir...</div>');
    $.get('{{ route('project_job_assignments.present_employees') }}', {
      work_date: workDate,
      q: query,
    }).done((resp) => {
      presentRows = resp.data || [];
      $('#checkAllPresent').prop('checked', false);
      renderPresentList(presentRows);
    }).fail((xhr) => {
      $('#presentList').html('<div class="p-3 text-danger small">Gagal memuat data pegawai hadir.</div>');
      Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat pegawai hadir', 'error');
    });
  }

  $('#btnLoadPresent').on('click', loadPresentEmployees);
  $('#workDate').on('change', function(){
    $('#filterDate').val($(this).val());
    $('#jobId').val(null).trigger('change');
  });
  $('#employeeSearch').on('keydown', function(e){
    if (e.key === 'Enter') {
      e.preventDefault();
      loadPresentEmployees();
    }
  });
  $('#checkAllPresent').on('change', function(){
    $('.present-check').prop('checked', $(this).is(':checked'));
  });
  $('#replaceExistingMode').on('change', function(){
    $('#checkAllPresent').prop('checked', false);
    renderPresentList(presentRows);
  });

  $('#assignForm').on('submit', function(e){
    e.preventDefault();
    const ids = selectedPresentIds();
    const replaceExisting = $('#replaceExistingMode').is(':checked');
    if (!ids.length) {
      Swal.fire('Info', 'Pilih minimal 1 pegawai hadir.', 'info');
      return;
    }
    if (!$('#jobId').val()) {
      Swal.fire('Info', 'Pilih No Job dulu.', 'info');
      return;
    }
    $.post('{{ route('project_job_assignments.store') }}', {
      work_date: $('#workDate').val(),
      job_id: $('#jobId').val(),
      replace_existing: replaceExisting ? 1 : 0,
      karyawan_ids: ids,
    }).done((resp)=>{
      const updated = Number(resp.updated || 0);
      const created = Number(resp.created || 0);
      Swal.fire('OK', `${resp.message||'Saved'}\nBaru: ${created} | Diganti: ${updated}`, 'success');
      table.ajax.reload(null,false);
      loadPresentEmployees();
    }).fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal', 'error'));
  });

  $('#assignTable').on('click', '.btn-del', function(){
    const id = Number($(this).data('id'));
    Swal.fire({title:'Hapus assignment ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
      if(!x.isConfirmed) return;
      $.ajax({ url:`/project-job-assignments/${id}`, method:'DELETE' })
        .done((resp)=>{ Swal.fire('OK', resp.message||'Deleted', 'success'); table.ajax.reload(null,false); })
        .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal', 'error'));
    });
  });

  $('#btnOpenImport').on('click', function(){
    $('#importForm')[0].reset();
    $('#assignmentPreviewBox').addClass('d-none').empty();
    importModal.show();
  });
  $('#btnExportExisting').on('click', function(){
    const params = new URLSearchParams({
      work_date: $('#filterDate').val() || $('#workDate').val() || '',
      karyawan_id: $('#filterKaryawan').val() || ''
    });
    window.location.href = `{{ route('project_job_assignments.export_existing') }}?${params.toString()}`;
  });

  function renderImportPreview(boxSelector, resp) {
    const rows = Array.isArray(resp.rows) ? resp.rows : [];
    const html = `
      <div class="fw-semibold mb-2">Preview Import</div>
      <div class="small mb-2">Siap create: <b>${resp.created || 0}</b> | Siap update: <b>${resp.updated || 0}</b> | Skip: <b>${resp.skipped_count || 0}</b></div>
      ${rows.length ? `<div class="small" style="max-height:220px;overflow:auto;">${rows.map((row) => `
        <div class="py-1 border-top">
          <b>Baris ${row.row || '-'}</b> [${row.status || '-'}] ${row.message || '-'}
        </div>`).join('')}</div>` : ''}
    `;
    $(boxSelector).removeClass('d-none').html(html);
  }

  $('#btnPreviewAssignmentImport').on('click', function(){
    const fileInput = document.getElementById('importFile');
    if (!fileInput.files || !fileInput.files.length) {
      Swal.fire('Info', 'Pilih file Excel dulu.', 'info');
      return;
    }
    const fd = new FormData();
    fd.append('file', fileInput.files[0]);
    fd.append('replace_existing', $('#importReplaceExisting').is(':checked') ? '1' : '0');
    fd.append('preview_only', '1');

    $.ajax({
      url: '{{ route('project_job_assignments.import') }}',
      method: 'POST',
      data: fd,
      processData: false,
      contentType: false
    }).done((resp) => {
      renderImportPreview('#assignmentPreviewBox', resp);
    }).fail((xhr) => {
      Swal.fire('Error', xhr.responseJSON?.message || 'Preview import assignment gagal', 'error');
    });
  });

  $('#importForm').on('submit', function(e){
    e.preventDefault();
    const fileInput = document.getElementById('importFile');
    if (!fileInput.files || !fileInput.files.length) {
      Swal.fire('Info', 'Pilih file import dulu.', 'info');
      return;
    }
    const fd = new FormData();
    fd.append('file', fileInput.files[0]);
    fd.append('replace_existing', $('#importReplaceExisting').is(':checked') ? '1' : '0');

    $.ajax({
      url: '{{ route('project_job_assignments.import') }}',
      method: 'POST',
      data: fd,
      processData: false,
      contentType: false
    }).done((resp) => {
      importModal.hide();
      table.ajax.reload(null, false);
      loadPresentEmployees();
      const skipped = Array.isArray(resp.skipped) && resp.skipped.length
        ? `\n\nSkip (${resp.skipped_count}):\n- ${resp.skipped.join('\n- ')}`
        : '';
      Swal.fire('OK', `Import selesai.\nBaru: ${resp.created || 0} | Diganti: ${resp.updated || 0}${skipped}`, 'success');
    }).fail((xhr) => {
      Swal.fire('Error', xhr.responseJSON?.message || 'Import gagal', 'error');
    });
  });
});
</script>
@endpush