@extends('layouts.app')
@section('css')
    <style>
        .image-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr); /* 3 columnas igualmente espaciadas */
            gap: 1rem; /* Espacio entre las imágenes */
        }

        .image-preview {
            max-width: 100%;
            height: auto;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center; /* Centra el texto debajo de la imagen */
        }

        .image-info {
            font-size: 14px;
            margin-top: 5px; /* Espacio entre la imagen y el texto */
        }    </style>
@stop

@section('contenido')

    <div class="panel panel-default">
        <div class="panel-heading">

            <h3>Carga de Imágenes
                {{-- @can('tiendas-list')         --}}
                    <div class="pull-right">
                        <a class="btn btn-primary" href="{{ route('products.index') }}"> Regresar</a>
                    </div>
                {{-- @endcan --}}
            </h3>

        </div>

        <div class="panel-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Oops!</strong> Hubo algunos problemas con tus datos.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif


            <form action="{{ route('upload.images') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <label class="form-label" for="images">Selecciona las imágenes que deseas cargar:</label>
                            <input type="file" name="images[]" id="images" class="form-control" multiple required>
                            <span class="help-block">* Seleccione imagenes con ancho max: 1024px y alto max: 1024px</span>
                            <span class="help-block">* Las imágenes seran ajustadas a ancho: 500px y alto: 700px</span>
                            <span class="help-block">* Las imágenes mayores a 300 kbytes seran optimizadas</span>

                        </div>
                        <span style="color:red !important;" id="invalidImageApp" class="d-none text-danger p-3"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="image-grid col-xs-12 col-sm-12 col-md-12">
                        <!-- Las imágenes seleccionadas se mostrarán aquí -->
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <button type="submit" class="btn btn-primary save">Aceptar</button>
                    </div>
                </div>


            </form>

        </div>
    </div>


@endsection

@section('js')

    <script>

        document.getElementById('images').addEventListener('change', function (event) {
            const files = event.target.files; // Obtiene los archivos seleccionados

            const imageGrid = document.querySelector('.image-grid');

            imageGrid.innerHTML = ''; // Limpia la cuadrícula antes de agregar las imágenes

            let validoBytes = validarBytesArchivos(this, (3000 * 1024),'invalidImageApp');

            verificarDimensionesDeImagenesMaximo(this, 1024, 1024,'invalidImageApp')
                 .then(validoDimension => {

                     validoDimension = true;
                     validoBytes = true;


                     if (  validoBytes && validoDimension) {

                            for (const file of files) {
                                const reader = new FileReader();
                                reader.onload = function (e) {
                                    const div = document.createElement('div');
                                    div.classList.add('col');
                                    const img = document.createElement('img');
                                    img.src = e.target.result;
                                    img.alt = 'Previsualización de la imagen';
                                    img.classList.add('image-preview');
                                    div.appendChild(img);


                                    // Muestra el nombre y el tamaño en KB
                                    const fileInfo = document.createElement('h6');
                                    const fileInfo2 = document.createElement('h6');
                                    fileInfo.textContent = `${file.name}`;
                                    fileInfo2.textContent = `(${(file.size / 1024).toFixed(2)} KB)`;
                                    div.appendChild(fileInfo);
                                    div.appendChild(fileInfo2);

                                    imageGrid.appendChild(div);

                                };
                                reader.readAsDataURL(file);
                            }


                        } else {
                         dtVacio = new DataTransfer();
                         this.files = dtVacio.files;
                        }


                 });



        });
    </script>

    <script src="{{ asset('js/commons.js') }}?ver={!! time() !!}"></script>

@stop