<style>
.spk-page{--ink:#172033;--muted:#6b7280;--line:#e8ecf2;--soft:#f6f8fb}.spk-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.spk-title h1{font-size:25px;font-weight:700;color:var(--ink);margin:0 0 5px}.spk-title p{color:var(--muted);margin:0}.spk-create{border:0;border-radius:10px;padding:11px 17px;font-weight:600;background:var(--app-theme-color,#195ab4)!important;border-color:var(--app-theme-color,#195ab4)!important;color:var(--app-theme-text-color,#fff)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--app-theme-color,#195ab4) 24%,transparent)}.spk-create:hover,.spk-create:focus{background:var(--app-theme-color,#195ab4)!important;border-color:var(--app-theme-color,#195ab4)!important;color:var(--app-theme-text-color,#fff)!important;filter:brightness(.93)}.spk-panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 22px rgba(22,32,51,.045);overflow:hidden}.spk-filters{display:grid;grid-template-columns:minmax(210px,1fr) 120px 105px 145px 145px auto;gap:10px;padding:16px;border-bottom:1px solid var(--line);align-items:end}.spk-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#778195;margin:0 0 6px}.spk-control{height:40px;border:1px solid #dce2eb;border-radius:9px;background:#fff;padding:0 11px;width:100%;outline:none}.spk-control:focus{border-color:#4e73df;box-shadow:0 0 0 3px rgba(78,115,223,.1)}.spk-search{position:relative}.spk-search i{position:absolute;left:13px;top:13px;color:#98a1b2}.spk-search .spk-control{padding-left:35px}.spk-reset{height:40px;border:1px solid #dce2eb;background:#fff;color:#536078;border-radius:9px;padding:0 13px}.spk-loading{padding:55px;text-align:center;color:#7d8798}.spk-order-results{max-height:360px;overflow:auto}.spk-order-option{width:100%;display:flex;justify-content:space-between;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;margin-bottom:8px}.spk-order-option:hover{border-color:#4e73df;background:#f8faff}.spk-order-option small{display:block;color:var(--muted);margin-top:3px}@media(max-width:992px){.spk-filters{grid-template-columns:1fr 1fr 1fr}.spk-search{grid-column:1/-1}}@media(max-width:576px){.spk-hero{align-items:flex-start;flex-direction:column}.spk-create{width:100%}.spk-filters{grid-template-columns:1fr 1fr}.spk-search{grid-column:1/-1}.spk-date{grid-column:span 1}}
</style>
<style>
.spk-modal .modal-dialog{max-width:1040px}.spk-modal .modal-content{border:0;border-radius:18px;box-shadow:0 24px 70px rgba(16,24,40,.22);overflow:hidden}.spk-modal .modal-header{border:0;padding:20px 24px 13px}.spk-modal .modal-title{font-weight:700;color:#1d2939}.spk-modal .modal-body{padding:8px 24px 22px}.spk-modal .modal-footer{background:#fafbfc;border-top:1px solid #edf0f4;padding:14px 24px}.spk-modal .close{width:34px;height:34px;border-radius:50%;margin:-4px -5px 0 0;padding:0;font-weight:400}.spk-modal .close:hover{background:#f0f2f5}.modal-backdrop.show{opacity:.48}@media(max-width:576px){.spk-modal .modal-body{padding:6px 14px 18px}.spk-modal .modal-header,.spk-modal .modal-footer{padding-left:14px;padding-right:14px}}
.spk-item-modal .modal-dialog{max-width:1020px}.spk-item-modal .modal-body{background:#eef1f5;max-height:calc(100vh - 185px);overflow:auto}.spk-item-modal .modal-content{border:0;border-radius:16px;overflow:hidden;box-shadow:0 25px 80px rgba(16,24,40,.28)}
</style>
<div class="container-fluid" id="container-wrapper">
  <div class="spk-hero">
    <div class="spk-title"><h1>SPK Produksi</h1><p>Kelola dan cetak surat perintah kerja produksi.</p></div>
    <button class="btn spk-create" type="button" data-toggle="modal" data-target="#modalCariOrder"><i class="fa fa-plus mr-2"></i>Buat SPK Offset</button>
  </div>
  <div class="spk-panel">
    <div class="spk-filters">
      <div class="spk-field spk-search"><label>Cari data</label><i class="fa fa-search"></i><input id="spkKeyword" class="spk-control" placeholder="No. order, pelanggan, no. SPK..."></div>
      <div class="spk-field"><label>Urutkan</label><select id="spkSort" class="spk-control"><option value="DESC">Terbaru</option><option value="ASC">Terlama</option></select></div>
      <div class="spk-field"><label>Limit</label><select id="spkLimit" class="spk-control"><option>10</option><option>20</option><option>50</option><option>100</option></select></div>
      <div class="spk-field spk-date"><label>Dari</label><input id="spkDari" class="spk-control" value="<?=$dari;?>"></div>
      <div class="spk-field spk-date"><label>Sampai</label><input id="spkSampai" class="spk-control" value="<?=$sampai;?>"></div>
      <button id="spkReset" class="spk-reset" type="button"><i class="fa fa-refresh mr-1"></i> Reset</button>
    </div>
    <div id="spkData"><div class="spk-loading"><i class="fa fa-circle-o-notch fa-spin mr-2"></i>Memuat data...</div></div>
  </div>
</div>

<div class="modal fade" id="modalCariOrder" tabindex="-1"><div class="modal-dialog"><div class="modal-content" style="border:0;border-radius:14px"><div class="modal-header"><div><h5 class="modal-title">Buat SPK Baru</h5><small class="text-muted">Cari order yang akan dibuatkan SPK</small></div><button class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><div class="spk-search"><i class="fa fa-search"></i><input id="newSpkSearch" class="spk-control" placeholder="Ketik nomor order atau nama pelanggan"></div><div id="newSpkResults" class="spk-order-results mt-3"><div class="text-muted text-center py-4">Masukkan kata kunci untuk mencari order.</div></div></div></div></div></div>
<div class="modal fade spk-modal" id="modalFormSpk" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="formSpkProduksi"><div class="modal-header"><div><h5 class="modal-title">Detail SPK Produksi</h5><small class="text-muted">Periksa informasi produksi sebelum mencetak.</small></div><button type="button" class="close" data-dismiss="modal" aria-label="Tutup">&times;</button></div><div class="modal-body" id="spkFormBody"></div><div class="modal-footer"><button type="button" class="btn btn-light px-4" data-dismiss="modal">Batal</button><button type="submit" class="btn btn-primary px-4"><i class="fa fa-print mr-1"></i>Simpan & Cetak SPK</button></div></form></div></div></div>
<div class="modal fade spk-item-modal" id="modalSpkItemEditor" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="formSpkItemEditor"><div class="modal-header"><div><h5 class="modal-title">Buat SPK Produksi</h5><small class="text-muted">Isi bagian produksi yang masih kosong.</small></div><button type="button" class="close" data-dismiss="modal" aria-label="Tutup">&times;</button></div><div class="modal-body" id="spkItemEditorBody"></div><div class="modal-footer"><button type="button" class="btn btn-light px-4" data-dismiss="modal">Batal</button><button type="submit" class="btn btn-primary px-4"><i class="fa fa-save mr-1"></i>Simpan Isian SPK</button></div></form></div></div></div>
<script>
(function(){var timer,request;function params(page){return{page:page||0,keyword:$('#spkKeyword').val(),sort:$('#spkSort').val(),limit:$('#spkLimit').val(),dari:$('#spkDari').val(),sampai:$('#spkSampai').val()}}window.loadSpkProduksi=function(page){if(request)request.abort();$('#spkData').addClass('is-loading');request=$.post(base_url+'spk-produksi/data',params(page)).done(function(html){$('#spkData').html(html)}).fail(function(xhr,status){if(status!=='abort')$('#spkData').html('<div class="spk-loading text-danger">Data gagal dimuat. Silakan coba lagi.</div>')}).always(function(){$('#spkData').removeClass('is-loading')})};$('#spkKeyword').on('input',function(){clearTimeout(timer);timer=setTimeout(function(){loadSpkProduksi(0)},350)});$('#spkSort,#spkLimit,#spkDari,#spkSampai').on('change',function(){loadSpkProduksi(0)});$('#spkReset').on('click',function(){$('#spkKeyword').val('');$('#spkSort').val('DESC');$('#spkLimit').val('10');$('#spkDari').val('<?=$dari;?>');$('#spkSampai').val('<?=$sampai;?>');loadSpkProduksi(0)});$('#spkDari,#spkSampai').datepicker({format:'dd/mm/yyyy',autoclose:true,todayHighlight:true});$('#newSpkSearch').on('input',function(){var keyword=this.value;clearTimeout(timer);timer=setTimeout(function(){if($.trim(keyword).length<2){$('#newSpkResults').html('<div class="text-muted text-center py-4">Ketik minimal 2 karakter.</div>');return}$('#newSpkResults').html('<div class="text-center py-4"><i class="fa fa-spinner fa-spin"></i></div>');$.post(base_url+'spk-produksi/cari-order',{keyword:keyword},function(html){$('#newSpkResults').html(html)})},300)});$(document).on('click','.open-spk-form',function(){var id=$(this).data('id');$('#modalCariOrder').modal('hide');$('#spkFormBody').html('<div class="text-center py-5"><i class="fa fa-spinner fa-spin"></i> Memuat formulir...</div>');$('#modalFormSpk').modal('show');$.post(base_url+'laporan/load_modal_spk',{id:id},function(html){$('#spkFormBody').html(html)})});$('#formSpkProduksi').on('submit',function(e){e.preventDefault();var btn=$(this).find('[type=submit]').prop('disabled',true);$.ajax({url:base_url+'laporan/simpan_spk',method:'POST',dataType:'json',data:$(this).serialize()}).done(function(data){if(data.status==200){$('#modalFormSpk').modal('hide');window.open(base_url+'operator/print_spk?token='+encodeURIComponent(data.id),'_blank');showNotif('bottom-right','SPK Produksi','SPK berhasil disimpan','success');loadSpkProduksi(0)}else{showNotif('bottom-right','SPK Produksi',data.msg||'Gagal menyimpan SPK','error')}}).fail(function(){showNotif('bottom-right','SPK Produksi','Gagal menyimpan SPK','error')}).always(function(){btn.prop('disabled',false)})});loadSpkProduksi(0)})();
</script>
<script>
(function(){
  var returnToDetail=false;
  $(document).on('click','.open-spk-item-editor',function(){
    var detailId=$(this).data('detail-id');
    returnToDetail=$('#modalFormSpk').hasClass('show');
    $('#spkItemEditorBody').html('<div class="text-center py-5"><i class="fa fa-spinner fa-spin mr-2"></i>Memuat lembar SPK...</div>');
    $('#modalFormSpk').modal('hide');
    $('#modalFormSpk').one('hidden.bs.modal',function(){
      $('#modalSpkItemEditor').modal('show');
      $.post(base_url+'spk-produksi/item-form',{detail_id:detailId},function(html){$('#spkItemEditorBody').html(html)}).fail(function(xhr){$('#spkItemEditorBody').html('<div class="alert alert-danger mb-0">'+(xhr.responseText||'Editor SPK gagal dimuat.')+'</div>')});
    });
  });
  $('#modalSpkItemEditor').on('hidden.bs.modal',function(){if(returnToDetail){returnToDetail=false;$('#modalFormSpk').modal('show')}});
  $('#formSpkItemEditor').on('submit',function(e){
    e.preventDefault();var form=$(this),btn=form.find('[type=submit]').prop('disabled',true);
    $.ajax({url:base_url+'spk-produksi/save-item',method:'POST',dataType:'json',data:new FormData(this),processData:false,contentType:false}).done(function(data){if(data.status===200){showNotif('bottom-right','SPK Produksi',data.msg,'success');$('#modalSpkItemEditor').modal('hide')}else{showNotif('bottom-right','SPK Produksi',data.msg||'Isian gagal disimpan','error')}}).fail(function(xhr){var msg='Isian gagal disimpan';if(xhr.responseJSON&&xhr.responseJSON.msg)msg=xhr.responseJSON.msg;showNotif('bottom-right','SPK Produksi',msg,'error')}).always(function(){btn.prop('disabled',false)});
  });
})();
</script>
<script>
$(document).off('click', '.open-spk-form').on('click', '.open-spk-form', function(){
  var id=$(this).data('id');
  window.currentSpkInvoiceToken=id;
  $('#modalCariOrder').modal('hide');
  $('#spkFormBody').html('<div class="text-center py-5"><i class="fa fa-spinner fa-spin"></i> Memuat formulir...</div>');
  $('#modalFormSpk').modal('show');
  $.post(base_url+'spk-produksi/form',{id:id},function(html){$('#spkFormBody').html(html)}).fail(function(xhr){
    $('#spkFormBody').html('<div class="alert alert-danger mb-0">'+(xhr.responseText||'Formulir gagal dimuat.')+'</div>');
  });
});

$('#formSpkProduksi').off('submit').on('submit.spkPrint',function(e){
  e.preventDefault();
  var form=$(this),btn=form.find('[type=submit]').prop('disabled',true);
  var payload=form.serializeArray();
  payload.push({name:'spk_invoice_token',value:window.currentSpkInvoiceToken||''});
  $.ajax({url:base_url+'laporan/simpan_spk',method:'POST',dataType:'json',data:payload}).done(function(data){
    if(data.status==200){
      $('#modalFormSpk').modal('hide');
      window.open(base_url+'operator/print_spk?token='+encodeURIComponent(data.id),'_blank');
      showNotif('bottom-right','SPK Produksi','SPK berhasil disimpan','success');
      loadSpkProduksi(0);
    }else showNotif('bottom-right','SPK Produksi',data.msg||'Gagal menyimpan SPK','error');
  }).fail(function(){showNotif('bottom-right','SPK Produksi','Gagal menyimpan SPK','error')}).always(function(){btn.prop('disabled',false)});
});
</script>
