@props([
    'name' => 'title_name',
    'label' => 'Book',
    'placeholder' => 'Start typing...',
    'required' => false,
    'apiEndpoint' => '/api/reference/lr-details-p/search'
])

<div class="col-md-12 mt-3">
    <label for="{{ $name }}_display" class="form-label">
        {{ $label }}
        @if($required)<span class="text-danger"> * </span>@endif
    </label>

    <div class="book-combo-wrapper" data-book-combo="{{ $name }}">
        <!-- Display input (user sees this) -->
        <input
            type="text"
            class="form-control book-combo-input"
            id="{{ $name }}_display"
            data-combo-input
            placeholder="{{ $placeholder }}"
            autocomplete="off"
            @if($required) required @endif
        />

        <!-- Hidden input (stores the book ID) -->
        <input
            type="hidden"
            id="{{ $name }}"
            name="{{ $name }}"
            data-combo-value
            @if($required) required @endif
        />

        <!-- Dropdown results -->
        <div class="book-combo-dropdown" data-combo-dropdown>
            <div data-combo-results></div>
        </div>
    </div>
</div>

<!-- Load CSS once -->
@once
    <link rel="stylesheet" href="{{ asset('assets/css/components/book-combo.css') }}">
@endonce