@php
    $modalId = $modalId ?? 'agregarItemModal';
    $modalLabelId = $modalLabelId ?? 'agregarItemModalLabel';
    $searchInputId = $searchInputId ?? 'buscarItemInput';
    $searchListId = $searchListId ?? 'bienes-list';
    $duplicateWarningId = $duplicateWarningId ?? 'item-duplicate-warning';
    $stockWarningId = $stockWarningId ?? null;
    $observationInputId = $observationInputId ?? 'modalObservacionInput';
    $submitButtonId = $submitButtonId ?? 'agregar-item-btn';
    $submitButtonText = $submitButtonText ?? 'Agregar';
    $cancelButtonText = $cancelButtonText ?? 'Cancelar';
    $searchLabel = $searchLabel ?? 'Buscar';
    $searchPlaceholder = $searchPlaceholder ?? 'Buscar por descripcion, marca o codigo';
    $searchHint = $searchHint ?? null;
    $duplicateWarningText = $duplicateWarningText ?? 'Este item ya fue agregado a la lista.';
    $showScanButton = (bool) ($showScanButton ?? false);
    $scanButtonId = $scanButtonId ?? 'scan-btn';
    $scanButtonTitle = $scanButtonTitle ?? 'Escanear bien';
    $scanButtonAriaLabel = $scanButtonAriaLabel ?? $scanButtonTitle;
    $scanButtonIcon = $scanButtonIcon ?? asset('imgs/scan_barcode.svg');
    $clearButtonId = $clearButtonId ?? 'clear-item-search-btn';
    $clearButtonTitle = $clearButtonTitle ?? 'Limpiar busqueda';
    $clearButtonAriaLabel = $clearButtonAriaLabel ?? $clearButtonTitle;
    $clearButtonIcon = $clearButtonIcon ?? '✕';
    $previewGridClass = $previewGridClass ?? 'preview-grid mt-3';
    $detailIds = array_merge([
        'tipo' => 'detalle_tipo',
        'marca' => 'detalle_marca',
        'almacenado' => 'detalle_almacenado',
        'descripcion' => 'detalle_descripcion',
        'stock' => 'detalle_en_stock',
        'entregado' => 'detalle_entregado',
    ], $detailIds ?? []);
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalLabelId }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="{{ $modalLabelId }}">Seleccion del item</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <label class="form-label" for="{{ $searchInputId }}">{{ $searchLabel }}</label>
                @if ($showScanButton)
                    <div class="input-group mb-2">
                        <button type="button" class="btn btn-outline-secondary" id="{{ $scanButtonId }}" tabindex="-1" title="{{ $scanButtonTitle }}" aria-label="{{ $scanButtonAriaLabel }}">
                            <img class="scanner-button-icon" src="{{ $scanButtonIcon }}" alt="" aria-hidden="true">
                        </button>
                        <input list="{{ $searchListId }}" type="text" id="{{ $searchInputId }}" class="form-control" placeholder="{{ $searchPlaceholder }}" autocomplete="off">
                        <button type="button" class="btn btn-outline-secondary" id="{{ $clearButtonId }}" title="{{ $clearButtonTitle }}" aria-label="{{ $clearButtonAriaLabel }}">
                            <span aria-hidden="true">{{ $clearButtonIcon }}</span>
                        </button>
                    </div>
                @else
                    <div class="input-group mb-2">
                        <input list="{{ $searchListId }}" type="text" id="{{ $searchInputId }}" class="form-control" placeholder="{{ $searchPlaceholder }}" autocomplete="off">
                        <button type="button" class="btn btn-outline-secondary" id="{{ $clearButtonId }}" title="{{ $clearButtonTitle }}" aria-label="{{ $clearButtonAriaLabel }}">
                            <span aria-hidden="true">{{ $clearButtonIcon }}</span>
                        </button>
                    </div>
                @endif

                @if (filled($searchHint))
                    @if ($showScanButton)
                        @include('partials.scanner-hint', [
                            'text' => $searchHint,
                            'className' => 'text-muted-brand small mt-2',
                        ])
                    @else
                        <div class="text-muted-brand small mt-2">{{ $searchHint }}</div>
                    @endif
                @endif

                <div id="{{ $duplicateWarningId }}" class="text-danger small mt-2 d-none">{{ $duplicateWarningText }}</div>

                @if (filled($stockWarningId))
                    <div id="{{ $stockWarningId }}" class="text-warning small mt-2 d-none"></div>
                @endif

                <datalist id="{{ $searchListId }}">
                    @foreach ($bienes as $bien)
                        <option value="{{ $bien->codigo }} - {{ $bien->descripcion }}{{ filled($bien->marca) ? ' - ' . $bien->marca : '' }}"></option>
                    @endforeach
                </datalist>

                <div class="{{ $previewGridClass }}">
                    <div class="preview-item">
                        <div class="label">Tipo / Marca</div>
                        <div id="{{ $detailIds['tipo'] }}" class="value">N/D</div>
                    </div>
                    <div class="preview-item">
                        <div class="label">Almacenado</div>
                        <div id="{{ $detailIds['almacenado'] }}" class="value">N/D</div>
                    </div>
                    <div class="preview-item full">
                        <div class="label">Descripcion</div>
                        <div id="{{ $detailIds['descripcion'] }}" class="value">N/D</div>
                    </div>
                    <div class="preview-item">
                        <div class="label">En stock</div>
                        <div id="{{ $detailIds['stock'] }}" class="value">N/D</div>
                    </div>
                    <div class="preview-item">
                        <div class="label">Entregado</div>
                        <div id="{{ $detailIds['entregado'] }}" class="value">N/D</div>
                    </div>
                </div>

                <div class="mt-3">
                    <label class="form-label" for="{{ $observationInputId }}">Observacion</label>
                    <textarea id="{{ $observationInputId }}" class="form-control" rows="3" placeholder="Agregar observacion para este item"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">{{ $cancelButtonText }}</button>
                <button type="button" id="{{ $submitButtonId }}" class="btn btn-brand action-btn">{{ $submitButtonText }}</button>
            </div>
        </div>
    </div>
</div>