@extends('layouts.adminlte')
@section('title', 'Work Log 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; }
    .src-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid transparent;
    }
    .src-badge.manual { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
    .src-badge.assignment_default { background: #fef3c7; color: #b45309; border-color: #fde68a; }
  </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">Work Log No Job</h3>
      <div class="text-muted small">Dipakai untuk pecah jam riil per No Job. Jika belum ada work log, report akan 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' => 'work_logs'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('project_job_work_logs.template') }}" class="btn btn-outline-success btn-sm">Template Excel</a>
        <button class="btn btn-outline-secondary btn-sm" id="btnExportExisting">Export Existing</button>
        <button class="btn btn-primary btn-sm" id="btnOpenImport">Import Excel</button>
        <button class="btn btn-outline-success btn-sm" id="btnGenerateDefault">Generate Default</button>
        <button class="btn btn-primary btn-sm" id="btnAdd">Tambah Log</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"></div>
        <div class="col-md-2"><label class="form-label">Sampai</label><input type="date" id="dateTo" class="form-control"></div>
        <div class="col-md-3"><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-2 d-grid">
          <button class="btn btn-outline-secondary" id="btnFilter">Tampilkan</button>
        </div>
      </div>
      <div class="alert alert-light border mt-2 mb-0">
        Prioritas report costing: <b>Work Log</b> lebih dulu. Jika pada tanggal itu belum ada work log untuk karyawan tersebut, sistem memakai <b>Assignment Harian</b> sebagai fallback dengan jam hadir aktual dari presensi.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered table-striped" id="logTable">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Karyawan</th>
              <th>No Job</th>
              <th>Mulai</th>
              <th>Selesai</th>
              <th>Jam</th>
              <th>Sumber</th>
              <th>Catatan</th>
              <th style="width:130px;">Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="importLogModal" 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 Work Log Excel</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="importLogForm">
        <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>, <b>start_time</b>, <b>end_time</b>, <b>notes</b>.<br>
            Gunakan file <b>XLSX / XLS</b>.
          </div>
          <div class="mb-3">
            <label class="form-label">File Excel</label>
            <input type="file" class="form-control" id="importLogFile" accept=".xlsx,.xls" required>
          </div>
          <label class="d-flex align-items-center gap-2 m-0">
            <input type="checkbox" id="importLogReplaceExisting">
            <span>Update jika segmen dengan jam yang sama sudah ada</span>
          </label>
          <div class="alert alert-light border mt-3 d-none" id="workLogPreviewBox"></div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-outline-info" type="button" id="btnPreviewWorkLogImport">Preview</button>
          <button class="btn btn-primary" type="submit">Import</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="logModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title" id="logModalTitle">Tambah Work Log</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="logForm">
        <div class="modal-body">
          <div class="mb-2"><label class="form-label">Tanggal</label><input type="date" id="logDate" class="form-control" required></div>
          <div class="mb-2"><label class="form-label">Karyawan</label>
            <select id="logKaryawan" class="form-select" required></select>
          </div>
          <div class="mb-2"><label class="form-label">No Job</label>
            <select id="logJob" class="form-select" required></select>
          </div>
          <div class="row g-2">
            <div class="col"><label class="form-label">Mulai</label><input type="time" id="logStart" class="form-control" required></div>
            <div class="col"><label class="form-label">Selesai</label><input type="time" id="logEnd" class="form-control" required></div>
          </div>
          <div class="mt-2"><label class="form-label">Catatan</label><textarea id="logNotes" class="form-control" rows="2"></textarea></div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-primary" type="submit">Save</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 modal = new bootstrap.Modal(document.getElementById('logModal'));
  const importModal = new bootstrap.Modal(document.getElementById('importLogModal'));
  let editId = null;

  function initSelect2(){
    const jobAjax = {
      url: '{{ route('project_job_refs.jobs') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '', work_date: $('#logDate').val() || $('#dateFrom').val() || '' }),
      processResults: (data) => data,
      cache: true
    };
    const karyawanAjax = {
      url: '{{ route('project_job_refs.karyawans') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '' }),
      processResults: (data) => data,
      cache: true
    };

    $('#filterJob').select2({ theme: 'bootstrap-5', allowClear: true, placeholder: '- semua -', ajax: jobAjax });
    $('#filterKaryawan').select2({ theme: 'bootstrap-5', allowClear: true, placeholder: '- semua -', ajax: karyawanAjax });
    $('#logJob').select2({ theme: 'bootstrap-5', dropdownParent: $('#logModal'), ajax: jobAjax });
    $('#logKaryawan').select2({ theme: 'bootstrap-5', dropdownParent: $('#logModal'), ajax: karyawanAjax });
  }
  function fillSelect2($el, id, text){
    if(!id) return;
    const opt = new Option(text || id, id, true, true);
    $el.append(opt).trigger('change');
  }
  initSelect2();

  const table = $('#logTable').DataTable({
    ajax: {
      url: '{{ route('project_job_work_logs.data') }}',
      data: function(d){
        d.date_from = $('#dateFrom').val();
        d.date_to = $('#dateTo').val();
        d.job_id = $('#filterJob').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: 'start_time' },
      { data: 'end_time' },
      { data: 'hours_total' },
      { data: 'source', render: (v)=> {
        const label = v === 'assignment_default' ? 'Assignment Default' : (v || 'manual');
        return `<span class="src-badge ${v || 'manual'}">${label}</span>`;
      }},
      { data: 'notes' },
      { data: null, orderable:false, render: (d)=> d.readonly ? `<span class="text-muted small">Auto fallback</span>` : `
        <div class="d-flex gap-1">
          <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${d.id}">Edit</button>
          <button class="btn btn-sm btn-outline-danger btn-del" data-id="${d.id}">Delete</button>
        </div>` }
    ]
  });

  $('#btnFilter').on('click', ()=> table.ajax.reload());
  $('#btnExportExisting').on('click', function(){
    const params = new URLSearchParams({
      date_from: $('#dateFrom').val() || '',
      date_to: $('#dateTo').val() || '',
      job_id: $('#filterJob').val() || '',
      karyawan_id: $('#filterKaryawan').val() || ''
    });
    window.location.href = `{{ route('project_job_work_logs.export_existing') }}?${params.toString()}`;
  });
  $('#btnOpenImport').on('click', function(){
    $('#importLogForm')[0].reset();
    $('#workLogPreviewBox').addClass('d-none').empty();
    importModal.show();
  });
  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);
  }
  $('#btnPreviewWorkLogImport').on('click', function(){
    const fileInput = document.getElementById('importLogFile');
    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', $('#importLogReplaceExisting').is(':checked') ? '1' : '0');
    fd.append('preview_only', '1');

    $.ajax({
      url: '{{ route('project_job_work_logs.import') }}',
      method: 'POST',
      data: fd,
      processData: false,
      contentType: false
    }).done((resp) => {
      renderImportPreview('#workLogPreviewBox', resp);
    }).fail((xhr) => {
      Swal.fire('Error', xhr.responseJSON?.message || 'Preview import work log gagal', 'error');
    });
  });
  $('#btnGenerateDefault').on('click', function(){
    const dateFrom = $('#dateFrom').val();
    const dateTo = $('#dateTo').val() || dateFrom;
    if (!dateFrom) {
      Swal.fire('Info', 'Isi tanggal Dari dulu untuk generate default.', 'info');
      return;
    }
    $.post('{{ route('project_job_work_logs.generate_default') }}', {
      date_from: dateFrom,
      date_to: dateTo,
      karyawan_id: $('#filterKaryawan').val() || ''
    }).done((resp) => {
      table.ajax.reload(null, false);
      Swal.fire('OK', `${resp.message||'Selesai'}\nDibuat: ${resp.created||0} | Skip: ${resp.skipped||0}`, 'success');
    }).fail((xhr) => {
      Swal.fire('Error', xhr.responseJSON?.message || 'Generate default gagal', 'error');
    });
  });
  $('#btnAdd').on('click', ()=>{
    editId=null;
    $('#logModalTitle').text('Tambah Work Log');
    $('#logDate').val($('#dateFrom').val() || new Date().toISOString().slice(0,10));
    $('#logDate').prop('disabled', false);
    $('#logKaryawan').prop('disabled', false).val(null).trigger('change');
    $('#logJob').val(null).trigger('change');
    $('#logNotes').val('');
    modal.show();
  });
  $('#logDate').on('change', function(){ $('#logJob').val(null).trigger('change'); });

  $('#logTable').on('click', '.btn-edit', function(){
    const id = Number($(this).data('id'));
    const row = table.rows().data().toArray().find(x => Number(x.id) === id);
    if(!row) return;
    editId = id;
    $('#logModalTitle').text('Edit Work Log');
    $('#logDate').val(row.work_date||'').prop('disabled', true);
    $('#logKaryawan').prop('disabled', true);
    fillSelect2($('#logKaryawan'), row.karyawan_id, `${row.employee_code||''} - ${row.employee_name||''}`.trim());
    fillSelect2($('#logJob'), row.job_id, `${row.job_code||''} - ${row.job_name||''}`.trim());
    $('#logStart').val(row.start_time||'');
    $('#logEnd').val(row.end_time||'');
    $('#logNotes').val(row.notes||'');
    modal.show();
  });

  $('#logTable').on('click', '.btn-del', function(){
    const id = Number($(this).data('id'));
    Swal.fire({title:'Hapus log ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
      if(!x.isConfirmed) return;
      $.ajax({ url:`/project-job-work-logs/${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'));
    });
  });

  $('#logForm').on('submit', function(e){
    e.preventDefault();
    const payload = {
      karyawan_id: $('#logKaryawan').val(),
      job_id: $('#logJob').val(),
      work_date: $('#logDate').val(),
      start_time: $('#logStart').val(),
      end_time: $('#logEnd').val(),
      notes: $('#logNotes').val(),
    };
    const url = editId ? `/project-job-work-logs/${editId}` : '{{ route('project_job_work_logs.store') }}';
    const method = editId ? 'PUT' : 'POST';
    $.ajax({ url, method, data: payload })
      .done((resp)=>{ modal.hide(); table.ajax.reload(null,false); Swal.fire('OK', resp.message||'Saved', 'success'); })
      .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal', 'error'));
  });

  $('#importLogForm').on('submit', function(e){
    e.preventDefault();
    const fileInput = document.getElementById('importLogFile');
    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', $('#importLogReplaceExisting').is(':checked') ? '1' : '0');

    $.ajax({
      url: '{{ route('project_job_work_logs.import') }}',
      method: 'POST',
      data: fd,
      processData: false,
      contentType: false
    }).done((resp) => {
      importModal.hide();
      table.ajax.reload(null, false);
      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} | Update: ${resp.updated || 0}${skipped}`, 'success');
    }).fail((xhr) => {
      Swal.fire('Error', xhr.responseJSON?.message || 'Import work log gagal', 'error');
    });
  });
});
</script>
@endpush