@extends('usuarios.funcionarios.digitalizacao.dashboard.master')
@section('conteudo')

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="{{asset('js/digitalizacao_plugins/css/plugins/dataTables/datatables.min.css')}}" rel="stylesheet">

    <link href="{{asset('js/digitalizacao_plugins/css/bootstrap.min.css')}}" rel="stylesheet">
    <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>
    #conteudoGeral
    {
        margin-right: -80px;
    }

.panel-body {
    max-width: 100%;
    width: inherit;
}
#ba {
    height: 280px;
    overflow: auto;
    border:1px solid;
}
#ba1 {
    height: 280px;
    overflow: auto;
    border:1px solid;

}
.quadrado{
    max-width: 100%;
    width: 260px;
    border: .1px dashed red;
    height: 200px;
    margin-left: 0px;
}
.container {
    width: 1840px;
}
.col-lg-4 {
    padding: 5px 20px;

    color: #0b0b0b;
    }
    .ba{
        margin: 3px;
        border-radius: 15px 15px;
        }
        .ba1{
        margin: 2px;
        border-radius: 15px 15px;
        max-width: 25%;
        }



        #the-canvas {
        border: 1px solid black;
        direction: ltr;
        }


        #the-canvas {
            width: 100%;
        }

        tbody tr td {
        font-size: 8pt;
         }

         thead tr th {
            font-size: 8pt;
        }

        #linha {

            display: inline-flex;

        }
        
        
        
        .btn.btn-primary, .btn.btn-success  {
    font-size: 10pt;
}
</style>




<script src="{{asset('js/jquery.dataTables.min.js') }}"></script>
<link href="{{url('css/alertaTemporario.css')}}" rel="stylesheet" />
<link href="{{asset('js/digitalizacao_plugins/css/bootstrap.min.css')}}" rel="stylesheet">
<link href="{{asset('js/jquery.css/plugins/dataTables/datatables.min.css')}}" rel="stylesheet">

<script>

  $("button.link").click(function(){
  let codigo=$(this).find('.foto').val();
    alert("Códigobaza");
  });

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

<button class="link" hidden><input value="foto" class="foto"></button>
<div class="row wrapper border-bottom white-bg page-heading" id="conteudoGeral">
    <!-----
    <div class="col-lg-12">
        <br>
       
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('us.digit.confdigi.index') }}">home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Classe Documental</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>Pesquisar</strong>
            </li>
        </ol>
    </div>----->

                    <div class="col-lg-12">
                        <div class="row">



                                        <div class="col-lg-6 ba" id="ba">
                                            <div class="ibox ">
                                                <div class="ibox-content">

                                                    @if( isset($dados) )
                                                    <div id="jstree1">
                                                        <ul>
                                                            @php $meu_banco=\App\Models\Cliente::find($id_cliente)->getUser->getPessoa; @endphp
                                                            <li class="jstree-open">{{$meu_banco->nome}}
                                                                <ul>


                                                                            @forelse ($dados as $dado)
                                                                            @php
                                                                                $dois=(rand(0,1000)+rand(10,100)-1);
                                                                            @endphp


                                                                            <li data-jstree='"type":"css"}'><span class="aiconserie{{$dois}}" onclick="abrirserie(this)">{{$dado->seriedoc}}</span>
                                                                                <input value="{{$dado->id}}" id="{{$dado->seriedoc}}" hidden>
                                                                                @php $meusub_parametro=\App\Models\SubParametroDocumental::where('parametrodocumental_id',$dado->id)
                                                                                                                                        ->where('id_recursivo',null)->get();
                                                                                                            $idPai=$dado->id;
                                                                                                                    @endphp

                                                                                @if($meusub_parametro)
                                                                                @forelse ($meusub_parametro as $dado2)
                                                                                <ul>
                                                                                    @php $dois2=(rand(0,1000)+rand(200,800)-6-$dois); @endphp

                                                                                    <li data-jstree='"type":"html"}'><span class="aiconsub{{$dois2}}" onclick="abrircamposdina(this)">{{$dado2->subseriedoc}}</span>
                                                                                    <form class="form{{$dois2}}" action="{{ route('us.digit.confdigi.pesquisa.trazer.click2.refresh.pesquisa2') }}" method="get">
                                                                                        @csrf
                                                                                        <input value="{{$dado2->id}}" name="subserie" hidden id="{{$dado2->subseriedoc}}">
                                                                                        <input value="{{$id_cliente}}"  name="cliente" hidden >
                                                                                    </form>
                                                                                                    @php


                                                                                                    $minha_class=new \App\Http\Controllers\PesquiDigitalController();

                                                                                                    $minha_classe_as=$minha_class->recursivo($dado2->id,$idPai);
                                                                                                    @endphp


                                                                                    </li>
                                                                                </ul>
                                                                                @empty

                                                                                @endforelse
                                                                                @endif


                                                                            </li>
                                                                            @empty
                                                                            <li data-jstree='"type":"css"}'>Sem Série Cadastradas</li>
                                                                            @endforelse


                                                                </ul>
                                                            </li>
                                                        </ul>

                                                    </div>
                                                    @endif

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


                                                <div class="col ba1" id="ba1">
                                                    <!---<p style="font-size:10pt;" class="modal-title" id="exampleModalLabel">Previsualizar</p>--->
                                                    <div class="ibox-header">


                                                    </div>
                                                            <div>
                                                                <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

                                                                                <div>
                                                                                <a id="prev"><span style="font-size:10pt;"> < </span></a>
                                                                                <a id="next"><span style="font-size:10pt;"> > </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>
                     
                     
                                @php
                                    $i=1;
                                    $cont=1;
                                @endphp
        
                            <div class="col-lg-12">
                        <h4 class="text-center" style="color:red">{{$minhaSerie_clicada->subseriedoc}}</h4>
                          <div class="row">


            
                                    <div class="table-responsive" style="font-size:6pt;">
                                                                        <nav class="col-lg-12 table-responsive" id="nova_tabela_exibir">
                                                                            <br> <br>
                                                                            <table class="table table-striped table-bordered table-hover dataTables-example" >
                                                                                <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>
                                                                        </nav>
                                                            </div>





                            </div>
                    </div>



