@php
    $isArabic = app()->getLocale() === 'ar';
    $docConfig = config('financing_documents');
    $allDocs = $docConfig['documents'];
    $subProducts = $docConfig['sub_products'];
    $currentSubProductId = $currentSubProductId ?? null;
@endphp

<div class="w-100" id="required_documents_wrapper">

    {{-- Placeholder when no sub-product selected --}}
    <div class="docs-block" data-subproduct="none" @if($currentSubProductId) style="display:none" @endif>
        <div class="pb-10 pb-lg-12 text-center">
            <h2 class="fw-bolder text-dark mb-3">{{ ln('Required Documents', 'المستندات المطلوبة') }}</h2>
            <div class="text-muted fw-bold fs-6">{{ ln('Please select a sub-product first to show its required documents', 'من فضلك اختر المنتج الفرعي أولاً لعرض المستندات المطلوبة') }}</div>
        </div>
    </div>

    {{-- Generate a docs-block for each sub-product defined in config --}}
    @foreach($subProducts as $spId => $sp)
        <div class="docs-block @if($currentSubProductId != $spId) d-none @endif" data-subproduct="{{ $spId }}">
            <div class="pb-10 pb-lg-12">
                <h2 class="fw-bolder text-dark">
                    {{ ln('Required Documents', 'المستندات المطلوبة') }}
                    <small class="text-muted fs-6 d-block mt-2">{{ $isArabic ? $sp['name_ar'] : $sp['name_en'] }}</small>
                </h2>
                <div class="text-muted fw-bold fs-6">
                    {{ ln('Please upload all required documents to complete your financing request', 'يرجى رفع جميع المستندات المطلوبة لإكمال طلب التمويل') }}
                </div>

                {{-- Guarantee type badge --}}
                @php
                    $gKey = $sp['guarantee_type'] ?? null;
                    $gLabels = $docConfig['guarantee_types'][$gKey] ?? null;
                @endphp
                @if($gLabels)
                    <div class="mt-3">
                        <span class="badge bg-light-primary text-primary fw-bold px-4 py-2 fs-7">
                            <i class="fa-solid fa-shield-halved me-1"></i>
                            {{ ln('Guarantee Type', 'نوع الضمان') }}: {{ $isArabic ? $gLabels[1] : $gLabels[0] }}
                        </span>
                    </div>
                @endif
            </div>

            {{-- Legend --}}
            <div class="d-flex gap-4 mb-5 flex-wrap">
                <span class="d-flex align-items-center gap-2 fs-7">
                    <span class="badge bg-danger" style="width:12px;height:12px;border-radius:50%;"></span>
                    {{ ln('Required', 'مطلوب') }}
                </span>
                <span class="d-flex align-items-center gap-2 fs-7">
                    <span class="badge bg-warning" style="width:12px;height:12px;border-radius:50%;"></span>
                    {{ ln('Optional (if available)', 'اختياري (ان وجد)') }}
                </span>
            </div>

            <div class="table-responsive">
                <table class="table align-middle table-row-bordered border">
                    <thead class="fs-6 fw-bolder bg-light">
                        <tr class="text-center">
                            <th class="min-w-200px">{{ ln('Document Name', 'اسم المستند') }}</th>
                            <th class="min-w-100px">{{ ln('Requirement', 'الحالة') }}</th>
                            <th class="min-w-100px">{{ ln('Attach', 'ارفاق') }}</th>
                            <th class="min-w-100px">{{ ln('Preview', 'معاينة') }}</th>
                            <th class="min-w-80px">{{ ln('Status', 'الحالة') }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                        @php $docIndex = 0; @endphp
                        @foreach($sp['documents'] as $field => $rule)
                            @php
                                $docIndex++;
                                $previewId = 'sp' . $spId . '_doc' . $docIndex;
                                $labels = $allDocs[$field] ?? [$field, $field];
                                $parts = explode('|', $rule, 2);
                                $isRequired = ($parts[0] === 'required');
                                $note = $parts[1] ?? null;
                                $accept = '.pdf,.jpg,.jpeg,.png';
                                if ($field === 'invoices_file') $accept .= ',.zip';
                            @endphp
                            <tr>
                                <td class="fw-bold text-start">
                                    {{ $isArabic ? $labels[1] : $labels[0] }}
                                    @if($note)
                                        <small class="d-block text-muted mt-1">({{ $note }})</small>
                                    @endif
                                </td>
                                <td>
                                    @if($isRequired)
                                        <span class="badge bg-light-danger text-danger fw-bold px-3 py-2">
                                            {{ ln('Required', 'مطلوب') }}
                                        </span>
                                    @else
                                        <span class="badge bg-light-warning text-warning fw-bold px-3 py-2">
                                            {{ ln('Optional', 'اختياري') }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <label class="btn btn-light-primary btn-sm">
                                        {{ ln('Attach', 'ارفاق') }}
                                        <input type="file"
                                               name="{{ $field }}"
                                               class="d-none doc-file-input"
                                               accept="{{ $accept }}"
                                               @if($isRequired) data-required="true" @endif
                                               onchange="previewFile(this, '{{ $previewId }}_preview', '{{ $previewId }}_status')">
                                    </label>
                                </td>
                                <td><div id="{{ $previewId }}_preview"></div></td>
                                <td><span class="status-icon" id="{{ $previewId }}_status">○</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endforeach

    {{-- Fallback for unknown sub-products --}}
    <div class="docs-block d-none" data-subproduct="default">
        <div class="pb-10 pb-lg-12">
            <h2 class="fw-bolder text-dark">{{ ln('General Required Documents', 'المستندات العامة المطلوبة') }}</h2>
            <div class="text-muted fw-bold fs-6">{{ ln('Please upload the general documents required for this product', 'يرجى رفع المستندات العامة المطلوبة لهذا المنتج') }}</div>
        </div>
        <p class="text-muted">{{ ln('Documents for this sub-product are not configured yet. Please contact support.', 'لم يتم تهيئة المستندات لهذا المنتج الفرعي بعد. يرجى التواصل مع الدعم.') }}</p>
    </div>

</div>