@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') }}">
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/select2-bootstrap4/dist/select2-bootstrap4.min.css') }}">
@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card ">
                <div class="card-header text-center">
                    <h4 class="card-title">Nuevo Expediente</h4>
                </div>
                <div class="card-body ">
                    <form id="formulary" enctype="multipart/form-data">
                        <div class="container">
                            <h6>Datos de Expediente</h6>
                            <hr>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="font-weight-bold" for="proceso">Tipo Documento</label>
                                    <select class="form-control" id="proceso" name="proceso">
                                        <option value="">Seleccione una Opción</option>
                                        @foreach ($proceso as $value)
                                            <option value="{{ $value->id }}">{{ $value->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="font-weight-bold" for="n_documento">N° Documento</label>
                                    <input type="text" class="form-control" id="n_documento" name="n_documento">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="font-weight-bold" for="n_folio">N° Folio</label>
                                    <input type="text" class="form-control" id="n_folio" name="n_folio">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="font-weight-bold" for="asunto">Asunto</label>
                                    <textarea class="form-control" id="asunto" name="asunto" rows="2"></textarea>
                                </div>
                            </div>



                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="font-weight-bold">Adjuntar archivo</label>
                                    <input type="file" class="form-control" name="archivo" accept='.pdf'>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input text-dark" id="customSwitch1">
                                        <label class="custom-control-label" for="customSwitch1">Firmar Digitalmente</label>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="collapse multi-collapse" id="multiCollapseExample1">
                                                <div class="card card-body">
                                                    <div class="row">

                                                        <div class="col-md-4">
                                                            <label for="firmador">Encargado de Firmar el Doc.</label>
                                                            <select id="firmador" name="firmador" class="form-control form-sm"
                                                                style="width: 100%"></select>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label for="razon">Razon</label>
                                                            <select id="razon" name="razon" class="form-control form-sm"
                                                                style="width: 100%"></select>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label for="orientacion">Apariencia</label>
                                                            <select id="orientacion" name="orientacion"
                                                                class="form-control form-sm" style="width: 100%">
                                                             </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="font-weight-bold" for="observacion_expediente">Observacion</label>
                                    <textarea class="form-control" id="observacion_expediente" name="observacion_expediente" rows="2"></textarea>
                                </div>
                            </div>
                            <br>
                            <h6>Datos de Tramite</h6>
                            <hr>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="oficina">Oficina</label>
                                        <select id="oficina" name="oficina" class="form-control"
                                            style="width: 100%"></select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="copia">Enviar Copias</label>
                                        <select id="copia" name="copia[]" class="form-control" multiple="multiple"
                                            style="width: 100%"></select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="observacion">Observacion</label>
                                        <textarea name="observacion" class="form-control observacion_derivar"></textarea>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-success" id="guardar">Guardar</button>
                        </div>

                    </form>
                </div>
                <div class="card-footer ">
                    <!-- <button type="submit" class="btn btn-info btn-round">Submit</button> -->
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <!-- <button class="btn btn-word float-right" id="formatos_modal"><i class="fa fa-file-word-o" aria-hidden="true"></i> Formatos</button> -->
        </div>



    </div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Abrir Modal
    </button>
    <button type="button" class="btn btn-primary" id="export">
        Exportar
    </button>
    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>

    <script>
        // Export to PDF function
        document.getElementById('export').addEventListener('click', function() {
            // Get the HTML content from Quill editor
            var content = document.querySelector('#editor .ql-editor').innerHTML;

            // Create a temporary container to hold the content
            var container = document.createElement('div');
            container.innerHTML = content;
            document.body.appendChild(container);

            // Use html2pdf to generate and download the PDF
            html2pdf().from(container).save();

            // Remove the temporary container
            document.body.removeChild(container);
        });
    </script>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true" style="height: 920px">
        <div class="modal-dialog modal-xl modal-full-screen-xxl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Editor de Texto Interno - Trámite interno</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body float-center" style="background-color: rgba(0, 0, 0, 0.534)">
                    <div class="row" style="width:920px;height: 1080px; border:1; background-color: white">
                        <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.5/dist/quill.snow.css" rel="stylesheet" />

                        <style>
                            svg {
                                touch-action: none;
                                height: 20px !important;
                            }
                        </style>
                        <div id="editor"
                            style="width:1340px;height: 1300px; background-image: url('{{ url('/img/plantilla/fondo.png') }}');
                        background-size: 100% auto;
                        background-repeat: repeat-y; padding: 60px 80px 60px 80px">
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><em class="ql-font-serif">“Año del Bicentenario de la consolidación
                                    de nuestra Independencia
                                    y de la conmemoración de las heroicas </em></p>
                            <p class="ql-align-center"><em class="ql-font-serif">batallas de Junín y Ayacucho”</em></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-right">Juliaca, 18 de Abril del 2024</p>
                            <h4><strong style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"
                                    class="ql-size-large"><u>CARTA N° xxx -
                                        2024 - OTI – UNAJ / HVC</u></strong></h4>
                            <p><br></p>
                            <p><strong>PARA</strong> <strong>:</strong> <strong>CPC. Marianela ROMERO LINO</strong></p>
                            <p> <strong>ENCARGADA DEL CENTRO DE IDIOMAS</strong></p>
                            <p><br></p>
                            <p><strong>ASUNTO</strong> <strong>:</strong> <strong>SOLICITUD DE ACTAS DE SEPTIEMBRE DE LOS
                                    AÑOS 2014, 2015, 2016 Y
                                    2017 Y EJEMPLOS DE </strong> <strong>CERTIFICADOS DE ESTUDIO.</strong></p>
                            <p><br></p>
                            <p><strong>REF.</strong> <strong>:</strong> <strong>-</strong></p>
                            <p><u> </u></p>
                            <p><br></p>
                            <p> Me dirijo a usted con el fin de solicitar las <strong>ACTAS CORRESPONDIENTES A LOS MESES DE
                                    SEPTIEMBRE DE LOS AÑOS
                                    2014, 2015, 2016 Y 2017.</strong> Este requerimiento es fundamental para recopilar los
                                datos necesarios
                                destinados al desarrollo del sistema de idiomas de la UNAJ. Agradecería mucho si pudiera
                                facilitarme dichas Actas.
                            </p>
                            <p> </p>
                            <p> Además, aprovechamos la oportunidad para solicitar amablemente un ejemplo (copia) completo
                                de Certificado de Estudio
                                de un estudiante que haya cumplido todos los niveles del idioma (desde básico hasta
                                avanzado) y si es posible en
                                todas las lenguas ofrecidas por nuestro centro de idiomas. En caso de no contar con un
                                certificado o por temas de
                                privacidad no se puede dar el ejemplo, solicitamos que nos proporcionen un ejemplo simulado.
                                Esto nos permitirá
                                tener una guía precisa para implementar un formato similar en el nuevo sistema de gestión de
                                la institución.</p>
                            <p><br></p>
                            <p> Dada la importancia y urgencia de este requerimiento, agradecería mucho si pudiera
                                facilitarme dichas Actas a la
                                brevedad posible o indicarme el procedimiento adecuado para obtenerlas con la mayor
                                celeridad.</p>
                            <p><br></p>
                            <p> Sin otro particular, aprovecho la ocasión para expresarle mis consideraciones distinguidas.
                            </p>
                            <p><br></p>
                            <p class="ql-align-center">Atentamente,</p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p class="ql-align-center"><br></p>
                            <p><br></p>
                            <p><br></p>
                            <p><br></p>
                            <p><br></p>
                            <p><br></p>


                        </div>

                        <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.5/dist/quill.js"></script>
                        <script>
                            const toolbarOptions = [
                                ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                                ['blockquote', 'code-block'],
                                ['link', 'image', 'video', 'formula'],

                                [{
                                    'header': 1
                                }, {
                                    'header': 2
                                }], // custom button values
                                [{
                                    'list': 'ordered'
                                }, {
                                    'list': 'bullet'
                                }, {
                                    'list': 'check'
                                }],
                                [{
                                    'script': 'sub'
                                }, {
                                    'script': 'super'
                                }], // superscript/subscript
                                [{
                                    'indent': '-1'
                                }, {
                                    'indent': '+1'
                                }], // outdent/indent
                                [{
                                    'direction': 'rtl'
                                }], // text direction

                                [{
                                    'size': ['small', false, 'large', 'huge']
                                }], // custom dropdown
                                [{
                                    'header': [1, 2, 3, 4, 5, 6, false]
                                }],

                                [{
                                    'color': []
                                }, {
                                    'background': []
                                }], // dropdown with defaults from theme
                                [{
                                    'font': []
                                }],
                                [{
                                    'align': []
                                }],

                                ['clean'] // remove formatting button
                            ];

                            const quill = new Quill('#editor', {
                                modules: {
                                    toolbar: toolbarOptions
                                },
                                theme: 'snow'
                            });
                        </script>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <!-- Agrega aquí los botones adicionales que necesites -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-datatable-formatos" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Formatos</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- <div class="table-responsive"> -->
                    <table class="table table-hover table-bordered dt-responsive" id="table-data" width="100%"
                        cellspacing="0">
                        <thead>
                            <tr>
                                <th>Botones</th>
                                <th>Nombre</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <!-- </div>   -->


                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('scripts')
    <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-confirm2/dist/jquery-confirm.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jquery-validation/dist/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/validator.setDefaults.js') }}"></script>
    <script type="text/javascript">
        $.validator.addMethod('filesize', function(value, element, param) {
            console.log(element.files[0].size);
            return this.optional(element) || (element.files[0].size <= param)
        }, 'File size must be less than {0}');
    </script>

    <script type="text/javascript" src="{{ asset('vendor/monkeymonk-jquery.loader/jquery.loader.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/select2/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/extranet/expediente/interno/create.js') }}"></script>


    <script>
        $(document).ready(function() {
            $('#customSwitch1').change(function() {
                if ($(this).is(':checked')) {
                    $('#multiCollapseExample1').collapse('show');
                } else {
                    $('#multiCollapseExample1').collapse('hide');
                }
            });


            var firmadorSelect2 = $("#firmador").select2({
                allowClear: true,
                theme: 'bootstrap4',
                language: "es",
                placeholder: "Encargado de Firmar el Documento",
                ajax: {
                    url: base_url + "/firmadigital/firmador",
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.items
                        };
                    },

                    cache: true
                },
                minimumInputLength: -1
            }).on("select2:select", function(e) {
                $("#firmador").removeClass('is-invalid')
                // $("#distrito").prop('disabled', false);
                // console.log(e.params.data);
            });
            var razonSelect2 = $("#razon").select2({
                allowClear: true,
                theme: 'bootstrap4',
                language: "es",
                placeholder: "Encargado de Firmar el Documento",
                ajax: {
                    url: base_url + "/firmadigital/razon",
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.items
                        };
                    },

                    cache: true
                },
                minimumInputLength: -1
            }).on("select2:select", function(e) {
                $("#razon").removeClass('is-invalid')
                // $("#distrito").prop('disabled', false);
                // console.log(e.params.data);
            });
            var orientacionSelect2 = $("#orientacion").select2({
                allowClear: true,
                theme: 'bootstrap4',
                language: "es",
                placeholder: "Encargado de Firmar el Documento",
                ajax: {
                    url: base_url + "/firmadigital/orientacion",
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.items
                        };
                    },

                    cache: true
                },
                minimumInputLength: -1
            }).on("select2:select", function(e) {
                $("#orientacion").removeClass('is-invalid')
                // $("#distrito").prop('disabled', false);
                // console.log(e.params.data);
            });

            $("#guardar").on("click", function() {
                var validar = validator.form();
                if (validar == true) {
                    // data = $("#formulary").serialize();
                    var data = new FormData($("#formulary")[0]);
                    // load.open();
                    $('.content').loader('show');

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: base_url + "/extranet/expediente/interno",
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function(data) {

                            $('.content').loader('hide');
                            if (data.status == true) {

                                $.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() {
                                                $(location).attr('href', base_url +
                                                    '/extranet/tramite');
                                            }
                                        }
                                    }
                                });

                            } 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() {

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

                        }
                    });

                }
            });
        });
    </script>
@endsection