@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-white ">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-">
        <div class="overflow-hidden shadow-sm sm:rounded-lg">
            <form action="{{ route('cart.add', ['productId' => $product->id, 'company' => request()->query('company')]) }}" method="POST" enctype="multipart/form-data" id="product-form">

            <div class="p-6 border-b border-gray-200 flex flex-col items-center justify-center h-1/2">
                <img src="{{ asset('images/products/' . $product->image) }}" alt="{{ $product->name }}" class="h-auto max-h-96 w-full object-contain lg:max-h-full mb-4">

                <img src="{{ asset('images/pdf.png') }}" class="h-auto max-h-10 w-20 object-contain lg:max-h-full mb-4"> Ficha Tecnica
            </div>
        
        
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <button class="nav-link active" id="nav-Descripcion-tab" data-bs-toggle="tab" data-bs-target="#nav-Descripcion" type="button" role="tab" aria-controls="nav-Descripcion" aria-selected="true">Detalles</button>
                  <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Posiciones</button>
                </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-Descripcion" role="tabpanel" aria-labelledby="nav-Descripcion-tab">{{ $product->description }}</div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <p id="relacion_logo"></p>
                    <button id="clearListButton" style="display: none;" class="text-white bg-red-500 hover:bg-red-600 px-3 py-1 rounded-md focus:outline-none">Eliminar lista</button>
                </div>
              </div>
            </nav>
              
            
            <div class="flex items-center justify-end mt-4">
                <button id="borrarElementos" type="button" class="text-white bg-red-500 hover:bg-red-600 px-3 py-1 rounded-md focus:outline-none hidden">Borrar elementos añadidos</button>
            </div>
        </div>
            <div class="overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="mt-8">
                        <div class="grid grid-cols-1 gap-4">
                            <div>                 
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="company" value="{{ request()->query('company') }}">
                                    <input type="hidden" id="hiddenListInput" name="results_content">
                                    
                                    <!-- Mostrar Nombre del Producto -->
                                    <p class="big-dark-name">{{ $product->name }}</p>
                                    <input type="hidden" name="name" value="{{ $product->name }}" >

                                    <!-- Mostrar Precio -->
                                    <div id="price-container">
                                        <input type="hidden" name="price" id="hidden-price" value="{{ $product->productPrices()->first()->price }}">
                                        <p class="text-gray-500 dark:text-gray-400 mt-2 big-red-price">${{ $product->productPrices()->first()->price }}<span class="cursor-pointer message" data-toggle="modal" data-target="#exampleModal">Ver Escala de precios</span></p>
                                    </div>

                                    <!-- Mostrar Descripción del Producto -->
                                    <p class="product-desc">{{ $product->description }}</p>
                                    <input type="hidden" name="descripcion" value="{{ $product->description }}" >
                        
                            <div class="flex items-center mt-4">
                                <p class="product-desc mr-2 flex-shrink-0 text-center">Seleccionar  técnicas</p>
                                
                            </div>
                        </div>

                        <div class="flex items-center" id="product-image-section">
                            <div class="flex">
                                @foreach ($brandings as $branding)
                                    <div class="selected flex flex-col items-center p-2 w-16 h-24 cursor-pointer text-center" data-toggle="tooltip" title="{{ $branding->name }}" id="{{ $branding->id }}" >
                                        <img src="{{ asset('images/'.$branding->name.'.png') }}" alt="{{ $branding->name }}" class="w-12 h-12 object-contain mb-1">
                                        <p class="text-sm ">{{ $branding->description }}</p>
                                    </div>
                                @endforeach

                                <div class="flex items-center justify-end space-x-2 mt-4">
                                        <!-- Campo de Cantidad -->
                                        <input type="number" id="quantity" name="quantity" min="1" value="1" class="border rounded px-2 py-1 w-20 bg-gray-200 text-sm ml-2 pr-2 pl-1">
                                        <!-- Botón para agregar al carrito -->
                                        <input type="hidden" id="cart-content" value="{{ json_encode(session('cart', [])) }}">

                                        <button type="submit" class="text-white bg-gray-700 hover:bg-gray-800 px-2 py-1 rounded-md focus:outline-none text-sm boton-carrito">Agregar Carrito</button>
                                </div>
                            </div>
                            <input type="hidden" name="branding" id="branding" value="">            
                    </div>

                        <div id="tecnicas" class="hidden">
                            <div class="container mx-auto mt-10">
                                <div class="container" id="input-container">
                                    <div class="flex flex-wrap -mx-3 mb-4">
                                        <div class="w-full md:w-1/3 px-3 mb-4 md:mb-0">
                                            <label class="product-desc" >
                                                Subir Logo
                                            </label>
                                            <input type="file" id="logo_tecnicas" name="logo_tecnicas[]" multiple class=" cargaImagen shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                            <input type="hidden" name="nombres_imagenes" id="nombres-imagenes-input" value="">
                                        </div>
                                        <div class="w-full md:w-1/3 px-3 mb-4 md:mb-0">
                                            <label class="product-desc" >
                                                Tamaño
                                            </label>
                                            <select id="size_tecnicas" name="size_tecnicas[]" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                                <!-- Opciones dinámicas se agregarán aquí -->
                                            </select>
                                        </div>
                                        <div class="w-full md:w-1/3 px-3">
                                            <label class="product-desc">
                                                Posiciones
                                            </label>
                                            <select id="posiciones_tecnicas" name="posiciones_tecnicas[]" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                                @foreach ($posiciones as $posicion)
                                                    <option value="{{ $posicion->name }}">{{ $posicion->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" id="add-more" class="text-white bg-gray-700 hover:bg-gray-800 px-2 py-1 rounded-md focus:outline-none text-sm">
                                    Agregar más
                                </button>
                            </div>
                        </div>
                        

                        <div id="serigrafia" class="hidden" >
                            <div class="container mx-auto mt-10">
                                    <div class="container" id="serigrafia-content">
                                        <div class="flex flex-wrap -mx-3 mb-4">
                                            <div class="w-full md:w-1/3 px-3 mb-4 md:mb-0">
                                                <label class="product-desc" for="logo">
                                                    Subir Logo
                                                </label>
                                                <input type="file" id="logo_serigrafia" name="logo_serigrafia[]" multiple class=" cargaImagen2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                            </div>
                                            <div class="w-full md:w-1/3 px-3 mb-4 md:mb-0">
                                                <label class="product-desc" for="size">
                                                    #Tintas
                                                </label>
                                                <input id="tintas_serigrafia" name="tintas_serigrafia[]" type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                            </div>
                                            <div class="w-full md:w-1/3 px-3">
                                                <label class="product-desc" for="posiciones">
                                                    Posiciones
                                                </label>
                                                <select id="posiciones_serigrafia" name="posiciones_serigrafia[]" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                                    @foreach ($posiciones as $posicion)
                                                        <option value="{{ $posicion->name }}">{{ $posicion->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" id="add-more2" class="text-white bg-gray-700 hover:bg-gray-800 px-2 py-1 rounded-md focus:outline-none text-sm">
                                        Agregar más
                                    </button>
                                </div>
                                </div>

                                </div>
                            </div>
                        </div>
                        </div>

                    </form>
                   
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center w-full message" id="exampleModalLabel">Lista de Precios</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="min-w-full bg-white dark:bg-gray-800">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Mínimo
                            </th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Máximo
                            </th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Precio
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach ($productPrices as $productPrice)
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    {{ $productPrice->min_qty }}
                                </td>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    {{ $productPrice->max_qty }}
                                </td>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    ${{ $productPrice->price }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



@push('scripts')
    <script>
        $(document).ready(function() {
        
        $('[data-toggle="tooltip"]').tooltip();

        // Manejar el evento de entrada en el campo de cantidad
        $('#quantity').on('input', function() {
            var quantity = $(this).val();
            var productId = {{ $product->id }};
            var company = '{{ request()->query('company') }}';

            $.ajax({
                url: "{{ route('product.price') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    product_id: productId,
                    company: company,
                    quantity: quantity
                },
                success: function(response) {
                    // Actualizar solo el contenido del párrafo sin eliminar el input oculto
                    $('#price-container p').html('$' + response.price + '<span class="cursor-pointer message" data-toggle="modal" data-target="#exampleModal">Ver Escala de precios</span>');

                    // Actualizar el valor del input oculto
                    $('#hidden-price').val(response.price);
                },
                error: function(error) {
                   // console.log(error);
                }
            });
        });

        var brandingItems = document.querySelectorAll('.selected');
        var selectedBrandingInput = document.getElementById('branding');
        const sizeSelect = document.getElementById('size_tecnicas');
    
        brandingItems.forEach(function(item) {
            item.addEventListener('click', function() {
                brandingItems.forEach(function(el) {
                    el.classList.remove('fondo-activo');
                });
                item.classList.add('fondo-activo');
                
                var selectedBrandingId = item.getAttribute('id');
                selectedBrandingInput.value = selectedBrandingId;

                // Obtener tamaños según el branding seleccionado
                fetch(`/sizes/${selectedBrandingId}`)
                    .then(response => response.json())
                    .then(data => {
                        // Limpiar opciones existentes
                        sizeSelect.innerHTML = '';
                        
                        // Añadir nuevas opciones
                        data.forEach(size => {
                            const option = document.createElement('option');
                            option.value = size.name;
                            option.textContent = size.name;
                            sizeSelect.appendChild(option);
                        });
                    })
                     .catch(error => console.error('Error:', error));
            });
        });

   
        document.getElementById('borrarElementos').addEventListener('click', function() {
            const resultsContainer = document.getElementById('results-container');

            while (resultsContainer.childElementCount > 1) {
                resultsContainer.removeChild(resultsContainer.lastChild);
            }

            document.getElementById('borrarElementos').classList.add('hidden');
        });

        const form = document.getElementById('product-form');

        form.addEventListener('submit', function(event) {
            // Previene el envío del formulario para depuración (elimina si ya no es necesario)
            // event.preventDefault(); 

            // Manejo de valores de la lista
            const relacionLogoElement = document.getElementById('relacion_logo');
            const listItems = relacionLogoElement.innerText.split('\n').filter(item => item.trim() !== '');
            const hiddenListInput = document.getElementById('hiddenListInput');
            hiddenListInput.value = JSON.stringify(listItems);

            // Manejo de selects de técnicas
            const sizeTecnicasSelects = document.querySelectorAll('select[name="size_tecnicas[]"]');
            const sizeTecnicasValues = [];
            sizeTecnicasSelects.forEach(function(select) {
                sizeTecnicasValues.push(select.value);
            });
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'size_tecnicas_json'; // Usar un nuevo nombre si se utiliza JSON
            hiddenInput.value = JSON.stringify(sizeTecnicasValues);
            this.appendChild(hiddenInput);

            // Manejo de selects de técnicas para posiciones_tecnicas
            const posicionesTecnicasSelects = document.querySelectorAll('select[name="posiciones_tecnicas[]"]');
            const posicionesTecnicasValues = [];
            posicionesTecnicasSelects.forEach(function(select) {
                posicionesTecnicasValues.push(select.value);
            });
            const hiddenInputPosicionesTecnicas = document.createElement('input');
            hiddenInputPosicionesTecnicas.type = 'hidden';
            hiddenInputPosicionesTecnicas.name = 'posiciones_tecnicas_json'; // Usar un nuevo nombre si se utiliza JSON
            hiddenInputPosicionesTecnicas.value = JSON.stringify(posicionesTecnicasValues);
            this.appendChild(hiddenInputPosicionesTecnicas);

            // Manejo de inputs de tintas para tintas_serigrafia
            const tintasSerigrafiaInputs = document.querySelectorAll('input[name="tintas_serigrafia[]"]');
            const tintasSerigrafiaValues = [];

            // Recolectar los valores de cada input
            tintasSerigrafiaInputs.forEach(function(input) {
                const value = input.value.trim(); // Elimina espacios al inicio y final
                if (value) { // Solo agrega valores no vacíos
                    tintasSerigrafiaValues.push(value);
                }
            });

            // Crear un input oculto para almacenar los valores en formato JSON
            const hiddenInputTintasSerigrafia = document.createElement('input');
            hiddenInputTintasSerigrafia.type = 'hidden';
            hiddenInputTintasSerigrafia.name = 'tintas_serigrafia_json'; // Nombre del campo oculto
            hiddenInputTintasSerigrafia.value = JSON.stringify(tintasSerigrafiaValues);

            // Asegúrate de agregar el input oculto al formulario o al contenedor correspondiente
            this.appendChild(hiddenInputTintasSerigrafia);


            //
            // Manejo de selects de posiciones para posiciones_serigrafia
            const posicionesSerigrafiaSelects = document.querySelectorAll('select[name="posiciones_serigrafia[]"]');
            const posicionesSerigrafiaValues = [];

            // Recolectar los valores de cada select
            posicionesSerigrafiaSelects.forEach(function(select) {
                const value = select.value.trim(); // Elimina espacios al inicio y final
                if (value) { // Solo agrega valores no vacíos
                    posicionesSerigrafiaValues.push(value);
                }
            });

            // Crear un input oculto para almacenar los valores en formato JSON
            const hiddenInputPosicionesSerigrafia = document.createElement('input');
            hiddenInputPosicionesSerigrafia.type = 'hidden';
            hiddenInputPosicionesSerigrafia.name = 'posiciones_serigrafia_json'; // Nombre del campo oculto
            hiddenInputPosicionesSerigrafia.value = JSON.stringify(posicionesSerigrafiaValues);

            // Asegúrate de agregar el input oculto al formulario o al contenedor correspondiente
            this.appendChild(hiddenInputPosicionesSerigrafia);


         
        });


        document.getElementById('clearListButton').addEventListener('click', function(event) {
            event.preventDefault();

            const relacionLogoElement = document.getElementById('relacion_logo');
            relacionLogoElement.innerHTML = '';

            this.style.display = 'none';
        });

                                             
        var brandingElements = document.querySelectorAll('.selected');
        //var bordadoDiv = document.getElementById('bordado');
        var tecnicasDiv = document.getElementById('tecnicas');
        var serigrafiaDiv = document.getElementById('serigrafia');

        // Ocultar tecnicas
        brandingElements.forEach(function(element) {
            element.addEventListener('click', function() {
                nombresImagenes             = []; 
                sizeTecnicasValues          = [];
                posicionesTecnicasValues    = []; 
                tintasSerigrafiaValues      = []; 
                posicionesSerigrafiaValues  = []; 

                
                console.log(element.id);
                if (element.id == 4) {
                  //  bordadoDiv.classList.add('hidden');
                    tecnicasDiv.classList.add('hidden');
                    serigrafiaDiv.classList.remove('hidden');
                } else {
                 //   bordadoDiv.classList.add('hidden');
                    tecnicasDiv.classList.remove('hidden');
                    serigrafiaDiv.classList.add('hidden');
                }
            });
        });

        document.getElementById('add-more').addEventListener('click', function() {
            let container = document.getElementById('input-container');
            let original = container.children[0];
            let clone = original.cloneNode(true);

            // Limpia los valores del clon y asegura que los nombres sigan siendo arrays
            clone.querySelectorAll('input, select').forEach(function(input) {
                if (input.tagName === 'INPUT') {
                    input.value = ''; // Vacía el valor de los inputs
                }
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0; // Resetea el select
                }

                // Asegura que los nombres sigan siendo arrays
                if (input.name && input.name.includes('[]')) {
                    // No es necesario modificar el name ya que debe ser un array
                } else {
                    input.name = input.name + '[]';
                }

                // Asegura que los IDs sean únicos para cada clon
                if (input.id) {
                    let newId = input.id.split('-')[0] + '-' + (container.children.length + 1);
                    input.id = newId;
                }
            });

            // Re-registrar event listeners en los inputs clonados
            clone.querySelectorAll('.cargaImagen').forEach(function(input) {
                input.addEventListener('change', handleFileChange);
            });

            // Agregar el clon al contenedor
            container.appendChild(clone);
        });

        document.getElementById('add-more2').addEventListener('click', function() {
            let container = document.getElementById('serigrafia-content');
            let original = container.querySelector('.flex').cloneNode(true);
            let newIndex = container.children.length + 1; // Incrementa el índice para los nuevos clones

            // Limpia los valores del clon y asegura que los nombres y IDs sean únicos
            original.querySelectorAll('input, select').forEach(function(input) {
                if (input.tagName === 'INPUT') {
                    input.value = ''; // Vacía el valor de los inputs
                }
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0; // Resetea el select
                }

                // Asegura que los nombres sigan siendo arrays
                if (input.name && input.name.includes('[]')) {
                    // No es necesario modificar el name ya que debe ser un array
                } else {
                    input.name = input.name + '[]';
                }

                // Asegura que los IDs sean únicos para cada clon
                if (input.id) {
                    input.id = input.id.split('-')[0] + '-' + newIndex;
                }
            });

            // Re-registrar event listeners en los inputs clonados
            original.querySelectorAll('.cargaImagen2').forEach(function(input) {
                input.addEventListener('change', handleFileChange);
            });

            // Agregar el clon al contenedor
            container.appendChild(original);
        });


        // Array global para almacenar los nombres de archivos
        let nombresImagenes = [];

        // Función para manejar el evento change de inputs con clase 'cargaImagen'
        function handleFileChange(event) {
            const files = event.target.files;

            // Recorre los archivos y almacena los nombres en el arreglo global
            for (const file of files) {
                if (!nombresImagenes.includes(file.name)) {
                    nombresImagenes.push(file.name);
                }
            }

            // Muestra el arreglo en la consola (para depuración)
            console.log('Nombres de imágenes acumulados:', nombresImagenes);

            // Asigna el valor JSON del arreglo global al input oculto correspondiente
            const hiddenInput = document.getElementById('nombres-imagenes-input');
            if (hiddenInput) {
                hiddenInput.value = JSON.stringify(nombresImagenes);
            }
        }

        function assignEventListeners() {
            // Asigna el event listener a los inputs con la clase 'cargaImagen'
            document.querySelectorAll('.cargaImagen').forEach(input => {
                input.addEventListener('change', handleFileChange);
            });

            // Asigna el event listener a los inputs con la clase 'cargaImagen2'
            document.querySelectorAll('.cargaImagen2').forEach(input => {
                input.addEventListener('change', handleFileChange);
            });
        }
        assignEventListeners();
      

     });



    </script>
@endpush

@endsection