{{-- Los hooks del formulario limitan el manejo AJAX y los errores al modal de creación de Banners. --}}
<form action="{{ route('banners.store') }}" method="POST" enctype="multipart/form-data" class="js-banner-form" data-banner-form="create">
    {{ csrf_field() }}

    {{-- El resumen permanece dentro del modal y se llena con texto escapado desde JavaScript. --}}
    <div class="alert alert-danger d-none js-banner-error-summary" role="alert" aria-live="polite">
        <strong>No fue posible guardar el banner.</strong>
        <ul class="mb-0 js-banner-error-list"></ul>
    </div>

    {{-- El campo múltiple conserva su FileList ante validaciones locales o respuestas 422. --}}
    <div class="form-group" data-banner-field-group="images">
        <label for="banner-images">Imágenes (máximo 10)</label>
        <input
            type="file"
            id="banner-images"
            name="images[]"
            class="form-control"
            multiple
            accept=".jpg,.jpeg,.png"
            required
        >
        <small class="text-muted">JPG o PNG, máximo 2 MB y dimensiones 1920 x 600 píxeles.</small>
        <div class="invalid-feedback js-banner-field-error" data-error-for="images"></div>
    </div>

    {{-- Los campos por imagen se crean de forma segura al cambiar la selección. --}}
    <div id="banner-dynamic-fields"></div>

    {{-- Los marcadores por campo permiten asociar las claves exactas devueltas por Laravel. --}}
    <div class="form-group" data-banner-field-group="start_date">
        <label for="banner-start-date">Fecha inicio</label>
        <input type="date" id="banner-start-date" name="start_date" value="{{ old('start_date') }}" class="form-control" required>
        <div class="invalid-feedback js-banner-field-error" data-error-for="start_date"></div>
    </div>

    <div class="form-group" data-banner-field-group="end_date">
        <label for="banner-end-date">Fecha fin</label>
        <input type="date" id="banner-end-date" name="end_date" value="{{ old('end_date') }}" class="form-control" required>
        <div class="invalid-feedback js-banner-field-error" data-error-for="end_date"></div>
    </div>

    <button type="submit" class="btn btn-success">Guardar</button>
</form>

{{-- La generación de campos y el submit se centralizan en el handler local compartido del índice. --}}