@extends('layouts.publicador.novo_padrao')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <div class="form-page">
        <div class="container-fluid">
            
            <header class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-envelope-paper"></i>
                    </div>
                    <div class="header-text">
                        <h1>@lang('labels.newsletter')</h1>
                        <p>@lang('labels.acoes.enviar') @lang('labels.texto')</p>
                    </div>
                </div>
                <div class="header-actions">
                    <a href="{{ route('publicador.newsletter.index') }}" class="btn-back">
                        <i class="bi bi-arrow-left"></i>
                        <span>Voltar</span>
                    </a>
                </div>
            </header>

            @if ($errors->any())
                <div class="alert-box alert-error" id="alertError">
                    <div class="alert-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <div class="alert-content">
                        <p>@lang('labels.msg.verifique')</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            {!! Form::model($model, ['route' => ['publicador.newsletter.salvar'], 'method' => 'post', 'id' => 'main-form']) !!}
            {{ Form::hidden('tipo', 2) }}

            <div class="form-sections">
                
                <section class="form-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="section-title">
                            <h2>Destinatários</h2>
                            <p>Selecione os filtros para definir quem receberá a mensagem</p>
                        </div>
                    </div>

                    <div class="section-body">
                        <div class="filter-groups">
                            
                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-tag"></i>
                                    <label>@choice('labels.categorias', 0)</label>
                                    <span class="filter-required">*</span>
                                </div>
                                <div class="checkbox-list @if ($errors->has('categorias')) has-error @endif">
                                    @foreach($categorias as $c)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('categorias[]', $c->id, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $c->descricao }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                @if ($errors->has('categorias'))
                                    <div class="field-error">
                                        @foreach ($errors->get('categorias') as $error)
                                            <span>{{ $error }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-gender-ambiguous"></i>
                                    <label>@lang('labels.sexo')</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach(\Config::get('constants.sexo') as $sexo)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('sexo[]', $sexo, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $sexo }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-geo-alt"></i>
                                    <label>@choice('labels.cidades', 0)</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach($cidades as $cidade)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('cidades[]', $cidade, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $cidade }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-map"></i>
                                    <label>@choice('labels.estados', 0)</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach($estados as $estado)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('estado[]', $estado, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $estado }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>
                </section>

                <section class="form-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="bi bi-envelope-open"></i>
                        </div>
                        <div class="section-title">
                            <h2>Conteúdo da Mensagem</h2>
                            <p>Defina o título e o conteúdo do e-mail</p>
                        </div>
                    </div>

                    <div class="section-body">
                        <div class="form-fields">
                            
                            <div class="form-field">
                                <label class="field-label">
                                    <i class="bi bi-type"></i>
                                    @lang('labels.titulo')
                                    <span class="field-required">*</span>
                                </label>
                                {{ Form::text('titulo', null, [
                                    'class' => 'field-input '.($errors->has('titulo') ? 'is-invalid' : ''),
                                    'maxlength' => 250,
                                    'placeholder' => 'Digite o título da mensagem...'
                                ]) }}
                                @if ($errors->has('titulo'))
                                    <div class="field-error">
                                        <span>{{ $errors->first('titulo') }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="form-field">
                                <label class="field-label">
                                    <i class="bi bi-file-earmark-text"></i>
                                    @lang('labels.texto')
                                    <span class="field-required">*</span>
                                </label>
                                {{ Form::textarea('html', null, [
                                    'id' => 'texto',
                                    'class' => 'field-textarea editor-textarea '.($errors->has('html') ? 'is-invalid' : ''),
                                    'placeholder' => 'Digite o conteúdo da mensagem...',
                                    'rows' => 15
                                ]) }}
                                @if ($errors->has('html'))
                                    <div class="field-error">
                                        <span>{{ $errors->first('html') }}</span>
                                    </div>
                                @endif
                            </div>

                        </div>
                    </div>
                </section>

            </div>

            <div class="form-actions">
                <a href="{{ route('publicador.newsletter.index') }}" class="btn-action btn-cancel">
                    <i class="bi bi-x-lg"></i>
                    <span>@lang('labels.acoes.cancelar')</span>
                </a>
                <button type="submit" class="btn-action btn-save" id="submit-btn">
                    <i class="bi bi-check-lg"></i>
                    <span>@lang('labels.acoes.salvar')</span>
                </button>
            </div>

            {!! Form::close() !!}

        </div>
    </div>

    @include('layouts.publicador.tinymce')

    <style>
        .tox-promotion {
            display: none;
        }

        .tox-statusbar__branding {
            display: none;
        }

        .tinymce-error .tox-edit-area {
            border-color: #dc2626 !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
        }

        .tinymce-error-message {
            color: #dc2626;
            font-size: 0.75rem;
            font-weight: 500;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .tinymce-error-message::before {
            content: "⚠";
            font-size: 0.875rem;
        }

        :root {
            --color-primary: #006AA1;
            --color-primary-dark: #005580;
            --color-primary-light: #e8f4f9;
            --color-secondary: #6c757d;
            --color-success: #28a745;
            --color-success-light: #d4edda;
            --color-danger: #dc3545;
            --color-danger-light: #f8d7da;
            --color-warning: #ffc107;
            --color-warning-light: #fff3cd;
            --color-info: #17a2b8;
            --color-info-light: #d1ecf1;
            
            --color-white: #ffffff;
            --color-gray-50: #f8fafc;
            --color-gray-100: #f1f5f9;
            --color-gray-200: #e2e8f0;
            --color-gray-300: #cbd5e1;
            --color-gray-400: #94a3b8;
            --color-gray-500: #64748b;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1e293b;
            --color-gray-900: #0f172a;
            
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--color-gray-100);
            color: var(--color-gray-800);
            line-height: 1.6;
        }

        .form-page {
            min-height: 100vh;
            padding: 1.5rem;
        }

        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--color-white);
            padding: 1.5rem 2rem;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
        }

        .header-content {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .header-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 16px rgba(0, 106, 161, 0.3);
        }

        .header-icon i {
            font-size: 1.75rem;
            color: var(--color-white);
        }

        .header-text h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-gray-800);
            margin-bottom: 0.25rem;
        }

        .header-text p {
            font-size: 0.875rem;
            color: var(--color-gray-500);
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: var(--color-gray-200);
            color: var(--color-gray-700);
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all var(--transition-base);
        }

        .btn-back:hover {
            background: var(--color-gray-300);
            color: var(--color-gray-800);
            transform: translateX(-2px);
        }

        .alert-box {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-radius: var(--radius-lg);
            margin-bottom: 1.5rem;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .alert-error {
            background: var(--color-danger-light);
            border-left: 4px solid var(--color-danger);
        }

        .alert-icon {
            font-size: 1.25rem;
        }

        .alert-error .alert-icon {
            color: var(--color-danger);
        }

        .alert-content {
            flex: 1;
        }

        .alert-content p {
            margin: 0;
            font-size: 0.875rem;
            color: var(--color-gray-700);
        }

        .alert-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--color-gray-500);
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .alert-close:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .form-sections {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem 2rem;
            background: var(--color-gray-50);
            border-bottom: 1px solid var(--color-gray-200);
        }

        .section-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .section-icon i {
            font-size: 1.5rem;
            color: var(--color-primary-dark);
        }

        .section-title h2 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-gray-800);
            margin-bottom: 0.25rem;
        }

        .section-title p {
            font-size: 0.8125rem;
            color: var(--color-gray-500);
        }

        .section-body {
            padding: 2rem;
        }

        .filter-groups {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .filter-group-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: var(--color-gray-50);
            border-radius: var(--radius-md);
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .filter-group-header i {
            font-size: 1rem;
            color: var(--color-primary);
        }

        .filter-group-header label {
            flex: 1;
            margin: 0;
            font-size: 0.875rem;
        }

        .filter-required {
            color: var(--color-danger);
            font-weight: 700;
        }

        .checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--color-gray-50);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            max-height: 240px;
            overflow-y: auto;
        }

        .checkbox-list.has-error {
            border-color: var(--color-danger);
        }

        .checkbox-list::-webkit-scrollbar {
            width: 8px;
        }

        .checkbox-list::-webkit-scrollbar-track {
            background: var(--color-gray-100);
            border-radius: var(--radius-sm);
        }

        .checkbox-list::-webkit-scrollbar-thumb {
            background: var(--color-gray-300);
            border-radius: var(--radius-sm);
        }

        .checkbox-list::-webkit-scrollbar-thumb:hover {
            background: var(--color-gray-400);
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.625rem 0.75rem;
            background: var(--color-white);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            user-select: none;
        }

        .checkbox-item:hover {
            background: var(--color-primary-light);
        }

        .checkbox-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .checkbox-custom {
            position: relative;
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-gray-300);
            border-radius: var(--radius-sm);
            background: var(--color-white);
            transition: all var(--transition-fast);
        }

        .checkbox-input:checked + .checkbox-custom {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        .checkbox-input:checked + .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 4px;
            height: 9px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .checkbox-label {
            flex: 1;
            font-size: 0.875rem;
            color: var(--color-gray-700);
            line-height: 1.4;
        }

        .field-error {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.5rem 0.75rem;
            background: var(--color-danger-light);
            border-left: 3px solid var(--color-danger);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--color-danger);
            font-weight: 500;
        }

        .form-fields {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .field-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .field-label i {
            font-size: 1rem;
            color: var(--color-primary);
        }

        .field-required {
            color: var(--color-danger);
            font-weight: 700;
        }

        .field-input {
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: var(--color-gray-800);
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .field-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-light);
        }

        .field-input.is-invalid {
            border-color: var(--color-danger);
        }

        .field-input::placeholder {
            color: var(--color-gray-400);
        }

        .field-textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: var(--color-gray-800);
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            resize: vertical;
            font-family: var(--font-family);
            line-height: 1.6;
        }

        .field-textarea:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-light);
        }

        .field-textarea.is-invalid {
            border-color: var(--color-danger);
        }

        .field-textarea::placeholder {
            color: var(--color-gray-400);
        }

        .form-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            padding: 2rem;
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 2rem;
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all var(--transition-base);
            min-width: 160px;
            justify-content: center;
        }

        .btn-cancel {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .btn-cancel:hover {
            background: var(--color-gray-300);
            color: var(--color-gray-800);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-save {
            background: linear-gradient(135deg, var(--color-success), #218838);
            color: var(--color-white);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        .btn-save:hover {
            background: linear-gradient(135deg, #218838, #1e7e34);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
        }

        @if ($errors->has('html'))
        .tox-tinymce,
        #texto_ifr {
            border-color: var(--color-danger) !important;
        }
        
        .tox-edit-area {
            border-color: var(--color-danger) !important;
        }
        @endif

        @media (max-width: 992px) {
            .filter-groups {
                grid-template-columns: 1fr;
            }

            .page-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .header-content {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .form-page {
                padding: 1rem;
            }

            .section-body {
                padding: 1.25rem;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn-action {
                width: 100%;
            }
        }
    </style>

    <script>
        (function() {
            'use strict';

            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('main-form');
                
                if (form) {
                    form.addEventListener('submit', function(e) {
                        const categorias = document.querySelectorAll('input[name="categorias[]"]:checked');
                        
                        if (categorias.length === 0) {
                            e.preventDefault();
                            
                            const checkboxList = document.querySelector('.checkbox-list.has-error');
                            if (checkboxList) {
                                checkboxList.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                        }
                    });
                }

                const checkboxItems = document.querySelectorAll('.checkbox-item');
                checkboxItems.forEach(function(item) {
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        const checkbox = item.querySelector('.checkbox-input');
                        if (checkbox && e.target !== checkbox) {
                            checkbox.checked = !checkbox.checked;
                        }
                    });
                });
            });
        })();
    </script>
@endsection