@extends('fragments.fullTemplate')

@section('titulo')
    Banners Portal de Clientes
@endsection

@section('contenido')
    <div data-module-notifications-anchor></div>
    <div class="ui big breadcrumb">
        <div class="section">Portal de Clientes</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Banners</div>
    </div>

    <div class="ui divider"></div>

    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(count($errors) > 0)
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <button class="ui button fluid primary mb-3" data-toggle="modal" data-target="#createModal">
        <i class="plus icon"></i> Nuevo Banner
    </button>

    <div class="ui divider"></div>

    <div class="ui info message">
        <i class="star icon"></i>
        Utilice el botón con el ícono de estrella para destacar un banner. El sistema permite un máximo de 5 banners destacados de forma simultánea.
    </div>

    <div class="sx-autorender mt-3">
        <div class="sx-scroll-x">
            <table class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Descripción</th>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th>Estado</th>
                        <th>Destacado</th>
                        <th class="collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($banners as $banner)
                        <tr>
                            <td>{{ $banner->id }}</td>
                            <td>{{ $banner->description ?: 'Sin descripción' }}</td>
                            <td>{{ $banner->start_date ? $banner->start_date->format('d-m-Y') : '-' }}</td>
                            <td>{{ $banner->end_date ? $banner->end_date->format('d-m-Y') : '-' }}</td>
                            <td>
                                @if($banner->active)
                                    <span class="ui green label">Activo</span>
                                @else
                                    <span class="ui red label">Inactivo</span>
                                @endif
                            </td>
                            <td>
                                @if($banner->order >= 1 && $banner->order <= 5)
                                    <span class="ui blue label">#{{ $banner->order }}</span>
                                @else
                                    <span class="ui grey label">No</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="ui tiny icon buttons">
                                    @if($banner->order >= 1 && $banner->order <= 5)
                                        <form action="{{ route('banners.unfeature', $banner->id) }}" method="POST" style="display:inline;">
                                            {{ csrf_field() }}
                                            <button type="submit" class="ui button red" title="Quitar destacado">
                                                <i class="star outline icon"></i>
                                            </button>
                                        </form>
                                    @elseif($featuredCount < 5)
                                        <form action="{{ route('banners.feature', $banner->id) }}" method="POST" style="display:inline;">
                                            {{ csrf_field() }}
                                            <button type="submit" class="ui button green" title="Destacar">
                                                <i class="star icon"></i>
                                            </button>
                                        </form>
                                    @else
                                        <button class="ui button disabled" title="Límite alcanzado">
                                            <i class="ban icon"></i>
                                        </button>
                                    @endif

                                    <button
                                        type="button"
                                        class="ui button blue"
                                        data-toggle="modal"
                                        data-target="#editModal{{ $banner->id }}"
                                        title="Editar"
                                    >
                                        <i class="edit icon"></i>
                                    </button>

                                    <form action="{{ route('banners.toggle', $banner->id) }}" method="POST" style="display:inline;">
                                        {{ csrf_field() }}
                                        <button type="submit" class="ui button yellow" title="Activar / Desactivar">
                                            <i class="power icon"></i>
                                        </button>
                                    </form>

                                    <button
                                        type="button"
                                        class="ui button teal"
                                        data-toggle="modal"
                                        data-target="#previewModal{{ $banner->id }}"
                                        title="Vista previa"
                                    >
                                        <i class="eye icon"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">No hay banners.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{ $banners->links() }}
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Crear Banner</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @include('portal_clientes_banners.create')
                </div>
            </div>
        </div>
    </div>

    @foreach($banners as $banner)
        @php
            $bannerImageUrl = $banner->banner_image_url;
        @endphp

        <div class="modal fade" id="editModal{{ $banner->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Editar Banner</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('portal_clientes_banners.edit', ['banner' => $banner, 'bannerImageUrl' => $bannerImageUrl])
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="previewModal{{ $banner->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content p-3 text-center">
                    <h5 class="mb-3">{{ $banner->description }}</h5>

                    @if($banner->external_url)
                        <a href="{{ $banner->external_url }}" target="_blank" rel="noopener noreferrer">
                            <img src="{{ $bannerImageUrl }}" class="img-fluid" alt="{{ $banner->description }}">
                        </a>
                    @else
                        <img src="{{ $bannerImageUrl }}" class="img-fluid" alt="{{ $banner->description }}">
                    @endif
                </div>
            </div>
        </div>
    @endforeach

    {{-- Este handler compartido procesa exclusivamente creación y edición sin afectar las demás acciones. --}}
    <script>
        $(function () {
            var bannerFormSelector = '.js-banner-form';

            // Convierte las claves de Laravel en nombres reales de inputs y contenedores del formulario.
            function resolveBannerField(errorKey) {
                var match;

                if (/^images(?:\.\d+)?$/.test(errorKey)) {
                    return { inputName: 'images[]', displayKey: 'images' };
                }

                match = errorKey.match(/^descriptions\.(\d+)$/);
                if (match) {
                    return {
                        inputName: 'descriptions[' + match[1] + ']',
                        displayKey: errorKey
                    };
                }

                match = errorKey.match(/^external_urls\.(\d+)$/);
                if (match) {
                    return {
                        inputName: 'external_urls[' + match[1] + ']',
                        displayKey: errorKey
                    };
                }

                return { inputName: errorKey, displayKey: errorKey };
            }

            // Traduce los nombres con corchetes para reutilizar el mapeo con validación HTML5.
            function resolveInputErrorKey(inputName) {
                var match;

                if (inputName === 'images[]') {
                    return 'images';
                }

                match = inputName.match(/^descriptions\[(\d+)\]$/);
                if (match) {
                    return 'descriptions.' + match[1];
                }

                match = inputName.match(/^external_urls\[(\d+)\]$/);
                if (match) {
                    return 'external_urls.' + match[1];
                }

                return inputName;
            }

            // Localiza campos por su atributo name sin construir selectores con datos del servidor.
            function findBannerInput($form, inputName) {
                return $form.find('[name]').filter(function () {
                    return this.name === inputName;
                }).first();
            }

            // Limpia únicamente la presentación de errores y conserva todos los valores y archivos.
            function clearBannerErrors($form) {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.js-banner-field-error').empty().hide();
                $form.find('.js-banner-error-list').empty();
                $form.find('.js-banner-error-summary').addClass('d-none').hide();
            }

            // Limpia la marca de un campo cuando el usuario comienza a corregirlo.
            function clearBannerFieldError($form, errorKey) {
                var field = resolveBannerField(errorKey);
                var $input = findBannerInput($form, field.inputName);
                var $error = $form.find('.js-banner-field-error').filter(function () {
                    return $(this).attr('data-error-for') === field.displayKey;
                }).first();

                $input.removeClass('is-invalid');
                $error.empty().hide();
            }

            // Agrega mensajes al resumen mediante nodos de texto para evitar inyección de HTML.
            function appendBannerSummaryMessage($form, message) {
                var normalizedMessage = String(message || 'No fue posible validar el formulario.');
                var $summary = $form.find('.js-banner-error-summary');
                var $list = $summary.find('.js-banner-error-list');
                var duplicated = $list.children('li').filter(function () {
                    return $(this).text() === normalizedMessage;
                }).length > 0;

                if (!duplicated) {
                    $('<li>').text(normalizedMessage).appendTo($list);
                }

                $summary.removeClass('d-none').show();
            }

            // Marca el input correspondiente y muestra su mensaje dentro del mismo modal.
            function appendBannerFieldMessage($form, errorKey, message) {
                var field = resolveBannerField(errorKey);
                var $input = findBannerInput($form, field.inputName);
                var $error = $form.find('.js-banner-field-error').filter(function () {
                    return $(this).attr('data-error-for') === field.displayKey;
                }).first();

                $input.addClass('is-invalid');

                if ($error.length) {
                    $('<div>').text(String(message)).appendTo($error);
                    $error.show();
                }
            }

            // Presenta todas las claves 422 tanto en el resumen como junto al campo identificable.
            function renderBannerValidationErrors($form, errors) {
                var hasMessages = false;

                $.each(errors || {}, function (errorKey, messages) {
                    var normalizedMessages = $.isArray(messages) ? messages : [messages];

                    $.each(normalizedMessages, function (index, message) {
                        hasMessages = true;
                        appendBannerFieldMessage($form, errorKey, message);
                        appendBannerSummaryMessage($form, message);
                    });
                });

                if (!hasMessages) {
                    appendBannerSummaryMessage($form, 'Revisa los datos ingresados e intenta nuevamente.');
                }
            }

            // Muestra errores no asociados a campos sin utilizar detalles técnicos de la respuesta.
            function renderBannerGeneralError($form, message) {
                appendBannerSummaryMessage($form, message);
            }

            // Genera los campos por imagen con APIs de texto seguras y marcadores indexados.
            function renderBannerImageFields($form, files) {
                var $container = $form.find('#banner-dynamic-fields');

                $container.empty();

                $.each(files, function (index, file) {
                    var descriptionKey = 'descriptions.' + index;
                    var externalUrlKey = 'external_urls.' + index;
                    var $block = $('<div>', {
                        'class': 'ui segment',
                        'data-banner-image-index': index
                    });
                    var $descriptionGroup = $('<div>', {
                        'class': 'form-group mt-2',
                        'data-banner-field-group': descriptionKey
                    });
                    var $externalUrlGroup = $('<div>', {
                        'class': 'form-group',
                        'data-banner-field-group': externalUrlKey
                    });

                    $('<strong>').text(file.name).appendTo($block);
                    $('<label>').text('Descripción').appendTo($descriptionGroup);
                    $('<input>', {
                        type: 'text',
                        name: 'descriptions[' + index + ']',
                        'class': 'form-control',
                        maxlength: 255
                    }).appendTo($descriptionGroup);
                    $('<div>', {
                        'class': 'invalid-feedback js-banner-field-error',
                        'data-error-for': descriptionKey
                    }).appendTo($descriptionGroup);

                    $('<label>').text('URL destino').appendTo($externalUrlGroup);
                    $('<input>', {
                        type: 'url',
                        name: 'external_urls[' + index + ']',
                        'class': 'form-control'
                    }).appendTo($externalUrlGroup);
                    $('<small>', { 'class': 'text-muted' })
                        .text('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.')
                        .appendTo($externalUrlGroup);
                    $('<div>', {
                        'class': 'invalid-feedback js-banner-field-error',
                        'data-error-for': externalUrlKey
                    }).appendTo($externalUrlGroup);

                    $block.append($descriptionGroup, $externalUrlGroup);
                    $container.append($block);
                });
            }

            // Conserva la selección mayor a diez y bloquea el submit hasta que el usuario la reemplace.
            $(document).on('change', bannerFormSelector + '[data-banner-form="create"] input[name="images[]"]', function () {
                var $input = $(this);
                var $form = $input.closest(bannerFormSelector);
                var files = this.files || [];
                var exceedsLimit = files.length > 10;

                clearBannerErrors($form);
                renderBannerImageFields($form, files);
                $form.data('bannerFileCountInvalid', exceedsLimit);

                if (exceedsLimit) {
                    renderBannerValidationErrors($form, {
                        images: ['Solo puedes cargar hasta 10 imágenes.']
                    });
                }
            });

            // Retira la marca del campo corregido sin reiniciar el resto del formulario.
            $(document).on('input change', bannerFormSelector + ' [name]', function () {
                if (this.name === 'images[]') {
                    return;
                }

                var $form = $(this).closest(bannerFormSelector);
                clearBannerFieldError($form, resolveInputErrorKey(this.name));
            });

            // Refleja las restricciones HTML5 dentro del modal cuando el navegador bloquea el submit.
            $(bannerFormSelector).each(function () {
                var form = this;

                form.addEventListener('invalid', function (event) {
                    var $form = $(form);
                    var errorKey = resolveInputErrorKey(event.target.name || '');
                    var message = event.target.validationMessage || 'Revisa este campo.';

                    clearBannerFieldError($form, errorKey);
                    appendBannerFieldMessage($form, errorKey, message);
                    appendBannerSummaryMessage($form, message);
                }, true);
            });

            // Limpia errores visuales al iniciar un intento desde el botón, sin alterar valores o FileList.
            $(document).on('click', bannerFormSelector + ' :submit', function () {
                var $form = $(this).closest(bannerFormSelector);

                clearBannerErrors($form);

                if ($form.data('bannerFileCountInvalid')) {
                    renderBannerValidationErrors($form, {
                        images: ['Solo puedes cargar hasta 10 imágenes.']
                    });
                }
            });

            // Envía multipart por AJAX y solo cierra el modal ante el contrato JSON de éxito esperado.
            $(document).on('submit', bannerFormSelector, function (event) {
                event.preventDefault();

                var $form = $(this);
                var $submitButton = $form.find(':submit').first();
                var navigationPending = false;

                if ($form.data('bannerSubmitting')) {
                    return;
                }

                clearBannerErrors($form);

                if ($form.data('bannerFileCountInvalid')) {
                    renderBannerValidationErrors($form, {
                        images: ['Solo puedes cargar hasta 10 imágenes.']
                    });
                    return;
                }

                $form.data('bannerSubmitting', true);
                $submitButton.prop('disabled', true);

                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method') || 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    headers: {
                        Accept: 'application/json'
                    },
                    success: function (response) {
                        var validSuccess = response
                            && response.success === true
                            && typeof response.redirect === 'string'
                            && response.redirect.length > 0;

                        if (!validSuccess) {
                            renderBannerGeneralError($form, 'La respuesta del servidor no permitió confirmar el guardado.');
                            return;
                        }

                        clearBannerErrors($form);
                        navigationPending = true;

                        var $modal = $form.closest('.modal');
                        var navigateToIndex = function () {
                            window.location.assign(response.redirect);
                        };

                        if ($modal.hasClass('show')) {
                            $modal.one('hidden.bs.modal.bannerSubmit', navigateToIndex);
                            $modal.modal('hide');
                        } else {
                            navigateToIndex();
                        }
                    },
                    error: function (xhr) {
                        var status = xhr.status;

                        if (status === 422) {
                            renderBannerValidationErrors(
                                $form,
                                xhr.responseJSON && xhr.responseJSON.errors
                                    ? xhr.responseJSON.errors
                                    : {}
                            );
                            return;
                        }

                        if (status === 413) {
                            renderBannerGeneralError($form, 'El archivo o la solicitud excede el tamaño permitido.');
                        } else if (status === 419) {
                            renderBannerGeneralError($form, 'La sesión expiró. Recarga la página e inicia sesión nuevamente antes de reenviar.');
                        } else if (status === 401) {
                            renderBannerGeneralError($form, 'Tu sesión ya no es válida. Inicia sesión nuevamente antes de reenviar.');
                        } else if (status === 403) {
                            renderBannerGeneralError($form, 'No tienes autorización para realizar esta operación.');
                        } else if (status >= 500) {
                            renderBannerGeneralError($form, 'Ocurrió un error interno y no fue posible guardar el banner.');
                        } else if (status === 0) {
                            renderBannerGeneralError($form, 'No fue posible completar la solicitud. Verifica tu conexión e intenta nuevamente.');
                        } else {
                            renderBannerGeneralError($form, 'No fue posible completar la solicitud. Intenta nuevamente.');
                        }
                    },
                    complete: function () {
                        // La finalización solo restaura el botón; nunca cierra el modal.
                        if (!navigationPending) {
                            $form.data('bannerSubmitting', false);
                            $submitButton.prop('disabled', false);
                        }
                    }
                });
            });
        });
    </script>
@endsection