Implementacion Pad Numerico - Ingreso Rut

resources/views/issue_token/index.blade.php

 @extends('layout.call_page')
 @section('content')
 <!-- BEGIN: Page Main-->
+<style>
+    .numeric-pad {
+        display: inline-grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 7px;
+    }
+    
+    .numeric-pad button {
+        width: 80px;
+        height: 50px;
+        font-size: 20px;
+    }
+</style>
 <div id="loader-wrapper">
     <div id="loader"></div>
 
@@ -33,7 +46,7 @@
         </section>
     </div>
     <!-- Modal Structure -->
-    <div id="modal1" class="modal modal-fixed-footer" style="max-height: 30%; width:80%">
+    <div id="modal1" class="modal modal-fixed-footer" style="max-height: 70%; width:50%">
         <form id="details_form">
             <div class="modal-content" style="padding-bottom:0">
                 <div id="inline-form">
@@ -60,10 +73,26 @@
                                 
                                 </div>
                             </div>
-                            <div class="input-field col s4" id="rut_tab">
-                                <input id="rut" name="rut" type="text" value="" data-error=".rut">
+                           
+                            <div class="input-field col-lg-4 s4" id="rut_tab">
+                                <input id="rut" name="rut" type="text" value="" oninput="formatearRut(this);" data-error=".rut">
                                 <label for="rut">{{__('messages.settings.rut')}}</label>
                                 <div class="rut">
+                                    <span><b>Ingrese su rut para poder solicitar su número de atención</b></span>
+                                    <div class="input-field numeric-pad" style="padding-left: 150px;">
+                                        <button onclick="escribirValor(1,event)">1</button>
+                                        <button onclick="escribirValor(2,event)">2</button>
+                                        <button onclick="escribirValor(3,event)">3</button>
+                                        <button onclick="escribirValor(4,event)">4</button>
+                                        <button onclick="escribirValor(5,event)">5</button>
+                                        <button onclick="escribirValor(6,event)">6</button>
+                                        <button onclick="escribirValor(7,event)">7</button>
+                                        <button onclick="escribirValor(8,event)">8</button>
+                                        <button onclick="escribirValor(9,event)">9</button>
+                                        <button onclick="escribirValor(-2,event)">K</button>
+                                        <button onclick="escribirValor(0,event)">0</button>
+                                        <button onclick="escribirValor(-1,event)">Del</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -87,6 +116,78 @@
     })
     var service;
 
+    var Fn = {
+	// Valida el rut con su cadena completa "XXXXXXXX-X"
+	validaRut : function (rutCompleto) {
+		rutCompleto = rutCompleto.replace("‐","-");
+		if (!/^[0-9]+[-|‐]{1}[0-9kK]{1}$/.test( rutCompleto ))
+			return false;
+		var tmp 	= rutCompleto.split('-');
+		var digv	= tmp[1]; 
+		var rut 	= tmp[0];
+		if ( digv == 'K' ) digv = 'k' ;
+		
+		return (Fn.dv(rut) == digv );
+	},
+	dv : function(T){
+		var M=0,S=1;
+		for(;T;T=Math.floor(T/10))
+			S=(S+T%10*(9-M++%6))%11;
+		return S?S-1:'k';
+	}
+}
+
+    function formatearRut(input){
+        let value = input.value.replace(/\./g, '').replace('-', '');
+  
+        if (value.match(/^(\d{2})(\d{3}){2}(\w{1})$/)) {
+            value = value.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3}){2}(\w{0,1})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{3})(\w{0,1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3})(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{0,2})$/, '$1.$2.$3');
+        }
+        else if (value.match(/^(\d)(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{0,2})$/, '$1.$2');
+        }
+        input.value = value;
+    }
+
+    function formatearRutPorValor(val){
+        let value = val.replace(/\./g, '').replace('-', '');
+  
+        if (value.match(/^(\d{2})(\d{3}){2}(\w{1})$/)) {
+            value = value.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3}){2}(\w{0,1})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{3})(\w{0,1})$/, '$1.$2.$3-$4');
+        }
+        else if (value.match(/^(\d)(\d{3})(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{3})(\d{0,2})$/, '$1.$2.$3');
+        }
+        else if (value.match(/^(\d)(\d{0,2})$/)) {
+            value = value.replace(/^(\d)(\d{0,2})$/, '$1.$2');
+        }
+        $("#rut").val(value);
+    }
+
+    function escribirValor(number, event){
+        event.preventDefault();
+        let inputValue = $("#rut").val();
+        if(number == -1){
+            inputValue =  inputValue.slice(0,-1);
+        }else if(number == -2){
+            inputValue = inputValue+""+"K";    
+        }else{
+            inputValue =inputValue+""+number
+        }
+        $("#rut").focus();
+        $("#rut").val(inputValue);
+        formatearRutPorValor($("#rut").val());
+    }
+    
     function queueDept(value) {
         if (value.ask_email == 1 || value.ask_name == 1 || value.ask_phone == 1 || value.ask_rut == 1) {
             if (value.ask_email == 1) $('#email_tab').show();
@@ -95,8 +196,11 @@
             else $('#name_tab').hide();
             if (value.ask_phone == 1) $('#phone_tab').show();
             else $('#phone_tab').hide()
-            if (value.ask_rut == 1) $('#rut_tab').show();
-            else $('#rut_tab').hide();
+            if (value.ask_rut == 1) {
+                $('#rut_tab').show();
+            }else{
+                $('#rut_tab').hide();
+            }
 
             service = value;
             $('#modal_button').removeAttr('disabled');