@extends('usuarios.clientes.master.layoutcliente')
@section('conteudo')
<style type="text/css">
    .flex
        {
         min-width: 100%;
        }

    .card .card-body .dataTables_wrapper .dataTable {
    margin-left: -10px;
    width: 100%;
    }

    .ba_div
    {   
        overflow: auto;
    }
    #the-canvas {
      width: 1000px;
    }
</style>
<script src="{{asset('js/jquery.dataTables.min.js') }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">


<link href="{{asset('js/digitalizacao_plugins/font-awesome/css/font-awesome.css')}}" rel="stylesheet">


<link href="{{asset('js/digitalizacao_plugins/css/plugins/jsTree/style.min.css')}}" rel="stylesheet">

<style>

.widget.ba_div {
    height: 300px;
}
</style>

@if(!empty($primeira_foto))
<input type="text" value="{{asset('storage/'.$primeira_foto->ficheiroguardado ) }}" id="first_pic" hidden>
@endif

    <div class="container-fluid">
            <div class="page-header" width="100%">
                <!----
                        <div class="row align-items-end">
                            <div class="col-lg-8">
                                <div class="page-header-title">

                                    <i class="ik ik-send bg-blue"></i>
                                    <div class="d-inline">
                                        <h4>Consultar Documentos Já Digitalizados</h4>
                                      <br/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <nav class="breadcrumb-container" aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="../index.html"><i class="ik ik-home"></i></a>
                                        </li>
                                        <li class="breadcrumb-item"><a href="#">Forms</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">consulta</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>----->









                        <div class="col-lg-12 col-md-12">
                            <div class="card">
                                <ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
                                 
                                    {{----
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#last-month" role="tab" aria-controls="pills-profile" aria-selected="false">Pesquisar Pastas</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#previous-month" role="tab" aria-controls="pills-setting" aria-selected="false">Setting</a>
                                    </li>
                                    ------}}
                                    @php $i=1; @endphp
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="current-month" role="tabpanel" aria-labelledby="pills-timeline-tab">
                                        <div class="card-body">


                                            <form class="formulario_simples" action="{{route('us.admin.cliente.GestConsulta.consulta.clik.cliente')}}" method="post">
                                                @csrf
                                         
                                                <input hidden name="subserieclicada_base" value="0" type="text" id="subserieclicada_base">


                                                    
                                                    <div class="row clearfix">
                                                        <!----
                                                        <div class="col-lg-4 col-md-4 col-sm-4 ">
                                                      
                                                        </div>
                                                        ---->
                                                        <div class="col-lg-12 col-md-12 col-sm-12 ">
                                                            <div class="widget ba_div">
                                                                <div class="widget-body">
                                                                    <div class="d-flex justify-content-between align-items-center">
                                                                        <div style="height:inherit;width:100%">
                                                                            <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

                                                                                            <div>
                                                                                            <a id="prev" style="cursor: pointer"><span style="font-size:11pt;"> < </span></a>
                                                                                            <a id="next" style="cursor: pointer"><span style="font-size:11pt;"> > </span></a>
                                                                                            &nbsp; &nbsp;
                                                                                            <span style="font-size:7pt;"> Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                                                                                            </div>

                                                                                            <canvas id="the-canvas"></canvas>

                                                                        </div>
                                                                    </div>
                                                                
                                                                </div>
                                                                <!----
                                                                <div class="progress progress-sm">
                                                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                                                                </div>----->
                                                            
                                                            </div>
                                                        </div>
                                                
                                                    </div>

                                                </form>
                                             
                @php
                    $i=1;
                    $cont=1;
                @endphp
                                                <div class="row">
                                                    <div class="col-12">
                                                    
                                                        <div class="conatiner">
                                                        <table id="example1" class="table container  table-striped table-hover" style="width:100%">
                                                            <thead id="cabeca_tabela">
                                                                <tr>
                                                                    @forelse($data as $Mydado)
                                                                    <span hidden>{{ $i++ }}</span>
                                                                    <th style="font-size:9pt;">{{ $Mydado->campo_dinamico}}</th>
                                                                    @empty
                                                                    @endforelse
                                                                    <th>Acção</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>

                                                            @forelse ($dados_regsitros as $dado)
                                                                @php $cont++; @endphp
                                                                    @if($cont==1)
                                                                    <tr style="font-size:9pt;">
                                                                        <td>{{$dado->registrocampodinamico}}</td>
                                                                        @else
                                                                        <td>{{$dado->registrocampodinamico}}</td>
                                                                    @endif

                                                                    @if($cont===$i)
                                                                    <td id="{{ $dado->ficheiroguardado }}">
                                                                        <div id="linha">
                                                                            <a class="btn btn-primary" target="_blank" href="{{asset('storage/'.$dado->ficheiroguardado ) }}" >
                                                                                <i class="fa fa-folder 1x"></i></a>

                                                                                <button type="button" class="btn btn-success link" onclick="pdfopen('{{asset('storage/'.$dado->ficheiroguardado ) }}')">

                                                                                <i class="fa fa-eye 1x"></i>
                                                                                </button>
                                                                        </div>
                                                                    </td>
                                                                    </tr>
                                                                        @php $cont=1  ; @endphp
                                                                    @endif
                                                        @empty
                                                        @endforelse

                                                            </tbody>
                                                            <tfoot>
                                                            </tfoot>
                                                        </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                    <br><br>
                                        </div>
                                    </div>
                                            {{----
                                            <div class="tab-pane fade" id="last-month" role="tabpanel" aria-labelledby="pills-profile-tab">
                                                <div class="card-body">

                                                </div>
                                            </div>

                                            <div class="tab-pane fade" id="previous-month" role="tabpanel" aria-labelledby="pills-setting-tab">
                                                <div class="card-body">
                                                </div>
                                            </div>
                                        ----}}
                                </div>
                            </div>
                        </div>

            </div>
    </div>

  <script src="{{asset('cliente/plugins/popper.js/dist/umd/popper.min.js')}}"></script>
  <script src="{{asset('cliente/js/layouts.js')}}"></script>

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Jasny -->

