@extends('layouts.plantiblank')

@section('contenido')

    @if(Session::has('success'))
        <div class="alert alert-info">
            {{Session::get('success')}}
        </div>
    @endif
    <center>
        <h1 class="h3 mb-0 text-gray-800">Documentos Pedido {{ $ped }}</h1>
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
           {{-- <a href="{{ route('rempaques.create') }}" class="d-none d-sm-inline-block btn btn-sm btn btn-primary shadow-sm" >Agregar Empaques</a>
            <a href="/exportempaq" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm"><i class="fa fa-download fa-sm text-white-50"></i> Generar Reporte</a>--}}
        </div>

        <br>

        <div class="row">
            <section class="content">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <br>
                            <div class="table-container">
                                <!-- Tarjetas que van a mostrar las carpetas -->
                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-4">
                                    <div class="tile-stats">
                                        <div class="icon"><i class="fa fa-folder-o"></i></div>
                                        <div class="count" style="cursor: help;">{{ count($infoDocumento) }}</div>
                                        <h3>ASERCOL</h3>
                                        <p>Documentos  cargados por ASERCOL S.A </p>
                                        <button type="button" id="detalleAsercol" class="btn btn-primary btn-xs"><i class="fa fa-file-pdf-o"></i> Ver Detalle</button>
                                    </div>
                                </div>
                               <input type="hidden" id="txtPedido" value="{{ $ped }}">
                                @foreach($folders as $folder)
                                    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-4">
                                        <div class="tile-stats">
                                            <div class="icon"><i class="fa fa-folder-o"></i></div>
                                            <div class="count" style="cursor: help;">{{$folder->total_folder }}</div>
                                            <h3>{{ $folder->nombre }}</h3>
                                            <p>Documentos  cargados por {{ session('dominio') }}.</p>
                                            <form id="form{{ $folder->id }}" action="">
                                                @csrf
                                                <button type="button" class="btn btn-primary btn-xs detalle" id="{{ $folder->id }}"><i class="fa fa-file-pdf-o"></i> Ver Detalle</button>   
                                            </form>
                                            
                                        </div>
                                    </div>
                                @endforeach

                                <div id="docuAsercol">
                                    
                                    <div class="row">                    
                                        <div class="col-md-12 col-md-push-5">
                                            <div class="gifCarga">
                                                <img id="loading_spinner1" style="" src="{{ asset('images/loading.gif') }}">
                                                <div id="lblError">...</div>
                                            </div>    
                                        </div> 
                                    </div>

                                    <table class="table table-bordred table-striped">
                                        <thead>
                                        {{-- <th>compania</th> --}}
                                        <th><center>N° Documento</center></th>
                                        <th><center>Fecha</center></th>
                                        <th><center>Descripcion</center></th>
                                        <th><center>Ver Documentos</center></th>
                                        </thead>
                                        <tbody>
                                        @if(count($infoDocumento)>0)
                                            @foreach($infoDocumento as $fil)
                                                <tr>
                                                    {{--<td align="center">{{$fil->compania}}</td>--}}
                                                    <td align="center">{{$fil->nrodocumento}}</td>
                                                    <td align="center">{{$fil->fechadocum}}</td>
                                                    <td align="center">{{$fil->descrip}}</td>
                                                    <td align="center"><a class="btn btn-warning btn-xs" href="http://imagenes.asercol.com:8001/{{ $fil->ruta ."/". $fil->imagen }}" ><i class="fa fa-file-pdf-o"></i> Ver Documento</a></td>
    
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="8">No hay registro !!</td>
                                            </tr>
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div id="detalleDocumentos">
                                    <table class="table table-bordred table-striped " id="tblDetalleDocumentos">
                                        <thead>
                                            <th><center>N° Documento</center></th>
                                            <th><center>Fecha</center></th>
                                            <th><center>Descripcion</center></th>
                                            <th><center>Ver Documentos</center></th>
                                        </thead>
                                        <tbody></tbody>
                                    </table>    
                                </div>
                            </div>
                        </div>
                        {{-- $empaques->links() --}}
                    </div>
                </div>
            </section>
        </div>

        <style>
            .dataTables_filter {
                display: none;
            }

            .datatables_length {
                display: none;
            }

            #datatable_length {
                display: none;
            }

            .dataTables_paginate{
                display: none;
            } /*paging_simple_numbers*/

            .dataTables_info{
                display: none;
            }
        </style>

    </center>
    <script>
        $('document').ready(function(){
            $("#detalleDocumentos").hide();
            $('.gifCarga').hide();
            $('#detalleAsercol').click(function(){
                $("#docuAsercol").show();
                $("#detalleDocumentos").hide(); 
            });

            $('.detalle').click(function(){
                var tipo_doc = $(this).attr('id');
                var pedido = $('#txtPedido').val();
                var html = '';
                $('.gifCarga').show();
                $("#tblDetalleDocumentos tbody tr").remove();  
                $("#docuAsercol").hide();   
                $("#detalleDocumentos").show();                            
                $.ajax({
                    type: "GET",
                    url: "{{ route('rexdocumentosdetalle')}}",
                    dataType: 'json',
                    async:false,
                    data: "tipo_doc="+tipo_doc+"&pedido="+pedido,
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        //$('.gifCarga').show();
                    }
                })
                .done(function( documentos ) {
                    $('.gifCarga').hide();
                    documentos.forEach(doc => {
                        html += '<tr>'+
                            '<td>' + doc['numero_documento'] + '</td>'+
                            '<td>' + doc['fecha_documento'] + '</td>'+
                            '<td>' + doc['descripcion'] + '</td>'+
                            '<td><a class="btn btn-warning btn-xs" href="https://awsasercol.s3.amazonaws.com/' + doc['ruta'] + '" target="_blank"><i class="fa fa-file-pdf-o"></i> Ver Documento </a></td>'+
                        '</tr>';
                    });                   
                   $('#tblDetalleDocumentos tbody').append(html);

                });
            })
        });
    </script>



@endsection