<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<style>.cmf-wrap{padding:22px 25px 25px}.cmf-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.cmf-step{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid #dfe5ee;border-radius:11px;background:#fff;color:#778195}.cmf-step span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#edf1f7;font-weight:800}.cmf-step.active{border-color:#a9bdf8;color:#274690;background:#f7f9ff}.cmf-step.active span{background:var(--app-theme-color,#4f46e5);color:#fff}.cmf-section{background:#fff;border:1px solid #e2e7ef;border-radius:14px;padding:18px;margin-bottom:14px}.cmf-title{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px}.cmf-title i{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#eef3ff;color:var(--app-theme-color,#4f46e5)}.cmf-title h5{margin:0;color:#1d2939;font-weight:700}.cmf-title small{color:#7b8495}.cmf-search{position:relative}.cmf-search>i{position:absolute;left:13px;top:13px;color:#98a2b3}.cmf-search input{padding-left:38px;height:44px}.cmf-results{position:absolute;z-index:30;left:0;right:0;top:48px;background:#fff;border:1px solid #dde3ec;border-radius:11px;box-shadow:0 16px 40px rgba(16,24,40,.16);max-height:250px;overflow:auto}.cmf-order-option{display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;border:0;border-bottom:1px solid #edf0f4;background:#fff;padding:12px 14px}.cmf-order-option:hover{background:#f5f7ff}.cmf-order-option small{display:block;color:#7b8495;margin-top:2px}.cmf-selected{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#effaf5;border:1px solid #bce8d2;color:#176b45;border-radius:10px}.cmf-items{margin-top:13px}.cmf-item{border:1px solid #e2e7ef;border-radius:11px;padding:13px;margin-top:9px;transition:.18s}.cmf-item.selected{border-color:#9bb2f5;background:#f8faff}.cmf-item-head{display:flex;justify-content:space-between;gap:10px}.cmf-item-name{font-weight:700;color:#344054}.cmf-item-meta{font-size:12px;color:#7b8495}.cmf-item-fields{display:grid;grid-template-columns:180px 1fr;gap:10px;margin-top:11px}.cmf-upload{border:1px dashed #bcc7d8;border-radius:11px;padding:13px;background:#fafbfc}.cmf-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.cmf-help{color:#7b8495;font-size:12px}.cmf-submit{min-width:170px;border-radius:9px;font-weight:700}.cmf-empty{text-align:center;color:#8a94a6;padding:18px}.cmf-error{display:none;margin-bottom:14px}.cmf-char{text-align:right;font-size:11px;color:#98a2b3;margin-top:4px}@media(max-width:700px){.cmf-wrap{padding:14px}.cmf-item-fields{grid-template-columns:1fr}.cmf-footer{align-items:stretch;flex-direction:column}.cmf-submit{width:100%}}</style>
<form id="complaintModalForm" enctype="multipart/form-data"><div class="cmf-wrap"><div class="cmf-steps"><div id="cmfStepOrder" class="cmf-step active"><span>1</span><div><b>Pilih transaksi</b><small class="d-block">Tentukan order dan item</small></div></div><div id="cmfStepComplaint" class="cmf-step"><span>2</span><div><b>Detail komplain</b><small class="d-block">Jelaskan masalah pelanggan</small></div></div></div><div id="cmfError" class="alert alert-danger cmf-error"></div>
<section class="cmf-section"><div class="cmf-title"><i class="fa fa-file-text-o"></i><div><h5>Informasi Transaksi</h5><small>Data pelanggan, SPK, produk, dan qty diambil otomatis.</small></div></div><div class="cmf-search"><i class="fa fa-search"></i><input id="cmfOrderSearch" class="form-control" autocomplete="off" placeholder="Ketik nomor order atau nama pelanggan..."><div id="cmfOrderResults" class="cmf-results d-none"></div></div><input type="hidden" id="cmfTransactionId" name="transaction_id"><div id="cmfSelectedOrder" class="mt-3"><div class="cmf-empty"><i class="fa fa-hand-pointer-o mr-1"></i>Pilih transaksi untuk menampilkan item yang dapat dikomplain.</div></div><div id="cmfItems" class="cmf-items"></div></section>
<section class="cmf-section"><div class="cmf-title"><i class="fa fa-comments-o"></i><div><h5>Informasi Komplain</h5><small>Kolom bertanda bintang wajib diisi.</small></div></div><div class="form-row"><div class="form-group col-md-4"><label>Tanggal komplain *</label><input type="date" name="complaint_date" value="<?=date('Y-m-d')?>" class="form-control" required></div><div class="form-group col-md-5"><label>Jenis komplain *</label><select name="complaint_type" class="form-control" required><?php foreach($types as $type):?><option><?=html_escape($type)?></option><?php endforeach;?></select></div><div class="form-group col-md-3"><label>Prioritas</label><select name="priority" class="form-control"><option>LOW</option><option selected>NORMAL</option><option>HIGH</option><option>URGENT</option></select></div></div><div class="form-group"><label>Deskripsi masalah *</label><textarea id="cmfDescription" name="description" maxlength="3000" class="form-control" rows="4" required placeholder="Jelaskan kondisi produk, perbedaan hasil, dan informasi penting lainnya..."></textarea><div class="cmf-char"><span id="cmfCharCount">0</span>/3000</div></div><div class="form-row"><div class="form-group col-md-6"><label>Permintaan pelanggan</label><textarea name="customer_request" class="form-control" rows="2" placeholder="Contoh: cetak ulang 1.000 pcs"></textarea></div><div class="form-group col-md-6"><label>Catatan internal</label><textarea name="internal_note" class="form-control" rows="2" placeholder="Catatan untuk tim internal"></textarea></div></div><div class="cmf-upload"><label class="mb-1"><i class="fa fa-paperclip mr-1"></i>Foto atau bukti pendukung</label><input id="cmfEvidence" type="file" name="evidence[]" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="form-control-file"><small id="cmfFileInfo" class="text-muted">JPG, PNG, dan WEBP otomatis dikompres menjadi WEBP. PDF tetap PDF. Maksimal 5 MB per file.</small></div></section>
<div class="cmf-footer"><div class="cmf-help"><i class="fa fa-shield mr-1"></i>Transaksi dan SPK original tidak akan diubah.</div><div><button type="button" class="btn btn-light mr-2" data-dismiss="modal">Batal</button><button id="cmfSubmit" class="btn btn-primary cmf-submit" type="submit"><i class="fa fa-save mr-1"></i>Simpan Komplain</button></div></div></div></form>
<script>(function(){var timer,searchRequest;function esc(v){return $('<div>').text(v==null?'':v).html()}function error(msg){$('#cmfError').text(msg).stop(true,true).slideDown(150);var body=$('#complaintModalBody');body.animate({scrollTop:0},200)}function bindItems(){$('.cmf-item-check').off('change').on('change',function(){var id=$(this).data('id'),on=this.checked,item=$(this).closest('.cmf-item');item.toggleClass('selected',on);item.find('.cmf-item-field').prop('disabled',!on).each(function(){this.name=on?'items['+id+']['+$(this).data('name')+']':''});$('#cmfStepComplaint').toggleClass('active',$('.cmf-item-check:checked').length>0)})}function loadItems(id){$('#cmfItems').html('<div class="cmf-empty"><i class="fa fa-spinner fa-spin mr-1"></i>Memuat item transaksi...</div>');$.getJSON(base_url+'komplain/order-items/'+id).done(function(res){var html='';$.each(res.rows,function(_,r){html+='<div class="cmf-item"><div class="cmf-item-head"><div><label class="mb-1"><input type="checkbox" class="cmf-item-check" data-id="'+r.id_rincianinvoice+'"> <span class="cmf-item-name">'+esc(r.product_name)+'</span></label><div class="cmf-item-meta">SPK '+esc(r.no_spk||'-')+' · Qty order '+esc(r.jumlah)+'</div></div></div><div class="cmf-item-fields"><div><label>Qty bermasalah *</label><input disabled class="form-control cmf-item-field" data-name="complaint_qty" data-id="'+r.id_rincianinvoice+'" type="number" min="0.01" max="'+esc(r.jumlah)+'" step="0.01" placeholder="Maks. '+esc(r.jumlah)+'"></div><div><label>Masalah pada item</label><input disabled class="form-control cmf-item-field" data-name="issue_description" data-id="'+r.id_rincianinvoice+'" placeholder="Contoh: warna lebih gelap dari sampel"></div></div></div>'});$('#cmfItems').html(html||'<div class="cmf-empty">Transaksi ini tidak memiliki item produk.</div>');bindItems()}).fail(function(){error('Item transaksi gagal dimuat.')})}$('#cmfOrderSearch').on('input',function(){var q=$.trim(this.value);clearTimeout(timer);if(searchRequest)searchRequest.abort();if(q.length<2){$('#cmfOrderResults').addClass('d-none').empty();return}timer=setTimeout(function(){$('#cmfOrderResults').html('<div class="cmf-empty"><i class="fa fa-spinner fa-spin"></i> Mencari transaksi...</div>').removeClass('d-none');searchRequest=$.getJSON(base_url+'komplain/search-order',{q:q}).done(function(res){var html='';$.each(res.rows,function(_,r){html+='<button type="button" class="cmf-order-option" data-id="'+r.id_invoice+'" data-order="'+esc(r.id_transaksi)+'" data-customer="'+esc(r.customer)+'"><span><b>'+esc(r.id_transaksi)+'</b><small>'+esc(r.customer)+' · '+esc(r.tgl_trx)+'</small></span><i class="fa fa-chevron-right text-primary"></i></button>'});$('#cmfOrderResults').html(html||'<div class="cmf-empty">Transaksi tidak ditemukan.</div>')})},300)});$(document).off('click.cmf','.cmf-order-option').on('click.cmf','.cmf-order-option',function(){var id=$(this).data('id'),order=$(this).data('order'),customer=$(this).data('customer');$('#cmfTransactionId').val(id);$('#cmfOrderSearch').val(order+' — '+customer);$('#cmfOrderResults').addClass('d-none');$('#cmfSelectedOrder').html('<div class="cmf-selected"><i class="fa fa-check-circle"></i><div><b>'+esc(order)+'</b><small class="d-block">'+esc(customer)+'</small></div></div>');loadItems(id)});$('#cmfDescription').on('input',function(){$('#cmfCharCount').text(this.value.length)});$('#cmfEvidence').on('change',function(){$('#cmfFileInfo').text(this.files.length?this.files.length+' file dipilih. Maksimal 5 MB per file.':'JPG, PNG, WEBP, atau PDF. Maksimal 5 MB per file.')});$('#complaintModalForm').on('submit',function(e){e.preventDefault();$('#cmfError').hide();if(!$('#cmfTransactionId').val())return error('Pilih transaksi terlebih dahulu.');if(!$('.cmf-item-check:checked').length)return error('Pilih minimal satu item yang dikomplain.');var form=this,button=$('#cmfSubmit').prop('disabled',true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Menyimpan...');$.ajax({url:base_url+'komplain/store',method:'POST',data:new FormData(form),processData:false,contentType:false,dataType:'json'}).done(function(res){showNotif('bottom-right','Komplain',res.msg,'success');$('#complaintCreateModal').modal('hide');setTimeout(function(){location.reload()},450)}).fail(function(xhr){error((xhr.responseJSON&&xhr.responseJSON.msg)||'Komplain gagal disimpan.')}).always(function(){button.prop('disabled',false).html('<i class="fa fa-save mr-1"></i>Simpan Komplain')})});})();</script>
<?php if(!empty($preselectedOrder)): ?>
<script>(function(){var order=<?=json_encode($preselectedOrder,JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES)?>,$option=$('<button type="button" class="cmf-order-option d-none"></button>').attr({'data-id':order.id_invoice,'data-order':order.id_transaksi,'data-customer':order.customer}).appendTo('#cmfOrderResults');$option.trigger('click').remove();})();</script>
<?php endif; ?>
