EVOLUTION-MANAGER

Edit File: tramite.blade.php

@extends('layouts.master')

@section('contenido')
<link rel="stylesheet" type="text/css" href="{{ asset('admin/frontend/css/sweetalert2.min.css') }}">
<link href="http://erp.sucre.gob.ec/admin/plugins/kartik-v/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://erp.sucre.gob.ec/admin/plugins/selective/selectize.bootstrap3.css">
<link href="http://erp.sucre.gob.ec/public/assets2/vendors/sweetalert2/css/sweetalert2.min.css" rel="stylesheet"/>
<link href="http://erp.sucre.gob.ec/public/assets/vendor/sweetalert/sweetalert.css" rel="stylesheet"/>
<style type="text/css">
	.btn-green{
		color: #fff;
	    background-color: #2eb733;
		border-color: #2eb733;
	}

.btn-green:hover {
	    color: #fff;
	    background-color: #08770c;
	    border-color: #08770c;
	}
    @media (min-width: 992px){
        #divv{
            margin-left: 100px;
        }

}

h3{
        color: #16a71b;
    }

.btn-file {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
    }

.btn-file:hover {
        color: #fff;
        background-color: #218838;
        border-color: #1e7e34;
    }

</style>

<main id="container">
    <div class="single" id="main">
        <div class="container-fluid">
            <div class="col-12" style="display: flex;justify-content: center;">
               @include('alerts.success')
                @include('alerts.errors')
            </div>

<div class="row" align="center">
                <section class="col-md-12 col-sm-12 line-right" id="postcontent" >
                    <div id="divv" class="col-10">
                        <h3>
                            <strong>
                                Envio de Trámites
                            </strong>
                        </h3>
                        <br>
                        <form id="form_tramite">
                            {{ csrf_field() }}
                                <div class="box-body row" style="text-align: left;">
                                    <div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" >Tipo de identificación:</label>
                                      <select id="tipo_ci" class="form-control">
                                          <option value="cedula">Cedula</option>
                                          <option value="ruc">Ruc</option>
                                          <option value="pasaporte">Pasaporte</option>
                                      </select>

</div>
                                    <div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" id="label_tipo">Cedula:</label>
                                      <input type="text" class="form-control" id="cedula" name="cedula" onkeypress='return solo_numeros(event);'>
                                    </div>
                                    <div class="form-group col-md-6" id="div_nombres">
                                      <label for="message-text" class="col-form-label" id="label_nombres" >Nombres completos:</label>
                                      <input type="text" class="form-control text-uppercase" id="nombres" name="nombres">
                                    </div>
                                    <div class="form-group col-md-6" id="div_institucion" style="display: none;">
                                      <label for="message-text" class="col-form-label" >Institución:</label>
                                      <input type="text" class="form-control" id="institucion" name="institucion">
                                    </div>

<div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" >Email:</label>
                                      <input type="email" class="form-control" id="email" name="email">
                                    </div>
                                    <div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" >Dirección:</label>
                                      <input type="text" class="form-control" id="direccion" name="direccion">
                                    </div>

<div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" >Telefono:</label>
                                      <input type="phone" class="form-control" id="telefono" name="telefono" maxlength="13" onkeypress='return solo_numeros(event);'>
                                    </div>
                                    <div class="form-group col-md-6">
                                      <label for="message-text" class="col-form-label" >Asunto:</label>
                                      <input type="text" class="form-control" id="asunto" name="asunto" >
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>
                                            Documento a enviar
                                        </label>
                                        <input class="file" data-show-preview="false" id="archivo" name="archivo"  type="file" accept="application/pdf"/>
                                    </div>
                                    <div class="col-md-2 form-group mb-3" style="display: -webkit-inline-box;">
                                            <label for="numero">
                                                Incluye anexos
                                            </label>

