{{--
  Map-style Attachment(s) / Annexure(s) for PC textarea sections.
  Expects: $filesEdit (bool), $attachmentRows, $annexureRows (arrays of path/title), $attFieldName, $annFieldName, $uid (unique id prefix), $pcForm
--}}
@php
    $filesEdit = $filesEdit ?? false;
    $attachmentRows = $attachmentRows ?? [];
    $annexureRows = $annexureRows ?? [];
    $uid = preg_replace('/[^a-zA-Z0-9_-]/', '-', (string) ($uid ?? 'pci-tf'));
    $attLabelFieldName = preg_replace('/_attachments\[\]$/', '_attachment_labels[]', (string) $attFieldName);
    $attExistingPathsFieldName = preg_replace('/_attachments\[\]$/', '_existing_attachment_paths[]', (string) $attFieldName);
    $attExistingTitlesFieldName = preg_replace('/_attachments\[\]$/', '_existing_attachment_titles[]', (string) $attFieldName);
    $annExistingPathsFieldName = preg_replace('/_annexures\[\]$/', '_existing_annexure_paths[]', (string) $annFieldName);
    $annExistingTitlesFieldName = preg_replace('/_annexures\[\]$/', '_existing_annexure_titles[]', (string) $annFieldName);
    $annLabelFieldName = preg_replace('/_annexures\[\]$/', '_annexure_labels[]', (string) $annFieldName);
    $fieldHint = (string) ($attFieldName ?? '');
    $isOtherPcKindFiles = str_contains($fieldHint, 'pc_iii_')
        || str_contains($fieldHint, 'pc_iv_')
        || str_contains($fieldHint, 'pci_pc_v_');
    $filesAccept = $filesAccept ?? ($isOtherPcKindFiles
        ? '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.png,.jpg,.jpeg'
        : '.pdf,.png,.jpg,.jpeg');
    $strictDocs = ! $isOtherPcKindFiles;
