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

    A partial for the reason bookings/partials/document-row.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 bookings/partials/document-row.blade.php

    The two rows draw the same wireframe block and stay separate files, but the
    reason CR-15 gave for it has narrowed. It said the booking tab's list was
    "server-rendered once and never changes" and carried no `data-role` markers;
    CR-15.1 item E1 made that screen recompute its select on every person switch
    and every sibling pick, so it is driven by THIS module now and wears the same
    markers.

    What is still true is the seeding. This row renders an EMPTY select on a
    fresh open — there is no booking yet — and the tab's renders its booking's
    own pending set from the first draw, because that screen is reached from one
    booking. Sharing one partial would mean a `$docTypes` parameter that means
    "the answer" on one screen and "nothing yet" on the other.

    ## 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 styles are named in the app-additions
    tail of nrems-wireframe.css, block "CR-8"), with the same accessibility
    correction the booking tab's row makes: the panel is a `<label>` pointing at
    the input, and the input is hidden the visually-hidden way rather than by
    stretching an `opacity:0` control across the panel, so it stays focusable and
    announces its own name.

    `accept` is a filter and not a control — it decides what the picker offers
    and nothing else. StoreCustomerDocumentRequest's rules are what actually
    decide, and the attribute is built from the same constants they are, so the
    picker and the rules cannot drift.

    **The wireframe's "Row 2" selected-file state IS reproduced here**, hidden,
    as `[data-role="doc-file-chosen"]`. The input is hidden entirely inside the
    dropzone label, so without this panel a chosen file would be invisible. The
    client module fills the two spans with `textContent` — the filename is the
    one untrusted string on this screen. (The booking tab's row left it out on
    the grounds that a browser draws its own filename beside a file input, which
    was never true of that markup either; CR-15.1 gave it the same panel.)

    ## 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 to render as options; EMPTY on a fresh open, and
                  the person's available types on a redraw after a rejected
                  submit
        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>