@extends('layouts.app')
@section('title','Quality Control')
@section('breadcrumb')<span>Produksi</span><i class="bi bi-chevron-right"></i><span>Quality Control</span>@endsection

@section('content')
<div class="pf-page-header">
    <div><h1 class="pf-page-title"><i class="bi bi-patch-check-fill me-2 text-primary-pf"></i>Quality Control</h1><p class="pf-page-subtitle">Inspeksi kualitas hasil cetak sebelum pengiriman</p></div>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalQC"><i class="bi bi-clipboard-check-fill"></i> Mulai Inspeksi</button>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @foreach([['label'=>'Inspeksi Hari Ini','val'=>$stats['today']??0,'color'=>'#1B4FD8','bg'=>'#EEF3FF','icon'=>'bi-clipboard-check'],['label'=>'Lulus QC','val'=>$stats['pass']??0,'color'=>'#059669','bg'=>'#D1FAE5','icon'=>'bi-check-circle-fill'],['label'=>'Reject / Rework','val'=>$stats['reject']??0,'color'=>'#DC2626','bg'=>'#FEE2E2','icon'=>'bi-x-circle-fill'],['label'=>'Defect Rate','val'=>round($stats['defect_rate']??0,1).'%','color'=>'#D97706','bg'=>'#FEF3C7','icon'=>'bi-percent']] as $s)
    <div class="col-6 col-md-3"><div class="pf-stat-card" style="--pf-stat-color:{{ $s['color'] }};--pf-stat-bg:{{ $s['bg'] }}"><div class="pf-stat-icon"><i class="{{ $s['icon'] }}"></i></div><div class="pf-stat-body"><div class="pf-stat-label">{{ $s['label'] }}</div><div class="pf-stat-value" style="font-size:22px">{{ $s['val'] }}</div></div></div></div>
    @endforeach
</div>

{{-- Charts --}}
<div class="row g-3 mb-4">
    <div class="col-12 col-md-7"><div class="pf-card h-100"><div class="pf-card-header"><h6 class="pf-card-title"><i class="bi bi-bar-chart"></i> Defect Rate 30 Hari</h6></div><div class="pf-card-body"><div id="chartDefect" style="height:200px"></div></div></div></div>
    <div class="col-12 col-md-5"><div class="pf-card h-100"><div class="pf-card-header"><h6 class="pf-card-title"><i class="bi bi-pie-chart-fill"></i> Jenis Defect</h6></div><div class="pf-card-body"><div id="chartJenis" style="height:200px"></div></div></div></div>
</div>

{{-- Table --}}
<div class="pf-card">
    <div class="pf-card-body p-0">
        <table class="table table-hover mb-0" id="tblQC" style="width:100%">
            <thead><tr><th>Job Order</th><th>Pekerjaan</th><th>Tgl Inspeksi</th><th>Inspector</th><th>Diperiksa</th><th>Lulus</th><th>Reject</th><th>Defect Rate</th><th>Jenis Defect</th><th>Status</th><th>Aksi</th></tr></thead>
            <tbody>
                @foreach($qcChecks as $qc)
                @php $dr=$qc->oplah_check>0?round($qc->oplah_reject/$qc->oplah_check*100,1):0; $sCls=['pass'=>'pf-status-selesai','rework'=>'pf-status-pending','fail'=>'pf-status-batal'][$qc->status]??'pf-status-draft'; $sLbl=['pass'=>'Lulus','rework'=>'Rework','fail'=>'Ditolak'][$qc->status]??'-'; @endphp
                <tr>
                    <td><a href="{{ route('job-orders.show',$qc->jo_id) }}" class="font-mono text-primary" style="font-size:12px">{{ $qc->jobOrder?->no_jo??'-' }}</a></td>
                    <td style="font-size:12.5px;max-width:140px">{{ Str::limit($qc->jobOrder?->nama_pekerjaan??'-',35) }}</td>
                    <td style="font-size:12.5px">{{ $qc->tgl_check?->format('d/m/Y') }}</td>
                    <td style="font-size:12.5px">{{ $qc->inspector?->name??'-' }}</td>
                    <td class="font-mono">{{ number_format($qc->oplah_check) }}</td>
                    <td class="font-mono text-success fw-600">{{ number_format($qc->oplah_ok) }}</td>
                    <td class="font-mono text-danger">{{ number_format($qc->oplah_reject) }}</td>
                    <td><span style="font-weight:600;color:{{ $dr>5?'#DC2626':($dr>2?'#D97706':'#059669') }}">{{ $dr }}%</span></td>
                    <td style="max-width:120px">@if($qc->jenis_reject) @foreach(explode(',',$qc->jenis_reject) as $j) <span style="background:var(--pf-bg);font-size:10px;padding:1px 5px;border-radius:4px;margin-right:2px">{{ trim($j) }}</span> @endforeach @else <span class="text-muted" style="font-size:12px">-</span> @endif</td>
                    <td><span class="pf-status {{ $sCls }}">{{ $sLbl }}</span></td>
                    <td><button class="btn btn-xs btn-outline-secondary" onclick="detailQC({{ $qc->id }})"><i class="bi bi-eye"></i></button></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="mt-3">{{ $qcChecks->links() }}</div>

