@extends('layouts.painel')

@section('content')
    <div class="container">
        <!-- Title and Top Buttons Start -->
        <div class="page-title-container">
            <div class="row">
                <!-- Title Start -->
                <div class="col-12 col-md-7">
                    <h1 class="mb-0 pb-0 display-4" id="title">PAINEL ADMINISTRATIVO</h1>
                    <nav class="breadcrumb-container d-inline-block" aria-label="breadcrumb">
                        <ul class="breadcrumb pt-0">
                            <li class="breadcrumb-item"><a href="index.html">Cadastrar Notícia</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Title End -->
            </div>
        </div>
        <!-- Title and Top Buttons End -->

        <!-- Content Start -->
        <div class="card mb-5">
            <div class="card-body paddingtop">
                <form action="{{ route('noticias.store') }}" method="post" enctype="multipart/form-data">
                    <!-- Campo Tipo -->
                    @csrf
                    <div class="mb-3 row programacaoline">
                        <div class="mb-3 row programado">
                            <label class="col-form-label">Status</label>
                            <select class="form-control" name="status">
                                <option value="rascunho" selected>Rascunho</option>
                                <option value="programada">Programada</option>
                                <option value="publicada">Publicada</option>
                            </select>

                        </div>
                    </div>
                    <!-- Campo Título -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Título</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="text" class="form-control" name="titulo" placeholder="Título da Notícia"
                                required maxlength="100">
                        </div>
                    </div>

                    <!-- Campo Conteúdo -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Conteúdo</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <textarea class="form-control" id="conteudo" name="conteudo" rows="5" placeholder="Conteúdo da Notícia" required></textarea>
                        </div>
                    </div>
                    <script type="module">
                        import { DecoupledEditor } from '/ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js';
                    </script>
                    <script>
                        document.addEventListener('DOMContentLoaded', (event) => {

                            DecoupledEditor
                                .create(document.querySelector('#conteudo'), {
                                    // Configuração para upload de imagens
                                    ckfinder: {
                                        uploadUrl: '/painel/noticias/savefilesfromnews' // URL para o seu backend
                                    },
                                    plugins: [Image, ImageResize, ],
                                    image: {
                                        toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full',
                                            'imageStyle:alignRight',

                                        ],
                                        styles: [
                                            'full',
                                            'alignLeft',
                                            'alignRight'
                                        ]
                                    },
                                    simpleUpload: {
                                        // O endpoint no seu backend que lidará com o upload de imagens
                                        uploadUrl: '/painel/noticias/savefilesfromnews',
                                    }
                                })
                                .then(editor => {
                                    editor.ui.view.editable.element.style.minHeight = '400px';
                                    const fileRepository = editor.plugins.get('FileRepository');

                                    // Personalizar o evento de resposta do upload
                                    fileRepository.on('uploadResponse', (evt, data) => {
                                        // Evita o upload padrão para o servidor
                                        evt.stop();

                                        // Presume-se que a resposta do servidor seja um objeto JSON com uma URL da imagem
                                        const res = JSON.parse(data.xhr.response);
                                        data.url = res
                                            .url; // Use a URL do servidor na resposta para ser inserida no editor
                                    });
                                })
                                .catch(error => {
                                    console.error(error);
                                });
                        });
                    </script>

                    <!-- Campo Autor -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Autor</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="text" class="form-control" name="autor" placeholder="Nome do Autor" required
                                maxlength="100">
                        </div>
                    </div>

                    <!-- Campo Imagem Destaque -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Imagem Destaque</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="file" class="form-control" name="imagem_destaque" required>
                        </div>
                    </div>

                    <!-- Campo Tipo -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Tipo</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <select class="form-control" name="tipo">
                                <option value="interna">Interna</option>
                                <option value="externa">Externa</option>
                            </select>
                        </div>
                    </div>

                    <!-- Campo Link Externa -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Link Externa</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="url" class="form-control" name="link_externa"
                                placeholder="Link Externa (Opcional)">
                        </div>
                    </div>

                    <!-- Campo Data de Publicação -->
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Data de Publicação</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="date" class="form-control" name="data_publicacao" required>
                        </div>
                    </div>

                    <!-- Botão de Enviar -->
                    <div class="mb-3 row mt-5">
                        <div class="col-sm-8 col-md-9 col-lg-10 ms-auto">
                            <button type="submit" class="btn btn-outline-primary">Cadastrar</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <!-- Content End -->
    </div>

    <style>
        .mb-3.row.programado {
            width: 200px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            align-content: center;
            flex-wrap: nowrap;
            padding: 0px;
        }

        .mb-3.row.programacaoline {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex-wrap: nowrap;
        }

        .mb-3.row.programado label {
            max-width: fit-content;
        }

        .mb-3.row.programado select.form-control {
            max-width: 120px;
        }
    </style>
@endsection