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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @php
        // FIXED: Define $isFinished based on 4 mandatory fields (COA, ROLL, Jumbo, Tanggal COA)
        $allItemsFilled = true;
        foreach ($details as $item) {
            // Only Produksi/ORU/Backup QA items have mandatory fields
            if (in_array($item->sumber_material, ['Produksi', 'ORU', 'Backup QA/PPIC'])) {
                if (empty($item->nomor_coa) || empty($item->nomor_roll) || empty($item->nomor_jumbo) || empty($item->tanggal_coa)) {
                    $allItemsFilled = false;
                    break;
                }
            }
        }
        $isFinished = ($sample->status === 'Finished') && $allItemsFilled;
        $canEdit = false; // Will be controlled by JavaScript
        $isAdmin = $is_admin ?? false; // Admins role: bisa edit semua field
    @endphp

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">Ongoing Sample - Detail COA & ROLL</h6>
                            <div>
                                @if(!$isFinished || $isAdminMarketing)
                                    <button class="btn btn-primary btn-sm mb-0 me-2" id="toggle_edit_btn">
                                        <i class="fas fa-edit me-1"></i> <span id="edit_btn_text">Edit Mode</span>
                                    </button>
                                @endif
                                <button class="btn btn-secondary btn-sm mb-0" onclick="history.back()">
                                    <i class="fas fa-arrow-left me-1"></i> Kembali
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('components.alert')

                        {{-- Sample Header Info (Read-only) --}}
                        <div class="sample-header"
                            style="background: #01595b; color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 20px;">
                            <div class="sample-title" style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">
                                {{ $sample->id_sample }}
                            </div>
                            <div class="sample-info"
                                style="font-size: 12px; opacity: 0.95; display: flex; gap: 15px; flex-wrap: wrap;">
                                <span><i class="fas fa-user"></i> Customer: {{ $sample->customer ?? '-' }}</span>
                                <span><i class="fas fa-project-diagram"></i> Project: {{ $sample->project ?? '-' }}</span>
                                <span><i class="fas fa-user-tag"></i> End User: {{ $sample->end_user ?? '-' }}</span>
                                <span><i class="fas fa-user-tie"></i> Sales: {{ $sample->nama_sales ?? '-' }}</span>
                                <span><i class="fas fa-tag"></i> Classify: {{ $sample->classify_sample ?? '-' }}</span>
                                @if(($sample->classify_sample ?? '') === 'Improved' && !empty($sample->gedung_sample))
                                    <span><i class="fas fa-building"></i> Gedung: {{ $sample->gedung_sample }}</span>
                                @endif
                                @if($sample->deadline)
                                    <span><i class="fas fa-calendar-alt"></i> Deadline:
                                        {{ \Carbon\Carbon::parse($sample->deadline)->format('d/m/Y') }}</span>
                                @endif
                            </div>
                        </div>

                        {{-- Previous Notes --}}
                        @if (!empty($previous_notes))
                            <div class="form-group-custom" style="margin-bottom: 25px;">
                                <label class="form-label-custom"
                                    style="font-weight: 700; color: #01595b; margin-bottom: 15px; font-size: 1rem; border-bottom: 2px solid #e9ecef; width: 100%; padding-bottom: 8px;">
                                    <i class="fas fa-history me-2"></i>
                                    Riwayat Catatan Approval
                                </label>
                                @foreach ($previous_notes as $index => $note)
                                    <div class="mb-3">
                                        <div class="mb-1">
                                            <span class="fw-bold" style="color:#01595b;">
                                                <i class="fas fa-user-circle me-1"></i>
                                                {{ $note['level_label'] ?? $note['level'] }}

                                                @if (isset($note['date']))
                                                    <small class="text-muted ms-2">
                                                        <i class="fas fa-clock me-1"></i>
                                                        {{ \Carbon\Carbon::parse($note['date'])->format('d/m/Y H:i') }}
                                                    </small>
                                                @endif
                                            </span>
                                        </div>

                                        <div class="ps-3 border-start" style="border-left: 3px solid #01595b !important;">
                                            <p class="mb-0 text-dark" style="line-height: 1.6; font-size: 0.9rem;">
                                                {!! nl2br(e(trim($note['note']))) !!}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <form id="ongoing_sample_form" method="POST" action="{{ route('ongsmp.update') }}">
                            @csrf
                            <input type="hidden" name="id_sample" value="{{ $sample->id_sample }}">

                            <div class="form-title" style="margin-top: 20px; margin-bottom: 15px;">
                                <i class="fas fa-box icon-primary"></i>
                                Item Sample
                            </div>

                            @if($details && $details->isNotEmpty())
                                @foreach($details as $index => $item)
                                    <div class="detail-section"
                                        style="background: white; border: 1px solid #dee2e6; border-radius: 6px; padding: 15px; margin-bottom: 15px;">
                                        {{-- Item Header --}}
                                        <div class="item-header"
                                            style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 15px; cursor: pointer;"
                                            onclick="toggleItemDetail('item_{{ $index }}')">
                                            <div class="d-flex justify-content-between align-items-center w-100">
                                                <span style="font-weight: 600;">
                                                    <i class="fas fa-cube"></i>
                                                    @if($details->count() > 1)
                                                        Item {{ $index + 1 }}: {{ $item->aplikasi_name ?? '-' }} - {{ $item->item ?? '-' }}
                                                    @else
                                                        {{ $item->aplikasi_name ?? '-' }} - {{ $item->item ?? '-' }}
                                                    @endif
                                                </span>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-chevron-down"></i>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Item Content --}}
                                        <div class="item-content" id="item_{{ $index }}">
                                            {{-- Action Buttons --}}
                                            <div class="text-end mb-3 delete-item-btn" style="display: none;">
                                                <button type="button" class="btn btn-outline-danger btn-sm" 
                                                    onclick="deleteItem(event, '{{ $item->id }}', '{{ str_replace(["\r", "\n"], ' ', addslashes($item->item ?? '-')) }}', '{{ $sample->id_sample }}')">
                                                    <i class="fas fa-trash-alt me-1"></i> Hapus Item Ini
                                                </button>
                                            </div>

                                            {{-- Data Item Utama --}}
                                            <div class="detail-grid"
                                                style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;">
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Aplikasi</label>
                                                    @if($isAdmin)
                                                        <select class="form-input admin-editable"
                                                                name="items[{{ $item->id }}][aplikasi]"
                                                                data-admin-editable="true"
                                                                style="background: white;">
                                                            <option value="">-- Pilih Aplikasi --</option>
                                                            @foreach($aplikasiList as $aplikasi)
                                                                <option value="{{ $aplikasi->id }}"
                                                                    {{ ($item->aplikasi ?? '') == $aplikasi->id ? 'selected' : '' }}>
                                                                    {{ $aplikasi->nama }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->aplikasi_name ?? '-' }}"
                                                            readonly style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Detail</label>
                                                    @if($isAdmin)
                                                        <select class="form-input admin-editable"
                                                                name="items[{{ $item->id }}][id_detail]"
                                                                data-admin-editable="true"
                                                                style="background: white;">
                                                            <option value="">-- Pilih Detail --</option>
                                                            @foreach($detailList as $detail)
                                                                <option value="{{ $detail->id }}"
                                                                    {{ ($item->id_detail ?? '') == $detail->id ? 'selected' : '' }}>
                                                                    {{ $detail->nama }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->detail_name ?? '-' }}"
                                                            readonly style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Color</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][color]"
                                                            value="{{ $item->color ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->color ?? '-' }}" readonly
                                                            style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Item</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][item]"
                                                            value="{{ $item->item ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->item ?? '-' }}" readonly
                                                            style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="detail-grid"
                                                style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;">
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Gramasi (GSM)</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][size_gsm]"
                                                            value="{{ $item->size_gsm ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->size_gsm ?? '-' }}"
                                                            readonly style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Qty</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][qty]"
                                                            value="{{ $item->qty ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->qty ?? '-' }}" readonly
                                                            style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="detail-grid"
                                                style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;">
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Length (m)</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][size_length]"
                                                            value="{{ $item->size_length ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->size_length ?? '-' }}"
                                                            readonly style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                                <div class="form-group-custom">
                                                    <label class="form-label-custom">Width (m)</label>
                                                    @if($isAdmin)
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][size_width]"
                                                            value="{{ $item->size_width ?? '' }}"
                                                            data-admin-editable="true"
                                                            style="background: white;">
                                                    @else
                                                        <input type="text" class="form-input" value="{{ $item->size_width ?? '-' }}"
                                                            readonly style="background: #f8f9fa;">
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="form-group-custom" style="margin-bottom: 15px;">
                                                <label class="form-label-custom">UOM</label>
                                                @if($isAdmin)
                                                    <input type="text" class="form-input admin-editable"
                                                        name="items[{{ $item->id }}][uom]"
                                                        value="{{ strtoupper($item->uom ?? 'ROLL') }}"
                                                        data-admin-editable="true"
                                                        style="background: white;">
                                                @else
                                                    <input type="text" class="form-input" value="{{ strtoupper($item->uom ?? 'ROLL') }}"
                                                        readonly style="background: #f8f9fa;">
                                                @endif
                                            </div>

                                            <div class="form-group-custom" style="margin-bottom: 15px;">
                                                <label class="form-label-custom">Deskripsi Detail Item</label>
                                                @if($isAdmin)
                                                    <textarea class="form-input admin-editable" rows="2"
                                                        name="items[{{ $item->id }}][qc_note]"
                                                        data-admin-editable="true"
                                                        style="background: white;">{{ $item->qc_note ?? '' }}</textarea>
                                                @else
                                                    <textarea class="form-input" rows="2" readonly style="background: #f8f9fa;">{{ $item->qc_note ?? '-' }}</textarea>
                                                @endif
                                            </div>

                                            {{-- Detail Produksi - FIXED: Admin/SPV bisa mengisi variabel lain --}}
                                            <div style="border-top: 2px solid #dee2e6; margin-top: 15px; padding-top: 15px;">
                                                <div class="form-title" style="font-size: 14px; margin-bottom: 10px;">
                                                    <i class="fas fa-industry"></i>
                                                    Detail Produksi & Item
                                                </div>

                                                @php
                                                    $isAdminMarketing = $is_admin_or_marketing ?? false;
                                                @endphp
                                                <div class="detail-grid"
                                                    style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;">
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">Sumber Material</label>
                                                        @php
                                                            $sumberValue = $item->sumber_material ?? '';
                                                            $sumberOptions = ['Produksi', 'ORU', 'Backup QA/PPIC'];
                                                        @endphp
                                                        <select class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][sumber_material]"
                                                            id="sumber_material_{{ $item->id }}"
                                                            onchange="handleSumberChange('{{ $item->id }}')"
                                                            @if(!$isAdminMarketing) disabled @endif
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ $isAdminMarketing ? 'white !important' : '#f8f9fa' }};">
                                                            <option value="">-- Pilih Sumber --</option>
                                                            @foreach($sumberOptions as $opt)
                                                                <option value="{{ $opt }}" {{ $sumberValue == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group-custom" id="jadwal_produksi_wrapper_{{ $item->id }}" 
                                                        style="display: {{ $item->sumber_material === 'Backup QA/PPIC' ? 'none' : 'block' }};">
                                                        <label class="form-label-custom">Jadwal Produksi</label>
                                                        <input type="{{ $isAdminMarketing ? 'date' : 'text' }}" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][jadwal_produksi]"
                                                            id="jadwal_produksi_{{ $item->id }}"
                                                            value="{{ $isAdminMarketing ? ($item->jadwal_produksi ? \Carbon\Carbon::parse($item->jadwal_produksi)->format('Y-m-d') : '') : ($item->jadwal_produksi ? \Carbon\Carbon::parse($item->jadwal_produksi)->format('d/m/Y') : '-') }}"
                                                            @if(!$isAdminMarketing) readonly @endif
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ $isAdminMarketing ? 'white !important' : '#f8f9fa' }};">
                                                    </div>
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">Line Produksi</label>
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][line_produksi]"
                                                            value="{{ $item->line_produksi ?? '' }}" 
                                                            @if(!$isAdminMarketing) readonly @endif
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ $isAdminMarketing ? 'white !important' : '#f8f9fa' }};">
                                                    </div>
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">Kode Jumbo</label>
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][nomor_jumbo]"
                                                            value="{{ $item->nomor_jumbo ?? '' }}" 
                                                            @if(!$isAdminMarketing) readonly @endif
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ $isAdminMarketing ? 'white !important' : '#f8f9fa' }};">
                                                    </div>
                                                </div>

                                                {{-- FIXED: Field Editable: Nomor COA dan Nomor ROLL - SPV bebas mengisi kolom
                                                apapun, hilangkan validasi fillable --}}
                                                <div class="detail-grid"
                                                    style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #dee2e6;">
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">
                                                            Nomor COA
                                                            @if($isFinished)
                                                                <span class="badge bg-success ms-1">Lengkap</span>
                                                            @endif
                                                        </label>
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][nomor_coa]"
                                                            value="{{ $item->nomor_coa ?? '' }}" placeholder="Nomor COA" {{ ($isFinished && !$isAdminMarketing) ? 'readonly' : '' }}
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ ($isFinished && !$isAdminMarketing) ? '#f8f9fa' : (!empty($item->nomor_coa) ? '#d4edda' : 'white') }}; border: 2px solid {{ !empty($item->nomor_coa) ? '#28a745' : '#01595b' }};">
                                                        <input type="hidden" name="items[{{ $item->id }}][id]"
                                                            value="{{ $item->id }}">
                                                        @if($isFinished)
                                                            <small class="text-success">
                                                                <i class="fas fa-check-circle"></i> Sudah terisi - tidak dapat diubah
                                                                (sample selesai)
                                                            </small>
                                                        @elseif(!empty($item->nomor_coa))
                                                            <small class="text-success">
                                                                <i class="fas fa-check-circle"></i> Sudah terisi - dapat diubah
                                                            </small>
                                                        @else
                                                            <small class="text-muted">
                                                                <i class="fas fa-info-circle"></i> Bebas diisi (tidak wajib)
                                                            </small>
                                                        @endif
                                                    </div>
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">
                                                            No. Roll
                                                            @if($isFinished)
                                                                <span class="badge bg-success ms-1">Lengkap</span>
                                                            @endif
                                                        </label>
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][nomor_roll]"
                                                            value="{{ $item->nomor_roll ?? '' }}" placeholder="Nomor Roll" {{ ($isFinished && !$isAdminMarketing) ? 'readonly' : '' }}
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ ($isFinished && !$isAdminMarketing) ? '#f8f9fa' : (!empty($item->nomor_roll) ? '#d4edda' : 'white') }}; border: 2px solid {{ !empty($item->nomor_roll) ? '#28a745' : '#01595b' }};">
                                                        @if($isFinished)
                                                            <small class="text-success">
                                                                <i class="fas fa-check-circle"></i> Sudah terisi - tidak dapat diubah
                                                                (sample selesai)
                                                            </small>
                                                        @elseif(!empty($item->nomor_roll))
                                                            <small class="text-success">
                                                                <i class="fas fa-check-circle"></i> Sudah terisi - dapat diubah
                                                            </small>
                                                        @else
                                                            <small class="text-muted">
                                                                <i class="fas fa-info-circle"></i> Bebas diisi (tidak wajib)
                                                            </small>
                                                        @endif
                                                    </div>
                                                </div>

                                                {{-- NEW: Nomor Jumbo & Tanggal COA (Always visible, editable for admmrk/admins)
                                                --}}
                                                @php
                                                    $canEditExtra = $isAdminMarketing;
                                                @endphp
                                                <div class="detail-grid"
                                                    style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #dee2e6;">
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">
                                                            Kode Material
                                                        </label>
                                                        <input type="text" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][kode_material]"
                                                            value="{{ $item->kode_material ?? '' }}" placeholder="Kode Material" {{ ($isFinished && !$isAdminMarketing) ? 'readonly' : '' }}
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ ($isFinished && !$isAdminMarketing) ? '#f8f9fa' : 'white' }};">
                                                    </div>
                                                    <div class="form-group-custom">
                                                        <label class="form-label-custom">
                                                            Tanggal COA
                                                        </label>
                                                        <input type="date" class="form-input admin-editable"
                                                            name="items[{{ $item->id }}][tanggal_coa]"
                                                            value="{{ $item->tanggal_coa ? \Carbon\Carbon::parse($item->tanggal_coa)->format('Y-m-d') : '' }}"
                                                            {{ ($isFinished && !$isAdminMarketing) ? 'readonly' : '' }}
                                                            @if($isAdminMarketing) data-admin-editable="true" @endif
                                                            style="background: {{ ($isFinished && !$isAdminMarketing) ? '#f8f9fa' : 'white' }};">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                {{-- FIXED: Submit Button - Always render if admin, or if not finished --}}
                                @if(!$isFinished || $isAdminMarketing)
                                    <div class="text-center mt-4">
                                        <button type="submit" class="btn btn-primary btn-lg" id="submit_btn"
                                            style="background: #01595b; border: none; padding: 12px 40px; font-weight: 600; display: none;">
                                            <i class="fas fa-save me-2"></i>
                                            Simpan
                                        </button>
                                        @if(!$isFinished)
                                            <p class="text-muted mt-2" style="font-size: 0.875rem;">
                                                <i class="fas fa-info-circle"></i>
                                                Jika semua item sudah terisi (COA, ROLL, Jumbo, dan Tanggal COA lengkap), sample akan
                                                otomatis pindah ke
                                                status Finished.
                                            </p>
                                        @else
                                            <p class="text-success mt-2" style="font-size: 0.875rem;">
                                                <i class="fas fa-check-circle"></i>
                                                <strong>Mode Admin:</strong> Anda dapat mengoreksi data meskipun status sudah Finished.
                                            </p>
                                        @endif
                                    </div>
                                @endif

                                @if($isFinished && !$isAdminMarketing)
                                    <div class="alert alert-success mt-4 text-center">
                                        <i class="fas fa-check-circle me-2"></i>
                                        <strong>Sample sudah selesai!</strong> Semua item sudah terisi. Data tidak dapat diubah
                                        lagi.
                                    </div>
                                @endif
                            @else
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Tidak ada data item sample.
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --msj-primary: #01595b;
            --msj-primary-light: #028284;
            --msj-primary-hover: #013d3f;
            --msj-white: #ffffff;
            --msj-border: #dee2e6;
            --msj-text: #2c3e50;
            --msj-text-light: #6c757d;
            --msj-bg-light: #f8f9fa;
        }

        .form-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--msj-primary);
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--msj-primary);
        }

        .form-group-custom {
            margin-bottom: 15px;
        }

        .form-label-custom {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--msj-text);
            margin-bottom: 5px;
        }

        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--msj-border);
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.2s;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--msj-primary);
            box-shadow: 0 0 0 0.2rem rgba(1, 89, 91, 0.25);
        }

        .form-input[readonly] {
            background: #f8f9fa;
            cursor: not-allowed;
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .item-content {
            display: block;
        }

        .item-content.collapsed {
            display: none;
        }

        .detail-section {
            margin-bottom: 15px;
        }
    </style>

    <script>
        function handleSumberChange(itemId) {
            const select = document.getElementById(`sumber_material_${itemId}`);
            const wrapper = document.getElementById(`jadwal_produksi_wrapper_${itemId}`);
            if (select && wrapper) {
                if (select.value === 'Backup QA/PPIC') {
                    wrapper.style.display = 'none';
                } else {
                    wrapper.style.display = 'block';
                }
            }
        }

        function deleteItem(event, itemId, itemName, sampleId) {
            event.stopPropagation(); // Mencegah accordion tertutup saat klik delete

            // Count remaining active items in UI
            const activeItemsCount = document.querySelectorAll('.detail-section').length;
            const isLastItem = (activeItemsCount === 1);

            let swalTitle = 'Hapus Item?';
            let swalText = `Berikan alasan mengapa item "${itemName}" ini dihapus:`;
            let swalIcon = 'warning';
            let swalConfirmText = 'Ya, Hapus!';

            if (isLastItem) {
                swalTitle = 'Hapus Item Terakhir?';
                swalText = `<div class="text-start">
                                <p class="text-danger"><strong>⚠️ PERINGATAN:</strong></p>
                                <p>Ini adalah item terakhir. Menghapus item ini akan menyebabkan seluruh Sample <strong>${sampleId}</strong> otomatis <strong>DIBATALKAN (CANCELLED)</strong>.</p>
                                <p>Silakan masukkan alasan pembatalan:</p>
                            </div>`;
                swalIcon = 'error';
                swalConfirmText = 'Ya, Batalkan Sample!';
            }
            
            Swal.fire({
                title: swalTitle,
                html: swalText,
                icon: swalIcon,
                input: 'textarea',
                inputPlaceholder: 'Tulis alasan di sini...',
                inputAttributes: {
                    'aria-label': 'Tulis alasan di sini'
                },
                showCancelButton: true,
                confirmButtonColor: isLastItem ? '#d33' : '#3085d6',
                cancelButtonColor: '#6e7881',
                confirmButtonText: swalConfirmText,
                cancelButtonText: 'Batal',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Alasan pembatalan wajib diisi!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const note = result.value;
                    Swal.fire({
                        title: 'Menghapus...',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });

                    $.ajax({
                        url: "{{ url('ongsmp/api/deleteItem') }}",
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            id: itemId,
                            sampleId: sampleId,
                            note_cancelled: note
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Terhapus!',
                                    text: response.message,
                                    confirmButtonColor: '#01595b'
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: response.message,
                                    confirmButtonColor: '#01595b'
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message || 'Terjadi kesalahan sistem.',
                                confirmButtonColor: '#01595b'
                            });
                        }
                    });
                }
            });
        }

        function toggleItemDetail(itemId) {
            const content = document.getElementById(itemId);
            const header = content.previousElementSibling;

            if (content.classList.contains('collapsed')) {
                content.classList.remove('collapsed');
                header.querySelector('.fa-chevron-down').style.transform = 'rotate(0deg)';
            } else {
                content.classList.add('collapsed');
                header.querySelector('.fa-chevron-down').style.transform = 'rotate(-90deg)';
            }
        }

        $(document).ready(function () {
            // FIXED: Toggle Edit Mode - respect readonly/disabled from PHP
            let isEditMode = false;

            // Set initial state to view-only
            function setViewMode() {
                $('.form-input, select.form-input').each(function () {
                    $(this).prop('disabled', true);
                    $(this).css('background', '#f8f9fa');
                });
                $('#submit_btn').hide();
                $('.delete-item-btn').hide();
                isEditMode = false;
                $('#edit_btn_text').text('Edit Mode');
                $('#toggle_edit_btn i').removeClass('fa-eye').addClass('fa-edit');
            }

            function setEditMode() {
                $('.form-input, select.form-input, .form-select').each(function () {
                    // Check if field is admin-editable
                    let isAdminEditable = $(this).data('admin-editable') === true || $(this).attr('data-admin-editable') === 'true';
                    let isPhpReadOnly = $(this).prop('readonly') || $(this).attr('readonly');
                    
                    // Enable if: admin-editable OR not readonly
                    if (isAdminEditable || !isPhpReadOnly) {
                        $(this).prop('disabled', false);
                        $(this).css('background', 'white');
                    }
                });
                $('#submit_btn').show();
                $('.delete-item-btn').show();
                isEditMode = true;
                $('#edit_btn_text').text('View Mode');
                $('#toggle_edit_btn i').removeClass('fa-edit').addClass('fa-eye');
            }

            // Mark PHP-disabled fields
            $('select.form-input[disabled]').data('php-disabled', true);
            $('.form-input[readonly]').data('php-readonly', true);

            // Initialize to view mode
            setViewMode();

            // Toggle button click
            $('#toggle_edit_btn').on('click', function () {
                if (isEditMode) {
                    setViewMode();
                } else {
                    setEditMode();
                }
            });

            // Handle form submission
            $('#ongoing_sample_form').on('submit', function (e) {
                e.preventDefault();

                // FIXED: Hilangkan validasi fillable - SPV bebas mengisi kolom apapun
                // Tidak ada validasi, user bebas mengisi COA saja, ROLL saja, atau keduanya
                // Logic auto pindah ke Finished akan di-handle di controller jika semua item sudah terisi

                // Show confirmation
                Swal.fire({
                    title: 'Konfirmasi',
                    html: 'Apakah Anda yakin akan menyimpan Nomor COA dan Nomor ROLL?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Simpan',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#01595b'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Show loading
                        Swal.fire({
                            title: 'Menyimpan...',
                            html: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Submit form via AJAX
                        const form = $('#ongoing_sample_form');
                      
                        $.ajax({
                            url: form.attr('action'),
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: form.serialize(),
                            success: function (response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        html: response.message + (response.status_updated ? '<br><br><small><strong>Sample otomatis pindah ke status Finished!</strong></small>' : ''),
                                        confirmButtonColor: '#01595b'
                                    }).then(() => {
                                        // FIXED: Jika status updated ke Finished, redirect ke Report/History
                                        if (response.status_updated) {
                                            window.location.href = '{{ url("rptsmp") }}';
                                        } else {
                                            window.location.href = '{{ url("ongsmp") }}';
                                        }
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message || 'Terjadi kesalahan saat menyimpan data.',
                                        confirmButtonColor: '#01595b'
                                    });
                                }
                            },
                            error: function (xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON?.message || 'Terjadi kesalahan saat menyimpan data.',
                                    confirmButtonColor: '#01595b'
                                });
                            }
                        });
                    }
                });

                return false;
            });
        });
    </script>
@endsection