@extends('layouts.extranet')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/jquery-confirm2/dist/jquery-confirm.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/monkeymonk-jquery.loader/jquery.loader.css') }}">
@endsection

@section('content')
    <div class="row">
        <!--    <nav>
                                                                                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                                                                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                                                                                                    aria-controls="nav-home" aria-selected="true">Sin Firma</a>
                                                                                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                                                                                                    aria-controls="nav-profile" aria-selected="false">Firmados</a>
                                                                                                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
                                                                                                    aria-controls="nav-contact" aria-selected="false">Todos</a>
                                                                                            </div>
                                                                                        </nav>
                                                                                        <div class="tab-content" id="nav-tabContent">
                                                                                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
                                                                                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
                                                                                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
                                                                                        </div>
                                                                                    -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Firma de Documentos</h4>
                    <div class="row">
                        <div class="col-md-10">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary float-right" id="nuevo"><i class="fa fa-plus"></i>
                                Nuevo
                                Documento</button>
                        </div>
                    </div>
                    <!-- <button class="btn btn-primary float-right" id="nuevo"><i class="fa fa-plus"></i> Nuevo</button> -->
                </div>
                <div class="card-body">
                    <!-- <div class="table-responsive"> -->
                    <table class="table table-hover table-bordered dt-responsive" id="table-data" width="100%"
                        cellspacing="0">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Firmado</th>
                                <th>Firmar</th>
                                <th>Fecha </th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-datatable" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title-datatable">Modal</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formulary">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="nombre">Nombre</label>
                                    <input type="text" id="nombre" name="nombre" class="form-control"
                                        aria-required="true">
                                </div>
                                <div class="form-group">
                                    <label for="archivo">Archivo </label>
                                    <input type="file" id="archivo" name="archivo" class="form-control"
                                        aria-required="true">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="guardar">Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{ asset('vendor/jquery-confirm2/dist/jquery-confirm.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.js"></script>
    <script type="text/javascript" src="{{ asset('vendor/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script type="text/javascript"
        src="{{ asset('vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/validator.setDefaults.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/monkeymonk-jquery.loader/jquery.loader.js') }}"></script>
    <!--script type="text/javascript" src="{{ asset('js/extranet/configuracion/firma.js') }}"></script-->

    <script>
        $(document).ready(function() {
            var editar = 0;
            var href = 0;
            var table = $('#table-data').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    url: base_url + '/js/spanish.json'
                },
                ajax: {
                    url: base_url + '/firmadigital?datatable=true'
                },
                columns: [{
                        data: 'Nombre',
                        name: 'Nombre'
                    },
                    {
                        data: 'Firmado',
                        name: 'Firmado'
                    },
                    {
                        data: 'RowId',
                        name: 'RowId'
                    },
                    {
                        data: 'Enlace',
                        name: 'Enlace'
                    },
                    {
                        data: 'Botones',
                        name: 'Botones'
                    },
                ],
                rowCallback: function(row, data, index) {
                    /*
                    $('td:eq(4)', row).html('<a href="' + data.RowId +
                        '" class="editar btn btn-dark btn-sm col-xs-4"><i class="fa fa fa-pencil-square-o" aria-hidden="true"></i>Firmar</a>'
                    );
                    
                    $('td:eq(0)', row).delegate('.editar', 'click', function(e) {
                        href = $(this).attr('href');
                        editar = 1;
                        // alert(href);
                        $("#title-datatable").text("Editar requisito");
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: base_url + "/extranet/configuracion/firma/" +
                                href + "/edit",
                            success: function(data) {
                                $("#nombre").val(data.data.nombre);

                            },
                            error: function(result) {}
                        });

                        $('#modal-datatable').modal('show');
                        e.preventDefault();
                    });

                    */
                    $('td:eq(4)', row).html('<a href="' + base_url + '/storage/firma' + data
                        .Enlace +
                        '" class="editar btn btn-dark btn-sm col-xs-4" target="_blank"><i class="fa fa-file-pdf"></i> Ver </a> <a href="#" onclick="iniciarFirma(' +
                        data.RowId +
                        ')" class="btn btn-success btn-sm col-xs-4" ><i class="fa fa-file-signature"></i> Firmar </a>'
                    );

                },
                order: [
                    [0, 'asc']
                ]
            });

            var validator = $("#formulary").validate({
                rules: {
                    'nombre': {
                        required: true
                    },
                    'archivo': {
                        required: true
                    }
                },
                messages: {
                    'nombre': {
                        required: "Este campo es requerido."
                    },
                    'archivo': {
                        required: "Este campo es requerido."
                    }
                }
            });

            $("#nuevo").on("click", function() {
                editar = 0;
                $("#title-datatable").text("Nuevo Documento");
                $("#nombre").val("");
                $('#modal-datatable').modal('show');
            });

            $("#guardar").on("click", function() {
                var validar = validator.form();
                if (validar == true) {
                    // data = $("#formulary").serialize();
                    var data = new FormData($("#formulary")[0]);
                    $('.content').loader('show');
                    if (editar == 1) {
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: base_url + "/firmar/" + href,
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: data,
                            success: function(data) {
                                // console.log(data);
                                $('.content').loader('hide');
                                if (data.status == true) {
                                    // var objeto = JSON.parse(data['message']);
                                    table.draw();
                                    $.confirm({
                                        title: 'Satisfactorio',
                                        content: data['message'],
                                        type: 'green',
                                        theme: 'modern',
                                        // closeIcon: true,
                                        icon: 'fas fa-check',
                                        buttons: {
                                            confirm: {
                                                text: "Aceptar",
                                                btnClass: 'btn-green',
                                                action: function() {}
                                            }
                                        }
                                    });

                                } else {
                                    $.confirm({
                                        title: 'Error!',
                                        content: data['message'],
                                        type: 'orange',
                                        theme: 'modern',
                                        closeIcon: true,
                                        icon: 'fas fa-exclamation-triangle',
                                        buttons: {
                                            confirm: {
                                                text: "Intentar de nuevo",
                                                btnClass: 'btn-green',
                                                action: function() {
                                                    table.draw();
                                                }
                                            },
                                            cancel: {
                                                text: "Salir",
                                                action: function() {

                                                }
                                            }
                                        }
                                    });
                                }
                                // table.draw();
                                $('#modal-datatable').modal('hide');
                            },
                            error: function(result) {

                            }
                        });
                    } else {
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: base_url + "/firmadigital/guardar",
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: data,
                            success: function(data) {
                                // console.log(data);
                                $('.content').loader('hide');
                                if (data.status == true) {
                                    // var objeto = JSON.parse(data['message']);
                                    table.draw();
                                    $.confirm({
                                        title: 'Satisfactorio',
                                        content: data['message'],
                                        type: 'green',
                                        theme: 'modern',
                                        // closeIcon: true,
                                        icon: 'fas fa-check',
                                        buttons: {
                                            confirm: {
                                                text: "Aceptar",
                                                btnClass: 'btn-green',
                                                action: function() {}
                                            }
                                        }
                                    });

                                } else {
                                    $.confirm({
                                        title: 'Error!',
                                        content: data['message'],
                                        type: 'orange',
                                        theme: 'modern',
                                        closeIcon: true,
                                        icon: 'fas fa-exclamation-triangle',
                                        buttons: {
                                            confirm: {
                                                text: "Intentar de nuevo",
                                                btnClass: 'btn-green',
                                                action: function() {
                                                    table.draw();
                                                }
                                            },
                                            cancel: {
                                                text: "Salir",
                                                action: function() {

                                                }
                                            }
                                        }
                                    });
                                }
                                // table.draw();
                                $('#modal-datatable').modal('hide');
                            },
                            error: function(result) {

                            }
                        });
                    }
                }
            })

        });
    </script>
    <script>
        // $("#tipo_f").on("change",function(){
        // 	table.draw();
        // })

        /**@argument
         * Inicio de Proceso de Firma
         */
        function iniciarFirma(fir_ide) {
            $('.content').loader('show');
            $.ajax({
                type: "GET",
                url: base_url + "/firmadigital/iniciarfirma/",
                data: {
                    fir_ide: fir_ide
                },
                success: function(data) {
                    console.log(data);
                    data = JSON.parse(data);
                    console.log(data);
                    $('.content').loader('hide');
                    if (data.status == true) {
                        var param = encriptar(data.param);
                        var port = "48596";
                        //FUNCIÓN DE INICIO DE FIRMA DIGITAL 
                        //startSignature(port, param);
                        openNewWindow(port, param);
                        /*$.confirm({
                            title: 'Satisfactorio',
                            content: data['message'],
                            type: 'green',
                            theme: 'modern',
                            // closeIcon: true,
                            icon: 'fas fa-check',
                            buttons: {
                                confirm: {
                                    text: "Aceptar",
                                    btnClass: 'btn-green',
                                    action: function() {}
                                }
                            }
                        });
                        */

                    } else {
                        /*$.confirm({
                            title: 'Error!',
                            content: data['message'],
                            type: 'orange',
                            theme: 'modern',
                            closeIcon: true,
                            icon: 'fas fa-exclamation-triangle',
                            buttons: {
                                confirm: {
                                    text: "Intentar de nuevo",
                                    btnClass: 'btn-green',
                                    action: function() {
                                        table.draw();
                                    }
                                },
                                cancel: {
                                    text: "Salir",
                                    action: function() {

                                    }
                                }
                            }
                        });
                        */
                    }
                    // table.draw();
                    $('#modal-datatable').modal('hide');
                },
                error: function(result) {

                }
            });
        }

        function openNewWindow(port, param) {
            // Calcula el ancho y alto de la pantalla
            var screenWidth = screen.width;
            var screenHeight = screen.height;

            // Abre una nueva ventana con el tamaño de la pantalla
            var newWindow = window.open("Firma de documento", "_blank", `width=${screenWidth},height=${screenHeight}`);

            // Escribe contenido HTML en la nueva ventana
            var scriptTag = "</" + "script";
            var newWindowContent = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>New Window</title>
            <style>
                body {
                    margin: 0;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-image: url('https://tramite.unaj.site/public/img/firma_fondo.jpg');
                    background-size: cover;
                    background-position: center;
                }
                .overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(35, 37, 41, 0.46);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .spinner {
                    border: 16px solid #f3f3f3;
                    border-radius: 50%;
                    border-top: 16px solid #3498db;
                    width: 80px;
                    height: 80px;
                    animation: spin 2s linear infinite;
                }
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js">` + scriptTag + `>
            <script src="https://apps.firmaperu.gob.pe/web/clienteweb/firmaperu.min.js">` + scriptTag + `>
            <script>
                
                function closeWindow() {
                    window.close();
                }
                var jqFirmaPeru = jQuery.noConflict(true);
                function signatureInit() {
                    //alert("PROCESO INICIADO");
                }
                function signatureOk() {
                    alert("PLATAFORMA FIRMA UNAJ: El documento fue firmado correctamente, Gracias.");
                    closeWindow();
                }
                function signatureCancel() {
                    alert("PLATAFORMA FIRMA UNAJ: Se canceló la operación de firma.");
                    closeWindow();
                }
                startSignature(` + port + `, "` + param + `");
                ` + scriptTag + `>
            </head>

            <body>
                <div class="spinner"></div>
                <div id="addComponent" style="display:none;"></div>
            </body>

            </html>`;

            newWindow.document.write(newWindowContent);
        }



        function encriptar(_param) {
            var jsonString = JSON.stringify(_param);
            var base64Json = btoa(jsonString);
            return base64Json; //Base 64
        }
    </script>
@endsection