@extends('donamarmita-admin')
@section('title', 'Criar Banner - Donamarmita')
@section('content')

@php
    switch ($type) {    
        case 'main':
            $bannerWidth  = $bannerWidth01;
            $bannerHeight = $bannerHeight02;
            break;
        case 'secondary':
            $bannerWidth  = $bannerWidth02;
            $bannerHeight = $bannerHeight02;
            break;

        case 'fit':
            $bannerWidth  = $bannerWidth03;
            $bannerHeight = $bannerHeight03;
            break;

        case 'vegetarian':
            $bannerWidth  = $bannerWidth04;
            $bannerHeight = $bannerHeight04;
            break;
    }
@endphp

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fa fa-images"></i> Criar Novo Banner</h1>
            <p class="text-muted">Preencha os campos para adicionar um novo banner</p>
        </div>
        <div class="title_right">
            <div class="pull-right">
                <a href="{{ route('admin.marketing.banners.index', ['type' => $type]) }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Voltar à Lista
                </a>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.marketing.banners.index', ['type' => 'main']) }}">Marketing</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.marketing.banners.index', ['type' => $type]) }}">
                        @switch($type)
                            @case('main') Banners Principais @break
                            @case('secondary') Banners Secundários @break
                            @case('fit') Banners Fit @break
                            @case('vegetarian') Banners Vegetarianos @break
                        @endswitch
                    </a></li>
                    <li class="breadcrumb-item active" aria-current="page">Criar Novo</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Main Form Card -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-edit"></i> Formulário de Criação</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form class="form-horizontal form-label-left" method="POST" enctype="multipart/form-data" id="formCreateBanner" action="{{ route('admin.marketing.banners.store', $type) }}">
                        @csrf
                        <input type="hidden" name="ban_type" value="{{ $type }}">

                        <!-- Alert Messages -->
                        @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <strong><i class="fa fa-exclamation-circle"></i> Erro!</strong>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        <!-- Seção 1: Informações Básicas -->
                        <div class="form-section">
                            <h3 class="section-title"><i class="fa fa-info-circle"></i> Informações Básicas</h3>
                            <div class="ln_solid"></div>

                            <!-- Textos Multilingue - Linha 1 -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt1_pt">
                                    Texto Principal - PT <span class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt1_pt" 
                                           name="ban_txt1_pt" 
                                           class="form-control @error('ban_txt1_pt') is-invalid @enderror" 
                                           placeholder="Ex: Refeições Saudáveis"
                                           value="{{ old('ban_txt1_pt') }}"
                                           required>
                                    @error('ban_txt1_pt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto principal em português</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt1_en">
                                    Main Text - EN
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt1_en" 
                                           name="ban_txt1_en" 
                                           class="form-control @error('ban_txt1_en') is-invalid @enderror" 
                                           placeholder="Ex: Healthy Meals"
                                           value="{{ old('ban_txt1_en') }}">
                                    @error('ban_txt1_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Main text in English</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt1_es">
                                    Texto Principal - ES
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt1_es" 
                                           name="ban_txt1_es" 
                                           class="form-control @error('ban_txt1_es') is-invalid @enderror" 
                                           placeholder="Ex: Comidas Saludables"
                                           value="{{ old('ban_txt1_es') }}">
                                    @error('ban_txt1_es')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto principal en español</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt1_fr">
                                    Texte Principal - FR
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt1_fr" 
                                           name="ban_txt1_fr" 
                                           class="form-control @error('ban_txt1_fr') is-invalid @enderror" 
                                           placeholder="Ex: Repas Sains"
                                           value="{{ old('ban_txt1_fr') }}">
                                    @error('ban_txt1_fr')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texte principal en français</small>
                                </div>
                            </div>

                            <div class="ln_solid"></div>

                            <!-- Textos Multilingue - Linha 2 -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt2_pt">
                                    Texto Secundário - PT
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt2_pt" 
                                           name="ban_txt2_pt" 
                                           class="form-control @error('ban_txt2_pt') is-invalid @enderror" 
                                           placeholder="Ex: Entregas ao domicílio"
                                           value="{{ old('ban_txt2_pt') }}">
                                    @error('ban_txt2_pt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto secundário em português</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt2_en">
                                    Secondary Text - EN
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt2_en" 
                                           name="ban_txt2_en" 
                                           class="form-control @error('ban_txt2_en') is-invalid @enderror" 
                                           placeholder="Ex: Home delivery"
                                           value="{{ old('ban_txt2_en') }}">
                                    @error('ban_txt2_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Secondary text in English</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt2_es">
                                    Texto Secundario - ES
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt2_es" 
                                           name="ban_txt2_es" 
                                           class="form-control @error('ban_txt2_es') is-invalid @enderror" 
                                           placeholder="Ex: Entregas a domicilio"
                                           value="{{ old('ban_txt2_es') }}">
                                    @error('ban_txt2_es')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto secundario en español</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt2_fr">
                                    Texte Secondaire - FR
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt2_fr" 
                                           name="ban_txt2_fr" 
                                           class="form-control @error('ban_txt2_fr') is-invalid @enderror" 
                                           placeholder="Ex: Livraison à domicile"
                                           value="{{ old('ban_txt2_fr') }}">
                                    @error('ban_txt2_fr')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texte secondaire en français</small>
                                </div>
                            </div>

                            <div class="ln_solid"></div>

                            <!-- Textos Multilingue - Linha 3 (CTA/Botão) -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt3_pt">
                                    Texto do Botão - PT
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt3_pt" 
                                           name="ban_txt3_pt" 
                                           class="form-control @error('ban_txt3_pt') is-invalid @enderror" 
                                           placeholder="Ex: Ver Ofertas"
                                           value="{{ old('ban_txt3_pt') }}">
                                    @error('ban_txt3_pt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto do botão em português</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt3_en">
                                    Button Text - EN
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt3_en" 
                                           name="ban_txt3_en" 
                                           class="form-control @error('ban_txt3_en') is-invalid @enderror" 
                                           placeholder="Ex: View Offers"
                                           value="{{ old('ban_txt3_en') }}">
                                    @error('ban_txt3_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Button text in English</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt3_es">
                                    Texto del Botón - ES
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt3_es" 
                                           name="ban_txt3_es" 
                                           class="form-control @error('ban_txt3_es') is-invalid @enderror" 
                                           placeholder="Ex: Ver Ofertas"
                                           value="{{ old('ban_txt3_es') }}">
                                    @error('ban_txt3_es')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texto del botón en español</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_txt3_fr">
                                    Texte du Bouton - FR
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="ban_txt3_fr" 
                                           name="ban_txt3_fr" 
                                           class="form-control @error('ban_txt3_fr') is-invalid @enderror" 
                                           placeholder="Ex: Voir les Offres"
                                           value="{{ old('ban_txt3_fr') }}">
                                    @error('ban_txt3_fr')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Texte du bouton en français</small>
                                </div>
                            </div>
                        </div>

                        <!-- Seção 2: Link e Configurações -->
                        <div class="form-section mt-4">
                            <h3 class="section-title"><i class="fa fa-link"></i> Link e Configurações</h3>
                            <div class="ln_solid"></div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ban_link">
                                    URL do Link
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="url" 
                                           id="ban_link" 
                                           name="ban_link" 
                                           class="form-control @error('ban_link') is-invalid @enderror" 
                                           placeholder="Ex: https://donamarmita.pt/promocoes"
                                           value="{{ old('ban_link') }}">
                                    @error('ban_link')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">URL para onde o banner deve redirecionar</small>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align" for="ban_text_position">
                                            Posição do Texto
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <select class="form-control @error('ban_text_position') is-invalid @enderror" 
                                                    name="ban_text_position" 
                                                    id="ban_text_position">
                                                <option value="left" {{ old('ban_text_position', 'left') == 'left' ? 'selected' : '' }}>Esquerda</option>
                                                <option value="center" {{ old('ban_text_position') == 'center' ? 'selected' : '' }}>Centro</option>
                                                <option value="right" {{ old('ban_text_position') == 'right' ? 'selected' : '' }}>Direita</option>
                                            </select>
                                            @error('ban_text_position')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Posição do texto sobre o banner</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align">
                                            Visibilidade
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" 
                                                           id="ban_visible" 
                                                           name="ban_visible" 
                                                           value="1"
                                                           {{ old('ban_visible', true) ? 'checked' : '' }}
                                                           class="flat">
                                                    Banner visível no site
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Se desmarcado, este banner não será exibido
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align">
                                            Tipo de Banner
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-control-plaintext">
                                                @switch($type)
                                                    @case('main') <span class="badge badge-primary">Banner Principal</span> @break
                                                    @case('secondary') <span class="badge badge-success">Banner Secundário</span> @break
                                                    @case('fit') <span class="badge badge-warning">Banner Fit</span> @break
                                                    @case('vegetarian') <span class="badge badge-success">Banner Vegetariano</span> @break
                                                @endswitch
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Seção 3: Imagem do Banner -->
                        <div class="form-section mt-4">
                            <h3 class="section-title"><i class="fa fa-image"></i> Imagem do Banner</h3>
                            <div class="ln_solid"></div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align">
                                    Imagem do Banner <span class="required">*</span>
                                </label>
                                <div class="col-md-8 col-sm-8">
                                    <div class="dropzone-area">
                                        <input type="hidden" id="folder-1" value="banners">
                                        <input type="hidden" id="width-1" value="{{ $bannerWidth }}">
                                        <input type="hidden" id="height-1" value="{{ $bannerHeight }}">
                                        <input type="hidden" id="numberOfFiles-1" value="1">
                                        <input type="hidden" id="imgName-1" name="ban_img">
                                        <input type="hidden" id="linkToAdministration-1" value="{{ $adminPage ?? '' }}">
                                        <div class="dropzone" id="dropzone1" data-form-id="1" style="border: 1px dashed #ccc; padding: 20px; text-align: center;">
                                            <i class="fa fa-cloud-upload-alt fa-3x mb-2 upload-icon" style="color: #ccc;"></i>
                                        </div>
                                        <div class="mt-2">
                                            <small class="form-text text-muted">
                                                <strong>Dimensões recomendadas:</strong> {{ $bannerWidth }} x {{ $bannerHeight }} px
                                            </small>
                                            <small class="form-text text-muted">
                                                <strong>Formatos aceites:</strong> JPG, PNG, WebP
                                            </small>
                                            <small class="form-text text-muted">
                                                <strong>Tamanho máximo:</strong> 5MB
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Form Footer -->
                        <div class="ln_solid"></div>
                        <div class="form-group row">
                            <div class="col-md-6 col-sm-6 offset-md-3">
                                <a href="{{ route('admin.marketing.banners.index', ['type' => $type]) }}" class="btn btn-secondary">
                                    <i class="fa fa-times"></i> Cancelar
                                </a>
                                <button type="reset" class="btn btn-warning">
                                    <i class="fa fa-eraser"></i> Limpar
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> Criar Banner
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .form-section {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        border-left: 4px solid #2A3F54;
    }
    
    .section-title {
        color: #2A3F54;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .ln_solid {
        border-top: 1px solid #e5e5e5;
        margin: 15px 0;
    }
    
    .required {
        color: #E74C3C;
    }
    
    .checkbox label {
        padding-left: 0;
        cursor: pointer;
    }
    
    .checkbox input[type="checkbox"] {
        margin-right: 5px;
    }
    
    .dropzone-area {
        background-color: #fff;
        border-radius: 6px;
        padding: 15px;
    }
    
    .dropzone:hover {
        border-color: #2A3F54 !important;
        cursor: pointer;
        background: #f0f7ff;
    }
    
    .upload-icon {
        transition: color 0.3s;
    }
    
    .dropzone:hover .upload-icon {
        color: #2A3F54;
    }
    
    .upload-text {
        color: #666;
        font-size: 14px;
    }
    
    .dropzone:hover .upload-text {
        color: #2A3F54;
    }
    
    .form-text.text-muted {
        font-size: 10px;
        margin-top: 5px;
    }
    
    /* Estilo para checkboxes flat */
    .flat {
        position: relative;
        cursor: pointer;
    }
    
    .flat:checked {
        background-color: #2A3F54;
        border-color: #2A3F54;
    }
    
    /* Ajuste para os badges de tipo */
    .badge {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .badge-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .badge-success { background: linear-gradient(135deg, #28a745 0%, #218838 100%); }
    .badge-warning { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%); color: #333; }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Validação do formulário com toast
    $('#formCreateBanner').on('submit', function(e) {
        var hasImage = $('#imgName-1').val();
        var hasText1 = $('#ban_txt1_pt').val().trim();

        // Array para armazenar erros
        var errors = [];

        if (!hasImage) {
            errors.push('Por favor, carregue uma imagem para o banner.');
        }

        if (!hasText1) {
            errors.push('Por favor, preencha o texto principal em português.');
        }

        // Se houver erros, mostrar toast e prevenir submit
        if (errors.length > 0) {
            e.preventDefault();

            // Mostrar todos os erros em um único toast
            if (errors.length === 1) {
                toast.error(errors[0], 'Erro de Validação', 6000);
            } else {
                var errorList = '<ul style="margin: 0; padding-left: 20px; text-align: left;">';
                errors.forEach(function(error) {
                    errorList += '<li style="margin-bottom: 8px;">' + error + '</li>';
                });
                errorList += '</ul>';

                toast.error(errorList, 'Erros de Validação (' + errors.length + ')', 8000);
            }

            // Scroll para o topo do formulário
            $('html, body').animate({
                scrollTop: $('.form-section').first().offset().top - 100
            }, 500);

            return false;
        }
    });

    // Auto-focus no primeiro campo
    $('#ban_txt1_pt').focus();
});
</script>
@endpush