<?php
defined('BASEPATH') or exit('No direct script access allowed');
$totalCost=0;foreach($costs as $cost)$totalCost+=(float)$cost['total_cost'];
$statusMeta=['OPEN'=>['Baru','secondary','fa-inbox'],'VERIFICATION'=>['Verifikasi','warning','fa-search'],'APPROVED'=>['Disetujui','info','fa-check-circle'],'REWORK'=>['Rework','primary','fa-refresh'],'QC'=>['Quality Control','warning','fa-check-square-o'],'READY'=>['Siap','info','fa-dropbox'],'DELIVERED'=>['Terkirim','success','fa-truck'],'CLOSED'=>['Selesai','success','fa-lock'],'REJECTED'=>['Ditolak','danger','fa-times-circle'],'CANCELLED'=>['Dibatalkan','secondary','fa-ban']];
$priorityMeta=['LOW'=>'secondary','NORMAL'=>'info','HIGH'=>'warning','URGENT'=>'danger'];
$currentStatus=isset($statusMeta[$row['status']])?$statusMeta[$row['status']]:[$row['status'],'secondary','fa-circle'];
$reworkProcesses=[];$lastSelectedProcesses=[];$processTotal=0;$processDone=0;
foreach($reworks as $reworkIndex=>$rework){$processRows=$this->komplain->processes($rework['id']);$reworkProcesses[$rework['id']]=$processRows;foreach($processRows as $process){if($process['status']!=='SKIPPED'){if($reworkIndex===0)$lastSelectedProcesses[]=$process['process_type'];$processTotal++;if($process['status']==='DONE')$processDone++;}}}
$progress=$processTotal?round($processDone/$processTotal*100):0;
$formatQty=function($value){return number_format((float)$value,0,',','.');};
?>
<style>
.complaint-detail{--cd-ink:#172033;--cd-muted:#6b7280;--cd-line:#e5eaf1;--cd-soft:#f6f8fb;--cd-brand:var(--app-theme-color,#4f46e5);color:var(--cd-ink)}
.cd-header{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f6f8ff 100%);border:1px solid var(--cd-line);border-radius:18px;padding:22px 24px;margin-bottom:15px;box-shadow:0 8px 28px rgba(20,30,55,.05)}.cd-header:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-55px;top:-85px;background:color-mix(in srgb,var(--cd-brand) 9%,transparent)}
.cd-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;margin-bottom:12px}.cd-head-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;position:relative;z-index:1}.cd-title{font-size:27px;font-weight:780;margin:0 0 4px;color:var(--cd-ink)}.cd-subtitle{color:var(--cd-muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cd-dot{width:4px;height:4px;border-radius:50%;background:#aab2bf}.cd-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cd-badge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.03em}.cd-badge-primary{background:#e9efff;color:#355ac4}.cd-badge-info{background:#e6f6fb;color:#167389}.cd-badge-warning{background:#fff3db;color:#9a6100}.cd-badge-success{background:#e8f7ef;color:#237a4b}.cd-badge-danger{background:#ffebeb;color:#b42318}.cd-badge-secondary{background:#eef0f3;color:#5f6978}
.cd-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}.cd-stat{background:rgba(255,255,255,.82);border:1px solid var(--cd-line);border-radius:12px;padding:12px 14px}.cd-stat small{display:block;color:var(--cd-muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:750}.cd-stat strong{display:block;margin-top:4px;font-size:17px;color:var(--cd-ink)}
.cd-nav{position:sticky;top:8px;z-index:10;display:flex;gap:5px;overflow:auto;background:#fff;border:1px solid var(--cd-line);border-radius:12px;padding:6px;margin-bottom:15px;box-shadow:0 5px 18px rgba(20,30,55,.05)}.cd-nav a{white-space:nowrap;border-radius:8px;padding:8px 12px;color:#677185;font-size:12px;font-weight:700}.cd-nav a:hover,.cd-nav a.active{background:#eef3ff;color:#3458bd;text-decoration:none}
.cd-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr);gap:15px;align-items:start}.cd-card{background:#fff;border:1px solid var(--cd-line);border-radius:15px;margin-bottom:15px;box-shadow:0 5px 22px rgba(20,30,55,.04);scroll-margin-top:70px}.cd-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--cd-line)}.cd-card-title{display:flex;align-items:center;gap:11px}.cd-card-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#eef3ff;color:#3c5fc3}.cd-card-title h5{font-size:16px;font-weight:750;margin:0;color:var(--cd-ink)}.cd-card-title small{display:block;color:var(--cd-muted);margin-top:2px}.cd-card-body{padding:18px}
.cd-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cd-info{padding:12px;background:var(--cd-soft);border-radius:10px}.cd-info small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cd-muted);font-weight:750;margin-bottom:4px}.cd-info b{font-size:14px}.cd-copy{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.cd-copy-box{border:1px solid var(--cd-line);border-radius:11px;padding:13px;min-height:82px}.cd-copy-box small{display:block;color:var(--cd-muted);font-weight:700;margin-bottom:5px}.cd-item{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;gap:12px;align-items:center;border:1px solid var(--cd-line);border-radius:11px;padding:12px;margin-top:9px}.cd-item-name{font-weight:700}.cd-item-note{font-size:12px;color:var(--cd-muted);margin-top:2px}.cd-item-qty{text-align:right}.cd-item-qty small{display:block;color:var(--cd-muted);font-size:10px;text-transform:uppercase}.cd-evidence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cd-file{display:block;border:1px solid var(--cd-line);border-radius:11px;overflow:hidden;background:#fafbfc;color:var(--cd-ink)}.cd-file:hover{border-color:#9bb2f5;text-decoration:none}.cd-file-preview{height:95px;background:#eef1f5;display:grid;place-items:center;overflow:hidden}.cd-file-preview img{width:100%;height:100%;object-fit:cover}.cd-file-preview i{font-size:28px;color:#dc3545}.cd-file-name{padding:8px 10px;font-size:11px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cd-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cd-field label{display:block;font-size:12px;font-weight:700;color:#566174;margin-bottom:6px}.cd-field-wide{grid-column:1/-1}.cd-card .form-control{border-color:#dce2eb;border-radius:9px;min-height:40px}.cd-card .form-control:focus{border-color:#7793e4;box-shadow:0 0 0 3px rgba(79,70,229,.09)}.cd-action{display:flex;justify-content:flex-end;margin-top:14px}.cd-action .btn{border-radius:9px;font-weight:650;padding:9px 15px}
.cd-process-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cd-process-check{display:flex;align-items:center;gap:8px;border:1px solid var(--cd-line);border-radius:9px;padding:9px 10px;margin:0;cursor:pointer;background:#fff}.cd-process-check:has(input:checked){border-color:#9db2ef;background:#f5f7ff;color:#294ba8}.cd-process-check input{margin:0}
.cd-rework{border:1px solid var(--cd-line);border-radius:13px;overflow:hidden;margin-bottom:12px}.cd-rework-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 15px;background:#fafbfc}.cd-rework-title{font-weight:750}.cd-rework-meta{font-size:12px;color:var(--cd-muted);margin-top:3px}.cd-progress{width:150px;height:7px;background:#e8ecf2;border-radius:8px;overflow:hidden}.cd-progress>span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#22a6d5);border-radius:8px}.cd-process-list{padding:10px}.cd-process{display:grid;grid-template-columns:25px minmax(120px,.7fr) 145px minmax(150px,1fr) 160px auto;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #edf0f4}.cd-process:last-child{border-bottom:0}.cd-process-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:#eef0f3;color:#667085}.cd-process-dot.DONE{background:#e5f6ec;color:#1f7a4d}.cd-process-dot.IN_PROGRESS{background:#e7f4ff;color:#1677a8}.cd-process-dot.CANCELLED{background:#ffeded;color:#b42318}.cd-process-dot.SKIPPED{background:#f2f3f5;color:#8a94a6}.cd-process-name{font-weight:700;font-size:12px}
.cd-cost-form{display:grid;grid-template-columns:1.1fr 1fr 1.6fr .55fr .7fr 1fr;gap:8px}.cd-cost-list{margin-top:15px;border-top:1px solid var(--cd-line)}.cd-cost-row{display:flex;justify-content:space-between;gap:15px;padding:10px 2px;border-bottom:1px solid #edf0f4}.cd-cost-total{display:flex;justify-content:space-between;padding:14px 2px 0;font-size:17px;font-weight:800}
.cd-resolution-type{font-size:17px;font-weight:800;color:#2f4fa7}.cd-approval{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--cd-line)}.cd-avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#eef3ff;color:#355ac4}.cd-timeline{position:relative;padding-left:22px}.cd-log{position:relative;padding-bottom:18px}.cd-log:before{content:'';position:absolute;left:-18px;top:5px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#647df0;box-shadow:0 0 0 2px #cbd5f4}.cd-log:after{content:'';position:absolute;left:-14px;top:15px;bottom:0;width:1px;background:#dde3eb}.cd-log:last-child:after{display:none}.cd-log-title{font-size:12px;font-weight:800;color:#344054}.cd-log-status{display:inline-flex;margin:4px 0;padding:3px 7px;border-radius:10px;background:#f0f3f8;font-size:10px;color:#64748b}.cd-log-desc{font-size:12px;color:#4b5565}.cd-log-time{font-size:10px;color:#98a2b3;margin-top:4px}.cd-empty{text-align:center;padding:25px;color:#8a94a6}
@media(max-width:1200px){.cd-layout{grid-template-columns:minmax(0,1fr) 320px}.cd-process{grid-template-columns:25px 1fr 130px 1fr auto}.cd-process .cd-assignee{display:none}.cd-cost-form{grid-template-columns:repeat(3,1fr)}}
@media(max-width:992px){.cd-layout{grid-template-columns:1fr}.cd-side{display:grid;grid-template-columns:1fr 1fr;gap:15px}.cd-side .cd-card{margin-bottom:0}.cd-nav{top:4px}}
@media(max-width:700px){.cd-header{padding:17px}.cd-head-row{flex-direction:column}.cd-badges{justify-content:flex-start}.cd-stats{grid-template-columns:1fr 1fr}.cd-stat:last-child{grid-column:1/-1}.cd-info-grid,.cd-form-grid,.cd-copy,.cd-process-picker,.cd-side{grid-template-columns:1fr}.cd-evidence{grid-template-columns:1fr 1fr}.cd-item{grid-template-columns:1fr}.cd-item-qty{text-align:left}.cd-process{grid-template-columns:25px 1fr}.cd-process>*:not(.cd-process-dot):not(.cd-process-name){grid-column:2}.cd-process .cd-assignee{display:block}.cd-cost-form{grid-template-columns:1fr 1fr}.cd-cost-form>*:nth-child(3){grid-column:1/-1}}
</style>
<div class="container-fluid complaint-detail">
 <header class="cd-header"><a class="cd-back" href="<?=site_url('komplain')?>"><i class="fa fa-arrow-left"></i>Kembali ke daftar komplain</a><div class="cd-head-row"><div><h1 class="cd-title"><?=html_escape($row['complaint_no'])?></h1><div class="cd-subtitle"><span><?=html_escape($row['customer'])?></span><span class="cd-dot"></span><span>Invoice <?=html_escape($row['id_transaksi'])?></span><span class="cd-dot"></span><span><?=date('d M Y',strtotime($row['complaint_date']))?></span></div></div><div class="cd-badges"><span class="cd-badge cd-badge-<?=$currentStatus[1]?>"><i class="fa <?=$currentStatus[2]?>"></i><?=$currentStatus[0]?></span><span class="cd-badge cd-badge-<?=isset($priorityMeta[$row['priority']])?$priorityMeta[$row['priority']]:'secondary'?>"><i class="fa fa-flag"></i><?=html_escape($row['priority'])?></span></div></div><div class="cd-stats"><div class="cd-stat"><small>Qty Order</small><strong><?=$formatQty($row['order_qty'])?></strong></div><div class="cd-stat"><small>Qty Bermasalah</small><strong><?=$formatQty($row['complaint_qty'])?></strong></div><div class="cd-stat"><small>Qty Rework</small><strong><?=$formatQty($row['rework_qty'])?></strong></div><div class="cd-stat"><small>Progress Rework</small><strong><?=$progress?>%</strong></div><div class="cd-stat"><small>Total Biaya</small><strong>Rp <?=number_format($totalCost,0,',','.')?></strong></div></div></header>
 <nav class="cd-nav"><a href="#complaintInfo" class="active"><i class="fa fa-info-circle mr-1"></i>Informasi</a><a href="#verification"><i class="fa fa-search mr-1"></i>Verifikasi</a><?php if(in_array($row['status'],['APPROVED','REWORK','QC'],true)):?><a href="#createRework"><i class="fa fa-plus-circle mr-1"></i>Buat Rework</a><?php endif;?><?php if($reworks):?><a href="#progress"><i class="fa fa-tasks mr-1"></i>Progress</a><a href="#cost"><i class="fa fa-money mr-1"></i>Biaya</a><?php endif;?><a href="#audit"><i class="fa fa-history mr-1"></i>Audit</a></nav>
 <div class="cd-layout"><main>
  <section id="complaintInfo" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-comments-o"></i></span><div><h5>Informasi Komplain</h5><small>Ringkasan laporan dan item yang bermasalah</small></div></div></div><div class="cd-card-body"><div class="cd-info-grid"><div class="cd-info"><small>Tanggal Komplain</small><b><?=date('d/m/Y',strtotime($row['complaint_date']))?></b></div><div class="cd-info"><small>Jenis Komplain</small><b><?=html_escape($row['complaint_type'])?></b></div><div class="cd-info"><small>Jumlah Item</small><b><?=count($items)?> item</b></div></div><div class="cd-copy"><div class="cd-copy-box"><small>Deskripsi masalah</small><?=nl2br(html_escape($row['description']))?></div><div class="cd-copy-box"><small>Permintaan pelanggan</small><?=nl2br(html_escape($row['customer_request']?:'-'))?></div></div><div class="mt-3"><b class="small">Item yang dikomplain</b><?php foreach($items as $item):?><div class="cd-item"><div><div class="cd-item-name"><?=html_escape($item['product_name'])?></div><div class="cd-item-note"><?=html_escape($item['issue_description']?:'Tidak ada catatan khusus untuk item ini.')?></div></div><div class="cd-item-qty"><small>Order</small><?=$formatQty($item['order_qty'])?></div><div class="cd-item-qty"><small>Bermasalah / Rework</small><?=$formatQty($item['complaint_qty'])?> / <?=$formatQty($item['rework_qty'])?></div></div><?php endforeach;?></div><?php if($files):?><div class="mt-4"><b class="small d-block mb-2">Bukti pendukung</b><div class="cd-evidence"><?php foreach($files as $file):$isImage=strpos($file['file_type'],'image/')===0;?><a class="cd-file" target="_blank" rel="noopener" href="<?=base_url($file['file_path'])?>"><span class="cd-file-preview"><?php if($isImage):?><img loading="lazy" src="<?=base_url($file['file_path'])?>" alt="Bukti komplain"><?php else:?><i class="fa fa-file-pdf-o"></i><?php endif;?></span><span class="cd-file-name"><i class="fa fa-paperclip mr-1"></i><?=html_escape($file['original_name'])?></span></a><?php endforeach;?></div></div><?php endif;?></div></section>
  <section id="verification" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-search"></i></span><div><h5>Verifikasi & Root Cause</h5><small>Tentukan keputusan, penyebab, dan penyelesaian</small></div></div></div><div class="cd-card-body"><form class="ajax-form" action="<?=site_url('komplain/decision/'.$row['id'])?>"><div class="cd-form-grid"><div class="cd-field"><label>Keputusan</label><select name="decision" class="form-control"><option>VERIFICATION</option><option>APPROVED</option><option>REJECTED</option></select></div><div class="cd-field"><label>Jenis penyelesaian</label><select name="resolution_type" class="form-control"><?php foreach(['REWORK_PARTIAL','REWORK_FULL','REFUND','DISCOUNT','OTHER'] as $option):?><option <?=$row['resolution_type']===$option?'selected':''?>><?=$option?></option><?php endforeach;?></select></div><div class="cd-field"><label>Department penyebab</label><select name="root_cause_department" class="form-control"><option value="">Belum ditentukan</option><?php foreach(['Customer','Sales / CS','Designer','Prepress','Printing','Finishing','Purchasing','Supplier','Delivery','Machine','Material','Unknown'] as $department):?><option <?=$row['root_cause_department']===$department?'selected':''?>><?=html_escape($department)?></option><?php endforeach;?></select></div><div class="cd-field"><label>Pelaku/PIC penyebab</label><select name="root_cause_user_id" class="form-control"><option value="">Belum ditentukan</option><?php foreach($users as $user):?><option value="<?=$user['id_user']?>" <?=$row['root_cause_user_id']==$user['id_user']?'selected':''?>><?=html_escape($user['nama_lengkap'])?></option><?php endforeach;?></select></div><div class="cd-field"><label>Kategori penyebab</label><input name="root_cause_category" value="<?=html_escape($row['root_cause_category'])?>" class="form-control" placeholder="Contoh: setting mesin"></div><div class="cd-field"><label>Catatan penyebab</label><input name="root_cause_note" value="<?=html_escape($row['root_cause_note'])?>" class="form-control" placeholder="Jelaskan akar masalah"></div><div class="cd-field cd-field-wide"><label>Catatan keputusan <span class="text-muted">(wajib jika ditolak)</span></label><textarea name="resolution_note" class="form-control" rows="3" placeholder="Jelaskan keputusan dan tindak lanjut..."><?=html_escape($row['resolution_note'])?></textarea></div></div><div class="cd-action"><button class="btn btn-primary"><i class="fa fa-save mr-1"></i>Simpan Keputusan</button></div></form></div></section>
  <?php if(in_array($row['status'],['APPROVED','REWORK','QC'],true)):?><section id="createRework" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-refresh"></i></span><div><h5>Buat Rework Baru</h5><small>Pilih item, qty, dan tahapan yang harus diulang</small></div></div></div><div class="cd-card-body"><form class="ajax-form" action="<?=site_url('komplain/rework/'.$row['id'])?>"><div class="cd-form-grid"><div class="cd-field"><label>Item rework</label><select name="detail_id" class="form-control"><?php foreach($items as $item):?><option value="<?=$item['transaction_detail_id']?>"><?=html_escape($item['product_name'])?> · sisa <?=$formatQty($item['complaint_qty']-$item['rework_qty'])?></option><?php endforeach;?></select></div><div class="cd-field"><label>Qty rework</label><input type="number" min=".01" step=".01" name="qty" class="form-control" required placeholder="Masukkan qty"></div></div><label class="small font-weight-bold d-block mt-3 mb-2">Tahapan yang akan dikerjakan ulang</label><div class="cd-process-picker"><?php foreach($processMap as $key=>$label):?><label class="cd-process-check"><input type="checkbox" name="process[]" value="<?=$key?>" <?=in_array($key,$lastSelectedProcesses,true)?'checked':''?>><span><?=html_escape($label)?></span></label><?php endforeach;?></div><div class="cd-action"><button class="btn btn-primary"><i class="fa fa-plus mr-1"></i>Buat Rework & SPK</button></div></form></div></section><?php endif;?>
  <?php if($reworks):?><section id="progress" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-tasks"></i></span><div><h5>Progress Rework</h5><small>Perbarui status, PIC, dan catatan setiap proses</small></div></div><span class="cd-badge cd-badge-primary"><?=$processDone?>/<?=$processTotal?> selesai</span></div><div class="cd-card-body"><?php foreach($reworks as $rework):$processRows=$reworkProcesses[$rework['id']];$activeCount=0;$doneCount=0;foreach($processRows as $process){if($process['status']!=='SKIPPED'){$activeCount++;if($process['status']==='DONE')$doneCount++;}}$reworkProgress=$activeCount?round($doneCount/$activeCount*100):0;?><div class="cd-rework"><div class="cd-rework-head"><div><div class="cd-rework-title"><?=html_escape($rework['rework_no'])?></div><div class="cd-rework-meta">SPK <?=html_escape($rework['rework_spk_no'])?> · Qty <?=$formatQty($rework['qty'])?> · <?=html_escape($rework['status'])?></div></div><div><div class="small text-right mb-1"><?=$reworkProgress?>%</div><div class="cd-progress"><span style="width:<?=$reworkProgress?>%"></span></div></div></div><div class="cd-process-list"><?php foreach($processRows as $process):?><form class="ajax-form cd-process" action="<?=site_url('komplain/process/'.$row['id'])?>"><input type="hidden" name="process_id" value="<?=$process['id']?>"><span class="cd-process-dot <?=html_escape($process['status'])?>"><i class="fa <?=$process['status']==='DONE'?'fa-check':($process['status']==='IN_PROGRESS'?'fa-play':'fa-circle')?>"></i></span><span class="cd-process-name"><?=html_escape($process['process_name'])?></span><select name="status" class="form-control form-control-sm"><?php foreach(['PENDING','IN_PROGRESS','DONE','SKIPPED','CANCELLED'] as $status):?><option <?=$process['status']===$status?'selected':''?>><?=$status?></option><?php endforeach;?></select><input name="notes" value="<?=html_escape($process['notes'])?>" class="form-control form-control-sm" placeholder="Catatan proses"><select name="assigned_to" class="form-control form-control-sm cd-assignee"><option value="">Belum ada PIC</option><?php foreach($users as $user):?><option value="<?=$user['id_user']?>" <?=$process['assigned_to']==$user['id_user']?'selected':''?>><?=html_escape($user['nama_lengkap'])?></option><?php endforeach;?></select><button class="btn btn-sm btn-outline-primary"><i class="fa fa-save"></i></button></form><?php endforeach;?></div></div><?php endforeach;?></div></section>
  <section id="cost" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-money"></i></span><div><h5>Biaya Rework</h5><small>Catat semua biaya kerugian secara terperinci</small></div></div><strong>Rp <?=number_format($totalCost,0,',','.')?></strong></div><div class="cd-card-body"><div class="cd-cost-list"><?php foreach($costs as $cost):?><div class="cd-cost-row"><div><b><?=html_escape($cost['cost_type'])?></b><div class="small text-muted"><?=html_escape($cost['description'])?> · <?=$formatQty($cost['qty'])?> <?=html_escape($cost['unit'])?> × Rp <?=number_format($cost['unit_cost'],0,',','.')?></div></div><b>Rp <?=number_format($cost['total_cost'],0,',','.')?></b></div><?php endforeach;?><?php if(!$costs):?><div class="cd-empty">Belum ada biaya rework yang dicatat.</div><?php endif;?></div><div class="cd-cost-total"><span>Total Rework</span><span>Rp <?=number_format($totalCost,0,',','.')?></span></div></div></section><?php endif;?>
 </main><aside class="cd-side"><section class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-check-circle-o"></i></span><div><h5>Resolution</h5><small>Keputusan penyelesaian</small></div></div></div><div class="cd-card-body"><div class="cd-resolution-type"><?=html_escape($row['resolution_type']?:'Belum ditentukan')?></div><div class="mt-2 text-muted"><?=nl2br(html_escape($row['resolution_note']?:'Belum ada catatan keputusan.'))?></div><div class="cd-approval"><span class="cd-avatar"><i class="fa fa-user"></i></span><div><small class="text-muted">Disetujui oleh</small><div><?=html_escape($row['approved_name']?:'-')?></div><?php if($row['approved_at']):?><small class="text-muted"><?=date('d/m/Y H:i',strtotime($row['approved_at']))?></small><?php endif;?></div></div></div></section>
  <section id="audit" class="cd-card"><div class="cd-card-head"><div class="cd-card-title"><span class="cd-card-icon"><i class="fa fa-history"></i></span><div><h5>Timeline Audit</h5><small><?=count($logs)?> aktivitas tercatat</small></div></div></div><div class="cd-card-body"><div class="cd-timeline"><?php foreach($logs as $log):?><article class="cd-log"><div class="cd-log-title"><?=html_escape(str_replace('_',' ',$log['action']))?></div><?php if($log['old_status']||$log['new_status']):?><span class="cd-log-status"><?=html_escape($log['old_status']?:'-')?> → <?=html_escape($log['new_status']?:'-')?></span><?php endif;?><div class="cd-log-desc"><?=nl2br(html_escape($log['description']))?></div><div class="cd-log-time"><?=date('d/m/Y H:i',strtotime($log['created_at']))?> · <?=html_escape($log['nama_lengkap']?:'Sistem')?></div></article><?php endforeach;?><?php if(!$logs):?><div class="cd-empty">Belum ada aktivitas.</div><?php endif;?></div></div></section></aside></div>
</div>
<div class="modal fade cd-lightbox" id="complaintImageModal" tabindex="-1" role="dialog" aria-labelledby="complaintImageTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="cd-lightbox-head"><div><div class="cd-lightbox-kicker">Bukti Komplain</div><div id="complaintImageTitle" class="cd-lightbox-title">Preview gambar</div></div><div class="cd-lightbox-tools"><button type="button" data-image-action="zoom-out" title="Perkecil" aria-label="Perkecil"><i class="fa fa-search-minus"></i></button><button type="button" data-image-action="zoom-reset" title="Ukuran normal" aria-label="Ukuran normal"><span id="complaintImageZoom">100%</span></button><button type="button" data-image-action="zoom-in" title="Perbesar" aria-label="Perbesar"><i class="fa fa-search-plus"></i></button><button type="button" data-image-action="rotate" title="Putar" aria-label="Putar gambar"><i class="fa fa-rotate-right"></i></button><a id="complaintImageDownload" href="#" download title="Unduh" aria-label="Unduh gambar"><i class="fa fa-download"></i></a><button type="button" data-dismiss="modal" title="Tutup" aria-label="Tutup"><i class="fa fa-times"></i></button></div></div><div id="complaintImageStage" class="cd-lightbox-stage"><button type="button" class="cd-lightbox-nav cd-lightbox-prev" data-image-action="prev" aria-label="Gambar sebelumnya"><i class="fa fa-chevron-left"></i></button><div class="cd-lightbox-canvas"><img id="complaintImageFull" src="" alt="Bukti komplain"></div><button type="button" class="cd-lightbox-nav cd-lightbox-next" data-image-action="next" aria-label="Gambar berikutnya"><i class="fa fa-chevron-right"></i></button></div><div class="cd-lightbox-foot"><span id="complaintImageCounter">1 / 1</span><span>Gunakan roda mouse untuk zoom · panah keyboard untuk navigasi · ESC untuk menutup</span></div></div></div></div>
<style>.cd-file:has(img){cursor:zoom-in}.cd-lightbox .modal-dialog{max-width:min(1180px,calc(100vw - 28px))}.cd-lightbox .modal-content{border:0;border-radius:17px;overflow:hidden;background:#111827;box-shadow:0 30px 90px rgba(0,0,0,.5)}.cd-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 15px;background:#fff}.cd-lightbox-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#64748b}.cd-lightbox-title{font-weight:700;color:#172033;max-width:480px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-lightbox-tools{display:flex;gap:5px}.cd-lightbox-tools button,.cd-lightbox-tools a{display:grid;place-items:center;min-width:35px;height:35px;border:1px solid #dfe4ec;border-radius:8px;background:#fff;color:#526078;padding:0 9px;text-decoration:none}.cd-lightbox-tools button:hover,.cd-lightbox-tools a:hover{background:#eef3ff;border-color:#b8c7f0;color:#3154b6}.cd-lightbox-tools span{font-size:11px;font-weight:700}.cd-lightbox-stage{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 54px;align-items:center;min-height:520px;max-height:calc(100vh - 185px);background:radial-gradient(circle at center,#263244,#111827);overflow:hidden}.cd-lightbox-canvas{height:100%;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:22px}.cd-lightbox-canvas img{display:block;max-width:100%;max-height:calc(100vh - 235px);object-fit:contain;transform-origin:center;transition:transform .16s ease;user-select:none}.cd-lightbox-nav{position:relative;z-index:2;width:40px;height:52px;margin:auto;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:18px}.cd-lightbox-nav:hover{background:rgba(255,255,255,.25)}.cd-lightbox-nav:disabled{opacity:.25;cursor:default}.cd-lightbox-foot{display:flex;justify-content:space-between;gap:12px;padding:9px 15px;background:#0b1220;color:#aab4c4;font-size:11px}.cd-lightbox-foot span:first-child{color:#fff;font-weight:700}@media(max-width:700px){.cd-lightbox .modal-dialog{margin:7px;max-width:none}.cd-lightbox-head{align-items:flex-start}.cd-lightbox-title{max-width:180px}.cd-lightbox-tools{flex-wrap:wrap;justify-content:flex-end}.cd-lightbox-stage{grid-template-columns:40px minmax(0,1fr) 40px;min-height:390px}.cd-lightbox-canvas{min-height:390px;padding:8px}.cd-lightbox-foot span:last-child{display:none}}</style>
<script>(function(){var imageLinks=$('.cd-file').filter(function(){return $(this).find('img').length>0}),imageIndex=0,imageZoom=1,imageRotation=0;function renderImage(index){if(!imageLinks.length)return;imageIndex=(index+imageLinks.length)%imageLinks.length;var link=imageLinks.eq(imageIndex),src=link.attr('href'),name=$.trim(link.find('.cd-file-name').text());imageZoom=1;imageRotation=0;$('#complaintImageFull').attr('src',src).attr('alt',name||'Bukti komplain').css('transform','scale(1) rotate(0deg)');$('#complaintImageTitle').text(name||'Bukti komplain');$('#complaintImageDownload').attr('href',src);$('#complaintImageCounter').text((imageIndex+1)+' / '+imageLinks.length);$('#complaintImageZoom').text('100%');$('.cd-lightbox-nav').prop('disabled',imageLinks.length<2)}function transformImage(){imageZoom=Math.max(.25,Math.min(4,imageZoom));$('#complaintImageFull').css('transform','scale('+imageZoom+') rotate('+imageRotation+'deg)');$('#complaintImageZoom').text(Math.round(imageZoom*100)+'%')}imageLinks.on('click',function(e){e.preventDefault();renderImage(imageLinks.index(this));$('#complaintImageModal').modal('show')});$('[data-image-action]').on('click',function(){var action=$(this).data('image-action');if(action==='prev')renderImage(imageIndex-1);else if(action==='next')renderImage(imageIndex+1);else if(action==='zoom-in'){imageZoom+=.25;transformImage()}else if(action==='zoom-out'){imageZoom-=.25;transformImage()}else if(action==='zoom-reset'){imageZoom=1;imageRotation=0;transformImage()}else if(action==='rotate'){imageRotation=(imageRotation+90)%360;transformImage()}});$('#complaintImageStage').on('wheel',function(e){e.preventDefault();imageZoom+=e.originalEvent.deltaY<0?.15:-.15;transformImage()});$(document).on('keydown.complaintImage',function(e){if(!$('#complaintImageModal').hasClass('show'))return;if(e.key==='ArrowLeft')renderImage(imageIndex-1);if(e.key==='ArrowRight')renderImage(imageIndex+1);if(e.key==='+'||e.key==='='){imageZoom+=.25;transformImage()}if(e.key==='-'){imageZoom-=.25;transformImage()}});$('#complaintImageModal').on('hidden.bs.modal',function(){$('#complaintImageFull').attr('src','')});$('.ajax-form').on('submit',function(e){e.preventDefault();var form=$(this),button=form.find('button[type="submit"],button:not([type])').last().prop('disabled',true),original=button.html();button.html('<i class="fa fa-spinner fa-spin mr-1"></i>Menyimpan');$.post(form.attr('action'),form.serialize()).done(function(response){showNotif('bottom-right','Komplain',response.msg,'success');setTimeout(function(){location.reload()},450)}).fail(function(xhr){showNotif('bottom-right','Komplain',(xhr.responseJSON&&xhr.responseJSON.msg)||'Operasi gagal.','error')}).always(function(){button.prop('disabled',false).html(original)})});$('.cd-nav a').on('click',function(){$('.cd-nav a').removeClass('active');$(this).addClass('active')});})();</script>
<script>(function(){var savedDecision=<?=json_encode($row['status'])?>,decisionField=$('select[name="decision"]');if(!decisionField.length)return;var savedOption=decisionField.find('option').filter(function(){return this.value===savedDecision});if(savedOption.length){decisionField.val(savedDecision)}else{decisionField.prepend($('<option>').val(savedDecision).text(savedDecision).prop({selected:true,disabled:true}))}})();</script>
