@extends('admin.layouts.layout')
@section('content')
    <script src="https://cdn.tiny.cloud/1/rcjw03tjfu0hq8dkm2bkb8qcwhd4nyavx70mdvyk6t6a8uzl/tinymce/6/tinymce.min.js"
        referrerpolicy="origin"></script>
    <div class="row match-height">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title text-primary">Cadastrando Página</h4>
                    <p class="text-muted">Cadastrando Páginas no Sistema</p>
                    <a class="btn btn-outline-primary btn-block d-grid gap-2" type="button"
                        href="{{ route('paginas.index') }}" role="button">Ver todas</a>
                </div>
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('paginas.store') }}" method="POST" class="form-horizontal">
                            @csrf
                            <div class="box box-info">
                                <div class="form-group">
                                    <label class="col-form-label">Nome da página <span>*</span></label>
                                    <input type="text" name="nome" value="{{ old('nome') }}"
                                        class="form-control @error('nome') is-invalid @enderror">
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Slug <span>*</span></label>
                                    <input type="text" name="slug" value="{{ old('slug') }}"
                                        class="form-control @error('slug') is-invalid @enderror"
                                        placeholder="Esse campo será preenchido automaticamente pelo sistema" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Layout </label>

                                <select class="form-control select2 @error('slug') is-invalid @enderror" name="layout"
                                    onchange="showContentInputArea(this)">
                                    <option value="Layout de Página Inteira">Layout de Página Inteira</option>
                                    <option value="Layout FAQ">Layout FAQ</option>
                                    <option value="Layout Agentes Políticos">Layout Agentes Políticos</option>
                                    <option value="Layout Galeria de Fotos">Layout Galeria de Fotos</option>
                                    <option value="Layout Galeria de Vídeos">Layout Galeria de Vídeos</option>
                                    <option value="Layout de Blog">Layout de Blog</option>
                                    <option value="Layout de Contato">Layout de Contato</option>
                                </select>
                                <script type="text/javascript">
                                    function showContentInputArea(elem) {
                                        if (elem.value == 'Layout de Página Inteira') {
                                            document.getElementById('showPageContent').style.display = "block";
                                        } else {
                                            document.getElementById('showPageContent').style.display = "none";
                                        }
                                    }
                                </script>
                            </div>
                            <div class="form-group" id="showPageContent">
                                <label class="col-form-label">Conteúdo </label>
                                <textarea type="textarea" id="mytextarea" class="form-control @error('conteudo') is-invalid @enderror" name="conteudo"
                                    value="{{ old('conteudo') }}"></textarea>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Ativa? </label>
                                <br>
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="Ativa" checked> Sim
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="Inativa"> Não
                                </label>
                            </div>
                            <h4 class="seo-info">SEO Informações</h4>
                            <div class="form-group">
                                <label class="col-form-label">Meta Título </label>
                                <input type="text" name="meta_titulo" value="{{ old('meta_titulo') }}"
                                    class="form-control @error('meta_titulo') is-invalid @enderror">
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Meta Keywords </label>
                                <textarea type="text" name="meta_keyword" rows="2" value="{{ old('meta_keyword') }}"
                                    class="form-control @error('meta_keyword') is-invalid @enderror"></textarea>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Meta Descrição </label>
                                <textarea type="text" name="meta_descricao" rows="2" value="{{ old('meta_descricao') }}"
                                    class="form-control @error('meta_descricao') is-invalid @enderror"></textarea>
                            </div>
                            <br>
                            <div class="form-group">
                                <button type="submit" class="btn btn-outline-success btn-sm w-100"
                                    name="form1">Gravar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        tinymce.init({
            selector: '#mytextarea',
            plugins: 'image',
            toolbar: 'undo redo | image | bold italic',
            automatic_uploads: true,
            images_upload_url: '/upload-image', // URL de upload das imagens
            file_picker_types: 'image', // Tipos de arquivos permitidos
            language: 'pt_BR', // Define o idioma para português do Brasil
            content_css: 'https://www.tiny.cloud/css/codepen.min.css', // (opcional) Um exemplo de estilo
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // Passando o CSRF Token
            },
            file_picker_callback: function(callback, value, meta) {
                // Customize the file picker if necessary
            }
        });
    </script>
@endsection