@extends('admin.layouts.app')
  <!-- Plugins css -->
  @section('head')
  <link href="{{asset('assets_admin/libs/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" />
  @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.slider.index')}}">{{$title}}</a></li>
                            <li class="breadcrumb-item active">{{$subtitle}}</li>
                        </ol>
                    </div>

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

        <form id="createslider-form" action="{{route('admin.slider.update')}}" class="needs-validation" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <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 del control deslizante</label>
                                <input type="text" class="form-control d-none" id="product-id-input">
                                <input type="text" class="form-control d-none" id="" name="id" value="{{$slider->id}}">
                                <input type="text" class="form-control" name="title" id="product-title-input" value="{{$slider->title}}" placeholder="Introduzca el titulo del control deslizante" required>
                                <div class="invalid-feedback">Introduzca el titulo del control deslizante.</div>
                            </div>
                            <div>
                                <label>Descripción del control deslizante</label>
                                <p class="text-muted">Agregue un subtitulo llamativo.</p>
                                <div id="ckeditor-classic-slider">{{$slider->subtitle}}</div>
                            </div>
                            <input type="hidden" name="description" value="{{$slider->subtitle}}" id="hidden-description">
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Imagen del control deslizante</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Imagen</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>
                                            </label>
                                            <input class="form-control d-none" name="image" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg" onchange="previewImage(this)">
                                        </div>
                                        <div class="avatar-lg" style="margin-left: calc(50% - 200px);"> <!-- Alineación mediante margen izquierdo -->
                                            <div class="avatar-title bg-light rounded" style="width: 400px; height: 170px;">
                                                <img src="{{asset('images/sliders/'.$slider->image)}}" id="product-img" class="h-auto" style="width: 380px; height: 80px;" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div><br><br><br></div>
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="text-end mb-3">
                        <button type="submit" class="btn btn-success w-sm">Actualizar</button>
                    </div>
                </div>
                <!-- end col -->

                <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">Visibilidad</label>
                                <select class="form-select" name="status" id="choices-publish-visibility-input" data-choices data-choices-search-false>
                                    <option value="public" >Mostrar en la web</option>
                                    <option value="hidden" >Ocultar en la web</option>
                                </select>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

        </form>

    </div>
    @section('scripts')
    <!-- ckeditor -->
    <script src="{{asset('assets_admin/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js')}}"></script>
    
    <!-- dropzone js -->
    <script src="{{asset('assets_admin/libs/dropzone/dropzone-min.js')}}"></script>
    
    <script src="{{asset('assets_admin/js/pages/ecommerce-product-create.init.js')}}"></script>
    
    <!-- App js -->
    <script src="{{asset('assets_admin/js/app.js')}}"></script>
    {{-- editor de texto  --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let editor;
    
            // Inicializa CKEditor
            ClassicEditor.create(document.querySelector('#ckeditor-classic-slider'))
                .then(newEditor => {
                    editor = newEditor;
                })
                .catch(error => {
                    console.error(error);
                });
    
            // Agrega un evento submit al formulario para copiar el contenido del editor al campo oculto
            document.getElementById('createslider-form').addEventListener('submit', function(event) {
                if (editor) {
                    const content = editor.getData();
                    document.getElementById('hidden-description').value = content;
                } else {
                    console.error('Editor not initialized');
                }
            });
        });
    </script>
   {{-- previzualizar imagenes  --}}
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var input = document.getElementById('product-image-input');
            // Verificar si hay un archivo seleccionado
            if (!input.files || input.files.length === 0) {
                // Si no hay un archivo seleccionado, limpiar el valor del input de archivo
                input.value = "";
            }
        });

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