@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Detail'])

{{-- Top Action Card (Persis seperti troutp/add.blade.php) --}}
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4 align-items-center justify-content-between">
            {{-- Kolom Kiri: Tombol Aksi --}}
            <div class="col-lg-auto d-flex justify-content-start gap-2 flex-wrap">
                <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                    <i class="fas fa-arrow-rotate-left me-1"></i>
                    <span class="font-weight-bold"> Kembali</span>
                </a>

                @if (!in_array($qc->status, ['approved', 'rejected']) && ($authorize->edit ?? '1') == '1')
                    <a href="{{ url($url_menu . '/edit/' . encrypt($qc->id)) }}" class="btn btn-warning mb-0">
                        <i class="fas fa-edit me-1"></i>
                        <span class="font-weight-bold"> Edit</span>
                    </a>
                @endif

                @if ($qc->status === 'approved')
                    <button type="button" class="btn btn-warning mb-0" data-bs-toggle="modal" data-bs-target="#modalUnapprove">
                        <i class="fas fa-undo me-1"></i>
                        <span class="font-weight-bold"> Unapprove</span>
                    </button>
                @endif
            </div>

            {{-- Kolom Kanan: Status & Alert --}}
            <div class="col-lg-auto d-flex align-items-center gap-2">
                @if (!empty($qc->note_reject))
                    <button type="button" class="btn btn-outline-danger btn-sm mb-0 px-3 py-1 d-flex align-items-center gap-2 shadow-xs"
                        data-bs-toggle="modal" data-bs-target="#modalInfoReject"
                        title="Klik untuk melihat catatan revisi/reject"
                        style="border-radius: 20px; font-weight: 700; font-size: 0.82rem; background-color: #fff5f5; border: 1.5px solid #ea0606;">
                        <i class="fas fa-circle-info text-danger fa-bounce" style="--fa-animation-duration: 2.5s; font-size: 1rem;"></i>
                        <span class="text-danger font-weight-bolder">Catatan Revisi</span>
                    </button>
                @endif

                @if ($qc->status === 'draft')
                    <span class="badge bg-secondary">Draft</span>
                @elseif ($qc->status === 'pending')
                    <span class="badge text-white" style="background-color: #fb6340;">Pending</span>
                @elseif ($qc->status === 'approved')
                    <span class="badge bg-success">Approved</span>
                @elseif ($qc->status === 'rejected')
                    <span class="badge bg-danger">Rejected</span>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            {{-- CARD HEADER: Persis format troutp/add.blade.php --}}
            <div class="card shadow-lg mb-4">
                <div class="card-header pb-2">
                    <h5 class="mb-0">Test Product Outsource: {{ $qc->material_code ?: '-' }}</h5>
                </div>

                <hr class="horizontal dark mt-0">
                @include('components.alert')

                <div class="card-body pt-0">
                    {{-- NAV TABS: Header & Detail Tambahan --}}
                    <ul class="nav nav-tabs mb-4 border-bottom" id="tabHeaderOutsource" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active font-weight-bold" id="tab-header-btn" data-bs-toggle="tab" data-bs-target="#tab-header" data-toggle="tab" data-target="#tab-header" type="button" role="tab" aria-controls="tab-header" aria-selected="true" style="font-size: 0.9rem; border-radius: 8px 8px 0 0;">
                                <i class="fas fa-file-lines me-1 text-primary"></i> Header
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link font-weight-bold text-secondary" id="tab-detail-tambahan-btn" data-bs-toggle="tab" data-bs-target="#tab-detail-tambahan" data-toggle="tab" data-target="#tab-detail-tambahan" type="button" role="tab" aria-controls="tab-detail-tambahan" aria-selected="false" style="font-size: 0.9rem; border-radius: 8px 8px 0 0;">
                                <i class="fas fa-layer-group me-1 text-info"></i> Detail Tambahan
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content" id="tabHeaderOutsourceContent">
                        {{-- ================= TAB 1: HEADER ================= --}}
                        <div class="tab-pane fade show active" id="tab-header" role="tabpanel" aria-labelledby="tab-header-btn">
                            {{-- BARIS 1: Tanggal Uji, Tanggal Datang, No Batch, IO --}}
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Tanggal Uji</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->test_date ? date('d/m/Y', strtotime($qc->test_date)) : '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Tanggal Datang</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->arrival_date ? date('d/m/Y', strtotime($qc->arrival_date)) : '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">No Batch</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->batch ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex gap-2">
                                        <div style="flex: 0 0 75%; max-width: 75%; width: 75%;">
                                            <label class="form-label font-weight-bold text-dark">IO</label>
                                            <input type="text" class="form-control bg-light" value="{{ $qc->io ?: '-' }}" readonly>
                                        </div>
                                        <div style="flex: 0 0 25%; max-width: 25%; width: 25%;">
                                            <label class="form-label font-weight-bold text-dark">QTY</label>
                                            <input type="text" class="form-control bg-light text-center" value="{{ $qc->qty_bale ?: '-' }}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- BARIS 2: Material, Deskripsi Material, Jenis Material, Warna --}}
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Material</label>
                                    <input type="text" class="form-control font-monospace text-primary font-weight-bold bg-light" value="{{ $qc->material_code }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Deskripsi Material</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->material_desc ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Jenis Material</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->material_type ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Warna</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->warna ?: '-' }}" readonly>
                                </div>
                            </div>

                            {{-- BARIS 3: Customer & Supplier --}}
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Kode Customer</label>
                                    <input type="text" class="form-control font-monospace bg-light" value="{{ $qc->customer_code ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Nama Customer</label>
                                    <input type="text" class="form-control bg-light font-weight-bold" value="{{ $qc->customer_name ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Kode Supplier</label>
                                    <input type="text" class="form-control font-monospace bg-light" value="{{ $qc->supplier_code ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Nama Supplier</label>
                                    <input type="text" class="form-control bg-light font-weight-bold" value="{{ $qc->supplier_name ?: '-' }}" readonly>
                                </div>
                            </div>

                            {{-- BARIS 4: Tested By, Send To & Catatan --}}
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Tested By</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->tested_by ?: $qc->user_create ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label font-weight-bold text-dark">Send To (Checker)</label>
                                    <input type="text" class="form-control bg-light font-weight-bold text-primary" value="{{ $qc->send_to_firstname ?? (DB::table('users')->where('username', $qc->send_to)->value('firstname') ?: ($qc->send_to ?: '-')) }}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label font-weight-bold text-dark">Catatan Tambahan (Notes)</label>
                                    <textarea class="form-control bg-light" rows="1" readonly>{{ $qc->notes ?: '-' }}</textarea>
                                </div>
                            </div>
                        </div>

                        {{-- ================= TAB 2: DETAIL TAMBAHAN ================= --}}
                        <div class="tab-pane fade" id="tab-detail-tambahan" role="tabpanel" aria-labelledby="tab-detail-tambahan-btn">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label font-weight-bold text-dark">No Inspection Lot</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->inspection_lot ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label font-weight-bold text-dark">Jumbo Turun</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->jam_jumbo_turun ?: '-' }}" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label font-weight-bold text-dark">Ambil Sample</label>
                                    <input type="text" class="form-control bg-light" value="{{ $qc->jam_ambil_sample ?: '-' }}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                @php
                    // Determine how many runs exist across all details (minimal 5 seperti add.blade.php)
                    $maxRun = 5;
                    foreach ($details as $d) {
                        $rObj = $d->run_values ?? ($d->runs ?? []);
                        if (is_string($rObj)) {
                            $rObj = json_decode($rObj, true) ?? [];
                        }
                        if (is_array($rObj)) {
                            for ($r = 1; $r <= 100; $r++) {
                                if (isset($rObj["run_{$r}"]) && $rObj["run_{$r}"] !== '') {
                                    if ($r > $maxRun) $maxRun = $r;
                                }
                            }
                        }
                    }
                @endphp

            {{-- CARD DETAIL: GRID TITIK UJI RUN MATRIX (Persis format troutp/add.blade.php) --}}
            <div class="card shadow-lg mb-4">
                <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <h5 class="mb-0">Detail Test</h5>
                        @if ($maxRun > 5)
                            <span class="badge bg-gradient-info text-white text-xxs px-2 py-1" id="badgeRunStatus">
                                <i class="fas fa-eye me-1"></i> <span id="badgeRunCount">Menampilkan Run 1 - 5</span> (Total: {{ $maxRun }})
                            </span>
                        @else
                            <span class="badge bg-light text-dark border text-xxs px-2 py-1">
                                Total Run: {{ $maxRun }}
                            </span>
                        @endif
                    </div>

                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <!-- @if ($maxRun > 5)
                            <button type="button" class="btn btn-sm btn-outline-primary mb-0 d-inline-flex align-items-center gap-1 shadow-sm px-3 py-1 font-weight-bold" id="btnToggleRunView" data-state="minimized" title="Beralih tampilan ringkas (1-5) atau penuh (1-{{ $maxRun }})">
                                <i class="fas fa-expand me-1" id="iconToggleRun"></i>
                                <span id="textToggleRun">Maximize Run (1 - {{ $maxRun }})</span>
                            </button>
                        @endif -->

                        <span class="text-xs text-muted ms-1">
                            <span class="badge bg-success me-1">OK</span> Sesuai Spesifikasi | 
                            <span class="badge bg-danger ms-1">Out</span> Di luar Batas Toleransi
                        </span>
                    </div>
                </div>

                <hr class="horizontal dark mt-0 mb-3">

                <div class="card-body pt-0 px-3">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-items-center mb-0 excel-table" id="tableRunGrid">
                            <thead class="thead-light" style="background-color: #b0e9eb;">
                                <tr class="text-center text-xs font-weight-bolder">
                                    <th rowspan="2" class="align-middle sticky-col sticky-col-head sc-mic text-start">MIC Name</th>
                                    <th rowspan="2" class="align-middle sticky-col sticky-col-head sc-unit">Unit</th>
                                    <th colspan="2" class="text-center sticky-col sticky-col-head sc-spec">Spesifikasi</th>
                                    
                                    {{-- Run 1..maxRun Column Headers --}}
                                    @for ($r = 1; $r <= $maxRun; $r++)
                                        <th rowspan="2" class="align-middle col-run col-run-{{ $r }}" style="{{ $r > 5 ? 'display: none;' : '' }}">
                                            RUN {{ $r }}
                                        </th>
                                    @endfor

                                    {{-- Indicator Column when Minimized (Total Run > 5) --}}
                                    @if ($maxRun > 5)
                                        <th rowspan="2" class="align-middle text-center col-run-collapsed p-1" title="Klik untuk Maximize (menampilkan Run 6 sampai {{ $maxRun }})">
                                            <button type="button" class="btn btn-xs btn-outline-primary mb-0 btn-run-toggle-table font-weight-bold shadow-xs d-inline-flex align-items-center gap-1" title="Klik untuk Maximize / Tampilkan Semua Run (1 - {{ $maxRun }})">
                                                <span>+{{ $maxRun - 5 }}</span>
                                                <i class="fas fa-angles-right text-xxs"></i>
                                            </button>
                                        </th>

                                        {{-- Action Column when Maximized --}}
                                        <th rowspan="2" class="align-middle text-center col-run-expanded-action p-1" style="display: none;" title="Klik untuk Minimize (kembali ke Run 1-5)">
                                            <button type="button" class="btn btn-xs btn-outline-secondary mb-0 btn-run-toggle-table shadow-xs d-inline-flex align-items-center" title="Klik untuk Minimize (Tampilkan Run 1-5)">
                                                <i class="fas fa-angles-left"></i>
                                            </button>
                                        </th>
                                    @endif

                                    <th rowspan="2" class="align-middle" style="min-width: 80px; width: 80px;">AVG</th>
                                    <th rowspan="2" class="align-middle text-center" style="min-width: 65px; width: 65px;">Val</th>
                                </tr>
                                <tr class="text-center text-xs font-weight-bolder" style="background-color: #c4f0f2;">
                                    <th class="sticky-col sticky-col-head sc-min">Min</th>
                                    <th class="sticky-col sticky-col-head sc-max">Max</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyRunGrid">
                                @forelse ($details as $d)
                                    @php
                                        $runs = $d->run_values ?? ($d->runs ?? []);
                                        if (is_string($runs)) {
                                            $runs = json_decode($runs, true) ?? [];
                                        }

                                        $lower = $d->lower ?? ($specs->get($d->mic_name)->lower ?? null);
                                        $upper = $d->upper ?? ($specs->get($d->mic_name)->upper ?? null);

                                        $minNum = ($lower !== null && $lower !== '') ? (float) str_replace(',', '.', $lower) : null;
                                        $maxNum = ($upper !== null && $upper !== '') ? (float) str_replace(',', '.', $upper) : null;
                                    @endphp
                                    <tr>
                                        <td class="p-2 text-start align-middle sticky-col sc-mic">
                                            <span class="text-xs font-weight-bold text-dark">{{ $d->mic_name ?: ($d->parameter_name ?? '-') }}</span>
                                        </td>
                                        <td class="p-2 text-center align-middle sticky-col sc-unit">
                                            <span class="text-xs text-muted font-weight-bold">{{ $d->unit ?: '-' }}</span>
                                        </td>
                                        <td class="p-2 text-center align-middle sticky-col sc-min">
                                            <span class="text-xs font-weight-bold text-dark">{{ $lower !== null && $lower !== '' ? $lower : '-' }}</span>
                                        </td>
                                        <td class="p-2 text-center align-middle sticky-col sc-max">
                                            <span class="text-xs font-weight-bold text-dark">{{ $upper !== null && $upper !== '' ? $upper : '-' }}</span>
                                        </td>

                                        @for ($r = 1; $r <= $maxRun; $r++)
                                            @php
                                                $val = isset($runs["run_{$r}"]) && $runs["run_{$r}"] !== '' ? $runs["run_{$r}"] : null;
                                                $valClass = '';
                                                if ($val !== null) {
                                                    $cleanNum = str_replace(',', '.', $val);
                                                    if (is_numeric($cleanNum)) {
                                                        $num = (float) $cleanNum;
                                                        if ($minNum === null && $maxNum === null) {
                                                            $valClass = 'input-run';
                                                        } else {
                                                            $isOut = ($minNum !== null && $num < $minNum) || ($maxNum !== null && $num > $maxNum);
                                                            $valClass = $isOut ? 'input-run run-invalid' : 'input-run run-valid';
                                                        }
                                                    } else {
                                                        $valClass = 'input-run';
                                                    }
                                                }
                                            @endphp
                                            <td class="col-run col-run-{{ $r }} p-1 text-center align-middle" style="{{ $r > 5 ? 'display: none;' : '' }}">
                                                @if ($val !== null)
                                                    <div class="run-input-wrapper">
                                                        <input type="text" class="form-control form-control-sm text-center {{ $valClass }}" value="{{ $val }}" readonly>
                                                    </div>
                                                @else
                                                    <span class="text-muted text-xs">-</span>
                                                @endif
                                            </td>
                                        @endfor

                                        {{-- Cell when Minimized --}}
                                        @if ($maxRun > 5)
                                            <td class="col-run-collapsed text-center align-middle p-1" title="Klik untuk Maximize (menampilkan Run 6 sampai {{ $maxRun }})">
                                                <span class="badge bg-light text-secondary border text-xxs px-2 py-1 font-monospace" style="letter-spacing: 1px;">•••</span>
                                            </td>

                                            {{-- Cell when Maximized --}}
                                            <td class="col-run-expanded-action text-center align-middle p-1" style="display: none;" title="Klik untuk Minimize (kembali ke Run 1-5)">
                                                <span class="text-muted text-xxs"><i class="fas fa-angles-left"></i></span>
                                            </td>
                                        @endif

                                        <td class="p-2 text-center align-middle bg-light">
                                            <span class="text-xs font-weight-bold text-dark">
                                                {{ $d->average_value !== null ? (is_numeric(str_replace(',', '.', $d->average_value)) ? number_format((float)str_replace(',', '.', $d->average_value), $d->decimal ?? 2) : $d->average_value) : '-' }}
                                            </span>
                                        </td>
                                        <td class="p-2 text-center align-middle">
                                            @if ($d->evaluation_status === '-' || (empty($d->lower) && empty($d->upper)))
                                                <span class="text-muted font-weight-bold">-</span>
                                            @elseif ($d->evaluation_status === 'OK')
                                                <span class="badge bg-success">OK</span>
                                            @else
                                                <span class="badge bg-danger">Out</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="100" class="text-center py-4 text-muted text-xs">
                                            Tidak ada rincian data titik uji.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Audit info --}}
                    <div class="mt-4 p-3 bg-light rounded-3 text-xxs text-muted d-flex justify-content-between">
                        <div><strong>Diinput oleh:</strong> {{ $qc->user_create ?: 'System' }} pada {{ $qc->created_at }}</div>
                        <div><strong>Verifikasi terakhir:</strong> {{ $qc->user_update ?: '-' }} pada {{ $qc->updated_at }}</div>
                    </div>

                    {{-- Tombol Aksi Bawah: Reject & Approve / Unapprove --}}
                    @if (!in_array($qc->status, ['approved', 'rejected']))
                        <div class="d-flex justify-content-end align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-danger mb-0" data-bs-toggle="modal" data-bs-target="#modalReject">
                                <i class="fas fa-rotate-left"></i>
                                <span class="font-weight-bold"> Reject</span>
                            </button>

                            <button type="button" class="btn btn-success mb-0" data-bs-toggle="modal" data-bs-target="#modalApprove">
                                <i class="fas fa-check"></i>
                                <span class="font-weight-bold"> Approve</span>
                            </button>
                        </div>
                    @elseif ($qc->status === 'approved')
                        <div class="d-flex justify-content-end align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-warning mb-0" data-bs-toggle="modal" data-bs-target="#modalUnapprove">
                                <i class="fas fa-undo me-1"></i>
                                <span class="font-weight-bold"> Unapprove</span>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@if (!in_array($qc->status, ['approved', 'rejected']))
{{-- Modal Approve --}}
<div class="modal fade" id="modalApprove" tabindex="-1" aria-labelledby="modalApproveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content shadow-lg border-0" style="border-radius: 12px; overflow: hidden;">
            <form action="{{ route('apoutp.approve', encrypt($qc->id)) }}" method="POST">
                @csrf
                <div class="modal-header bg-gradient-success text-white py-3">
                    <h6 class="modal-title text-white font-weight-bolder d-flex align-items-center mb-0" id="modalApproveLabel">
                        <i class="fas fa-check-circle me-2"></i>Konfirmasi Persetujuan (Approve)
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-sm text-dark mb-3">
                        Apakah Anda yakin ingin menyetujui (<strong>APPROVE</strong>) hasil pengujian QC untuk:
                    </p>

                    {{-- 1 s/d 5: Detail Ringkas Transaksi --}}
                    <div class="p-3 bg-light rounded-3 mb-3 border text-xs">
                        <div class="row g-2">
                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="text-muted" style="width: 120px; min-width: 120px;"><strong>Tanggal Datang</strong></span>
                                    <span class="text-muted me-2 font-weight-bold">:</span>
                                    <span class="text-dark font-weight-bold flex-grow-1">{{ $qc->arrival_date ? date('d/m/Y', strtotime($qc->arrival_date)) : '-' }}</span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="text-muted" style="width: 120px; min-width: 120px;"><strong>Material</strong></span>
                                    <span class="text-muted me-2 font-weight-bold">:</span>
                                    <span class="text-dark font-weight-bold font-monospace text-primary flex-grow-1">
                                        {{ $qc->material_code }} {{ $qc->material_desc ? '- ' . $qc->material_desc : ($qc->material_type ? '- ' . $qc->material_type : '') }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="text-muted" style="width: 120px; min-width: 120px;"><strong>No Batch</strong></span>
                                    <span class="text-muted me-2 font-weight-bold">:</span>
                                    <span class="text-dark font-weight-bold font-monospace flex-grow-1">{{ $qc->batch ?: '-' }}</span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="text-muted" style="width: 120px; min-width: 120px;"><strong>Customer</strong></span>
                                    <span class="text-muted me-2 font-weight-bold">:</span>
                                    <span class="text-dark font-weight-bold flex-grow-1">
                                        {{ $qc->customer_code ? '[' . $qc->customer_code . '] ' : '' }}{{ $qc->customer_name ?: '-' }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="text-muted" style="width: 120px; min-width: 120px;"><strong>Supplier</strong></span>
                                    <span class="text-muted me-2 font-weight-bold">:</span>
                                    <span class="text-dark font-weight-bold flex-grow-1">
                                        {{ $qc->supplier_code ? '[' . $qc->supplier_code . '] ' : '' }}{{ $qc->supplier_name ?: '-' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 6: Tabel Valuasi Versi Ringkasannya --}}
                    <div class="mb-3">
                        <label class="form-label text-xs fw-bold text-dark mb-1">
                            <i class="fas fa-table-list me-1 text-success"></i> Tabel Valuasi (Ringkasan Pengujian)
                        </label>
                        <div class="table-responsive border rounded-3" style="max-height: 220px; overflow-y: auto;">
                            <table class="table table-sm table-bordered table-hover align-items-center mb-0 text-center" style="font-size: 0.78rem;">
                                <thead class="bg-light sticky-top" style="z-index: 1;">
                                    <tr class="text-dark font-weight-bolder">
                                        <th class="text-start ps-3" style="width: 35%;">MIC Name</th>
                                        <th style="width: 15%;">Unit</th>
                                        <th style="width: 25%;">Spesifikasi</th>
                                        <th style="width: 15%;">AVG</th>
                                        <th style="width: 10%;">Val</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($details as $d)
                                        @php
                                            $lower = $d->lower ?? ($specs->get($d->mic_name)->lower ?? null);
                                            $upper = $d->upper ?? ($specs->get($d->mic_name)->upper ?? null);
                                            $specText = '-';
                                            if ($lower !== null && $lower !== '' && $upper !== null && $upper !== '') {
                                                $specText = $lower . ' - ' . $upper;
                                            } elseif ($lower !== null && $lower !== '') {
                                                $specText = '≥ ' . $lower;
                                            } elseif ($upper !== null && $upper !== '') {
                                                $specText = '≤ ' . $upper;
                                            }
                                        @endphp
                                        <tr>
                                            <td class="text-start ps-3 font-weight-bold text-dark">
                                                {{ $d->mic_name ?: ($d->parameter_name ?? '-') }}
                                            </td>
                                            <td class="text-muted">{{ $d->unit ?: '-' }}</td>
                                            <td class="text-dark">{{ $specText }}</td>
                                            <td class="font-weight-bold text-dark">
                                                {{ $d->average_value !== null ? (is_numeric(str_replace(',', '.', $d->average_value)) ? number_format((float)str_replace(',', '.', $d->average_value), $d->decimal ?? 2) : $d->average_value) : '-' }}
                                            </td>
                                            <td>
                                                @if ($d->evaluation_status === 'OK')
                                                    <span class="badge bg-success px-2 py-1" style="font-size: 0.7rem;">OK</span>
                                                @elseif ($d->evaluation_status === 'OUT' || $d->evaluation_status === 'Out')
                                                    <span class="badge bg-danger px-2 py-1" style="font-size: 0.7rem;">Out</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-3">Tidak ada data rincian titik uji.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="alert alert-info text-white text-xs mb-0 py-2">
                        <i class="fas fa-lock me-1"></i> Setelah disetujui, data akan terkunci dan status resmi menjadi <strong>Approved</strong> untuk acuan COA.
                    </div>
                </div>
                <div class="modal-footer bg-light py-2">
                    <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-sm mb-0">
                        <i class="fas fa-check me-1"></i> Ya, Approve Transaksi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Reject / Revision --}}
