{{--
    One `.doc-row` of the Document Details repeater —
    docs/wireframes-v12/add-upload-document.html (~lines 130-162).

    A partial for the reason bookings/partials/co-owner-block.blade.php records:
    it appears twice on the same screen — once per server-rendered row, once
    inside the `<template>` the client module clones — and two copies of markup
    that must post identical field names is exactly what a partial is for.

    ## Why this is NOT customer-documents/partials/document-row.blade.php

    The two rows draw the same wireframe block and stay separate files, but the
    reason CR-15 gave for the split — that this screen's select "is
    server-rendered once and never changes" — stopped being true with CR-15.1
    item E1, which recomputes it on every person switch and every sibling pick.
    What is left is smaller and still real: the two screens' selects are seeded
    differently. This one carries the pending set for the booking's OWN person
    from the first draw, because the booking is known before the page is written;
    the standalone's renders empty until a booking is chosen. Merging them would
    mean a `$docTypes` parameter that means "the answer" on one screen and
    "nothing yet" on the other.

    Both rows now carry the same `data-role` markers, because both are driven by
    nrems-customer-document-form.js.

    ## The dropzone

    The wireframe wraps a transparent, absolutely-positioned `<input type="file">`
    over a dashed panel, so the whole panel is the click target. That is copied
    class for class (the inline styles are named in the app-additions tail of
    nrems-wireframe.css), with one addition: the input carries `id` and the
    label points at it, so the control is reachable by keyboard and announced
    with its own name. The wireframe's version is mouse-only.

    `accept` is a filter, not a control — see the screen's header.

    ## The chosen-file panel

    **The wireframe's "Row 2" selected-file state IS drawn here**, hidden, as
    `[data-role="doc-file-chosen"]`. CR-8 left it out on the grounds that "a
    browser draws that itself" — which was never true of this markup: the input
    is hidden the visually-hidden way INSIDE the dropzone label (the shared
    `.doc-dropzone input[type="file"]` rule clips it to 1px), so the browser's
    own "1 file selected" text is nowhere on screen and a chosen file was
    invisible. CR-15's row fixed that for the standalone screen; CR-15.1 brings
    the same panel here, which is also what makes item E4's "fill it and the
    error clears" visible feedback rather than a guess.

    ## Removing a row

    The **first row has no Remove button**, exactly as the wireframe draws it: a
    form that can remove its last row is a form that can submit nothing, and the
    server would answer that with "add at least one document". The client module
    keeps that true as rows are added and removed by hiding the button on
    whichever row is first.

    Params:
        index     the array index, or the literal '__INDEX__'
        row       array<string, mixed> of current values (may be empty)
        position  the number shown in the header ("Document 2"), or null in the
                  template, where the client module writes it
        docTypes  id => name of the PENDING doc types for the selected person;
                  EMPTY in the template, which the module fills
        accept    the `accept` attribute, from BookingDocumentService
--}}
@php
    $prefix = 'documents['.$index.']';
    $fileId = 'documents_'.$index.'_file';
    $first = $position === 1;
@endphp
<div class="doc-row" data-role="doc-row">
    <div class="doc-row-header">
        <span class="doc-row-title" data-role="doc-row-title">Document {{ $position ?? 1 }}</span>
        <button type="button" class="btn-icon-sm text-danger" data-role="remove-doc-row"
                title="Remove" aria-label="Remove document" @if ($first) hidden @endif>
            <i class="fa-solid fa-times" aria-hidden="true"></i>
        </button>
    </div>

    <div class="form-row form-row-2">
        <x-form.select :name="$prefix.'[customer_doc_type_id]'" label="Document Type" :options="$docTypes"
                       placeholder="Select Document Type" :value="$row['customer_doc_type_id'] ?? null"
                       required group-class="mb-0" data-role="doc-type-select" />

        <x-form.group :name="$prefix.'[file]'" label="File Upload" required :for="$fileId" group-class="mb-0">
            <label class="doc-dropzone" for="{{ $fileId }}" data-role="doc-dropzone">
                <input type="file" id="{{ $fileId }}" name="{{ $prefix }}[file]"
                       accept="{{ $accept }}" data-role="doc-file" required />
                <i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
                <span class="doc-dropzone-prompt">Click to browse or drag &amp; drop</span>
                <span class="doc-dropzone-hint">PDF, JPG, PNG, DOC — Max 5 MB</span>
            </label>

            {{-- add-upload-document.html:190-197, the "Row 2" state. Hidden
                 until a file is chosen; the module swaps the two panels and
                 fills the spans with textContent. --}}
            <div class="doc-file-chosen" data-role="doc-file-chosen" hidden>
                <i class="fa-solid fa-file-lines" aria-hidden="true"></i>
                <div>
                    <div class="doc-file-name" data-role="doc-file-name"></div>
                    <div class="doc-file-meta" data-role="doc-file-meta"></div>
                </div>
                <button type="button" class="btn-icon-sm text-danger doc-file-remove"
                        data-role="doc-file-clear" title="Remove file" aria-label="Remove file">
                    <i class="fa-solid fa-times" aria-hidden="true"></i>
                </button>
            </div>
        </x-form.group>
    </div>
</div>