@extends('layout.master')

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('assets/css/apps/tickets.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
@endpush

@section('content')
<style>
    .ui-autocomplete-input {
        /*border: none;*/
        font-size: 14px;
        /* width: 300px; */
        /* height: 24px; */
        /*margin-bottom: 5px;
  /*padding-top: 2px;
  border: 1px solid #DDD !important;*/
        padding-top: 0px !important;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
    option {
         font-size:10; 
    }
    .form-control{
        font-size: 10px;
    }
</style>
<br>
    <!--  Navbar Starts / Breadcrumb Area Starts -->
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('CR')}}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Clientes')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{__('Activacion Tarjeta Credito')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->
    <div class="col-lg-12">
        <div class="row">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow mb-4">
            <div class="widget-content widget-content-area">
                <div class="w-100">
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <label>Cuenta:</label>

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" onclick="buscaClienteModal();">
                                        <i class="la la-binoculars"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control form-control-sm" id="numeroCuenta" name="numeroCuenta"
                                       placeholder="">
                            </div>
                            <span class="form-text text-muted">Ingresa el numero de cuenta</span>
                        </div>
                        <div class="col-lg-4">
                            <label>Numero de Tarjeta:</label>
                            <input type="text" class="form-control form-control-sm creditCard" id="TarjetaBusA" name="TarjetaBusA"
                                   placeholder="0000 0000 0000 0000">
                            <span class="form-text text-muted">Ingresa el numero de tarjeta</span>
                        </div>
                        <div class="col-3">
                             
                                <label>Estatus:</label>
                          
                                    <input type="text" class="form-control form-control-sm" id="estatus" readonly>
                                    <!--<select class="form-control form-control-sm" id="estatus">
                                        <option value="Activa">Activa</option>
                                        <option value="Cancelada">Cancelada</option>
                                        <option value="Nueva">Nueva</option>
                                        <option value="Suspendida">Suspendida</option>
                                        <option value="Castigada">Castigada</option>
                                        <option value="Desactivada">Desactivada</option>
                                    </select>-->
                       
                        
                        </div>
                        <div class="col-lg-2">
                            <br>
                            <button type="button" class="btn btn-primary mr-2" onclick="buscaCliente()">Buscar</button>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
        </div>
        <div class="row">
             <div class="col-12">
                 <div class="form-group row">
                    <label class="col-1 col-form-label" for="">Nombre</label>
                    <div class="col-11">
                        <input type="text" class="form-control form-control-sm" id="nombreCompleto" readonly>
                    </div>
                </div>
            </div>
            <!--<div class="col-4">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">#Cuenta</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="numeroCuenta" readonly>
                    </div>
                </div>
            </div>-->
        </div>
        <div class="row">
             <div class="col-6">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Domicilio</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="domicilio" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-3">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Cruce</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="cruce" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-3">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Col.</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="colonia" readonly>
                    </div>    
                </div>
            </div>
        </div>
            <div class="row">
             <div class="col-3">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Pob.</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="poblacion" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-3">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Estado</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="estado" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-3">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">CP</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="cp" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-3">
                 <div class="form-group row">
                    <label class="col-4 col-form-label" for="">F.Nacimiento</label>
                    <div class="col-8">
                        <input type="text" class="form-control form-control-sm" id="fechaNacimiento" readonly>
                    </div>    
                </div>
            </div>
        </div>
        <div class="row">
            
            <div class="col-4">
                 <div class="form-group row">
                    <label class="col-4 col-form-label" for="">Limite de Credito</label>
                    <div class="col-8">
                        <input type="text" class="form-control form-control-sm" id="limite_credito" readonly>
                    </div>    
                </div>
            </div>
            <div class="col-4">
                 <div class="form-group row">
                    <label class="col-3 col-form-label" for="">Telefonos:</label>
                    <div class="col-9">
                       <!-- <input type="text" class="form-control form-control-sm" id="estatus">-->
                        <select id="telefonosClientes" style="width:100%">

                        </select>
                    </div>    
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                 <div class="form-group row">
                    <label class="col-4 col-form-label" for="">Folio Solicitud</label>
                    <div class="col-8">
                        <input type="text" class="form-control form-control-sm" id="folioSolicitud" readonly>
                    </div>    
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
                     <div class="col-12">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Selecciona Tarjeta:</label>
                    <div class="col-10">
                       <!-- <input type="text" class="form-control form-control-sm" id="estatus">-->
                        <select id="tarjetaActiva" onchange="muestraBoton();" style="width:100%">

                        </select>
                    </div>    
                </div>
            </div>
        </div>
        <div class="row" style="display:none;">
             <div class="col-4">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">T.Titular</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="titular" readonly>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-4">
                <div class="row">
                    <div class="col-7">
                         <div class="form-group ">
                            <label class="" for="">T.Adicional 1</label>
                            
                                <input type="text" class="form-control form-control-sm creditCard" placeholder="0000 0000 0000 0000" id="adicional1" readonly>
                 
                        </div>
                    </div>
                    <div class="col-5">
                         <div class="form-group">
                           <label class="" for="">Estatus</label>
                        
                                <input type="text" class="form-control form-control-sm" id="estatusAdicional1" readonly>
                                <!--<select class="form-control form-control-sm" id="estatusAdicional1">
                                    <option value="Activa">Activa</option>
                                    <option value="Desactivada">Desactivada</option>
                                    <option value="Cancelada">Cancelada</option>
                                    <option value="Nueva">Nueva</option>
                                    <option value="Suspendida">Suspendida</option>
                                    <option value="Castigada">Castigada</option>
                                </select>-->
                             
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                         <div class="form-group">
                            <label class="" for="">Nombre Adicional 1</label>
                            
                                <input type="text" class="form-control form-control-sm" id="nombreAdicional1" readonly>
                          
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="row">
                    <div class="col-7">
                         <div class="form-group ">
                            <label class="" for="">T.Adicional 2</label>
                            
                                <input type="text" class="form-control form-control-sm creditCard" placeholder="0000 0000 0000 0000" id="adicional2" readonly>
                 
                        </div>
                    </div>
                    <div class="col-5">
                         <div class="form-group">
                           <label class="" for="">Estatus</label>
                        
                                <input type="text" class="form-control form-control-sm" id="estatusAdiconal2" readonly>
                             
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                         <div class="form-group">
                            <label class="" for="">Nombre Adicional 2</label>
                            
                                <input type="text" class="form-control form-control-sm" id="nombreAdiconal2" readonly>
                          
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="row">
                    <div class="col-7">
                         <div class="form-group ">
                            <label class="" for="">T.Adicional 3</label>
                            
                                <input type="text" class="form-control form-control-sm creditCard" placeholder="0000 0000 0000 0000" id="adicional3" readonly>
                 
                        </div>
                    </div>
                    <div class="col-5">
                         <div class="form-group">
                           <label class="" for="">Estatus</label>
                        
                                <input type="text" class="form-control form-control-sm" id="estatusAdicional3" readonly>
                             
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                         <div class="form-group">
                            <label class="" for="">Nombre Adicional 3</label>
                            
                                <input type="text" class="form-control form-control-sm" id="nombreAdicional3" readonly>
                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>

        

     
     
     
    
        <div class="row">
            <div class="col-12" align="right">
                <button class="btn btn-primary btn-sm" onclick="restaura();">Restaurar</button>
                <button class="btn btn-success btn-sm" id="btnActivar" style="display: none;" onclick="activar();">Activar</button>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript">
    $(document).ready(function() {

$('.creditCard').inputmask({
  mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
}).change(function(){
  let value = $(this).val().substr(0,2);
  $(this).inputmask({
    mask: '(9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
  });
});

        $("#numeroCuenta").on('keyup', function (e) {
            var cuenta = $("#numeroCuenta").val()
            if (e.key === 'Enter' || e.keyCode === 13) {

                if(isNumeric(cuenta)){
                   $.ajax({
                       url: "{{url('procesos/get_cliente_info2')}}",
                       type: 'POST',
                       dataType: 'json',
                       data: {cuenta: $("#numeroCuenta").val()},
                   })
                   .done(function(resp) {
                        if(resp.estatus > 0){
                            agregaCliente2(resp.estatus, resp.nombre);
                            $('#numeroCuenta').val(cuenta)
                        }else{
                             Swal.fire({
                                 title: 'No existe la cuenta',
                                 type: 'error',
                                 timer: 2000
                             })
                            restaura();
                             return false;
                        }
                       
                   })
                   .fail(function() {
                       console.log("error");
                   })
                   .always(function() {
                       console.log("complete");
                   });
                }
            }
        })
    $('#cliente_search__').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{{url('procesos/get_clientes')}}",
                dataType: 'json',
                data: {
                    term: request.term
                },
                success: function(data) {
                    response(data)
                }
            })
        },
        select: function(event, ui) {
            agregaCliente2(ui.item.id, ui.item.label);
            //$('#modaltipoOperacion').modal('hide')

            //$(this).val('');

            return false;
        },
        selectFirst: true,
        minLength: 3
    });



    });

    function agregaCliente2(id,label=''){
       $.ajax({
           url: "{{url('procesos/get_cliente_info')}}",
           type: 'POST',
           dataType: 'json',
           data: {id: id},
       })
       .done(function(resp) {
           console.log("success");
           console.log(resp.data)

     

           $('#nombreCompleto').val(resp.data.nombre_completo)
           $('#numeroCuenta').val(resp.data.cuenta)
           $('#domicilio').val(resp.data.domicilio)
           $('#cruce').val(resp.data.cruzamiento)
           $('#colonia').val(resp.colonia)
           $('#estatus').val(resp.data.estatus)
           $('#limite_credito').val(numfom(resp.data.limite_credito))
           $('#cruce').val(resp.data.cruzamiento)
           $('#cp').val(resp.cp)
           $('#folioSolicitud').val(resp.data.folio_solicitud)
           dateformar = resp.data.fecha_nacimiento.split('-')
             $('#fechaNacimiento').val(dateformar[2]+'/'+dateformar[1]+'/'+dateformar[0])
           

           $('#cp').val(resp.cp)
           $('#estado').val(resp.estado)
           $('#poblacion').val(resp.poblacion)
           $('#titular').val(resp.data.tarjetas[0].numero_tarjeta)

           
           var adicional = 1;
           $('#tarjetaActiva').html('')
           html = '<option value="0">-Selecciona-</option>'

            $('#titular').val(resp.data.numero_tarjeta)
            $('#TarjetaBusA').val(resp.data.numero_tarjeta)
            tarnum = resp.data.numero_tarjeta.match(/.{1,4}/g)
            
            if(typeof tarnum[3] === 'undefined'){
                utimoBloque = ''
            }else{
                utimoBloque = tarnum[3]
            }
            numeTarjeta =  tarnum[0]+' '+tarnum[1]+' '+tarnum[2]+' '+utimoBloque
            if(resp.data.estatus=='Desactivada'){
                html +='<option value="'+resp.data.id+'" tipo="t">'+numeTarjeta+' - Titular </option>'
            }
            
           $.each(resp.data.tarjetas, function(index, val) {
                if(val.tipo==1){
                    tipoTar = 'Titular'
                    $('#titular').val(val.numero_tarjeta)
                    $('#TarjetaBusA').val(val.numero_tarjeta)
            
                }else{
                     tipoTar = 'Adicional'
                    $('#adicional'+adicional).val(val.numero_tarjeta)
                    $('#nombreAdicional'+adicional).val(val.titular)
                    $('#estatusAdicional'+adicional).val(val.estatus)
                    adicional++;
                }
                if(val.estatus=='Desactivada'){
                    //html +='<option value="'+val.id+'">'+val.numero_tarjeta+' - '+tipoTar+'</option>'
                    tarnum = val.numero_tarjeta.match(/.{1,4}/g)
                    numeTarjeta =  tarnum[0]+' '+tarnum[1]+' '+tarnum[2]+' '+tarnum[3]
                    html +='<option value="'+val.id+'" tipo="a">'+numeTarjeta+' - '+tipoTar+'</option>'
                }   
                
           });
           html2 = '';
           console.log('teleosnos')
           console.log(resp.telefonos)
           $.each(resp.telefonos, function(index, val) {
               html2 +='<option value="'+val.id+'">'+val.area+'-'+val.telefono+' ('+val.tipo+')</option>'
           });
           
            $('#telefonosClientes').append(html2);
            $('#tarjetaActiva').append(html);
         

       })
       .fail(function() {
           console.log("error");
       })
       .always(function() {
           console.log("complete");
       });
       
    }
    function muestraBoton(){
        if($('#tarjetaActiva').val()!=0){
            $('#btnActivar').show()
        }else{
            $('#btnActivar').hide()
        }
    }
    function restaura(){
        $('.form-control').val('')
        $('#btnActivar').hide()
        $('#tarjetaActiva').html('<option value="0">-Selecciona-</option>')
        $('#telefonosClientes').html('<option value="0">-Selecciona-</option>')
    }
    function activar(){
        var id = $('#tarjetaActiva').val()
        var tipo = $('#tarjetaActiva option:selected').attr('tipo');
        $.ajax({
            url: "{{url('procesos/activar_tarjeta')}}",
            type: 'POST',
            dataType: 'json',
            data: {id: id,tipo: tipo},
        })
        .done(function(resp) {
            console.log("success");
            if(resp.estatus > 0){
                Swal.fire({
                     title: 'Se activo correctamente',
                     type: 'success',
                     timer: 2000
                 })
                restaura();
                 return false;

            }
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function buscaCliente(){
        var tarjeta = $('#TarjetaBusA').val();
        $.ajax({
            url: "{{url('procesos/busca_tarjeta')}}",
            type: 'POST',
            dataType: 'json',
            data: {tarjeta: tarjeta},
        })
        .done(function(resp) {
            console.log(resp);
            if(resp.estatus > 0){
                agregaCliente2(resp.estatus,resp.cliente)
                $('#cliente_search').val(resp.cliente)
            }else{
                   Swal.fire({
                     title: 'No existe la tarjeta',
                     type: 'error',
                     timer: 2000
                 })
                restaura();
                 return false;
            }
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
        function isNumeric(val) {
            return /^-?\d+$/.test(val);
        }
        function usaCliente(idCliente){
            agregaCliente2(idCliente)
            $('#modalBuscaCuenta').modal('hide')
        }
function numfom(monto){
    return new Intl.NumberFormat('es-MX',{style:'currency',currency:'MXN'}).format(monto);
  }
</script>
  @include('comunes.busca_cuenta')

@endpush