@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">Editando Página</h4>
                    <p class="text-muted">Editando 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.update', $paginas->id) }}" method="POST" class="form-horizontal">
                            @method('PUT')
                            @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="{{ $paginas->nome }}"
                                        class="form-control @error('nome') is-invalid @enderror">
                                </div>
                                <div class="form-group w">
                                    <label class="col-form-label">Slug <span>*</span></label>
                                    <input type="text" name="slug" value="{{ $paginas->slug }}"
                                        class="form-control @error('slug') is-invalid @enderror">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Layout</label>
                                <select name="layout" class="form-control select2 @error('layout') is-invalid @enderror"
                                    onchange="showContentInputArea(this)">
                                    <option value="Layout de Página Inteira"
                                        @if ($paginas->layout == 'Layout de Página Inteira') selected @endif>
                                        Layout de Página Inteira</option>
                                    <option value="Layout FAQ" @if ($paginas->layout == 'Layout FAQ') selected @endif>Layout FAQ
                                    </option>
                                    <option value="Layout Agentes Políticos"
                                        @if ($paginas->layout == 'Layout Agentes Políticos') selected @endif>
                                        Layout Agentes Políticos</option>
                                    <option value="Layout Galeria de Fotos"
                                        @if ($paginas->layout == 'Layout Galeria de Fotos') selected @endif>
                                        Layout Galeria de Fotos</option>
                                    <option value="Layout Galeria de Vídeos"
                                        @if ($paginas->layout == 'Layout Galeria de Vídeos') selected @endif>
                                        Layout Galeria de Vídeos</option>
                                    <option value="Layout de Blog" @if ($paginas->layout == 'Layout de Blog') selected @endif>Layout
                                        de
                                        Blog</option>
                                    <option value="Layout de Contato" @if ($paginas->layout == 'Layout de Contato') selected @endif>
                                        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" rows="5"
                                    name="conteudo">{{ $paginas->conteudo }}</textarea>
                            </div>
                            <div class="form-group">
                                <label class="col-form-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" class="form-control @error('meta_titulo') is-invalid @enderror"
                                    name="meta_titulo" value="{{ $paginas->meta_titulo }}">
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Meta Keywords </label>
                                <textarea class="form-control @error('meta_keyword') is-invalid @enderror" name="meta_keyword" rows="2">{{ $paginas->meta_keyword }}</textarea>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Meta Descrição </label>
                                <textarea class="form-control @error('meta_descricao') is-invalid @enderror" name="meta_descricao" rows="2">{{ $paginas->meta_descricao }}</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