@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')
    <!--  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> {{__('Notas de Cargo/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">
              <!-- inicio generales --->
            <div class="col-md-8">
                        <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" style="display: none;">
                 <div class="form-group row">
                    <label class="col-2 col-form-label" for="">Tel.</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="telefono" 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>
            <!-- fin generales --->
            <div class="col-md-4">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="bg-warning">
                                    <tr>
                                        <th>*</th>
                                        <th>Promocion</th>
                                        <th>Folio</th>
                                        <th>Saldo</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr>
       <!-- <div class="row">
                     <div class="col-6">
                 <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 class="" id="tarjetaActiva" onchange="muestraBoton();" style="width: 100%">

                        </select>
                    </div>    
                </div>
            </div>
        </div>-->
        <div class="row">
            <div class="col-12">
                <fieldset>
                    <legend>Saldos</legend>
                    <div class="row">
                        <div class="col-3">
                             <div class="form-group row">
                                <label class="col-2 col-form-label" for="">Capital</label>
                                <div class="col-10">
                                    <input type="text" class="form-control form-control-sm" id="capital" readonly="">
                                </div>    
                            </div>
                        </div>
                        <div class="col-3">
                             <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Interes Financiamiento</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm" id="interesesFinan" readonly="">
                                </div>    
                            </div>
                        </div>
                        <div class="col-3">
                             <div class="form-group row">
                                <label class="col-3 col-form-label" for="">Interes Moratorio</label>
                                <div class="col-9">
                                    <input type="text" class="form-control form-control-sm" id="interesesMora" 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="">Gastos Cobranza</label>
                                <div class="col-10">
                                    <input type="text" class="form-control form-control-sm" id="gastosCobranza" readonly="">
                                </div>    
                            </div>
                        </div>
                        <div class="col-3">
                             <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Iva Gastos/Intereses</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm" id="ivaGasInte" readonly="">
                                </div>    
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Tipo Nota</label>
                                <div class="col-8">
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                      <label class="form-check-label" for="inlineRadio1">Cargo</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                      <label class="form-check-label" for="inlineRadio2">Credito</label>
                                    </div>
                                </div>    
                            </div>
                    </div>
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Fecha</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                     <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Concepto</label>
                                <div class="col-8">
                                    <select id="" style="width:100%"></select>
                                </div>    
                            </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Plazo</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Referencia</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                </div>
                                <div class="row">
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Importe(Con Iva incluido)</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                    <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">Neto</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                                        <div class="col-md-4">
                            <div class="form-group row">
                                <label class="col-4 col-form-label" for="">IVA</label>
                                <div class="col-8">
                                    <input type="text" class="form-control form-control-sm timepicker" id="fechaCargo">
                                </div>    
                            </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">
                        <textarea class="form-control" id="" cols="12" rows="3"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" align="right">
                        <button class="btn">Restaurar</button>
                        <button class="btn btn-primary">Aplicar</button>
                    </div>
                </div>
            </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)

           $('#cp').val(resp.cp)
           $('#estado').val(resp.estado)
           $('#poblacion').val(resp.poblacion)
           $('#titular').val(resp.data.numero_tarjeta)
           $('#limite_credito').val(numfom(resp.data.limite_credito))
           $('#cruce').val(resp.data.cruzamiento)
           $('#cp').val(resp.cp)
           
           var adicional = 1;
           $('#tarjetaActiva').html('')
           html = '<option value="0">-Selecciona-</option>'
           $('#titular').val(resp.data.numero_tarjeta)
           $('#TarjetaBusA').val(resp.data.numero_tarjeta)
           //$('#telefono').val(val.telefono)
           //if(resp.data.estatus=='Activa'){
             html +='<option value="'+resp.data.id+'" tipo="t">'+resp.data.numero_tarjeta+' - 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)
                    $('#telefono').val(val.telefono)
                }else{
                     tipoTar = 'Adicional'
                    $('#adicional'+adicional).val(val.numero_tarjeta)
                    $('#nombreAdicional'+adicional).val(val.titular)
                    $('#estatusAdicional'+adicional).val(val.estatus)
                    adicional++;
                }
                //if(val.estatus=='Activa'){
                    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(){
        $('#rowsAclaraciones').html('')
        $('.form-control').val('')
        $('#btnActivar').hide()
        $('#tarjetaActiva').html('<option value="0">-Selecciona-</option>')
    }

    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