{{-- El identificador del banner aísla errores y estados dentro del modal de edición que originó la petición. --}}
<form action="{{ route('banners.update', $banner->id) }}" method="POST" enctype="multipart/form-data" class="js-banner-form" data-banner-form="edit" data-banner-id="{{ $banner->id }}">
    {{ csrf_field() }}
    <input type="hidden" name="_method" value="PUT">

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

    {{-- La vista de la imagen persistida permanece visible mientras se corrigen errores. --}}
    @if($banner->banner_url)
        <div class="form-group text-center">
            <img
                src="{{ $bannerImageUrl }}"
                alt="{{ $banner->description ?: 'Banner Portal de Clientes' }}"
                class="img-fluid"
                style="max-height: 220px;"
            >
        </div>
    @endif

    {{-- Los marcadores por campo reciben únicamente los errores de este formulario. --}}
    <div class="form-group" data-banner-field-group="image">
        <label for="banner-image-{{ $banner->id }}">Nueva imagen</label>
        <input
            type="file"
            id="banner-image-{{ $banner->id }}"
            name="image"
            class="form-control"
            accept=".jpg,.jpeg,.png"
        >
        <small class="text-muted">Déjalo vacío para conservar la imagen actual.</small>
        <div class="invalid-feedback js-banner-field-error" data-error-for="image"></div>
    </div>

    <div class="form-group" data-banner-field-group="start_date">
        <label for="banner-start-date-{{ $banner->id }}">Fecha inicio</label>
        <input
            type="date"
            id="banner-start-date-{{ $banner->id }}"
            name="start_date"
            value="{{ $banner->start_date ? $banner->start_date->format('Y-m-d') : '' }}"
            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-{{ $banner->id }}">Fecha fin</label>
        <input
            type="date"
            id="banner-end-date-{{ $banner->id }}"
            name="end_date"
            value="{{ $banner->end_date ? $banner->end_date->format('Y-m-d') : '' }}"
            class="form-control"
            required
        >
        <div class="invalid-feedback js-banner-field-error" data-error-for="end_date"></div>
    </div>

    <div class="form-group" data-banner-field-group="description">
        <label for="banner-description-{{ $banner->id }}">Descripción</label>
        <textarea
            id="banner-description-{{ $banner->id }}"
            name="description"
            class="form-control"
            maxlength="255"
        >{{ $banner->description }}</textarea>
        <div class="invalid-feedback js-banner-field-error" data-error-for="description"></div>
    </div>

    <div class="form-group" data-banner-field-group="external_url">
        <label for="banner-external-url-{{ $banner->id }}">URL destino</label>
        <input
            type="url"
            id="banner-external-url-{{ $banner->id }}"
            name="external_url"
            value="{{ $banner->external_url }}"
            class="form-control"
        >
        <small class="text-muted">Ingrese la liga de la página a la que será redirigido el usuario al seleccionar el banner. Si el banner no requiere redirección, deje este campo vacío.</small>
        <div class="invalid-feedback js-banner-field-error" data-error-for="external_url"></div>
    </div>

    <button type="submit" class="btn btn-primary">Actualizar</button>
</form>