@extends('admin.layouts.app')
  <!-- Plugins css -->
  @section('head')
  <link href="{{asset('assets_admin/libs/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" />
  <style>
    .gallery-item {
        border: 2px solid #ddd;
        padding: 5px;
        background-color: #fff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease-in-out;
    }

    .gallery-item:hover {
        transform: scale(1.05);
    }

    .gallery-item img {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
  </style>
  @endsection

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">{{$title}}</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            {{-- <li class="breadcrumb-item"><a href="{{route('admin.service.index')}}">{{$title}}</a></li> --}}
                            <li class="breadcrumb-item active">{{$subtitle}}</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="createservice-form" action="{{route('admin.posts.update', $post->id)}}" class="needs-validation" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Titulo Principal<span style="color: red">*</span></label>
                                <input type="text" class="form-control  @error('titulo_principal') is-invalid @enderror" name="titulo_principal" id="product-title-input" value="{{$post->titulo_principal}}" placeholder="Introduzca el nombre principal (CEO) de la publicacion" >
                                <div class="invalid-feedback">Introduzca el nombre principal (CEO) de la publicacion.</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Titulo tendencia<span style="color: red">*</span></label>
                                <input type="text" class="form-control @error('titulo_post') is-invalid @enderror" name="titulo_post" id="product-title-input" value="{{$post->titulo_post}}" placeholder="Introduzca el nombre para tendencia" >
                                @error('titulo_post')
                                    <div class="invalid-feedback" style="color: red">El titulo es requerido</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Categoría<span style="color: red">*</span></label>
                                <select class="form-select @error('category_id') is-invalid @enderror" 
                                        name="category_id" 
                                        id="choices-publish-visibility-input" 
                                        data-choices data-choices-search-false>
                                    <option value="">Seleccione una categoría</option> <!-- Opción por defecto -->
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ $post->category_id == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="invalid-feedback" style="color: red">La categoría es obligatoria</div>
                                @enderror
                            </div>
                            
                            <div>
                                <label>Resumen corto<span style="color: red">*</span></label>
                                <textarea name="resumen_corto" id="" cols="10" rows="5" 
                                          class="form-control @error('resumen_corto') is-invalid @enderror">{{ $post->resumen_corto }}</textarea>
                                @error('resumen_corto')
                                    <div class="invalid-feedback" style="color: red">El resumen es obligatorio</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
              
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Página Web</h5>
                        </div>
                        <div class="card-body">
                            <div>
                                <label for="choices-publish-visibility-input" class="form-label">Estado de la publicación<span style="color: red">*</span></label>
                                <select class="form-select @error('estado') is-invalid @enderror" name="estado" id="choices-publish-visibility-input" data-choices data-choices-search-false>
                                    <option value="borrador" {{ $post->estado == 'borrador' ? 'selected' : '' }}>Borrador</option>
                                    <option value="publicado" {{ $post->estado == 'publicado' ? 'selected' : '' }}>Publicado</option>
                                    <option value="archivado" {{ $post->estado == 'archivado' ? 'selected' : '' }}>Archivado</option>
                                </select>
                                @error('estado')
                                    <div class="invalid-feedback" style="color: red">El estado es obligatorio</div>
                                @enderror
                            </div>
                            
                            <div>
                                <br>
                                <label for="choices-publish-visibility-input" class="form-label">Mostrar primero?<span style="color: red">*</span></label>
                                <select class="form-select {{ $errors->has('mostrar_primero') ? 'is-invalid' : '' }}" name="mostrar_primero" id="choices-publish-visibility-input" data-choices data-choices-search-false>
                                    <option value="1" {{ $post->mostrar_primero == 'true' ? 'selected' : '' }}>Si</option>
                                    <option value="0" {{ $post->mostrar_primero == 'false' ? 'selected' : '' }}>No</option>
                                </select>
                                @error('mostrar_primero')
                                    <div class="invalid-feedback" style="color: red">Debes elegir</div>
                                @enderror
                            </div>
                            
                            <div>
                                <br>
                                <label for="choices-publish-visibility-input" class="form-label">Cantidad de vistas<span style="color: red">*</span></label>
                                <input type="number" name="cantidad_vistas" value="{{$post->cantidad_vistas}}" class="form-control @error('cantidad_vistas') is-invalid @enderror">
                                @error('cantidad_vistas')
                                    <div class="invalid-feedback" style="color: red">La cantidad de vistas es obligatoria</div>
                                @enderror
                            </div>
                            <div>
                                <br>
                                <label for="choices-publish-visibility-input" class="form-label">Cantidad de me gustas<span style="color: red">*</span></label>
                                <input type="number" name="me_gustas" value="{{$post->me_gustas}}" class="form-control @error('me_gustas') is-invalid @enderror">
                                @error('me_gustas')
                                    <div class="invalid-feedback" style="color: red">La cantidad de me gustas es obligatoria</div>
                                @enderror
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Contenido de la publicación</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div>
                                    <textarea name="contenido_post" class="form-control @error('contenido_post') is-invalid @enderror" id="editor" rows="10">{{$post->contenido_post}}</textarea>
                                    @error('contenido_post')
                                        <div class="invalid-feedback" style="color: red">El contenido es obligatorio</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Productos y Servicios</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                @foreach ($products as $product)
                                <div class="col-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="selected_products[]" value="{{ $product->id }}" 
                                            id="product_{{ $product->id }}"
                                            {{-- Aquí comparamos si el producto está en la relación --}}
                                            {{ in_array($product->id, $post->products->pluck('id')->toArray()) ? 'checked' : '' }}>
                                            
                                        <label class="form-check-label" for="product_{{ $product->id }}">
                                            {{ $product->name }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                            
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Galeria del proyecto</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Imagen principal</h5>
                                <p class="text-muted">Agregue una imagen con (1920 * 750)px aproximadamente para mantener el formato de la web.</p>
                                <div class="text-center">
                                    <div class="position-relative d-inline-block">
                                        <div class="position-absolute top-200 start-200 translate-middle">
                                            <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Seleccionar imagen">
                                                <div class="avatar-xs">
                                                    <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                        <i class="ri-image-fill"></i>
                                                    </div>
                                                </div>
                                            <span style="color: red">*</span></label>
                                            <input class="form-control d-none @error('image') is-invalid @enderror" name="image" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg" onchange="previewImage(event)">
                                        </div>
                                        <div class="avatar-lg" style="margin-left: calc(50% - 200px);"> 
                                            <div class="avatar-title bg-light rounded" style="width: 400px; height: 170px;">
                                                <img src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" id="product-img" class="h-auto" style="width: 380px; height: 80px;" />
                                            </div>
                                        </div>
                                    </div>
                                    @error('image')
                                        <div class="invalid-feedback d-block" style="color: red; margin-top: 10px;">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div><br><br><br></div>
                            <div><br></div>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Galería (Imágenes o Videos)</h5>
                        
                                <!-- Selector para elegir entre imagen o video -->
                                <div class="row mb-3">
                                    <div class="col-4">
                                        <select id="mediaType" class="form-select" onchange="toggleMediaInput()">
                                            <option value="" selected>Seleccionar tipo</option>
                                            <option value="image">Imagen</option>
                                            <option value="video">Video</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Input para agregar imágenes o videos -->
                                    <div id="imageInputContainer" class="col-8 d-none">
                                        <input type="file" id="mediaImageInput" name="mediaImages[]" class="form-control" accept="image/*" multiple>
                                    </div>
                            
                                    <div id="videoInputContainer" class="col-8 d-none">
                                        <input type="text" id="mediaVideoInput" name="mediaVideos[]" class="form-control" placeholder="Pegar enlace de video (YouTube, Vimeo)">
                                    </div>
                                </div>
                               
                        
                                <div class="row">
                                    <div class="col-2">
                                        <button type="button" class="btn btn-primary" onclick="addMedia()">Agregar</button>
                                    </div>
                                </div>
                                
                            </div>
                        
                            <!-- Contenedor donde se mostrará la lista de imágenes o videos -->
                            <div id="mediaList" class="row">
                                <!-- Se agregan imágenes o videos aquí -->
                            </div>
                            <!-- Inputs ocultos que se generarán dinámicamente -->
                            <div id="hiddenInputs"></div>
                        </div>
                    </div>
                </div>
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-success w-sm">Guardar</button>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

        </form>

    </div>
    @section('scripts')
    <script src="{{asset('assets_admin/libs/dropzone/dropzone-min.js')}}"></script>
    <script src="{{asset('assets_admin/js/pages/ecommerce-product-create.init.js')}}"></script>
    <script src="{{asset('assets_admin/js/app.js')}}"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
        const mediaList = document.getElementById("mediaList");
        const hiddenInputs = document.getElementById("hiddenInputs");

        // Supongamos que esto se obtiene del backend en formato JSON
        const gallery = {!! json_encode($post->gallery) !!};
        const post = {!! json_encode($post) !!};

        gallery.forEach(media => {
            if (media.type === "image") {
                addExistingImage(media);
            } else if (media.type === "video") {
                addExistingVideo(media.image);
            }
        });

        function addExistingImage(media) {
            const baseImageUrl  = "{{ asset('imagenes/posts') }}";
            const imageUrl      = `${baseImageUrl}/post_${post.id}/${media.image}`;

            console.log(imageUrl);

            const imageContainer = document.createElement("div");
            imageContainer.classList.add("col-md-4", "mb-3", "position-relative");

            const img = document.createElement("img");
            img.src = imageUrl;
            img.alt = "Imagen";
            img.classList.add("img-fluid", "rounded", "gallery-item");

            const deleteBtn = document.createElement("button");
            deleteBtn.classList.add("btn", "btn-danger", "position-absolute", "top-0", "end-0");
            deleteBtn.innerHTML = "&times;";
            deleteBtn.onclick = function () {
                mediaList.removeChild(imageContainer);
                removeImage(imageContainer, media.image);
            };

            imageContainer.appendChild(img);
            imageContainer.appendChild(deleteBtn);
            mediaList.appendChild(imageContainer);

            // Convertir imagen a un archivo y agregarlo a un input oculto
            addHiddenFile(media.image);
        }

        function addHiddenFile(imageName) {
            const inputFile = document.createElement("input");
            inputFile.type = "file";
            inputFile.name = "mediaImages[]";  // Laravel espera un array de archivos
            inputFile.style.display = "none";

            fetch("{{ asset('imagenes/posts') }}/post_" + post.id + "/" + imageName)
                .then(res => res.blob())
                .then(blob => {
                    const file = new File([blob], imageName, { type: blob.type });

                    // 🔹 Asignar archivo al input mediante DataTransfer
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    inputFile.files = dataTransfer.files;

                    hiddenInputs.appendChild(inputFile);
                })
                .catch(error => console.error("Error al cargar la imagen:", error));
        }


        function addExistingVideo(videoURL) {
            const embedURL = getVideoEmbedURL(videoURL);
            if (!embedURL) return;

            const videoContainer = document.createElement("div");
            videoContainer.classList.add("col-md-4", "mb-3", "position-relative");

            const iframe = document.createElement("iframe");
            iframe.src = embedURL;
            iframe.width = "100%";
            iframe.height = "315";
            iframe.frameBorder = "0";
            iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
            iframe.allowFullscreen = true;
            iframe.classList.add("gallery-item");

            const deleteBtn = document.createElement("button");
            deleteBtn.classList.add("btn", "btn-danger", "position-absolute", "top-0", "end-0");
            deleteBtn.innerHTML = "&times;";
            deleteBtn.onclick = function () {
                mediaList.removeChild(videoContainer);
                removeHiddenInput(videoURL);
            };

            videoContainer.appendChild(iframe);
            videoContainer.appendChild(deleteBtn);
            mediaList.appendChild(videoContainer);

            addHiddenInput("mediaVideos[]", videoURL);
        }

        function getVideoEmbedURL(videoURL) {
            let embedURL = null;
            const youtubeMatch = videoURL.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
            if (youtubeMatch) {
                embedURL = `https://www.youtube.com/embed/${youtubeMatch[1]}`;
            }
            const vimeoMatch = videoURL.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
            if (vimeoMatch) {
                embedURL = `https://player.vimeo.com/video/${vimeoMatch[1]}`;
            }
            return embedURL;
        }

        function addHiddenInput(name, value) {
            const hiddenInput = document.createElement("input");
            hiddenInput.type = "hidden";
            hiddenInput.name = name;
            hiddenInput.value = value;
            hiddenInputs.appendChild(hiddenInput);
        }

        function removeHiddenInput(value) {
            const inputs = hiddenInputs.querySelectorAll(`input[value="${value}"]`);
            inputs.forEach(input => input.remove());
        }

        function removeImage(imageContainer, imageName) {
            // Eliminar el contenedor de la imagen
            imageContainer.remove();

            // Buscar y eliminar el input file oculto
            const inputs = hiddenInputs.querySelectorAll(`input[name="mediaImages[]"]`);
            inputs.forEach(input => {
                const files = input.files;
                if (files.length > 0 && files[0].name === imageName) {
                    input.remove(); // Eliminar el input file específico
                }
            });
        }
    });

    </script>
    {{-- añadir caracteristicas  --}}
    <script>
        // Array para almacenar las características
        let featuresArray = [];

        function addFeature() {
            var featureInput = document.getElementById('featureInput');
            var feature = featureInput.value.trim(); // Eliminar espacios innecesarios
            
            if (feature !== "") {
                // Agregar la nueva característica al array
                featuresArray.push(feature);
                
                // Actualizar la lista de características visualmente
                updateFeaturesList();

                // Guardar todas las características en el campo oculto
                document.getElementById('featuresHiddenInput').value = featuresArray.join(',');

                // Limpiar el campo de entrada
                featureInput.value = "";
            }
        }

        function updateFeaturesList() {
            var featuresList = document.getElementById('featuresList');
            featuresList.innerHTML = ""; // Limpiar la lista

            // Crear elementos de lista para cada característica
            featuresArray.forEach(function(feature, index) {
                // Crear fila (row) para la característica y el botón de borrar
                var row = document.createElement('div');
                row.classList.add('row', 'mb-2'); // Clase Bootstrap para filas y margen inferior
                
                // Columna para la característica
                var colFeature = document.createElement('div');
                colFeature.classList.add('col-10');
                colFeature.textContent = feature;
                
                // Columna para el botón de borrar
                var colDelete = document.createElement('div');
                colDelete.classList.add('col-2');
                
                // Icono de basura para eliminar
                var deleteButton = document.createElement('button');
                deleteButton.innerHTML = '<i class="ri-delete-bin-line"></i>'; 
                deleteButton.classList.add('btn', 'btn-danger');
                deleteButton.onclick = function() {
                    removeFeature(index);
                };

                // Añadir el botón a la columna de borrado
                colDelete.appendChild(deleteButton);

                // Añadir columnas a la fila
                row.appendChild(colFeature);
                row.appendChild(colDelete);

                // Añadir la fila completa al listado
                featuresList.appendChild(row);
            });
        }

        function removeFeature(index) {
            // Eliminar la característica del array
            featuresArray.splice(index, 1);

            // Actualizar la lista de características visualmente
            updateFeaturesList();

            // Actualizar el campo oculto con las características restantes
            document.getElementById('featuresHiddenInput').value = featuresArray.join(',');
        }


    </script>

    {{-- previzualizar imagenes  --}}
    <script>
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function(){
                var imgElement = document.getElementById('product-img');
                imgElement.src = reader.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    </script>


    {{-- galeria  --}}
    <script>
        // Función para alternar entre el input de imagen o el de video
        function toggleMediaInput() {
            const mediaType = document.getElementById('mediaType').value;
            const imageInputContainer = document.getElementById('imageInputContainer');
            const videoInputContainer = document.getElementById('videoInputContainer');

            if (mediaType === 'image') {
                imageInputContainer.classList.remove('d-none');
                videoInputContainer.classList.add('d-none');
            } else if (mediaType === 'video') {
                videoInputContainer.classList.remove('d-none');
                imageInputContainer.classList.add('d-none');
            } else {
                imageInputContainer.classList.add('d-none');
                videoInputContainer.classList.add('d-none');
            }
        }

        function addMedia() {
            const mediaType = document.getElementById('mediaType').value;
            const mediaList = document.getElementById('mediaList');
            const hiddenInputs = document.getElementById('hiddenInputs'); // Contenedor para inputs ocultos

            if (mediaType === 'image') {
                const mediaImageInput = document.getElementById('mediaImageInput');
                if (mediaImageInput.files && mediaImageInput.files.length > 0) {
                    [...mediaImageInput.files].forEach(file => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Crear contenedor para la imagen
                            const imageContainer = document.createElement('div');
                            imageContainer.classList.add('col-md-4', 'mb-3', 'position-relative');

                            // Crear la imagen
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.alt = "Imagen";
                            img.classList.add('img-fluid', 'rounded', 'gallery-item');

                            // Botón para eliminar
                            const deleteBtn = document.createElement('button');
                            deleteBtn.classList.add('btn', 'btn-danger', 'position-absolute', 'top-0', 'end-0');
                            deleteBtn.innerHTML = '&times;';
                            deleteBtn.onclick = function() {
                                mediaList.removeChild(imageContainer);
                                // Eliminar el archivo del formulario
                                mediaImageInput.value = '';
                                // Eliminar el campo oculto correspondiente
                                const inputs = hiddenInputs.querySelectorAll('input[name="mediaImages[]"]');
                                inputs.forEach(input => {
                                    if (input.value === file.name) {
                                        hiddenInputs.removeChild(input);
                                    }
                                });
                            };

                            imageContainer.appendChild(img);
                            imageContainer.appendChild(deleteBtn);
                            mediaList.appendChild(imageContainer);
                            
                            // Crear un input oculto para enviar el archivo
                            const hiddenInput = document.createElement('input');
                            hiddenInput.type = 'hidden';
                            hiddenInput.name = 'mediaImages[]';
                            hiddenInput.value = file.name; // O el contenido del archivo si es necesario
                            hiddenInputs.appendChild(hiddenInput);
                        };
                        reader.readAsDataURL(file);
                    });
                }
            } else if (mediaType === 'video') {
                const mediaVideoInput = document.getElementById('mediaVideoInput');
                if (mediaVideoInput.value.trim() !== '') {
                    const videoURL = mediaVideoInput.value.trim();
                    const embedURL = getVideoEmbedURL(videoURL);

                    if (embedURL) {
                        // Crear contenedor para el iframe de video
                        const videoContainer = document.createElement('div');
                        videoContainer.classList.add('col-md-4', 'mb-3', 'position-relative');

                        // Crear iframe para el video
                        const iframe = document.createElement('iframe');
                        iframe.src = embedURL;
                        iframe.width = "100%";
                        iframe.height = "315";
                        iframe.frameborder = "0";
                        iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
                        iframe.allowFullscreen = true;
                        iframe.classList.add('gallery-item');

                        // Botón para eliminar
                        const deleteBtn = document.createElement('button');
                        deleteBtn.classList.add('btn', 'btn-danger', 'position-absolute', 'top-0', 'end-0');
                        deleteBtn.innerHTML = '&times;';
                        deleteBtn.onclick = function() {
                            mediaList.removeChild(videoContainer);
                            // Eliminar el campo oculto correspondiente
                            const inputs = hiddenInputs.querySelectorAll('input[name="mediaVideos[]"]');
                            inputs.forEach(input => {
                                if (input.value === videoURL) {
                                    hiddenInputs.removeChild(input);
                                }
                            });
                        };

                        videoContainer.appendChild(iframe);
                        videoContainer.appendChild(deleteBtn);
                        mediaList.appendChild(videoContainer);
                        
                        // Crear un input oculto para enviar el enlace del video
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = 'mediaVideos[]';
                        hiddenInput.value = videoURL;
                        hiddenInputs.appendChild(hiddenInput);
                        
                        // Limpiar input
                        mediaVideoInput.value = '';
                    } else {
                        alert("Por favor ingresa un enlace válido de YouTube o Vimeo.");
                    }
                }
            } else {
                alert("Por favor, selecciona un tipo de medio (Imagen o Video).");
            }
        }

        // Función para obtener la URL de embed de YouTube o Vimeo
        function getVideoEmbedURL(videoURL) {
            let embedURL = null;

            // Verificar si es un enlace de YouTube
            const youtubeMatch = videoURL.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
            if (youtubeMatch) {
                embedURL = `https://www.youtube.com/embed/${youtubeMatch[1]}`;
            }

            // Verificar si es un enlace de Vimeo
            const vimeoMatch = videoURL.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
            if (vimeoMatch) {
                embedURL = `https://player.vimeo.com/video/${vimeoMatch[1]}`;
            }

            return embedURL;
        }

    </script>

    {{-- editor textarea  --}}
    <script>
       
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: [
                'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', 'link', 'imageUpload', 'blockQuote', 'undo', 'redo',
                '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'highlight',
                '|', 'alignment', 'bulletedList', 'numberedList', 'indent', 'outdent',
                '|', 'insertTable', 'mediaEmbed'
            ],
            fontSize: {
                options: [
                    'tiny', 'small', 'default', 'big', 'huge'
                ]
            },
            alignment: {
                options: ['left', 'center', 'right', 'justify']
            },
            table: {
                contentToolbar: [
                    'tableColumn', 'tableRow', 'mergeTableCells'
                ]
            },
            ckfinder: {
                    uploadUrl: '{{ route("admin.ckeditor.upload") }}', 
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
            }
        })
        .catch(error => {
            console.error(error);
        });

    </script>
    @endsection
@endsection