{{-- Modal Inspeksi --}}
<div class="modal fade" id="modalQC" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius:var(--pf-radius-lg);border:1px solid var(--pf-border)">
            <div class="modal-header" style="border-bottom:1px solid var(--pf-border)"><h5 class="modal-title"><i class="bi bi-clipboard-check-fill me-2 text-primary"></i>Form Inspeksi QC</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12 col-md-6"><label class="form-label">Job Order <span class="text-danger">*</span></label>
                        <select class="form-select" id="qcJO" required onchange="loadJO(this.value)">
                            <option value="">— Pilih JO —</option>
                            @foreach($jobOrdersReady??[] as $jo)<option value="{{ $jo->id }}">{{ $jo->no_jo }} — {{ Str::limit($jo->nama_pekerjaan,40) }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-md-3"><label class="form-label">Tgl Inspeksi</label><input type="date" class="form-control" id="qcTgl" value="{{ date('Y-m-d') }}"></div>
                    <div class="col-md-3"><label class="form-label">Inspector</label>
                        <select class="form-select" id="qcInspector">
                            @foreach($inspectors??[] as $u)<option value="{{ $u->id }}" {{ $u->id===auth()->id()?'selected':'' }}>{{ $u->name }}</option>@endforeach
                        </select>
                    </div>
                    <div id="infoJO" class="col-12" style="display:none"><div class="alert alert-info p-2 mb-0" style="font-size:12.5px"><span id="infoText"></span></div></div>
                    <div class="col-4"><label class="form-label">Diperiksa <span class="text-danger">*</span></label><div class="input-group"><input type="number" class="form-control font-mono" id="qcCheck" min="1" required oninput="hitungQC()"><span class="input-group-text">lbr</span></div></div>
                    <div class="col-4"><label class="form-label">Lulus QC</label><div class="input-group"><input type="number" class="form-control font-mono" id="qcOK" min="0" oninput="hitungQC()"><span class="input-group-text">lbr</span></div></div>
                    <div class="col-4"><label class="form-label">Reject</label><div class="input-group"><input type="number" class="form-control font-mono text-danger" id="qcReject" readonly><span class="input-group-text">lbr</span></div></div>
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-1"><label class="form-label mb-0">Defect Rate</label><span id="qcDR" class="font-mono fw-600" style="font-size:15px">0%</span></div>
                        <div style="height:8px;background:var(--pf-border);border-radius:4px;overflow:hidden"><div id="qcDRBar" style="height:100%;width:0%;background:#059669;transition:.3s;border-radius:4px"></div></div>
                    </div>
                    <div class="col-12"><label class="form-label">Jenis Defect</label>
                        <div class="row g-2">
                            @foreach(['Warna Tidak Sesuai','Bercak/Noda','Register Tidak Pas','Kertas Kusut','Sobek/Berlubang','Teks Blur','Laminasi Mengelupas','Potong Tidak Lurus','Lipat Tidak Rapi','Jilid Lepas','Lainnya'] as $d)
                            <div class="col-6 col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" name="defect[]" value="{{ $d }}" id="d{{ $loop->index }}"><label class="form-check-label" for="d{{ $loop->index }}" style="font-size:13px">{{ $d }}</label></div></div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-6"><label class="form-label">Status <span class="text-danger">*</span></label><select class="form-select" id="qcStatus"><option value="pass">✅ Lulus — Siap Kirim</option><option value="rework">🔄 Rework — Perlu Perbaikan</option><option value="fail">❌ Ditolak — Cetak Ulang</option></select></div>
                    <div class="col-12"><label class="form-label">Catatan</label><textarea class="form-control" id="qcCatatan" rows="2"></textarea></div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--pf-border)"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button><button type="button" class="btn btn-primary" onclick="submitQC()"><i class="bi bi-clipboard-check-fill"></i> Simpan Inspeksi</button></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(()=>$('#tblQC').DataTable({pageLength:25,order:[[2,'desc']]}));