<script src="{{asset('js/digitalizacao_plugins/js/plugins/jasny/jasny-bootstrap.min.js')}}"></script>

<script src="{{asset('js/digitalizacao_plugins/js/plugins/pace/pace.min.js')}}"></script>
<script src="//cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="{{asset('js/digitalizacao_plugins/js/plugins/jasny/jasny-bootstrap.min.js')}}"></script>

<script src="{{asset('js/digitalizacao_plugins/js/plugins/jsTree/jstree.min.js')}}"></script>


<script>
    $(document).ready(function(){
        $('#jstree1').jstree({
            'core' : {
                'check_callback' : true
            },
            'plugins' : [ 'types', 'dnd' ],
            'types' : {
                'default' : {
                    'icon' : 'fa fa-folder'
                },
                'html' : {
                    'icon' : 'fa fa-file-code-o'
                },
                'svg' : {
                    'icon' : 'fa fa-file-picture-o'
                },
                'css' : {
                    'icon' : 'fa fa-file-code-o'
                },
                'img' : {
                    'icon' : 'fa fa-file-image-o'
                },
                'js' : {
                    'icon' : 'fa fa-file-text-o'
                }

            }
        });



    });
</script>




<script>

function abrircamposdina(minhatag)
{
  var campo_show,campo_next;
  Geral_id_subCLasse=0;
    console.log("clicaste numa classe documental")
    console.log(minhatag);
     campo_show=$(minhatag).attr("class");
     console.log(campo_show);

     //
     campo_next=$("."+campo_show).next()
     form_class=$(campo_next).attr("class");
     console.log(form_class);

     $("."+form_class).submit()

}

function abrirserie(minhatag_serie)
{
    $("#form_campo_dinamico_div").empty();
    console.log("clicaste numa serie documental")
    console.log(minhatag_serie);
}

 function pesquisar_click_serie(campo_next)
 {

                 $.post("{{ route('us.digit.confdigi.pesquisa.trazer.dados.click2') }}",
                                 { '_token': '{{ csrf_token() }}',
                                 'subserie_id':campo_next,
                                 },
                     ).fail(function(){
                         console.log("erro ao buscar series pa preecnher a tabela");
                     });
             //E N D       N A    B A  S  E       D   E    D   A   D  O  S

 }

</script>

<script>


var url =$("#first_pic").val();
    console.log(url);
        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];

        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';


        var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

        /**
        * Get page info from document, resize canvas accordingly, and render page.
        * @param num Page number.
        */
        function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
        canvasContext: ctx,
        viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
            // New page rendering is pending
            renderPage(pageNumPending);
            pageNumPending = null;
        }
        });
        });

// Update page counters
        document.getElementById('page_num').textContent = num;
        }

        /**
        * If another page rendering in progress, waits until the rendering is
        * finised. Otherwise, executes rendering immediately.
        */
        function queueRenderPage(num) {
        if (pageRendering) {
        pageNumPending = num;
        } else {
        renderPage(num);
        }
        }

        /**
        * Displays previous page.
        */
        function onPrevPage() {
        if (pageNum <= 1) {
        return;
        }
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
 return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);



    pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
    });

</script>


<script>

    function pdfopen(url)
    {

            var pdfjsLib = window['pdfjs-dist/build/pdf'];
            // The workerSrc property shall be specified.
            pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

            pdfDoc_=null;
            console.log(url);

            pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            renderPage(pageNum);
         $("#next").click();
             });
          document.getElementById('next').addEventListener('click', onNextPage);
}


</script>




<script>

    function abrircamposdina(minhatag)
    {
    var campo_show,campo_next;
    Geral_id_subCLasse=0;
        console.log("clicaste numa classe documental")
        console.log(minhatag);
        campo_show=$(minhatag).attr("class");
        console.log(campo_show);

        campo_next=$("."+campo_show).next()
        console.log(campo_next);
        meuValor =campo_next.val();
        console.log(meuValor)
        $("#subserieclicada_base").val(meuValor);
        return;
        //form_class=$(campo_next).attr("class");
        //console.log(form_class);

        //$("."+form_class).submit()

    }

    function abrirserie(minhatag_serie)
    {
        $("#form_campo_dinamico_div").empty();
        console.log("clicaste numa serie documental")
        console.log(minhatag_serie);
    }


</script>




  <script>

        $("#meualink").click(function(){
            $("#collapseExample").hide();
            $("#collapseDetails").show();
        });
        $("#btlink").click(function(){
            $("#collapseDetails").hide();
            $("#collapseExample").show();
        });


   
$(function () {
    $('#example1').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": false,
        "scrollY": 200,
        "scrollX": true
        
    
    });
});

    </script>


@endsection