@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">
        <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="javascript: void(0);">{{$title}}</a></li>
                            <li class="breadcrumb-item active">{{$subtitle}}</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form action="{{route('admin.categories.update', $category->id)}}"  method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{{$subtitle}}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-12">
                                    <div>
                                        <label for="job-title-Input" class="form-label">Nombre de la categoría<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="name"  value="{{$category->name}}" required />
                                        @if ($errors->has('name'))
                                            <span class="text-danger">{{ $errors->first('name') }}</span>
                                        @endif
                                    </div>
                                </div>
                
                                <div class="col-lg-6">
                                    <div>
                                        <label for="job-title-Input" class="form-label">Mostrar en el menú?<span class="text-danger">*</span></label>
                                        <select name="show_main" class="form-control"  id="">
                                            <option value="SI" {{ $category->show_main == 'SI' ? 'selected' : '' }}>SI</option>
                                            <option value="NO" {{ $category->show_main == 'NO' ? 'selected' : '' }}>NO</option>
                                        </select>
                                        
                                        @if ($errors->has('show_main'))
                                            <span class="text-danger">{{ $errors->first('show_main') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div>
                                        <label for="job-title-Input" class="form-label">Es Tendencia?<span class="text-danger">*</span></label>
                                        <select name="trend" class="form-control" id="">
                                            <option value="SI" {{ $category->trend == 'SI' ? 'selected' : '' }}>SI</option>
                                            <option value="NO" {{ $category->trend == 'NO' ? 'selected' : '' }}>NO</option>
                                        </select>
                                        
                                        @if ($errors->has('description'))
                                            <span class="text-danger">{{ $errors->first('description') }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div>
                                        <label for="job-title-Input" class="form-label">Descripción<span class="text-danger">*</span></label>
                                        <textarea name="description" class="form-control" id="" cols="30" rows="10">{{$category->description}}</textarea>
                                        @if ($errors->has('description'))
                                            <span class="text-danger">{{ $errors->first('description') }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Imagenes</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/categories/category_'.$category->id."/".$category->image) }}" id="product-img" class="h-auto" style="width: 380px; height: 80px;" />
                                                                {{-- <img src="{{ old('image') ? asset('storage/' . old('image')) : '' }}" 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>
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="hstack justify-content-end gap-2">
                                        <a type="button" href="{{route('admin.categories.index')}}" class="btn btn-ghost-danger"><i class="ri-close-line align-bottom"></i>Cancelar</a>
                                        <button type="submit" class="btn btn-primary">Actualizar Categoría</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@section('scripts')
<script>
    // JavaScript para manejar la funcionalidad de check/uncheck
  
    document.getElementById('toggle-all').addEventListener('click', function() {
    // Obtener todos los checkboxes principales y secundarios
    const groupCheckboxes = document.querySelectorAll('.check-group');
    const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

    // Verificar si el botón ya está en estado de "seleccionado"
    const checkAll = this.classList.contains('selected');

    // Cambiar el estado de selección
    if (checkAll) {
        // Deseleccionar todos
        groupCheckboxes.forEach(checkbox => checkbox.checked = false);
        permissionCheckboxes.forEach(checkbox => checkbox.checked = false);
        this.textContent = 'Seleccionar Todos';
        this.classList.remove('selected');
        this.classList.remove('btn-outline-danger'); // Quitar clase de peligro (rojo)
        this.classList.add('btn-outline-success'); // Añadir clase de éxito (verde)
    } else {
        // Seleccionar todos
        groupCheckboxes.forEach(checkbox => checkbox.checked = true);
        permissionCheckboxes.forEach(checkbox => checkbox.checked = true);
        this.textContent = 'Deseleccionar Todos';
        this.classList.add('selected');
        this.classList.remove('btn-outline-success'); // Quitar clase de éxito (verde)
        this.classList.add('btn-outline-danger'); // Añadir clase de peligro (rojo)
    }
    });


        // seleccionar por grupos 
        document.addEventListener('DOMContentLoaded', function() {
        // Selecciona todos los checkboxes de grupo
        document.querySelectorAll('.check-group').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const isChecked = this.checked; // Estado del checkbox principal
                // Selecciona todos los checkboxes de permisos en este grupo
                const permissionCheckboxes = this.closest('.col-4').querySelectorAll('.permission-checkbox');
                permissionCheckboxes.forEach(permissionCheckbox => {
                    permissionCheckbox.checked = isChecked; // Cambia el estado de cada checkbox de permiso
                });
            });
        });
    });


</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-3', '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-6', '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>
@endsection
@endsection