@extends('layouts.publicador.novo_padrao')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="container my-4 py-3">
        <div class="card shadow-sm border-0 rounded-3">
            <div class="card-header bg-white border-bottom py-3">
                <div class="d-flex align-items-center">
                    <h4 class="mb-0">
                        Pergunta Frequente
                        <span class="badge bg-primary ms-2 fs-6">
                            {{ isset($model->id) ? 'Editar' : 'Cadastrar' }}
                        </span>
                    </h4>
                </div>
            </div>

            <div class="card-body p-4">
                @if (session('status-success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status-success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('status-error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('status-error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        Ocorreram erros ao processar sua solicitação:
                        <ul class="mt-2 mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (empty($model->id))
                    {!! Form::open([
                        'route' => ['publicador.perguntasfrequentes.salvar'],
                        'method' => 'post',
                        'class' => 'form form-edit',
                    ]) !!}
                @else
                    {!! Form::model($model, ['route' => ['publicador.perguntasfrequentes.salvar'], 'method' => 'put']) !!}
                    {{ Form::hidden('id') }}
                @endif

                <div class="card mb-4 border-0 shadow-sm">
                    <div class="card-header bg-white border-0 py-3">
                        <div class="d-flex align-items-center">
                            <h5 class="mb-0 fw-bold">Informações Básicas</h5>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-9">
                                <label for="titulo" class="form-label fw-semibold mb-1">Título</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light"><i class="fas fa-heading"></i></span>
                                    {{ Form::text('titulo', null, [
                                        'class' => 'form-control',
                                        'id' => 'titulo',
                                        'required' => true,
                                        'maxlength' => 255,
                                    ]) }}
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label for="publicado" class="form-label fw-semibold mb-1">Publicado</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light"><i class="fas fa-globe"></i></span>
                                    {{ Form::select(
                                        'publicado',
                                        [
                                            '1' => 'Sim',
                                            '0' => 'Não',
                                        ],
                                        null,
                                        [
                                            'class' => 'form-control',
                                            'id' => 'publicado',
                                            'required' => true,
                                        ],
                                    ) }}
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mt-3">
                            <div class="col-12">
                                <label for="conteudo" class="form-label fw-semibold mb-1">Conteúdo</label>
                                {{ Form::textarea('conteudo', null, [
                                    'class' => 'form-control',
                                    'id' => 'conteudo',
                                    'rows' => 10,
                                ]) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <a href="{{ route('publicador.perguntasfrequentes.index') }}" class="btn btn-danger">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-2"></i>
                        {{ isset($model->id) ? 'Atualizar' : 'Salvar' }}
                    </button>
                </div>

                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <script src="{{ asset('libs/tinymce511/js/tinymce/tinymce.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar TinyMCE
            tinymce.init({
                selector: '#conteudo',
                height: 400,
                language: 'pt_BR',
                plugins: 'lists link image table code',
                toolbar: 'undo redo | formatselect | bold italic removeformat | alignleft aligncenter alignright | bullist numlist | link image | table | code',
                menubar: false,
                statusbar: false,
                content_style: "body { font-family: Arial, sans-serif; font-size: 1rem; color: #495057; }",
                forced_root_block: 'p',
                formats: {
                    p: {
                        block: 'p',
                        attributes: {
                            style: 'font-family: Arial, sans-serif; font-size: 1rem; color: #495057;'
                        }
                    }
                },
                setup: function(editor) {
                    editor.on('init', function(e) {
                        editor.getBody().style.fontFamily = 'Arial, sans-serif';
                        editor.getBody().style.fontSize = '1rem';
                        editor.getBody().style.color = '#495057';
                    });
                }
            });
        });
    </script>

    <style>
        /* Variáveis de cores */
        :root {
            --primary-color: #4C6EF5;
            --primary-dark: #364FC7;
            --secondary-color: #6C757D;
            --success-color: #22c55e;
            --warning-color: #F59F00;
            --danger-color: #F03E3E;
            --info-color: #339AF0;
            --light-color: #F8F9FA;
            --dark-color: #343A40;
            --border-radius: 8px;
            --transition: all 0.3s ease;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        /* Estilo geral do corpo */
        body {
            background-color: #f5f7fb;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Card principal */
        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            background: #fff;
            margin-bottom: 2rem;
        }

        .card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        .me-2 {
            margin-right: 0.675rem;
        }

        .btn {
            margin: 0.675rem;
        }

        /* Header do card */
        .card-header {
            background: linear-gradient(135deg, #4C6EF5 0%, #364FC7 100%);
            color: white;
            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
            padding: 1.5rem;
        }

        .card-header h4 {
            color: white;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .card-header .badge {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 0.5rem 1rem;
            margin-left: 0.5rem;
            font-weight: 500;
        }

        /* Informações Básicas */
        .card-body .card-header {
            background: #f8f9fa;
            color: #343a40;
        }

        .card-body .card-header h5 {
            color: #343a40;
            font-weight: 600;
        }

        /* Alertas */
        .alert {
            border-radius: var(--border-radius);
            border: none;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            animation: slideDown 0.3s ease;
        }

        .alert-success {
            background: linear-gradient(45deg, #12B886 0%, #10b981 100%);
            color: white;
        }

        .alert-danger {
            background: linear-gradient(45deg, #F03E3E 0%, #dc2626 100%);
            color: white;
        }

        .alert-info {
            background: linear-gradient(45deg, #339AF0 0%, #0ea5e9 100%);
            color: white;
        }

        .alert .fas {
            margin-right: 0.5rem;
        }

        /* Formulário */
        .form-label {
            font-weight: 600;
            color: #343A40;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }

        .input-group-text {
            background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
            border-color: #ced4da;
            color: var(--primary-color);
            padding: 0.5rem 1rem;
            min-width: 42px;
            justify-content: center;
        }

        .form-control {
            border-color: #ced4da;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
            padding: 0.5rem 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(76, 110, 245, 0.25);
        }

        /* Botões */
        .btn {
            padding: 0.5rem 1.5rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
            border: none;
        }

        .btn-success {
            background: var(--success-color);
            color: white;
            box-shadow: 0 4px 14px rgba(18, 184, 134, 0.4);
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(18, 184, 134, 0.6);
        }

        .btn-outline-secondary {
            border: 2px solid #6C757D;
            color: #6C757D;
            background: transparent;
        }

        .btn-outline-secondary:hover {
            background: #6C757D;
            color: white;
            transform: translateY(-2px);
        }

        .btn-lg {
            padding: 0.75rem 2rem;
            font-size: 1.1rem;
        }

        /* Animações */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Estilos responsivos */
        @media (max-width: 768px) {
            .card-header {
                padding: 1rem;
            }

            .card-body {
                padding: 1rem;
            }

            .btn-lg {
                padding: 0.5rem 1.5rem;
                font-size: 1rem;
            }
        }

        /* Efeitos especiais para TinyMCE */
        .tox .tox-editor-header {
            box-shadow: var(--shadow-sm);
            border-color: #ced4da;
        }

        .tox .tox-toolbar,
        .tox .tox-toolbar__primary {
            background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
        }

        .tox .tox-tbtn:hover {
            background: var(--primary-color);
            color: white;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a5a5a5;
        }
    </style>
@endsection