@extends('layouts.administracion')

@section('css')
<link rel="stylesheet" href="{{ asset('css/admin/noticia.css') }}">
@endsection

@section('js')
    <script src="{{ asset('/libs/tinymce/tinymce.min.js?1684106062') }}"></script>
    <script src="{{ asset('/js/admin/pagina.js') }}"></script>
    <script>
      // @formatter:off
      document.addEventListener("DOMContentLoaded", function () {
        let options = {
          selector: '#descripcion',
            height: 500,
            menubar: false,
            statusbar: false,
            plugins: [
                'link', 'image',                 
            ],
            toolbar: 'undo redo | blocks | ' +
            'bold italic backcolor |image|link| alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
        }
        if (localStorage.getItem("tablerTheme") === 'dark') {
          options.skin = 'oxide-dark';
          options.content_css = 'dark';
        }
        tinyMCE.init(options);
      })
      // @formatter:on
    </script>
    
    <script>
        // Función para manejar el cambio en el campo de entrada de archivos
        function handleFileInput() {
            const input = document.getElementById('inputImage');
            const preview = document.getElementById('imagen');

            // Verificar si se seleccionó un archivo
            if (input.files && input.files[0]) {
                const reader = new FileReader();

                // Leer el contenido del archivo como una URL de datos (data URL)
                reader.onload = function (e) {
                    preview.src = e.target.result; // Establecer la vista previa de la imagen
                };

                // Leer el archivo como una URL de datos (data URL)
                reader.readAsDataURL(input.files[0]);
            }
        }

        // Asociar la función al evento de cambio en el campo de entrada de archivos
        document.getElementById('inputImage').addEventListener('change', handleFileInput);
    </script>
@endsection

@section('Titulo_contenido')
Administracion
@endsection

@section('subtitulo_contenido')
Administracion de paginas
@endsection

@section('content')
<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-12">
                <div class="card row">                     
                    <div class="col-6 form-group mb-3  mt-3">
                        <label class="form-label">Pagina</label>
                        <select name=""  class="form-control" id="pagina" onclick="actualizarContenido()">
                            <option value="0">Selecciona una pagina</option>
                            @foreach($paginas as $pagina)
                                <option value="{{$pagina->id}}">{{$pagina->nombre}}</option>
                            @endforeach
                        </select>
                    </div> 
                    <div class="form-group mb-3 mt-3"> 
                        <label class="form-label">Imagen principal(1200X500)</label>
                        <input type="file" id="inputImage" accept="image/*">                                
                    </div> 
                    <div class="form-group mb-3 mt-3"> 
                        <img id="imagen" class="imagen-noticia" src="" alt="Vista previa de la imagen">                                 
                    </div>
                    <div class="form-group mb-3 mt-3"> 
                        <label class="form-label">Titulo</label>
                        <input type="text" class="form-control"  id="titulo">                                
                    </div>                          
                    <div class="form-group mb-3">
                        <label class="form-label">Descripción</label>
                        <textarea  class="form-control" id="descripcion"></textarea>
                    </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-link link-secondary" style="margin: 15px;" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-info" style="margin: 15px;" onclick="vista()">Vista previa</button>
                    <button type="button" class="btn btn-primary" style="margin: 15px;" onclick="guardar()">Guardar</button>
                </div> 
                </div>
            </div>
        </div>
    </div>
</div>
@endsection