<div class="modal fade" id="modalReject" tabindex="-1" aria-labelledby="modalRejectLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('apoutp.reject', encrypt($qc->id)) }}" method="POST">
                @csrf
                <div class="modal-header bg-gradient-danger text-white">
                    <h6 class="modal-title text-white" id="modalRejectLabel">
                        <i class="fas fa-rotate-left me-2"></i>Tolak / Minta Revisi Pengujian
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-sm text-dark mb-2">
                        Berikan alasan penolakan atau catatan revisi pengujian untuk tim QC:
                    </p>
                    <div class="mb-3">
                        <label class="form-label text-xs fw-bold text-dark">Catatan Revisi / Alasan Reject <span class="text-danger">*</span></label>
                        <textarea name="revision_note" class="form-control form-control-sm" rows="4" placeholder="Misal: Nilai GSM di bawah batas standar minimum, mohon pengujian ulang..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger btn-sm">
                        <i class="fas fa-paper-plane me-1"></i> Kirim Catatan Revisi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if ($qc->status === 'approved')
{{-- Modal Unapprove --}}
<div class="modal fade" id="modalUnapprove" tabindex="-1" aria-labelledby="modalUnapproveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow-lg border-0" style="border-radius: 12px; overflow: hidden;">
            <form action="{{ route('apoutp.unapprove', encrypt($qc->id)) }}" method="POST">
                @csrf
                <div class="modal-header bg-gradient-warning text-white py-3">
                    <h6 class="modal-title text-white font-weight-bolder d-flex align-items-center mb-0" id="modalUnapproveLabel">
                        <i class="fas fa-undo me-2"></i>Konfirmasi Batal Approval (Unapprove)
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-sm text-dark mb-3">
                        Apakah Anda yakin ingin membatalkan status persetujuan (<strong>UNAPPROVE</strong>) untuk pengetesan QC ini?
                    </p>
                    <div class="p-3 bg-light rounded-3 mb-3 border text-xs">
                        <div class="mb-1"><strong>Material:</strong> {{ $qc->material_code }}</div>
                        <div class="mb-1"><strong>Batch:</strong> {{ $qc->batch ?: '-' }}</div>
                        <div><strong>Tanggal Uji:</strong> {{ $qc->test_date ? date('d/m/Y', strtotime($qc->test_date)) : '-' }}</div>
                    </div>
                    <div class="alert alert-light border text-xs text-secondary mb-0">
                        <i class="fas fa-info-circle text-warning me-1"></i> Status transaksi akan dikembalikan menjadi <strong>Pending</strong> agar dapat ditinjau atau diedit kembali.
                    </div>
                </div>
                <div class="modal-footer bg-light py-2 px-4 d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning mb-0">
                        <i class="fas fa-undo me-1"></i> Ya, Unapprove
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if (!empty($qc->note_reject))
    @php
        $rejectEntries = [];
        $rawEntries = preg_split('/\r\n---\r\n|\n---\n|\r\n\r\n|\n\n|---/', $qc->note_reject);
        foreach ($rawEntries as $entry) {
            $entry = trim($entry);
            if (!empty($entry)) {
                if (preg_match('/\[REJECT \/ REVISION by (.*?) on (.*?)]: (.*)/s', $entry, $matches)) {
                    $rejectEntries[] = [
                        'by'   => trim($matches[1]),
                        'date' => trim($matches[2]),
                        'msg'  => trim($matches[3]),
                        'raw'  => $entry,
                    ];
                } else {
                    $rejectEntries[] = [
                        'by'   => null,
                        'date' => null,
                        'msg'  => $entry,
                        'raw'  => $entry,
                    ];
                }
            }
        }
        $totalRevisions = count($rejectEntries);
    @endphp

    {{-- Modal Riwayat Catatan Revisi / Reject --}}
    <div class="modal fade" id="modalInfoReject" tabindex="-1" aria-labelledby="modalInfoRejectLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content shadow-lg border-0" style="border-radius: 14px; overflow: hidden;">
                <div class="modal-header bg-gradient-danger text-white py-3 px-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-white text-danger rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                            <i class="fas fa-rotate-left"></i>
                        </div>
                        <div>
                            <h6 class="modal-title text-white mb-0" id="modalInfoRejectLabel" style="font-weight: 700;">
                                Riwayat Catatan Revisi / Reject
                            </h6>
                            <span class="text-white text-xxs opacity-8">Daftar catatan alasan penolakan dari verifikator/checker</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-white text-danger font-weight-bolder px-2 py-1 shadow-sm" style="font-size: 0.75rem;">
                            {{ $totalRevisions }} {{ $totalRevisions > 1 ? 'Catatan Revisi' : 'Catatan' }}
                        </span>
                        <button type="button" class="btn-close btn-close-white ms-1" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
                <div class="modal-body p-4" style="max-height: 70vh; overflow-y: auto; background-color: #f8f9fa;">
                    @if ($totalRevisions > 1)
                        <div class="alert alert-light border border-danger border-opacity-25 py-2 px-3 mb-3 d-flex align-items-center gap-2 text-dark" style="border-radius: 8px; font-size: 0.8rem; background-color: #fff9f9;">
                            <i class="fas fa-info-circle text-danger"></i>
                            <span>Pengujian ini memiliki <strong>{{ $totalRevisions }} riwayat catatan revisi</strong>. Urutan ditampilkan dari yang pertama hingga terakhir:</span>
                        </div>
                    @endif

                    <div class="d-flex flex-column gap-3">
                        @foreach ($rejectEntries as $idx => $item)
                            <div class="card border-0 shadow-sm" style="border-radius: 10px; border-left: 5px solid #ea0606 !important;">
                                <div class="card-header pb-1 pt-3 px-3 bg-white d-flex justify-content-between align-items-center border-bottom-0">
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-danger text-white px-2 py-1 text-xxs font-weight-bolder text-uppercase" style="letter-spacing: 0.5px;">
                                            Revisi #{{ $loop->iteration }}
                                        </span>
                                        @if (!empty($item['by']))
                                            <span class="text-xs font-weight-bold text-dark">
                                                <i class="fas fa-user-check text-danger me-1"></i>Oleh: <strong>{{ $item['by'] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                    @if (!empty($item['date']))
                                        <span class="badge bg-light text-secondary font-weight-bold text-xxs px-2 py-1 border">
                                            <i class="far fa-clock text-secondary me-1"></i>{{ $item['date'] }}
                                        </span>
                                    @endif
                                </div>
                                <div class="card-body pt-1 pb-3 px-3">
                                    <div class="p-3 rounded-3" style="background-color: #fff5f5; border: 1px dashed #f5c2c7;">
                                        <div class="text-xs text-dark font-weight-bold" style="white-space: pre-line; word-break: break-word; line-height: 1.6;">
                                            {{ $item['msg'] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer bg-white py-2 px-4 d-flex justify-content-end">
                    <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('js')
<script>
    $(document).on('click', '#tabHeaderOutsource button', function (e) {
        e.preventDefault();
        const targetId = $(this).attr('data-bs-target') || $(this).attr('data-target');
        $('#tabHeaderOutsource button').removeClass('active').addClass('text-secondary').attr('aria-selected', 'false');
        $(this).addClass('active').removeClass('text-secondary').attr('aria-selected', 'true');
        $('#tabHeaderOutsourceContent .tab-pane').removeClass('show active');
        $(targetId).addClass('show active');
    });

    $(function () {
        const maxRun = {{ $maxRun }};
        if (maxRun > 5) {
            let isExpanded = false;

            function setRunView(expanded) {
                isExpanded = expanded;
                if (isExpanded) {
                    // Tampilkan run 6 s/d maxRun
                    for (let r = 6; r <= maxRun; r++) {
                        $(`.col-run-${r}`).show();
                    }
                    $('.col-run-collapsed').hide();
                    $('.col-run-expanded-action').show();

                    $('#btnToggleRunView')
                        .removeClass('btn-outline-primary')
                        .addClass('btn-primary text-white')
                        .attr('title', 'Klik untuk meringkas tampilan (hanya Run 1-5)');
                    $('#iconToggleRun').removeClass('fa-expand').addClass('fa-compress');
                    $('#textToggleRun').text('Minimize Run (Tampilkan 1 - 5)');
                    $('#badgeRunCount').text(`Menampilkan Semua Run (1 - ${maxRun})`);
                    $('#badgeRunStatus').removeClass('bg-gradient-info').addClass('bg-gradient-primary');
                } else {
                    // Sembunyikan run 6 s/d maxRun
                    for (let r = 6; r <= maxRun; r++) {
                        $(`.col-run-${r}`).hide();
                    }
                    $('.col-run-collapsed').show();
                    $('.col-run-expanded-action').hide();

                    $('#btnToggleRunView')
                        .removeClass('btn-primary text-white')
                        .addClass('btn-outline-primary')
                        .attr('title', `Klik untuk melihat seluruh run (1 - ${maxRun})`);
                    $('#iconToggleRun').removeClass('fa-compress').addClass('fa-expand');
                    $('#textToggleRun').text(`Maximize Run (1 - ${maxRun})`);
                    $('#badgeRunCount').text(`Menampilkan Run 1 - 5`);
                    $('#badgeRunStatus').removeClass('bg-gradient-primary').addClass('bg-gradient-info');

                    // Kembalikan scroll tabel ke posisi awal dengan halus
                    $('.table-responsive').animate({ scrollLeft: 0 }, 200);
                }
            }

            // Klik tombol toggle di card header
            $(document).on('click', '#btnToggleRunView', function (e) {
                e.preventDefault();
                setRunView(!isExpanded);
            });

            // Klik kolom indikator ringkas di tabel untuk Maximize
            $(document).on('click', '.col-run-collapsed, .btn-expand-run-table', function (e) {
                e.preventDefault();
                e.stopPropagation();
                setRunView(true);
            });

            // Klik tombol minimize di kolom aksi tabel
            $(document).on('click', '.col-run-expanded-action, .btn-collapse-run-table', function (e) {
                e.preventDefault();
                e.stopPropagation();
                setRunView(false);
            });
        }
    });
</script>
@endpush

@push('css')
<style>
    #tableRunGrid {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    #tableRunGrid th,
    #tableRunGrid td {
        white-space: nowrap;
    }
    .sticky-col {
        position: sticky;
        z-index: 10 !important;
        border-right: 1px solid #ddd !important;
    }
    .sticky-col-head {
        z-index: 20 !important;
    }
    .sc-mic   { left: 0;    min-width: 180px; max-width: 180px; width: 180px; }
    .sc-unit  { left: 180px; min-width: 70px;  max-width: 70px;  width: 70px; }
    .sc-spec  { left: 250px; min-width: 140px; max-width: 140px; width: 140px; }
    .sc-min   { left: 250px; min-width: 70px;  max-width: 70px;  width: 70px; }
    .sc-max   { left: 320px; min-width: 70px;  max-width: 70px;  width: 70px; }

    #tableRunGrid thead .sticky-col {
        background-color: #b0e9eb !important;
    }
    #tableRunGrid thead tr:last-child .sticky-col {
        background-color: #c4f0f2 !important;
    }
    #tableRunGrid tbody .sticky-col {
        background-color: #FBFBFB !important;
    }
    #tableRunGrid tbody tr:hover .sticky-col {
        background-color: #f1f7f7 !important;
    }
    .col-run {
        min-width: 90px;
        width: 90px;
    }
    .run-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .input-run.run-valid {
        background-color: #e8fadf !important;
        border-color: #52c41a !important;
        color: #135200 !important;
        font-weight: 600 !important;
    }
    .input-run.run-invalid {
        background-color: #fde8e8 !important;
        border-color: #ff4d4f !important;
        color: #a8071a !important;
        font-weight: 600 !important;
    }
    .col-run-collapsed {
        min-width: 65px;
        width: 65px;
        background-color: #f8fafc !important;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .col-run-collapsed:hover {
        background-color: #e2e8f0 !important;
    }
    .col-run-collapsed:hover .badge {
        background-color: #b0e9eb !important;
        color: #005662 !important;
        border-color: #00838f !important;
    }
    .col-run-expanded-action {
        min-width: 48px;
        width: 48px;
        background-color: #f8fafc !important;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .col-run-expanded-action:hover {
        background-color: #e2e8f0 !important;
    }
    .col-run-expanded-action:hover i {
        color: #00838f !important;
    }
    .btn-run-toggle-table {
        font-size: 0.72rem !important;
        padding: 2px 7px !important;
        border-radius: 4px;
        transition: transform 0.15s ease-in-out;
    }
    .btn-run-toggle-table:hover {
        transform: scale(1.06);
    }
    .shadow-xs {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
</style>
@endpush