@extends('layouts.digitar')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('citizenVoicePolls.list') !!}
@endsection

@section('content')
    <div class="the-box rounded">
        @include('common.errors')
        <div class="row">
            <div class="col-md-12">
                <h4>Editar banner do portal</h4>
                <p class="text-muted">O banner pode usar texto e imagem. Se nenhuma imagem for enviada, o portal continua exibindo apenas o texto.</p>
            </div>
        </div>
        <hr class="hr">
        <div class="row">
            <div class="col-md-12">
                {!! Form::open(['route' => 'citizenVoicePolls.banner.update', 'files' => true]) !!}
                    <div class="form-group col-sm-12">
                        {!! Form::label('banner_title', 'Título do banner:') !!}
                        {!! Form::text('banner_title', old('banner_title', $bannerSettings['title']), ['class' => 'form-control', 'required']) !!}
                    </div>

                    <div class="form-group col-sm-12">
                        {!! Form::label('banner_text', 'Texto do banner:') !!}
                        {!! Form::textarea('banner_text', old('banner_text', $bannerSettings['text']), ['class' => 'form-control', 'rows' => 4, 'required']) !!}
                    </div>

                    <div class="form-group col-sm-12">
                        {!! Form::label('banner_image', 'Imagem do banner:') !!}
                        {!! Form::file('banner_image', ['class' => 'form-control', 'id' => 'banner-image-input', 'accept' => '.jpg,.jpeg,.png,.webp,.gif,image/jpeg,image/png,image/webp,image/gif']) !!}
                        <p class="help-block" style="margin-bottom: 8px;">Formatos aceitos: JPG, PNG, WEBP ou GIF. Tamanho máximo: 4 MB.</p>

                        <div id="banner-image-preview-wrap" style="margin-top: 12px; {{ empty($bannerSettings['image_url']) ? 'display: none;' : '' }}">
                            <img
                                id="banner-image-preview"
                                src="{{ $bannerSettings['image_url'] ?? '' }}"
                                alt="Prévia da imagem do banner"
                                style="max-width: 280px; width: 100%; border-radius: 10px; border: 1px solid #d9e2f0; padding: 6px; background: #fff;"
                            >
                            <p id="banner-image-removed-message" class="text-warning" style="display: none; margin-top: 10px; margin-bottom: 0;">
                                A imagem atual será removida ao salvar.
                            </p>
                        </div>

                        {!! Form::hidden('remove_banner_image', 0, ['id' => 'remove-banner-image']) !!}

                        <button
                            type="button"
                            id="remove-banner-image-button"
                            class="btn btn-default"
                            style="margin-top: 12px; {{ empty($bannerSettings['image_url']) ? 'display: none;' : '' }}"
                        >
                            Remover imagem atual
                        </button>
                    </div>

                    <div class="form-group col-sm-12">
                        {!! Form::submit('Salvar banner', ['class' => 'btn btn-primary']) !!}
                        <a href="{!! route('citizenVoicePolls.index') !!}" class="btn btn-default">Cancelar</a>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const imageInput = document.getElementById('banner-image-input');
        const previewWrap = document.getElementById('banner-image-preview-wrap');
        const previewImage = document.getElementById('banner-image-preview');
        const removeInput = document.getElementById('remove-banner-image');
        const removeButton = document.getElementById('remove-banner-image-button');
        const removedMessage = document.getElementById('banner-image-removed-message');
        const originalImageUrl = previewImage ? previewImage.getAttribute('src') : '';

        if (!imageInput || !previewWrap || !previewImage || !removeInput || !removeButton || !removedMessage) {
            return;
        }

        removeButton.addEventListener('click', function () {
            removeInput.value = '1';
            imageInput.value = '';
            previewWrap.style.display = 'block';
            previewImage.style.display = 'none';
            removedMessage.style.display = 'block';
            removeButton.style.display = 'none';
        });

        imageInput.addEventListener('change', function (event) {
            const [file] = event.target.files || [];

            if (!file) {
                if (removeInput.value === '1') {
                    previewWrap.style.display = 'block';
                    previewImage.style.display = 'none';
                    removedMessage.style.display = 'block';
                    removeButton.style.display = 'none';
                    return;
                }

                if (originalImageUrl) {
                    previewImage.src = originalImageUrl;
                    previewWrap.style.display = 'block';
                    previewImage.style.display = 'block';
                    removedMessage.style.display = 'none';
                    removeButton.style.display = 'inline-block';
                }

                return;
            }

            removeInput.value = '0';
            removedMessage.style.display = 'none';
            removeButton.style.display = originalImageUrl ? 'inline-block' : 'none';

            const reader = new FileReader();
            reader.onload = function (loadEvent) {
                previewImage.src = loadEvent.target.result;
                previewImage.style.display = 'block';
                previewWrap.style.display = 'block';
            };

            reader.readAsDataURL(file);
        });
    });
</script>