@extends('layouts.adminlte')
@section('title', 'Import Karyawan + Assign ke Profil Bulan')
@section('page_title', 'Import Karyawan + Assign ke Profil Bulan')

@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>
.wiz-step-circle{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.wiz-step-circle.active{background:#2563eb;color:#fff}.wiz-step-circle.done{background:#16a34a;color:#fff}.wiz-step-circle.pending{background:#e5e7eb;color:#9ca3af}
.wiz-step-label{font-size:11px;font-weight:600}.wiz-line{height:3px;flex:1;background:#e5e7eb;margin:0 8px;border-radius:2px}
.wiz-line.done{background:#16a34a}.wiz-drop-zone{border:2px dashed #d1d5db;border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s}
.wiz-drop-zone:hover,.wiz-drop-zone.dragover{border-color:#2563eb;background:#eff6ff}
.form-section{font-size:13px;font-weight:700;color:#2563eb;border-bottom:2px solid #2563eb;padding-bottom:4px;margin:16px 0 10px}
.form-note{font-size:11px;color:#6b7280;margin-top:2px}
#reviewTable{font-size:12px}#reviewTable th{position:sticky;top:0;background:#f8fafc;z-index:1}
#reviewTable input,#reviewTable select{font-size:11px;padding:2px 4px}
</style>
@endpush

@section('content')
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-10">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-4">
<div class="text-center flex-fill"><div class="wiz-step-circle active" id="wizCircle1">1</div><div class="wiz-step-label mt-1" style="color:#2563eb" id="wizLabel1">Profil + Assignment</div></div>
<div class="wiz-line" id="wizLine1"></div>
<div class="text-center flex-fill"><div class="wiz-step-circle pending" id="wizCircle2">2</div><div class="wiz-step-label mt-1" style="color:#9ca3af" id="wizLabel2">Upload Excel</div></div>
<div class="wiz-line" id="wizLine2"></div>
<div class="text-center flex-fill"><div class="wiz-step-circle pending" id="wizCircle3">3</div><div class="wiz-step-label mt-1" style="color:#9ca3af" id="wizLabel3">Review & Proses</div></div>
</div>

{{-- STEP 1 --}}
<div id="wizPanel1">
<div class="form-section">Profil Bulan Target</div>
<div class="mb-3"><div class="d-flex justify-content-between align-items-center mb-1"><label class="form-label fw-semibold mb-0">Profil Bulan <span class="text-danger">*</span></label><a class="btn btn-outline-primary btn-sm" href="{{ route('master_profil_bulan.index') }}" target="_blank" rel="noopener"><i class="fas fa-plus me-1"></i>Tambah Profil Baru</a></div><select class="form-select form-select-sm" id="wizProfilBulan"></select><div class="form-note">Setelah membuat profil baru, kembali ke wizard lalu refresh halaman ini.</div></div>
<div class="form-section">Referensi Profil</div>
<div class="row mb-3">
<div class="col-md-6"><label class="form-label fw-semibold">Profil Jam Kerja <span class="text-danger">*</span></label><select class="form-select form-select-sm" id="wizProfilJamKerja"></select></div>
<div class="col-md-6"><label class="form-label fw-semibold">Profil Gaji <span class="text-danger">*</span></label><select class="form-select form-select-sm" id="wizProfilGaji"></select></div>
</div>
<div class="row mb-3">
<div class="col-md-4"><label class="form-label fw-semibold">Mode Shift</label><select class="form-select form-select-sm" id="wizShiftMode"><option value="fixed">Fixed</option><option value="weekly_rotate">Weekly Rotate</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Shift Alternatif</label><select class="form-select form-select-sm" id="wizShiftAlt"><option value="">- Tidak ada -</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Profil Perkalian Jam</label><select class="form-select form-select-sm" id="wizPerkalian"><option value="">- Tidak ada -</option></select></div>
</div>
<div class="row mb-3">
<div class="col-md-4"><label class="form-label fw-semibold">Pembulatan Jam</label><select class="form-select form-select-sm" id="wizRounding"><option value="">- Tidak ada -</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Basis HK</label><select class="form-select form-select-sm" id="wizHkBasis"><option value="auto">Auto</option><option value="monthly">Monthly</option><option value="daily">Harian</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Aturan Payable</label><select class="form-select form-select-sm" id="wizPayableRule"><option value="">- Tidak ada -</option></select></div>
</div>
<div class="row mb-3">
<div class="col-md-4"><label class="form-label fw-semibold">Mode Pembayaran</label><select class="form-select form-select-sm" id="wizPayMode"><option value="normal">Normal</option><option value="report_only">Report Only</option><option value="reimburse_only">Reimburse</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Group Cetak</label><select class="form-select form-select-sm" id="wizExportGroup"><option value="">- Tidak ada -</option></select></div>
<div class="col-md-4"><label class="form-label fw-semibold">Rotation Days</label><input type="number" class="form-control form-control-sm" id="wizRotationDays" value="7" min="1" max="31"></div>
</div>
<div class="form-section">Kontrak</div>
<div class="row mb-3">
<div class="col-md-3"><label class="form-label fw-semibold">No.</label><input type="number" class="form-control form-control-sm" id="wizContractNo" value="1" min="0" max="20"></div>
<div class="col-md-3"><label class="form-label fw-semibold">Mulai</label><input type="date" class="form-control form-control-sm" id="wizContractStart"></div>
<div class="col-md-3"><label class="form-label fw-semibold">Akhir</label><input type="date" class="form-control form-control-sm" id="wizContractEnd"></div>
<div class="col-md-3 d-flex align-items-end"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="wizContractDone"><label class="form-check-label fw-semibold" for="wizContractDone">Selesai</label></div></div>
</div>
<div class="row mb-3">
<div class="col-md-4"><label class="form-label fw-semibold">Mulai Diakui Kerja</label><input type="date" class="form-control form-control-sm" id="wizStartPresentWork"><div class="form-note">Kosong: pakai kolom Excel. Jika tetap kosong, fallback ke tanggal kontrak/hire.</div></div>
</div>
<div class="form-section">Opsi Tambahan</div>
<div class="row mb-3">
<div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="wizAutoOt"><label class="form-check-label fw-semibold" for="wizAutoOt">OT tanpa SPL</label></div></div>
<div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="wizAutoNoRest1"><label class="form-check-label fw-semibold" for="wizAutoNoRest1">NoRest-1</label></div></div>
<div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="wizAutoNoRest2"><label class="form-check-label fw-semibold" for="wizAutoNoRest2">NoRest-2</label></div></div>
</div>
<div class="mb-3"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="wizReportOnly"><label class="form-check-label fw-semibold" for="wizReportOnly">Report Only</label></div></div>

</div>

{{-- STEP 2 --}}
<div id="wizPanel2" style="display:none">
<div class="form-section">Upload File Excel</div>
<div class="wiz-drop-zone" id="wizDropZone"><i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i><div class="fw-semibold fs-5">Drag & drop file Excel</div><div class="text-muted">atau klik browse .xlsx / .xls</div><input type="file" id="wizFile" accept=".xlsx,.xls" class="d-none" /></div>
<div id="wizFileInfo" class="mt-3" style="display:none"><div class="alert alert-success py-2"><i class="fas fa-check-circle me-1"></i> <span id="wizFileName"></span></div></div>
<div class="mt-3"><a href="{{ route('master_karyawan.import_wizard_template') }}?v=2" class="btn btn-outline-secondary btn-sm"><i class="fas fa-download me-1"></i>Download Template</a></div>
<div class="alert alert-info mt-3"><small><strong>Override Kolom:</strong> Gaji Pokok, Tunj. Jabatan, Tunj. Keahlian, Insentif, Jabatan, Upah Lembur — bisa diisi per karyawan di Excel. Jika kosong, pakai nilai default dari kolom yang sama di Excel baris lain atau dikosongkan.</small></div>
</div>

{{-- STEP 3: Review Table --}}
<div id="wizPanel3" style="display:none">
<div class="form-section">Review Data <span class="badge bg-info text-dark" id="wizReviewCount">0 baris</span> <small class="text-muted">(klik sel untuk edit)</small></div>
<div id="wizReviewLoading" class="text-center py-4"><div class="spinner-border text-primary"></div><div class="mt-2">Memuat data...</div></div>
<div id="wizReviewTableWrap" style="display:none;max-height:50vh;overflow:auto;border:1px solid #e5e7eb;border-radius:8px">
<table class="table table-bordered table-sm mb-0" id="reviewTable">
<thead class="table-light"><tr>
<th>#</th><th>NIK</th><th>Nama</th><th>Finger</th><th>Status</th><th>Tgl Masuk</th><th>Mulai Diakui Kerja</th><th>Profil Gaji</th><th>Profil JK</th><th>Gaji Pokok</th><th>Tunj. Jabatan</th><th>Tunj. Keahlian</th><th>Insentif</th><th>Jabatan</th><th>Area Kerja</th><th>Upah Lembur</th><th>Aksi</th>
</tr></thead><tbody id="reviewBody"></tbody>
</table>
</div>
</div>

<div class="d-flex justify-content-between mt-4 pt-3 border-top">
<button class="btn btn-outline-secondary btn-sm" id="wizPrevBtn" style="display:none"><i class="fas fa-arrow-left me-1"></i>Kembali</button>
<div></div>
<div class="d-flex gap-2">
<button class="btn btn-outline-danger btn-sm" onclick="window.close()">Tutup</button>
<button class="btn btn-primary btn-sm" id="wizNextBtn" disabled>Lanjut <i class="fas fa-arrow-right ms-1"></i></button>
<button class="btn btn-success btn-sm" id="wizProcessBtn" style="display:none"><i class="fas fa-check me-1"></i>Proses Import</button>
</div>
</div>
</div></div></div>

<input type="hidden" id="wizUrlRefs" value="{{ route('master_karyawan.refs') }}" />
<input type="hidden" id="wizUrlPreview" value="{{ route('master_karyawan.import_wizard_preview') }}" />
<input type="hidden" id="wizUrlExecute" value="{{ route('master_karyawan.import_wizard_execute') }}" />
@endsection

@push('scripts')
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
@verbatim
<script>
(function(){
    var wizStep=1, wizFile=null, wizPreviewData=[];

    function wizUpdateUI(){
        for(var s=1;s<=3;s++){var c=document.getElementById('wizCircle'+s),l=document.getElementById('wizLabel'+s);if(s<wizStep){c.className='wiz-step-circle done';c.innerHTML='<i class="fas fa-check"></i>';l.style.color='#16a34a'}else if(s===wizStep){c.className='wiz-step-circle active';c.innerHTML=s;l.style.color='#2563eb'}else{c.className='wiz-step-circle pending';c.innerHTML=s;l.style.color='#9ca3af'}}
        document.getElementById('wizLine1').className=wizStep>=2?'wiz-line done':'wiz-line';document.getElementById('wizLine2').className=wizStep>=3?'wiz-line done':'wiz-line';
        for(var p=1;p<=3;p++){document.getElementById('wizPanel'+p).style.display=p===wizStep?'':'none'}
        document.getElementById('wizPrevBtn').style.display=wizStep>1?'':'none';document.getElementById('wizNextBtn').style.display=wizStep<3?'':'none';document.getElementById('wizProcessBtn').style.display=wizStep===3?'':'none';
        if(wizStep===1)document.getElementById('wizNextBtn').disabled=!document.getElementById('wizProfilBulan').value;
        else if(wizStep===2)document.getElementById('wizNextBtn').disabled=!wizFile;
        else document.getElementById('wizNextBtn').disabled=wizPreviewData.length===0;
    }
    function s2(id,data,ph){var o='<option value="">'+ph+'</option>';if(Array.isArray(data))data.forEach(function(x){o+='<option value="'+x.id+'">'+(x.code||x.label||'-')+' - '+(x.name||x.label||'')+'</option>'});jQuery('#'+id).html(o).select2({theme:'bootstrap-5',width:'100%',allowClear:true})}
    function s2f(id){jQuery('#'+id).select2({theme:'bootstrap-5',width:'100%',allowClear:false})}

    function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
    function buildReviewTable(data){
        var tbody=document.getElementById('reviewBody');tbody.innerHTML='';
        document.getElementById('wizReviewCount').textContent=data.length+' baris';
        data.forEach(function(r,idx){
            var tr=document.createElement('tr');
            tr.innerHTML='<td>'+(idx+1)+'</td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.nik)+'" data-field="nik"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.name)+'" data-field="name"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.finger)+'" data-field="finger"></td>'
            +'<td><select class="form-select form-select-sm" data-field="status"><option value="tetap"'+(r.status==='tetap'?' selected':'')+'>Tetap</option><option value="kontrak"'+(r.status==='kontrak'?' selected':'')+'>Kontrak</option><option value="harian"'+(r.status==='harian'?' selected':'')+'>Harian</option><option value="magang"'+(r.status==='magang'?' selected':'')+'>Magang</option></select></td>'
            +'<td><input type="date" class="form-control form-control-sm" value="'+esc(r.tgl)+'" data-field="tgl"></td>'
            +'<td><input type="date" class="form-control form-control-sm" value="'+esc(r.start_present_work)+'" data-field="start_present_work"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.profil_gaji)+'" data-field="profil_gaji"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.profil_jk)+'" data-field="profil_jk"></td>'
            +'<td><input type="number" class="form-control form-control-sm" value="'+esc(r.gaji_pokok)+'" data-field="gaji_pokok"></td>'
            +'<td><input type="number" class="form-control form-control-sm" value="'+esc(r.tunj_jabatan)+'" data-field="tunj_jabatan"></td>'
            +'<td><input type="number" class="form-control form-control-sm" value="'+esc(r.tunj_keahlian)+'" data-field="tunj_keahlian"></td>'
            +'<td><input type="number" class="form-control form-control-sm" value="'+esc(r.insentif)+'" data-field="insentif"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.jabatan)+'" data-field="jabatan"></td>'
            +'<td><input type="text" class="form-control form-control-sm" value="'+esc(r.area_kerja)+'" data-field="area_kerja"></td>'
            +'<td><input type="number" class="form-control form-control-sm" value="'+esc(r.upah_lembur)+'" data-field="upah_lembur"></td>'
            +'<td><button class="btn btn-outline-danger btn-sm wiz-del-row" data-idx="'+idx+'"><i class="fas fa-trash"></i></button></td>';
            tbody.appendChild(tr);
        });
        jQuery('.wiz-del-row').on('click',function(){var i=parseInt(jQuery(this).data('idx'));wizPreviewData.splice(i,1);buildReviewTable(wizPreviewData);});
    }
    function readTableToData(){
        var rows=[];jQuery('#reviewBody tr').each(function(){
            var r={};jQuery(this).find('input,select').each(function(){r[jQuery(this).data('field')]=jQuery(this).val()});rows.push(r);
        });wizPreviewData=rows;
    }

    jQuery(document).ready(function(){
        var url=document.getElementById('wizUrlRefs').value;
        jQuery.getJSON(url,function(r){
            r=r.data||r;var all=r.profil_bulans||[],main=all.filter(function(x){return x.kind!=='sub'}),sub={};
            all.filter(function(x){return x.kind==='sub'}).forEach(function(x){var p=x.parent_id||0;if(!sub[p])sub[p]=[];sub[p].push(x)});
            var opts=[];main.sort(function(a,b){return(b.sort||0)-(a.sort||0)}).forEach(function(x){opts.push('<option value="'+x.id+'">MAIN |__ '+x.code+' - '+(x.name||'')+'</option>');(sub[x.id]||[]).forEach(function(s){opts.push('<option value="'+s.id+'">SUB |____ '+s.code+' - '+(s.name||'')+'</option>')})});
            jQuery('#wizProfilBulan').html('<option value="">- Pilih -</option>'+opts.join('')).select2({theme:'bootstrap-5',width:'100%',allowClear:true});
            s2('wizProfilGaji',r.profil_gajis||[],'- Pilih Gaji -');
            s2('wizProfilJamKerja',r.profil_jam_kerjas||[],'- Pilih Jam Kerja -');
            s2('wizShiftAlt',r.profil_jam_kerjas||[],'- Tidak ada -');
            s2('wizPerkalian',r.profil_perkalian_jams||[],'- Tidak ada -');
            s2('wizRounding',r.rounding_rules||[],'- Tidak ada -');
            s2('wizPayableRule',r.payable_rules||[],'- Tidak ada -');
            var eg='<option value="">- Tidak ada -</option>';if(Array.isArray(r.export_groups))r.export_groups.forEach(function(x){eg+='<option value="'+x.id+'">'+x.label+'</option>'});
            jQuery('#wizExportGroup').html(eg).select2({theme:'bootstrap-5',width:'100%',allowClear:true});
            s2f('wizShiftMode');s2f('wizHkBasis');s2f('wizPayMode');
            jQuery('#wizProfilBulan').on('change',function(){wizUpdateUI()});wizUpdateUI();
        }).fail(function(e){console.error('refs fail',e)});
    });

    jQuery('#wizNextBtn').on('click',function(){
        if(wizStep===1){wizStep++;wizUpdateUI();return}
        if(wizStep===2){
            if(!wizFile)return;
            // Upload preview
            var fd=new FormData();fd.append('file',wizFile);fd.append('profil_bulan_id',jQuery('#wizProfilBulan').val());
            fd.append('profil_gaji_id',jQuery('#wizProfilGaji').val()||'');fd.append('profil_jam_kerja_id',jQuery('#wizProfilJamKerja').val()||'');
            var csrf=document.querySelector('meta[name="csrf-token"]');
            jQuery('#wizReviewLoading').show();jQuery('#wizReviewTableWrap').hide();
            jQuery.ajax({url:document.getElementById('wizUrlPreview').value,type:'POST',data:fd,processData:false,contentType:false,headers:csrf?{'X-CSRF-TOKEN':csrf.getAttribute('content')}:{}})
            .done(function(resp){wizPreviewData=resp.data||[];buildReviewTable(wizPreviewData);jQuery('#wizReviewLoading').hide();jQuery('#wizReviewTableWrap').show();wizStep++;wizUpdateUI()})
            .fail(function(xhr){Swal.fire('Error',xhr.responseJSON?.message||'Gagal memuat preview','error');jQuery('#wizReviewLoading').hide()});
            return;
        }
    });
    jQuery('#wizPrevBtn').on('click',function(){wizStep--;wizUpdateUI()});

    jQuery('#wizDropZone').on('click',function(){jQuery('#wizFile').click()});
    jQuery('#wizDropZone').on('dragover',function(e){e.preventDefault();jQuery(this).addClass('dragover')});
    jQuery('#wizDropZone').on('dragleave',function(){jQuery(this).removeClass('dragover')});
    jQuery('#wizDropZone').on('drop',function(e){e.preventDefault();jQuery(this).removeClass('dragover');if(e.originalEvent.dataTransfer.files.length>0){wizFile=e.originalEvent.dataTransfer.files[0];jQuery('#wizFileName').text(wizFile.name+' ('+((wizFile.size/1024).toFixed(1))+' KB)');jQuery('#wizFileInfo').show();wizUpdateUI()}});
    jQuery('#wizFile').on('change',function(){if(this.files.length>0){wizFile=this.files[0];jQuery('#wizFileName').text(wizFile.name);jQuery('#wizFileInfo').show();wizUpdateUI()}});

    jQuery('#wizProcessBtn').on('click',function(){
        if(!wizPreviewData.length)return;
        readTableToData();
        jQuery('#wizProcessBtn').prop('disabled',true).html('<span class="spinner-border spinner-border-sm me-1"></span>Proses...');
        var fd=new FormData();fd.append('file',wizFile);fd.append('preview_data',JSON.stringify(wizPreviewData));
        fd.append('profil_bulan_id',jQuery('#wizProfilBulan').val());
        fd.append('profil_jam_kerja_id',jQuery('#wizProfilJamKerja').val()||'');
        fd.append('profil_gaji_id',jQuery('#wizProfilGaji').val()||'');
        fd.append('shift_mode',jQuery('#wizShiftMode').val()||'fixed');
        fd.append('profil_jam_kerja_id_alt',jQuery('#wizShiftAlt').val()||'');
        fd.append('profil_perkalian_jam_id',jQuery('#wizPerkalian').val()||'');
        fd.append('rounding_rule_id',jQuery('#wizRounding').val()||'');
        fd.append('payroll_hk_basis_mode',jQuery('#wizHkBasis').val()||'auto');
        fd.append('payable_rule_id',jQuery('#wizPayableRule').val()||'');
        fd.append('payroll_pay_mode',jQuery('#wizPayMode').val()||'normal');
        fd.append('export_employee_group',jQuery('#wizExportGroup').val()||'');
        fd.append('rotation_days',jQuery('#wizRotationDays').val()||7);
        fd.append('contract_no',jQuery('#wizContractNo').val()||1);
        fd.append('contract_start_date',jQuery('#wizContractStart').val()||'');
        fd.append('contract_end_date',jQuery('#wizContractEnd').val()||'');
        fd.append('start_present_work',jQuery('#wizStartPresentWork').val()||'');
        fd.append('contract_completed',jQuery('#wizContractDone').is(':checked')?1:0);
        fd.append('overtime_auto_without_spl',jQuery('#wizAutoOt').is(':checked')?1:0);
        fd.append('auto_no_rest_skip_break',jQuery('#wizAutoNoRest2').is(':checked')?1:0);
        fd.append('auto_no_rest_normal_included',jQuery('#wizAutoNoRest1').is(':checked')?1:0);
        fd.append('payroll_report_only',jQuery('#wizReportOnly').is(':checked')?1:0);
        
        var csrf=document.querySelector('meta[name="csrf-token"]');
        jQuery.ajax({url:document.getElementById('wizUrlExecute').value,type:'POST',data:fd,processData:false,contentType:false,headers:csrf?{'X-CSRF-TOKEN':csrf.getAttribute('content')}:{}})
        .done(function(resp){
            jQuery('#wizPanel3').html('<div class="text-center py-4"><i class="fas fa-check-circle text-success" style="font-size:4rem"></i><div class="fs-4 fw-bold mt-3">Selesai!</div><div class="text-muted mt-2">'+resp.message+'</div><div class="mt-4"><button class="btn btn-primary" onclick="window.close()">Tutup</button> <a href="'+window.location.origin+'/master-karyawan" class="btn btn-outline-primary">Lihat Data</a></div></div>');
            jQuery('#wizNextBtn,#wizPrevBtn,#wizProcessBtn').hide();
        }).fail(function(xhr){Swal.fire('Error',xhr.responseJSON?.message||'Gagal','error');jQuery('#wizProcessBtn').prop('disabled',false).html('<i class="fas fa-check me-1"></i>Proses Import')});
    });
})();
</script>
@endverbatim
@endpush