</div>
                                    <div class="col-md-10 form-group mb-3" id="div_anexo" style="display: none;">
                                        <div class="table-responsive">
                                            
                                            <table class="display table table-striped table-bordered tabla_anexos" id="tabla_anexos" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th style="text-align: center;">
                                                            <a class="btn-success btn" style="cursor: pointer;padding: 5px;font-size: 0.8rem;line-height: 1;color: white !important" onclick="nuevo_anexo()"> Añadir añexo
                                                                
                                                            </a>
                                                        </th>
                                                        <th colspan="4" scope="col" style="text-align: center;">
                                                            ANEXOS
                                                        </th>
                                                    </tr>
                                                    <tr>
                                                        <th align="center" scope="col" width="14%">
                                                            N°
                                                        </th>
                                                        <th align="center" scope="col" width="20%">
                                                            HOJAS
                                                        </th>
                                                        <th align="center" scope="col">
                                                            ARCHIVO
                                                        </th>
                                                        <th scope="col">
                                                            DESCRIPCION
                                                        </th>
                                                        <th align="center" scope="col">
                                                            QUITAR
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody id="anexo_tbody">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                        </form>
                                
                                <div class="box-footer">
                                    <button class="btn btn-green" onclick="guardar_tramite();" >
                                        Enviar
                                    </button>
                                </div>

</div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
    </div>
</main>

@stop

@section('script')
<script src="http://erp.sucre.gob.ec/admin/plugins/kartik-v/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="http://erp.sucre.gob.ec/admin/plugins/selective/selectize.js"></script>

<script src="http://erp.sucre.gob.ec/public/assets/vendor/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript">

$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

$("#tipo_ci").change(function(){
      var $this = $(this);
      if ($this.val()=='cedula') {
        $("#div_nombres").show();
        $("#div_institucion").hide();
        $("#label_tipo").text('Cedula');
        $("#label_nombres").text('Nombres completos:');
      }
      if ($this.val()=='pasaporte') {
        $("#div_nombres").show();
        $("#div_institucion").hide();
        $("#label_tipo").text('Pasaporte');
        $("#label_nombres").text('Nombres completos:');
      }
      if ($this.val()=='ruc') {
        $("#div_institucion").show();
        // $("#div_nombres").hide();
        $("#label_tipo").text('Ruc');
        $("#label_nombres").text('Nombres completos del remitente')
      }
    });

function mayus(e) {
      e.value = e.value.toUpperCase();
    }

function solo_numeros(e) {
      tecla = (document.all) ? e.keyCode : e.which;
      if (tecla==8) return true;
      var patron =/[0-9]/;
      var te = String.fromCharCode(tecla);
      return patron.test(te);
    }

$('#archivo').fileinput(
      {
      showUpload:false,
      browseLabel: 'Buscar',
      msgPlaceholder:'Selecione documento',
      removeLabel:'Eliminar'
    });

var persona = null;

