@extends('layouts.adminlte')
@section('title', 'Master Cost Rate Karyawan')

@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; }
  </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">Master Cost Rate Karyawan</h3>
      <div class="text-muted small">Basis costing project. Terpisah dari payroll agar pembebanan cost ke project tetap stabil dan terkontrol.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'cost_rates'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('project_job_cost_rates.template') }}" class="btn btn-outline-success btn-sm">Template Excel</a>
        <button class="btn btn-outline-primary btn-sm" id="btnImport">Import Excel</button>
        <button class="btn btn-outline-secondary btn-sm" id="btnExportExisting">Export Existing</button>
        <button class="btn btn-success btn-sm" id="btnPrefill">Prefill dari Master</button>
        <button class="btn btn-primary btn-sm" id="btnAdd">Tambah Cost Rate</button>
      </div>
    </div>
  </div>

  <div class="alert alert-light border">
    Mode yang tersedia:
    <b>Hourly Manual</b> = isi rate/jam langsung.
    <b>Monthly Divided</b> = isi monthly cost lalu bagi dengan basis jam (default 173).
  </div>

  <div class="card">
    <div class="card-body">
      <div class="d-flex gap-2 mb-3">
        <select id="filterKaryawan" class="form-select" style="max-width:360px;"></select>
        <select id="filterStatus" class="form-select" style="max-width:180px;">
          <option value="all">Semua Status</option>
          <option value="active">Aktif</option>
          <option value="inactive">Nonaktif</option>
        </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="costRateTable">
          <thead>
            <tr>
              <th>Karyawan</th>
              <th>Status Karyawan</th>
              <th>Basis</th>
              <th>Rate/Jam</th>
              <th>Monthly Cost</th>
              <th>Basis Jam</th>
              <th>Efektif</th>
              <th>Status</th>
              <th style="width:120px;">Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="costRateModal" 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="costRateModalTitle">Tambah Cost Rate</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="costRateForm">
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label">Karyawan</label>
            <select id="costRateKaryawan" class="form-select" required></select>
          </div>
          <div class="mb-2">
            <label class="form-label">Basis Type</label>
            <select id="basisType" class="form-select">
              <option value="hourly_manual">Hourly Manual</option>
              <option value="monthly_divided">Monthly Divided</option>
            </select>
          </div>
          <div class="row g-2">
            <div class="col">
              <label class="form-label">Rate/Jam</label>
              <input type="number" step="0.0001" min="0" id="hourlyRate" class="form-control">
            </div>
            <div class="col">
              <label class="form-label">Monthly Cost</label>
              <input type="number" step="0.01" min="0" id="monthlyCost" class="form-control">
            </div>
          </div>
          <div class="mt-2">
            <label class="form-label">Basis Jam</label>
            <input type="number" step="0.01" min="0.01" id="basisHours" class="form-control" value="173">
          </div>
          <div class="row g-2 mt-1">
            <div class="col">
              <label class="form-label">Efektif Mulai</label>
              <input type="date" id="effectiveStart" class="form-control">
            </div>
            <div class="col">
              <label class="form-label">Efektif Sampai</label>
              <input type="date" id="effectiveEnd" class="form-control">
            </div>
          </div>
          <div class="mt-2">
            <label class="form-label">Catatan</label>
            <textarea id="costRateNotes" class="form-control" rows="2"></textarea>
          </div>
          <div class="mt-2 form-check form-switch">
            <input class="form-check-input" type="checkbox" id="costRateActive" checked>
            <label class="form-check-label" for="costRateActive">Aktif</label>
          </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>

