@extends('layouts.planti')
@section('contenido')
@if(Session::has('success'))
<div class="alert alert-info">
    {{Session::get('success')}}
</div>
@endif
@php $oculto = true @endphp
<script></script>

<div class="row">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
    @csrf

    {{-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> --}}
    <div class="jcontainer">
        <div class="row">	
            <div class="col-md-12">
                <form action="">
                   
                    <input type="hidden" value="{{ $num_do }}" id="do">
                    <button class="btn btn-primary download" type="button"><i class="fa-solid fa-file-zipper"></i> Descargar Imagenes en ZIP</button>
                </form>
                <div id="cargando" style="display: none">
                    <div class="alert alert-warning" role="alert" style="text-align: left !important;color:black;" >
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                        <span class="sr-only">Message:</span>
                        <strong>Excelente !!!</strong> 
                        Tu solicitud de exportación de imagenes esta siendo procesada! Esta solicitud puede tardar varios minutos!!
                    </div>
                </div>               
                
            </div>	
                @foreach ($infoto as $item)
                <div class="col-lg-3 col-md-4 col-xs-6 ">                
                    <a class="thumbnail"  href="{{ $item->ruta }}" data-lightbox="photos" data-title="{{ $item->comentarios }}"
                        data-target="#image-gallery">
                        <img class="img-fluid" src="{{ $item->ruta }}">
                    </a>  
                </div>
                @endforeach            
        </div>    
    </div>

</div>

<br>
<br>
<br>
<script>
    $(document).ready(function(){
        $('.download').on('click', function(){
            const token = "{{ csrf_token() }}";
            const ndo = document.getElementById('do').value;
            console.log(ndo);
            $.ajax({
                type:"GET",
                url:"/rexfotografia/zip/"+ndo,
                dataType: "json",
                beforeSend: function(){
                        document.getElementById('cargando').style.display = "contents";
                },
                success : function(informacion){
                    document.getElementById('cargando').style.display = "none";
                    console.log(informacion['respuesta']);
                    console.log(informacion['zip_name']);
                    let file = "{!! url("download")  !!}";
                    $(location).attr('href',file+'/'+informacion['zip_name']);                
                },
                error: function(error){
                        console.log("Se han presentado errores al generar el archivo .ZIP");
                }
            });
        });
    });

    
</script>

@endsection