const isDark=document.documentElement.getAttribute('data-bs-theme')==='dark';
const pf={chart:{backgroundColor:'transparent'},title:{text:null},credits:{enabled:false}};
Highcharts.chart('chartDefect',Highcharts.merge(pf,{chart:{type:'areaspline'},xAxis:{categories:{!! json_encode($defectTrend['labels']??[]) !!},tickInterval:5,labels:{style:{color:isDark?'#9CA3AF':'#6B7280'}}},yAxis:{title:{text:null},labels:{format:'{value}%',style:{color:isDark?'#9CA3AF':'#6B7280'}}},tooltip:{valueSuffix:'%'},series:[{name:'Defect Rate',color:'#DC2626',fillColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,'rgba(220,38,38,.15)'],[1,'rgba(220,38,38,0)']]},data:{!! json_encode($defectTrend['data']??[]) !!},marker:{enabled:false}}]}));
Highcharts.chart('chartJenis',Highcharts.merge(pf,{chart:{type:'pie'},plotOptions:{pie:{innerSize:'55%',borderWidth:0,dataLabels:{enabled:true,format:'{point.name}: {point.percentage:.0f}%',style:{fontSize:'11px',fontWeight:'400'}}}},series:[{colorByPoint:true,data:[{name:'Warna',y:28,color:'#DC2626'},{name:'Noda',y:22,color:'#D97706'},{name:'Register',y:18,color:'#1B4FD8'},{name:'Lainnya',y:32,color:'#6B7280'}]}]}));
function loadJO(id){if(!id){document.getElementById('infoJO').style.display='none';return;}fetch(`/job-orders/${id}`,{headers:{Accept:'application/json'}}).then(r=>r.json()).then(jo=>{document.getElementById('infoText').textContent=`Target: ${jo.oplah_target?.toLocaleString('id-ID')} lbr | OK: ${jo.oplah_ok?.toLocaleString('id-ID')} | Reject: ${jo.oplah_reject?.toLocaleString('id-ID')}`;document.getElementById('qcCheck').value=jo.oplah_target-jo.oplah_ok;document.getElementById('infoJO').style.display='block';}).catch(()=>{});}
function hitungQC(){const c=parseInt(document.getElementById('qcCheck').value)||0,ok=parseInt(document.getElementById('qcOK').value)||0,rej=Math.max(0,c-ok);document.getElementById('qcReject').value=rej;const r=c>0?(rej/c*100).toFixed(1):0;document.getElementById('qcDRBar').style.width=Math.min(r,100)+'%';document.getElementById('qcDRBar').style.background=r>5?'#DC2626':r>2?'#D97706':'#059669';document.getElementById('qcDR').textContent=r+'%';document.getElementById('qcDR').style.color=r>5?'#DC2626':r>2?'#D97706':'#059669';document.getElementById('qcStatus').value=r>10?'fail':r>5?'rework':'pass';}
function submitQC(){const joId=document.getElementById('qcJO').value;if(!joId){PF.error('Pilih Job Order');return;}const defects=[...document.querySelectorAll('[name="defect[]"]:checked')].map(c=>c.value);PF.loading('Menyimpan...');fetch('/qc',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},body:JSON.stringify({jo_id:joId,tgl_check:document.getElementById('qcTgl').value,inspector_id:document.getElementById('qcInspector').value,oplah_check:document.getElementById('qcCheck').value,oplah_ok:document.getElementById('qcOK').value,status:document.getElementById('qcStatus').value,jenis_reject:defects.join(','),catatan:document.getElementById('qcCatatan').value})}).then(r=>r.json()).then(d=>{PF.closeLoading();if(d.success){bootstrap.Modal.getInstance(document.getElementById('modalQC')).hide();PF.success('Inspeksi disimpan');setTimeout(()=>location.reload(),1000);}else PF.error(d.message||'Gagal');}).catch(()=>{PF.closeLoading();PF.error('Koneksi gagal');});}
</script>
@endpush