$('#cedula').selectize({
      valueField: 'cedula',
      labelField: 'cedula',
      searchField: 'cedula',
      create: true,
      maxItems: 1,
      render: {
            item: function(item, escape) {
                var block = '<div >' +
                     '<span class="description">' + escape(item.cedula) +
                     '</span>'+

'</div>';

console.log(item);
                 if (item.value ) {
                    persona = item;
          // variable_name has been set, so run this code
                  console.log(persona);
                    $('#nombres').val(persona.value);
                    $('#email').val(persona.email);
                    $('#direccion').val(persona.direccion);
                    $('#institucion').val(persona.institucion);
                    $('#telefono').val(persona.telefono);

}else{
                    $('#nombres').val('');
                    $('#email').val('');
                    $('#direccion').val('');
                    $('#institucion').val('');
                    $('#telefono').val('');

}
                return block;
        },
        option: function(item, escape) {
                 var block ='<div>' +
                     '<span class="description"><strong>Cedula:</strong> ' + escape(item.cedula) + '</span>';

if (item.value != null && item.value != 'undefined' ) {
                        block+='<br><span><strong>Nombres:</strong> '+escape(item.value)+'</span>';
                     }

block+='</div>';
                return block;
            },
        option_create: function(data, escape) {
            var addString="Registrar ";
              return '<div class="create" >'+addString+'<strong>'+escape(data.input) +'</strong></div>';
          }
      },
      score: function(search) {
          var score = this.getScoreFunction(search);
          return function(item) {
              return score(item);
          };
      },
      load: function(query, callback) {

console.log(query.length);
          if (!query.length) return callback();

if (query.length > 9) {
            $.ajax({
              // url: "http://erp.sucre.gob.ec/seguimiento-tramites/consultar_persona/" + encodeURIComponent(query) ,
              // dataType: "jsonp",
              url: "http://erp.sucre.gob.ec/seguimiento-tramites/consultar_persona/" + encodeURIComponent(query) ,
              type: 'GET',

error: function() {
                  callback();
              },
              success: function(res) {
                  callback(res.slice(0, 10));
              }
            });
          }

},
      onChange: function(value){

console.log(value.length);
        if (value.length >=10  ) {
            if (persona != null) {
                if (persona.value == value) {
                    var control = $('#cedula')[0].selectize;
                    // control.removeItem(value);
                     // control.refreshItems();
                    control.clearOptions();
                    control.addOption([{"value":value,"id":value,"cedula":value}]);
                    control.setValue([value]);
                    console.log(persona);
                    $('#nombres').val(persona.value);
                    $('#email').val(persona.email);
                    $('#direccion').val(persona.direccion);
                    $('#institucion').val(persona.institucion);
                    $('#telefono').val(persona.telefono);
                }

}

}
    });

function delete_option(value) {
        var control = $('#cedula')[0].selectize;
         // control.refreshItems();
         control.clearOptions();

control.addOption([{"value":value,"id":value,"cedula":value}]);
          control.setValue(value, false);
    }

function CierraPopup() {
      $(".carga_ajax").modal('hide');//ocultamos el modal
      $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
      $('.modal-backdrop').remove();//eliminamos el backdrop del modal
      $('#modal_cargar_ajax').attr('style','display:none;');
    }

function cargando_ajax(letrero='Cargando ...') {
      $('#letrero_carga').html(letrero);
       $('.carga_ajax').modal({
        show: true,
        keyboard: false,
        backdrop: 'static'
       });
    }

function guardar_tramite(){

// $('#nombre_solicitante').val('');
        var nombres = $('#nombres').val();
        var cedula = $('#cedula').val();
        var email = $('#email').val();
        var direccion = $('#direccion').val();
        var institucion = $('#institucion').val();
        var telefono = $('#telefono').val();
        var asunto = $('#asunto').val();
        var inputFile = $('#archivo').val();

var validacion = true;
        var incompleto ='';
        var array_incompleto=[];
        if (nombres == '') { validacion=false; array_incompleto.push('nombres');}
        if (cedula == '') { validacion=false; array_incompleto.push('cedula');}

if (email == '') { validacion=false; array_incompleto.push('email');}

if (direccion == '') { validacion=false; array_incompleto.push('direccion');}

if (asunto == '') { validacion=false; array_incompleto.push('asunto');}

if ($("#tipo_ci").val()=='ruc'){
            if (institucion == '') { validacion=false; array_incompleto.push('institucion');}
        }

if (inputFile === false || inputFile === ''){
            validacion=false;
            array_incompleto.push('archivo');
                // swal("Seleccion vacia!", "No selecciono ningun archivo", "warning");
        }

incompleto = array_incompleto.join(', ');

let form = document.getElementById('form_tramite');
        var formData = new FormData(form);
        formData.append('anexos_id',array_anexos);
        // formData.append('token_firma',token);
        // formData.append('_token',"{{ csrf_token() }}");

if (validacion) {
      //
          cargando_ajax('Espere, se esta registrado los datos ...');

$.ajax({

url: "http://erp.sucre.gob.ec/seguimiento-tramites/tramite_ciudadano"  ,
            type: 'POST',

data:formData,
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
            success: function(data) {

console.log(data);

if (data == 0) {
                  desaparecer_carga_ajax();
                  swal(
                      'Cancelado',
                      data.mensaje,
                      'error'
                  )

}else{

var $select = $('#cedula').selectize();
                     var control = $select[0].selectize;
                     control.clear();
                     control.clearOptions();

desaparecer_carga_ajax();
                  CierraPopup();

$('#archivo').fileinput('clear');
                  for (var i = 0; i < array_anexos.length; i++) {
                    $('#tr'+array_anexos[i]).remove();
                  }

array_anexos=[];

if( $( '#anexo_check' ).is(':checked') ){
                        $( '#anexo_check' ).click();
                        var $select = $('#cedula').selectize();
                        $select[0].selectize.clear();
                    }

$('#nombres').val('');
                    $('#email').val('');
                    $('#direccion').val('');
                    $('#institucion').val('');
                    $('#telefono').val('');
                    $('#asunto').val('');

swal({
                      title: "Exito!",
                      text: 'Se envio el trámite correctamente. Su número de tramite es: <h1>'+data+'</h1>',
                      type: 'success',
                      html: true
                  });

}

}
          }).always(function() {
            desaparecer_carga_ajax();
        });;
        }else{
            desaparecer_carga_ajax();
          swal(
              'Cancelado',
              'Llene todos los campos porfavor: '+incompleto,
              'error'
          );
          // swal.close();
        }

}

$( '#anexo_check' ).on( 'click', function() {
    if( $(this).is(':checked') ){
        // Hacer algo si el checkbox ha sido seleccionado
        $('#div_anexo').attr('style','display:block;');
        // alert("El checkbox con valor " + $(this).val() + " ha sido seleccionado");

} else {
        // Hacer algo si el checkbox ha sido deseleccionado
        $('#div_anexo').attr('style','display:none;');
        // alert("El checkbox con valor " + $(this).val() + " ha sido deseleccionado");
    }
});

var array_anexos=[];
var id_anexo=0;

function nuevo_anexo(){

var tabla_id='tabla_anexos'
    var idx, id=1;
    id_anexo++;
    array_anexos.push(id_anexo);
      if(array_anexos.length>0){
      var ultimo=array_anexos[array_anexos.length-1];
      idx=ultimo;
      }else{
      idx=1;
      }

cargando_ajax('Espere, se esta agregando nuevo anexo ...');
      var row = `<tr id="tr${idx}">
                     <td align="center">${idx}</td>

<input type="hidden" id="anexo_id${idx}" class="anexo_id" value="${idx}">
                     <td> <input type="number" id="hojas_anexos${idx}"  name="hojas${idx}" class="form-control"  required min="1"></td>
                     <td align="center">
                       <input id="archivo${idx}" name="archivos[${idx}]" class="file" type="file" data-show-preview="false"  />
                     </td>
                     <td><textarea id="descripcion${idx}" name="descripcion${idx}" class="form-control"></textarea></td>
                     <td align="center">
                         <a  class="text-danger" onclick="return EliminarAnexo('${idx}')" data-toggle="tooltip" data-placement="top" title="Eliminar anexo">
                            <i class="fa fa-times font-weight-bold"></i>
                         </a>
                     </td>
                 </tr>`;

$('#'+tabla_id+' tbody').before(row);

$('#archivo'+idx).fileinput(
        {
        showUpload:false,
        browseLabel: 'Buscar',
        msgPlaceholder:'Selecione documento',
        removeLabel:'Eliminar'
        });
     desaparecer_carga_ajax();
     CierraPopup();

}
function EliminarAnexo(id){
        var index=id;
        // id='1-'+id;
        var id_anexo=$('#anexo_id'+id).val();
        var archivo=$('#archivo'+id).val();
        console.log(array_anexos);
        if(archivo==''){
        array_anexos=array_anexos.filter(function(elem){
           return elem != id;
        });
        // var indice = array_anexos.indexOf(id);

// $indice = array_search(index,$array_anexos,false);
        // unset($array_anexos[$indice]);
        // $array_anexos = array_values($array_anexos);
        $('#tr'+id).remove();
        console.log(array_anexos);
        }else{
               swal({
              title: 'Estas seguro?',
              text: "No podrás recuperar lo eliminado!",
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#0CC27E',
              cancelButtonColor: '#FF586B',
              confirmButtonText: 'Si, Eliminar!',
              cancelButtonText: 'No, Cancelar!',
              confirmButtonClass: 'btn btn-success mr-5',
              cancelButtonClass: 'btn btn-danger',
              buttonsStyling: false
          }).then(function () {
             cargando_ajax('Espere, se esta eliminando el anexo ...');
                array_anexos=array_anexos.filter(function(elem){
                   return elem != id;
                });
                $('#tr'+id).remove();
              desaparecer_carga_ajax();
              CierraPopup();
          }, function (dismiss) {
              // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
              if (dismiss === 'cancel') {
                  swal(
                      'Cancelado',
                      'Has cancelado la eliminación',
                      'error'
                  )
              }
          })
        }

}

</script>
@stop