@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 ke pelanggan</p>
    </div>
    <div class="d-flex gap-2">
        <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>
</div>

{{-- QC Stats --}}
<div class="row g-3 mb-4">
    @php
    $qcStats = [
        ['label'=>'Inspeksi Hari Ini',  'val'=>$stats['today']  ?? 12, 'icon'=>'bi-clipboard-check','color'=>'#1B4FD8','bg'=>'#EEF3FF'],
        ['label'=>'Lulus QC',           'val'=>$stats['pass']   ?? 10, 'icon'=>'bi-check-circle-fill','color'=>'#059669','bg'=>'#D1FAE5'],
        ['label'=>'Reject / Rework',    'val'=>$stats['reject'] ?? 2,  'icon'=>'bi-x-circle-fill',  'color'=>'#DC2626','bg'=>'#FEE2E2'],
        ['label'=>'Defect Rate',        'val'=>($stats['defect_rate'] ?? 3.2).'%','icon'=>'bi-percent','color'=>'#D97706','bg'=>'#FEF3C7'],
    ];
    @endphp
    @foreach($qcStats 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>

{{-- Chart Defect --}}
<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 Terakhir</h6>
            </div>
            <div class="pf-card-body">
                <div id="chartDefect" style="height:220px"></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="chartJenisDefect" style="height:220px"></div>
            </div>
        </div>
    </div>
</div>

{{-- QC History Table --}}
<div class="pf-card">
    <div class="pf-card-header">
        <h6 class="pf-card-title"><i class="bi bi-table"></i> Riwayat Inspeksi QC</h6>
    </div>
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tblQC">
                <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
                        $defectRate = $qc->oplah_check > 0 ? round($qc->oplah_reject / $qc->oplah_check * 100, 1) : 0;
                        $statusCls  = $qc->status === 'pass' ? 'pf-status-selesai' : ($qc->status === 'rework' ? 'pf-status-pending' : 'pf-status-batal');
                        $statusLbl  = ['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 fw-500">{{ $qc->jobOrder?->no_jo }}</a></td>
                        <td style="max-width:160px;font-size:13px">{{ $qc->jobOrder?->nama_pekerjaan }}</td>
                        <td>{{ $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:{{ $defectRate > 5 ? '#DC2626' : ($defectRate > 2 ? '#D97706' : '#059669') }}">
                                {{ $defectRate }}%
                            </span>
                        </td>
                        <td>
                            @if($qc->jenis_reject)
                                @foreach(explode(',', $qc->jenis_reject) as $j)
                                    <span style="background:var(--pf-bg);font-size:10.5px;padding:1px 6px;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 {{ $statusCls }}">{{ $statusLbl }}</span></td>
                        <td>
                            <div class="d-flex gap-1">
                                <button class="btn btn-xs btn-outline-secondary" onclick="detailQC({{ $qc->id }})"><i class="bi bi-eye"></i></button>
                                @if($qc->status === 'rework')
                                    <button class="btn btn-xs btn-outline-success" onclick="updateQC({{ $qc->id }}, 'pass')"><i class="bi bi-check2"></i></button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===== MODAL INSPEKSI QC ===== --}}
<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">
                <form id="formQC">
                    @csrf
                    <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" name="jo_id" required onchange="loadJODetail(this.value)">
                                <option value="">— Pilih Job Order —</option>
                                @foreach($jobOrdersReady ?? [] as $jo)
                                    <option value="{{ $jo->id }}">{{ $jo->no_jo }} — {{ $jo->nama_pekerjaan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Tanggal Inspeksi</label>
                            <input type="date" class="form-control" name="tgl_check" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Inspector</label>
                            <select class="form-select" name="inspector_id">
                                @foreach($inspectors ?? [] as $ins)
                                    <option value="{{ $ins->id }}" {{ $ins->id === auth()->id() ? 'selected' : '' }}>{{ $ins->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Info JO --}}
                        <div class="col-12" id="infoJOPanel" style="display:none">
                            <div class="alert alert-info p-3" style="font-size:13px">
                                <div class="row g-2">
                                    <div class="col-auto"><strong>Target Oplah:</strong> <span id="infoOplah" class="font-mono">-</span></div>
                                    <div class="col-auto"><strong>OK Sekarang:</strong> <span id="infoOK" class="font-mono text-success">-</span></div>
                                    <div class="col-auto"><strong>Reject:</strong> <span id="infoReject" class="font-mono text-danger">-</span></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">Jumlah Diperiksa <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control font-mono" name="oplah_check" id="qcCheck" min="1" required oninput="hitungQC()">
                                <span class="input-group-text">lbr</span>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Lulus QC</label>
                            <div class="input-group">
                                <input type="number" class="form-control font-mono" name="oplah_ok" id="qcOK" min="0" oninput="hitungQC()">
                                <span class="input-group-text">lbr</span>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Reject / Rework</label>
                            <div class="input-group">
                                <input type="number" class="form-control font-mono text-danger" name="oplah_reject" id="qcReject" min="0" readonly>
                                <span class="input-group-text">lbr</span>
                            </div>
                        </div>

                        {{-- Defect Rate Indicator --}}
                        <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="qcDefectRate" 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="qcDefectBar" style="height:100%;width:0%;background:#059669;transition:all .3s;border-radius:4px"></div>
                            </div>
                        </div>

                        {{-- Jenis Defect --}}
                        <div class="col-12">
                            <label class="form-label">Jenis Defect (centang semua yang ditemukan)</label>
                            <div class="row g-2">
                                @php
                                $defects = ['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'];
                                @endphp
                                @foreach($defects as $d)
                                <div class="col-6 col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="jenis_reject[]" value="{{ $d }}" id="defect-{{ $loop->index }}">
                                        <label class="form-check-label" for="defect-{{ $loop->index }}" style="font-size:13px">{{ $d }}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Status QC --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label">Status Hasil Inspeksi <span class="text-danger">*</span></label>
                            <select class="form-select" name="status" id="qcStatus" required>
                                <option value="pass">✅ Lulus — Siap Kirim</option>
                                <option value="rework">🔄 Rework — Perlu Perbaikan</option>
                                <option value="fail">❌ Ditolak — Harus Cetak Ulang</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Catatan Inspeksi</label>
                            <textarea class="form-control" name="catatan" rows="2" placeholder="Detail temuan, rekomendasi perbaikan, dll."></textarea>
                        </div>
                    </div>
                </form>
            </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 Hasil Inspeksi
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';

// Chart Defect Rate
Highcharts.chart('chartDefect', {
    chart: { type: 'areaspline', backgroundColor: 'transparent', animation: { duration: 500 } },
    title: { text: null }, credits: { enabled: false },
    xAxis: { categories: {!! json_encode($defectTrend['labels'] ?? collect(range(29,0))->map(fn($i) => now()->subDays($i)->format('d/m'))->values()) !!}, tickInterval: 5 },
    yAxis: { title: { text: null }, labels: { format: '{value}%' }, min: 0 },
    plotOptions: { areaspline: { fillOpacity: 0.15, marker: { enabled: false } } },
    tooltip: { valueSuffix: '%' },
    series: [{
        name: 'Defect Rate',
        color: '#DC2626',
        fillColor: { linearGradient: { x1:0,y1:0,x2:0,y2:1 }, stops: [[0,'rgba(220,38,38,.2)'],[1,'rgba(220,38,38,0)']] },
        data: {!! json_encode($defectTrend['data'] ?? array_map(fn($i) => round(rand(10,80)/10, 1), range(1,30))) !!},
        zones: [{ value: 2, color: '#059669' }, { value: 5, color: '#D97706' }, { color: '#DC2626' }]
    }]
});

// Chart Jenis Defect
Highcharts.chart('chartJenisDefect', {
    chart: { type: 'pie', backgroundColor: 'transparent' },
    title: { text: null }, credits: { enabled: false },
    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 Tidak Sesuai', y: 28, color: '#DC2626' },
        { name: 'Bercak / Noda',      y: 22, color: '#D97706' },
        { name: 'Register Tidak Pas', y: 18, color: '#1B4FD8' },
        { name: 'Kertas Kusut',       y: 15, color: '#7C3AED' },
        { name: 'Lainnya',            y: 17, color: '#6B7280' },
    ]}]
});

// Hitung QC realtime
function hitungQC() {
    const check  = parseInt(document.getElementById('qcCheck').value) || 0;
    const ok     = parseInt(document.getElementById('qcOK').value) || 0;
    const reject = Math.max(0, check - ok);
    document.getElementById('qcReject').value = reject;

    const rate = check > 0 ? ((reject / check) * 100).toFixed(1) : 0;
    const bar  = document.getElementById('qcDefectBar');
    const lbl  = document.getElementById('qcDefectRate');
    bar.style.width = Math.min(rate, 100) + '%';
    bar.style.background = rate > 5 ? '#DC2626' : rate > 2 ? '#D97706' : '#059669';
    lbl.textContent = rate + '%';
    lbl.style.color = rate > 5 ? '#DC2626' : rate > 2 ? '#D97706' : '#059669';

    // Auto-set status
    if (rate > 10) document.getElementById('qcStatus').value = 'fail';
    else if (rate > 5) document.getElementById('qcStatus').value = 'rework';
    else document.getElementById('qcStatus').value = 'pass';
}

function loadJODetail(joId) {
    if (!joId) { document.getElementById('infoJOPanel').style.display = 'none'; return; }
    fetch(`/job-orders/${joId}`, { headers: { Accept: 'application/json' } })
        .then(r => r.json())
        .then(jo => {
            document.getElementById('infoOplah').textContent  = jo.oplah_target?.toLocaleString('id-ID') || '-';
            document.getElementById('infoOK').textContent     = jo.oplah_ok?.toLocaleString('id-ID') || '0';
            document.getElementById('infoReject').textContent = jo.oplah_reject?.toLocaleString('id-ID') || '0';
            document.getElementById('qcCheck').value = jo.oplah_target - jo.oplah_ok;
            document.getElementById('infoJOPanel').style.display = 'block';
        });
}

function submitQC() {
    const joId = document.getElementById('qcJO').value;
    if (!joId) { PF.error('Pilih Job Order terlebih dahulu'); return; }

    const form = document.getElementById('formQC');
    const data = Object.fromEntries(new FormData(form));

    // Handle multiple checkboxes
    const defects = [...form.querySelectorAll('[name="jenis_reject[]"]:checked')].map(c => c.value);
    data.jenis_reject = defects.join(',');

    PF.loading('Menyimpan hasil inspeksi...');
    fetch('/qc', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(d => {
        PF.closeLoading();
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalQC')).hide();
            PF.success('Hasil inspeksi berhasil disimpan');
            setTimeout(() => location.reload(), 1200);
        } else { PF.error(d.message || 'Gagal'); }
    })
    .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}

$(document).ready(() => { $('#tblQC').DataTable({ pageLength: 25, order: [[2,'desc']] }); });
</script>
@endpush