<div class="modal fade" id="prefillModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Prefill Cost Rate dari Master Karyawan</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="prefillForm">
        <div class="modal-body">
          <div class="alert alert-light border small mb-3">
            Prefill ini hanya mengambil komponen tetap:
            <b>gaji pokok</b>,
            <b>tunjangan tetap</b>,
            <b>tunjangan jabatan</b>,
            <b>tunjangan keahlian</b>,
            dan <b>medical/housing</b>.
            Lembur dan insentif variabel tidak ikut dihitung.
          </div>
          <div class="row g-2">
            <div class="col">
              <label class="form-label">Efektif Mulai</label>
              <input type="date" id="prefillEffectiveStart" class="form-control" value="{{ now()->startOfMonth()->format('Y-m-d') }}">
            </div>
            <div class="col">
              <label class="form-label">Basis Jam</label>
              <input type="number" step="0.01" min="0.01" id="prefillBasisHours" class="form-control" value="173">
            </div>
          </div>
          <div class="mt-2">
            <label class="form-label">Catatan</label>
            <input type="text" id="prefillNotes" class="form-control" value="Prefill dari Master Karyawan (komponen tetap)">
          </div>
          <div class="mt-2 form-check form-switch">
            <input class="form-check-input" type="checkbox" id="prefillReplaceExisting">
            <label class="form-check-label" for="prefillReplaceExisting">Ganti row existing dengan effective_start yang sama</label>
          </div>
          <div class="small text-muted mt-2">Default efektif mulai memakai awal bulan berjalan agar lebih konsisten untuk costing bulanan.</div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-success" type="submit">Proses Prefill</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Import Excel Cost Rate</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="importForm">
        <div class="modal-body">
          <div class="row g-2 align-items-end">
            <div class="col-md-8">
              <label class="form-label">File Excel</label>
              <input type="file" id="importFile" class="form-control" accept=".xlsx,.xls" required>
            </div>
            <div class="col-md-4">
              <div class="form-check form-switch mt-4">
                <input class="form-check-input" type="checkbox" id="importReplaceExisting">
                <label class="form-check-label" for="importReplaceExisting">Replace Existing</label>
              </div>
            </div>
          </div>
          <div class="small text-muted mt-2">Kolom wajib: <code>employee_code</code>, <code>basis_type</code>. Kolom lain mengikuti template Excel.</div>
          <div id="importPreviewBox" class="mt-3 d-none">
            <div class="alert alert-light border mb-2">
              <div class="row g-2 text-center">
                <div class="col"><div class="small text-muted">Create</div><div class="fw-bold" id="previewCreate">0</div></div>
                <div class="col"><div class="small text-muted">Update</div><div class="fw-bold" id="previewUpdate">0</div></div>
                <div class="col"><div class="small text-muted">Skip</div><div class="fw-bold" id="previewSkip">0</div></div>
              </div>
              <div class="mt-2 text-end d-none" id="previewErrorReportWrap">
                <a href="#" class="btn btn-outline-danger btn-sm" id="previewErrorReportLink" target="_blank">Download Error Report</a>
              </div>
            </div>
            <div class="table-responsive border rounded">
              <table class="table table-sm mb-0">
                <thead class="table-light">
                  <tr>
                    <th>Row</th>
                    <th>Karyawan</th>
                    <th>Basis</th>
                    <th>Aksi</th>
                    <th>Catatan</th>
                  </tr>
                </thead>
                <tbody id="importPreviewBody"></tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-info text-white" type="button" id="btnPreviewImport">Preview</button>
          <button class="btn btn-primary" type="submit">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 modal = new bootstrap.Modal(document.getElementById('costRateModal'));
  const prefillModal = new bootstrap.Modal(document.getElementById('prefillModal'));
  const importModal = new bootstrap.Modal(document.getElementById('importModal'));
  let editId = null;

  function initSelect2(){
    const buildKaryawanAjax = (statusResolver) => ({
      url: '{{ route('project_job_refs.karyawans') }}',
      dataType: 'json',
      delay: 250,
      data: (params) => ({ q: params.term || '', status: statusResolver() }),
      processResults: (data) => data,
      cache: true
    });
    $('#filterKaryawan').select2({ theme:'bootstrap-5', allowClear:true, placeholder:'- semua -', ajax:buildKaryawanAjax(() => $('#filterStatus').val() || 'all') });
    $('#costRateKaryawan').select2({ theme:'bootstrap-5', dropdownParent: $('#costRateModal'), ajax:buildKaryawanAjax(() => 'all') });
  }
  function fillSelect2($el, id, text){
    if(!id) return;
    const opt = new Option(text || id, id, true, true);
    $el.append(opt).trigger('change');
  }
  initSelect2();

  function toggleBasisFields(){
    const type = $('#basisType').val();
    $('#hourlyRate').prop('disabled', type !== 'hourly_manual');
    $('#monthlyCost, #basisHours').prop('disabled', type !== 'monthly_divided');
  }

  const table = $('#costRateTable').DataTable({
    ajax: {
      url: '{{ route('project_job_cost_rates.data') }}',
      data: function(d){
        d.karyawan_id = $('#filterKaryawan').val();
        d.status = $('#filterStatus').val();
      },
      dataSrc: 'data'
    },
    columns: [
      { data: null, render: (d)=> `${d.employee_code||''} - ${d.employee_name||''}` },
      { data: 'karyawan_active', render: (v)=> v ? '<span class="badge text-bg-success">Aktif</span>' : '<span class="badge text-bg-secondary">Nonaktif</span>' },
      { data: 'basis_type', render: (v)=> v === 'monthly_divided' ? 'Monthly Divided' : 'Hourly Manual' },
      { data: 'resolved_hourly_rate', render: (v)=> `Rp ${Number(v||0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:4})}` },
      { data: 'monthly_cost', render: (v)=> Number(v||0) > 0 ? `Rp ${Number(v||0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}` : '-' },
      { data: 'basis_hours', render: (v)=> Number(v||0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2}) },
      { data: null, render: (d)=> `${d.effective_start||'-'} s/d ${d.effective_end||'-'}` },
      { data: 'is_active', render: (v)=> v ? '<span class="badge text-bg-success">Aktif</span>' : '<span class="badge text-bg-secondary">Off</span>' },
      { data: null, orderable:false, render: (d)=> `
        <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>` }
    ]
  });

  function resetForm(){
    editId = null;
    $('#costRateModalTitle').text('Tambah Cost Rate');
    $('#costRateKaryawan').prop('disabled', false).val(null).trigger('change');
    $('#basisType').val('hourly_manual');
    $('#hourlyRate').val('');
    $('#monthlyCost').val('');
    $('#basisHours').val('173');
    $('#effectiveStart').val('');
    $('#effectiveEnd').val('');
    $('#costRateNotes').val('');
    $('#costRateActive').prop('checked', true);
    toggleBasisFields();
  }

  $('#basisType').on('change', toggleBasisFields);
  $('#btnFilter').on('click', ()=> table.ajax.reload());
  $('#filterStatus').on('change', ()=> { $('#filterKaryawan').val(null).trigger('change'); });
  $('#btnClear').on('click', ()=> {
    $('#filterKaryawan').val(null).trigger('change');
    $('#filterStatus').val('all');
    table.ajax.reload();
  });
  $('#btnAdd').on('click', function(){ resetForm(); modal.show(); });
  $('#btnPrefill').on('click', function(){ prefillModal.show(); });
  $('#btnImport').on('click', function(){
    $('#importForm')[0].reset();
    $('#importPreviewBox').addClass('d-none');
    $('#previewErrorReportWrap').addClass('d-none');
    $('#previewErrorReportLink').attr('href', '#');
    $('#importPreviewBody').html('');
    importModal.show();
  });
  $('#btnExportExisting').on('click', function(){
    const params = new URLSearchParams({
      karyawan_id: $('#filterKaryawan').val() || '',
      status: $('#filterStatus').val() || 'all'
    });
    window.location = `{{ route('project_job_cost_rates.export_existing') }}?${params.toString()}`;
  });

  $('#costRateTable').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;
    $('#costRateModalTitle').text('Edit Cost Rate');
    $('#costRateKaryawan').prop('disabled', true);
    fillSelect2($('#costRateKaryawan'), row.karyawan_id, `${row.employee_code||''} - ${row.employee_name||''}`.trim());
    $('#basisType').val(row.basis_type || 'hourly_manual');
    $('#hourlyRate').val(row.hourly_rate || '');
    $('#monthlyCost').val(row.monthly_cost || '');
    $('#basisHours').val(row.basis_hours || 173);
    $('#effectiveStart').val(row.effective_start || '');
    $('#effectiveEnd').val(row.effective_end || '');
    $('#costRateNotes').val(row.notes || '');
    $('#costRateActive').prop('checked', !!row.is_active);
    toggleBasisFields();
    modal.show();
  });

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

  $('#costRateForm').on('submit', function(e){
    e.preventDefault();
    const payload = {
      karyawan_id: $('#costRateKaryawan').val(),
      basis_type: $('#basisType').val(),
      hourly_rate: $('#hourlyRate').val(),
      monthly_cost: $('#monthlyCost').val(),
      basis_hours: $('#basisHours').val(),
      effective_start: $('#effectiveStart').val(),
      effective_end: $('#effectiveEnd').val(),
      notes: $('#costRateNotes').val(),
      is_active: $('#costRateActive').is(':checked') ? 1 : 0,
    };
    const url = editId ? `/project-job-cost-rates/${editId}` : '{{ route('project_job_cost_rates.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'));
  });

  $('#prefillForm').on('submit', function(e){
    e.preventDefault();
    const payload = {
      effective_start: $('#prefillEffectiveStart').val(),
      basis_hours: $('#prefillBasisHours').val(),
      replace_existing: $('#prefillReplaceExisting').is(':checked') ? 1 : 0,
      notes: $('#prefillNotes').val(),
    };
    $.ajax({
      url: '{{ route('project_job_cost_rates.prefill_master') }}',
      method: 'POST',
      data: payload
    })
    .done((resp)=>{
      prefillModal.hide();
      table.ajax.reload(null,false);
      const skippedRows = Array.isArray(resp.skipped_rows) ? resp.skipped_rows : [];
      const skippedText = skippedRows.length
        ? '<hr><div class="text-start small"><b>Sample skip:</b><br>' + skippedRows.map(x => `${x.employee_code || '-'} - ${x.employee_name || '-'}: ${x.reason || '-'}`).join('<br>') + '</div>'
        : '';
      Swal.fire({
        icon: 'success',
        title: 'Prefill selesai',
        html: `
          <div class="text-start">
            <div>Created: <b>${resp.created || 0}</b></div>
            <div>Updated: <b>${resp.updated || 0}</b></div>
            <div>Skipped: <b>${resp.skipped || 0}</b></div>
            ${skippedText}
          </div>`
      });
    })
    .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal prefill', 'error'));
  });

  function renderPreview(resp){
    $('#importPreviewBox').removeClass('d-none');
    $('#previewCreate').text(resp.created || 0);
    $('#previewUpdate').text(resp.updated || 0);
    $('#previewSkip').text(resp.skipped || 0);
    const rows = Array.isArray(resp.rows) ? resp.rows : [];
    if (resp.error_report_url) {
      $('#previewErrorReportWrap').removeClass('d-none');
      $('#previewErrorReportLink').attr('href', resp.error_report_url);
    } else {
      $('#previewErrorReportWrap').addClass('d-none');
      $('#previewErrorReportLink').attr('href', '#');
    }
    $('#importPreviewBody').html(rows.map((row) => {
      const cls = row.status === 'success' ? 'table-success' : (row.status === 'warning' ? 'table-warning' : 'table-danger');
      return `<tr class="${cls}">
        <td>${row.row ?? ''}</td>
        <td>${row.employee_code ?? ''}</td>
        <td>${row.basis_type ?? ''}</td>
        <td>${row.action ?? ''}</td>
        <td>${row.message ?? ''}</td>
      </tr>`;
    }).join('') || '<tr><td colspan="5" class="text-center text-muted">Tidak ada data preview.</td></tr>');
  }

  function buildImportFormData(previewOnly){
    const fd = new FormData();
    const file = $('#importFile')[0].files[0];
    if (file) fd.append('file', file);
    fd.append('replace_existing', $('#importReplaceExisting').is(':checked') ? '1' : '0');
    fd.append('preview_only', previewOnly ? '1' : '0');
    return fd;
  }

  $('#btnPreviewImport').on('click', function(){
    const file = $('#importFile')[0].files[0];
    if (!file) {
      Swal.fire('Warning', 'Pilih file Excel dulu.', 'warning');
      return;
    }
    $.ajax({
      url: '{{ route('project_job_cost_rates.import') }}',
      method: 'POST',
      data: buildImportFormData(true),
      processData: false,
      contentType: false,
    })
    .done((resp)=> renderPreview(resp))
    .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal preview import', 'error'));
  });

  $('#importForm').on('submit', function(e){
    e.preventDefault();
    const file = $('#importFile')[0].files[0];
    if (!file) {
      Swal.fire('Warning', 'Pilih file Excel dulu.', 'warning');
      return;
    }
    $.ajax({
      url: '{{ route('project_job_cost_rates.import') }}',
      method: 'POST',
      data: buildImportFormData(false),
      processData: false,
      contentType: false,
    })
    .done((resp)=>{
      importModal.hide();
      table.ajax.reload(null,false);
      const errorReportHtml = resp.error_report_url
        ? `<div class="mt-2"><a class="btn btn-outline-danger btn-sm" href="${resp.error_report_url}" target="_blank">Download Error Report</a></div>`
        : '';
      Swal.fire({
        icon: 'success',
        title: 'Import selesai',
        html: `
          <div class="text-start">
            <div>Create: <b>${resp.created || 0}</b></div>
            <div>Update: <b>${resp.updated || 0}</b></div>
            <div>Skip: <b>${resp.skipped || 0}</b></div>
            ${errorReportHtml}
          </div>`
      });
    })
    .fail((xhr)=> Swal.fire('Error', xhr.responseJSON?.message || 'Gagal import', 'error'));
  });

  toggleBasisFields();
});
</script>
@endpush