@endphp
<div class="pci-map-files-wrap mt-3 pt-3 border-top pci-textarea-map-files" data-pci-textarea-files="1" data-att-name="{{ e($attFieldName) }}" data-att-label-name="{{ e($attLabelFieldName) }}" data-ann-name="{{ e($annFieldName) }}" data-ann-label-name="{{ e($annLabelFieldName) }}" data-strict-docs="{{ $strictDocs ? '1' : '0' }}" data-panel-uid="{{ e($uid) }}">
    <div id="{{ $uid }}-annexure-new-files-hidden" class="d-none pci-tf-ann-hidden" aria-hidden="true"></div>
    <div id="{{ $uid }}-attachment-submitted-file" class="d-none pci-tf-att-hidden" aria-hidden="true"></div>
    <div class="pci-map-files-panel pci-map-files-row mb-4">
        <div class="table-responsive">
            <table class="table table-bordered pci-map-files-layout-table mb-0">
                <colgroup>
                    <col style="width: 13%;">
                    <col style="width: 19%;">
                    <col style="width: 9%;">
                    <col>
                    <col style="width: 120px;">
                </colgroup>
                <thead>
                    <tr>
                        <th scope="col" class="pci-map-files-h-sect">Attachment(s)</th>
                        <th scope="col" class="pci-map-files-h-upload">Select File(s)</th>
                        <th scope="col" class="pci-map-files-th-col">Sr. #</th>
                        <th scope="col" class="pci-map-files-th-col">Title</th>
                        <th scope="col" class="pci-map-files-th-col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2" class="pci-map-files-upload-cell">
                            <div class="pci-map-files-upload-box border-0 p-0 m-0" style="min-width: 0; max-width: none;">
                                <input type="text" class="form-control form-control-sm mb-2 pci-tf-att-label-input" id="{{ $uid }}-att-label" placeholder="Label" autocomplete="off" @if(!$filesEdit) readonly @endif>
                                <div class="custom-file mb-2">
                                    <input type="file" class="custom-file-input pci-tf-att-staging" id="{{ $uid }}-att-staging" accept="{{ $filesAccept }}" @if(!$filesEdit) disabled @endif>
                                    <label class="custom-file-label" for="{{ $uid }}-att-staging" style="font-size:12px;">Choose File</label>
                                </div>
                                <div class="pci-map-files-staging-actions">
                                    <button type="button" class="btn btn-sm btn-outline-danger pci-tf-att-clear" @if(!$filesEdit) disabled @endif><i class="fas fa-times mr-1" aria-hidden="true"></i> Clear</button>
                                    <button type="button" class="btn btn-sm btn-outline-success pci-tf-att-upload" @if(!$filesEdit) disabled @endif><i class="fas fa-upload mr-1" aria-hidden="true"></i> Upload</button>
                                </div>
                            </div>
                        </td>
                        <td colspan="3" class="pci-map-files-data-cell">
                            <div class="table-responsive">
                                <table class="table table-bordered pci-map-files-table pci-map-files-data-only mb-0">
                                    <tbody class="pci-tf-att-tbody" id="{{ $uid }}-attachment-tbody">
                                        @forelse($attachmentRows as $arIdx => $arow)
                                            @php
                                                $arPath = $arow['path'];
                                                $arTitle = $arow['title'];
                                                $pciTfAttUrl = '#';
                                                if (\Illuminate\Support\Str::startsWith((string) $arPath, 'pc_forms_drafts/') && preg_match('#^pc_forms_drafts/(\d+)/#', (string) $arPath, $pm)) {
                                                    $pciTfAttUrl = route('pc-forms.draft-file', ['draft' => (int) $pm[1], 'path' => $arPath, 'name' => $arTitle ?: basename((string) $arPath), 'inline' => 1]);
                                                } elseif ($pcForm && $pcForm->id) {
                                                    $pciTfAttUrl = route('pc-forms.file', ['pc_form' => $pcForm->id, 'path' => $arPath, 'name' => $arTitle ?: basename((string) $arPath), 'inline' => 1]);
                                                }
                                            @endphp
                                            <tr data-path="{{ e($arPath) }}">
                                                <td class="text-center" style="width: 9%;">{{ $arIdx + 1 }}</td>
                                                <td>
                                                    <input type="hidden" name="{{ $attExistingPathsFieldName }}" value="{{ e($arPath) }}">
                                                    <input type="hidden" name="{{ $attExistingTitlesFieldName }}" value="{{ e($arTitle) }}">
                                                    {{ $arTitle }}
                                                </td>
                                                <td class="text-center pci-map-files-actions" style="width: 120px;">
                                                    <a href="{{ $pciTfAttUrl }}" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener" title="View"><i class="fas fa-eye"></i></a>
                                                    @if($filesEdit)
                                                    <button type="button" class="btn btn-sm btn-outline-danger pci-tf-remove-root-attachment" data-path="{{ e($arPath) }}"><i class="fas fa-times"></i></button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr class="pci-tf-files-empty"><td colspan="3" class="text-center text-muted small">No attachment</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="pci-map-files-panel pci-map-files-row">
        <div class="table-responsive">
            <table class="table table-bordered pci-map-files-layout-table mb-0">
                <colgroup>
                    <col style="width: 13%;">
                    <col style="width: 19%;">
                    <col style="width: 9%;">
                    <col>
                    <col style="width: 120px;">
                </colgroup>
                <thead>
                    <tr>
                        <th scope="col" class="pci-map-files-h-sect">Annexure(s)</th>
                        <th scope="col" class="pci-map-files-h-upload">Select File(s)</th>
                        <th scope="col" class="pci-map-files-th-col">Sr. #</th>
                        <th scope="col" class="pci-map-files-th-col">Title</th>
                        <th scope="col" class="pci-map-files-th-col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2" class="pci-map-files-upload-cell">
                            <div class="pci-map-files-upload-box border-0 p-0 m-0" style="min-width: 0; max-width: none;">
                                <select class="form-control form-control-sm mb-2 pci-tf-ann-prefix" @if(!$filesEdit) disabled @endif>
                                    <option value="">Choose...</option>
                                    <option value="Survey">Survey</option>
                                    <option value="Map">Map</option>
                                    <option value="Plan">Plan</option>
                                    <option value="Other">Other</option>
                                </select>
                                <input type="text" class="form-control form-control-sm mb-2 pci-tf-ann-title-input" value="" placeholder="Title" @if(!$filesEdit) readonly @endif autocomplete="off">
                                <div class="custom-file mb-2">
                                    <input type="file" class="custom-file-input pci-tf-ann-staging" id="{{ $uid }}-ann-staging" accept="{{ $filesAccept }}" @if(!$filesEdit) disabled @endif>
                                    <label class="custom-file-label" for="{{ $uid }}-ann-staging" style="font-size:12px;">Choose File</label>
                                </div>
                                <div class="pci-map-files-staging-actions">
                                    <button type="button" class="btn btn-sm btn-outline-danger pci-tf-ann-clear" @if(!$filesEdit) disabled @endif><i class="fas fa-times mr-1" aria-hidden="true"></i> Clear</button>
                                    <button type="button" class="btn btn-sm btn-outline-success pci-tf-ann-upload" @if(!$filesEdit) disabled @endif><i class="fas fa-upload mr-1" aria-hidden="true"></i> Upload</button>
                                </div>
                            </div>
                        </td>
                        <td colspan="3" class="pci-map-files-data-cell">
                            <div class="table-responsive">
                                <table class="table table-bordered pci-map-files-table pci-map-files-data-only mb-0">
                                    <tbody class="pci-tf-ann-tbody" id="{{ $uid }}-annexure-tbody">
                                        @forelse($annexureRows as $ai => $ar)
                                            @php
                                                $ap = $ar['path'];
                                                $annTitle = $ar['title'];
                                                $pciTfAnnUrl = '#';
                                                if (\Illuminate\Support\Str::startsWith((string) $ap, 'pc_forms_drafts/') && preg_match('#^pc_forms_drafts/(\d+)/#', (string) $ap, $am)) {
                                                    $pciTfAnnUrl = route('pc-forms.draft-file', ['draft' => (int) $am[1], 'path' => $ap, 'name' => $annTitle, 'inline' => 1]);
                                                } elseif ($pcForm && $pcForm->id) {
                                                    $pciTfAnnUrl = route('pc-forms.file', ['pc_form' => $pcForm->id, 'path' => $ap, 'name' => $annTitle, 'inline' => 1]);
                                                }
                                            @endphp
                                            <tr data-path="{{ e($ap) }}">
                                                <td class="text-center" style="width: 9%;">{{ $ai + 1 }}</td>
                                                <td>
                                                    <input type="hidden" name="{{ $annExistingPathsFieldName }}" value="{{ e($ap) }}">
                                                    <input type="hidden" name="{{ $annExistingTitlesFieldName }}" value="{{ e($annTitle) }}">
                                                    {{ $annTitle }}
                                                </td>
                                                <td class="text-center pci-map-files-actions" style="width: 120px;">
                                                    <a href="{{ $pciTfAnnUrl }}" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener" title="View"><i class="fas fa-eye"></i></a>
                                                    @if($filesEdit)
                                                    <button type="button" class="btn btn-sm btn-outline-danger pci-tf-remove-annexure" data-path="{{ e($ap) }}"><i class="fas fa-times"></i></button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr class="pci-tf-annexure-empty"><td colspan="3" class="text-center text-muted small">No annexure</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>