</div>


<br><br>



 <!-- Mainly scripts -->
 <script src="{{asset('js/digitalizacao_plugins/js/jquery-3.1.1.min.js')}}"></script>


 <script src="{{asset('js/digitalizacao_plugins/js/plugins/dataTables/datatables.min.js')}}"></script>
 <script src="{{asset('js/digitalizacao_plugins/js/plugins/dataTables/dataTables.bootstrap4.min.js')}}"></script>

 <!-- Custom and plugin javascript -->
 <script src="{{asset('js/digitalizacao_plugins/js/inspinia.js')}}"></script>
 <script src="{{asset('js/digitalizacao_plugins/js/plugins/pace/pace.min.js')}}"></script>



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

<style>
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c";
    }

    .jstree-default .jstree-icon.none {
        width: 0;
    }
</style>

<script>

    var vector_guarda_camposDinamicos=[];
    var Geral_id_subCLasse=0;

    $(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'
                }

            }
        });

        // $('#using_json').jstree({
        //     'core' : {
        //     'data' : [
        //         'Empty Folder',
        //         {
        //             'text': 'Resources',
        //             'state': {
        //                 'opened': true
        //             },
        //             'children': [
        //                 {
        //                     'text': 'css',
        //                     'children': [
        //                         {
        //                             'text': 'animate.css', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'bootstrap.css', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'main.css', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'style.css', 'icon': 'none'
        //                         }
        //                     ],
        //                     'state': {
        //                         'opened': true
        //                     }
        //                 },
        //                 {
        //                     'text': 'js',
        //                     'children': [
        //                         {
        //                             'text': 'bootstrap.js', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'inspinia.min.js', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'jquery.min.js', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'jsTree.min.js', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'custom.min.js', 'icon': 'none'
        //                         }
        //                     ],
        //                     'state': {
        //                         'opened': true
        //                     }
        //                 },
        //                 {
        //                     'text': 'html',
        //                     'children': [
        //                         {
        //                             'text': 'layout.html', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'navigation.html', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'navbar.html', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'footer.html', 'icon': 'none'
        //                         },
        //                         {
        //                             'text': 'sidebar.html', 'icon': 'none'
        //                         }
        //                     ],
        //                     'state': {
        //                         'opened': true
        //                     }
        //                 }
        //             ]
        //         },
        //         'Fonts',
        //         'Images',
        //         'Scripts',
        //         'Templates',
        //     ]
        // } });

    });
</script>

 <script>
     $(document).ready(function(){
         $('.dataTables-example').DataTable({
             pageLength: 25,
             responsive: true,
                "scrollY":        "300px",
                "scrollCollapse": true,
             dom: '<"html5buttons"B>lTfgitp',
             buttons: [
                 { extend: 'copy'},
                 {extend: 'csv'},
                 {extend: 'excel', title: 'ExampleFile'},
                 {extend: 'pdf', title: 'ExampleFile'},

                 {extend: 'print',
                  customize: function (win){
                         $(win.document.body).addClass('white-bg');
                         $(win.document.body).css('font-size', '10px');

                         $(win.document.body).find('table')
                                 .addClass('compact')
                                 .css('font-size', 'inherit');
                 }
                 }
             ]

         });

     });


 </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)
    {
        //pageNum=1;

            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_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;
             renderPage(pageNum);
             });
         $("#next").click();
          document.getElementById('next').addEventListener('click', onNextPage);
    }


</script>


@endsection
