@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> {{__('Aclaraciones CR')}}</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" 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>
        <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-6" align="left">
                <h5>Aclaraciones Anteriores</h5>
            </div>
            <div class="col-6" align="right">
                <button class="btn btn-primary btn-sm" onclick="modalNueva();">Nueva Aclaracion</button>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr class="bg-warning">
                                <th>Acciones</th>
                                <th>Folio</th>
                                <th>Estatus</th>
                                <th>Tipo</th>
                                <th></th>
                                <th>Nota</th>
                                <th>Registro</th>
                                <th>Fecha</th>
                            </tr>
                        </thead>
                        <tbody id="rowsAclaraciones">

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



<div class="modal fade" id="modalAclaracion">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Nueva Aclaracion</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <label>Tipo Aclaracion</label>
                        <select class="form-control" id="tipoAclara">
                            <option value="0">seleccione opcion</option>
                            @foreach ($data['tipos'] as $tipos => $tipo)
                               <option value="{{ $tipo->id }}">{{ $tipo->descripcion }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label>Notas</label>
                        <textarea class="form-control" id="notaAclara" cols="12" rows="4"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardarNota()">Guardar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalNotas">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="titleFolioAclaracion">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <input type="hidden" id="idAclaracion">
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <label>Nota</label>
                        <textarea id="notaAclaracion" cols="12" rows="3" class="form-control"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12" align="right">
                        <button class="btn btn-primary btn-sm" onclick="guardaNotaAclara()">Guardar Nota</button>
                    </div>
                </div>
                <div class="row" id="notasAclaraciones">
                    
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </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);
            html4 = ''
            $('#rowsAclaraciones').html(html4);
            console.log('acalara')
            //console.log(resp.aclaraciones)
            $.each(resp.data.aclaraciones, function(index, val) {
                console.log(val)
                html4+='<tr>'
                if(val.estatus == 'En Proceso'){
                    html4+='<td><div align="center"><button class="btn btn-success btn-sm" title="Procedente" onclick="cambiaEstatusAcl(1,'+val.id+')"><i class="la la-arrow-right"></i></button><button class="btn btn-primary btn-sm" title="Improcedente" onclick="cambiaEstatusAcl(2,'+val.id+')"><i class="la la-fan"></i></button><button class="btn btn-danger btn-sm" title="Cancelar" onclick="cambiaEstatusAcl(3,'+val.id+')"><i class="la la-times"></i></button></div></td>'
                }else{
                    html4+='<td></td>'
                }
                
                html4+='<td>'+val.folio_aclaracion+'</td>'
                html4+='<td>'+val.estatus+'</td>'
                html4+='<td>'+val.tipo_display+'</td>'
                html4+='<td><button class="btn btn-primary btn-sm" onclick="verNotas('+val.id+')">Notas</button></td>'
                html4+='<td>'+val.nota+'</td>'
                html4+='<td>'+val.usuario_acl+'</td>'
                html4+='<td>'+val.fecha_creacion+'</td>'
                html4+='</tr>'

            });
            $('#rowsAclaraciones').append(html4);
         

       })
       .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 activar(){
        var id = $('#tarjetaActiva').val()
        var motivo =  $('#motivo').val()
        var tipo = $('#tarjetaActiva option:selected').attr('tipo');
        if(motivo==''){
                Swal.fire({
                     title: 'Agrega un motivo',
                     type: 'error',
                     timer: 2000
                 })
                return false;
        }
        $.ajax({
            url: "{{url('procesos/extravio_tarjeta_guarda')}}",
            type: 'POST',
            dataType: 'json',
            data: {
                id: id,
                motivo: motivo,
                tipo: tipo,
            },
        })
        .done(function(resp) {
            console.log("success");
            if(resp.estatus > 0){
                Swal.fire({
                     title: 'Se guardo correctamente con el folio: '+resp.folio,
                     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);
  }
  function modalNueva(){
    $('#tipoAclara').val(0)
    $('#notaAclara').val('')
    $('#modalAclaracion').modal('show')
  }
  function verNotas(id){

    $.ajax({
        url: '{{ url('procesos/ver_notas_aclaracion') }}',
        type: 'POST',
        dataType: 'json',
        data: {id: id},
    })
    .done(function(resp) {
        console.log("success");
        $('#idAclaracion').val(id)
        
        $('#titleFolioAclaracion').html('Folio '+resp.generales.folio_aclaracion)
        var html = '';
        $('#notasAclaraciones').html(html)
        $.each(resp.notas, function(index, val) {
            html+='<div class="col-12"><div class="alert alert-warning" role="alert">'
              html+='<p>'+val.descripcion+'</p>'
              html+='<hr>'
              html+='<p class="mb-0">'+val.fecha+'</p>'
            html+='</div></div>'
        });
        $('#notaAclaracion').val('')
        $('#notasAclaraciones').append(html)
        $('#modalNotas').modal('show')
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function guardarNota(){
    var tipo = $('#tipoAclara').val()
    var nota = $('#notaAclara').val()
    var tarjeta = $('#tarjetaActiva').val()
    var tipoTarjeta = $('#tarjetaActiva option:selected').attr('tipo');
    if(tarjeta==0){
        Swal.fire({
                     title: 'Selecciona una tarjeta',
                     type: 'error',
                     timer: 2000
                 })
        return false;
    }
    if(nota==''){
        Swal.fire({
                     title: 'Agrega una nota a la aclaracion',
                     type: 'error',
                     timer: 2000
                 })
        return false;
    }
    if(tipo==0){
        Swal.fire({
                     title: 'Selecciona un tipo de aclaracion',
                     type: 'error',
                     timer: 2000
                 })
        return false;
    }
    $.ajax({
        url: '{{ url('procesos/guarda_aclaracion') }}',
        type: 'POST',
        dataType: 'json',
        data: {
            tipo: tipo,
            nota: nota,
            tarjeta: tarjeta,
            tipoTarjeta: tipoTarjeta,
        },
    })
    .done(function(resp) {

            if(resp.estatus > 0){
                agregaCliente2(resp.cliente)
                Swal.fire({
                     title: 'Se guardo correctamente con el folio: '+resp.folio,
                     type: 'success',
                     timer: 2000
                 })
                $('#modalAclaracion').modal('hide')

                 return false;

            }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function guardaNotaAclara(){
    var  id = $('#idAclaracion').val()
    var  nota = $('#notaAclaracion').val()
    $.ajax({
        url: '{{ url('procesos/guarda_aclaracion_nota') }}',
        type: 'POST',
        dataType: 'json',
        data: {
            id: id,
            nota: nota,
        },
    })
    .done(function(resp) {
        console.log("success");
        if(resp.estatus > 0){
            html='<div class="col-12"><div class="alert alert-warning" role="alert">'
              html+='<p>'+nota+'</p>'
              html+='<hr>'
              html+='<p class="mb-0">'+resp.fecha+'</p>'
            html+='</div></div>'
            $('#notaAclaracion').val('')
            $('#notasAclaraciones').append(html)
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function cambiaEstatusAcl(estatus,id){
    $.ajax({
        url: '{{ url('procesos/cambia_estatus_aclaracion') }}',
        type: 'POST',
        dataType: 'json',
        data: {
            id: id,
            estatus: estatus,
        },
    })
    .done(function(resp) {
        console.log("success");
        if(resp.estatus > 0){
            agregaCliente2(resp.cliente)
             Swal.fire({
                     title: 'Se cambio estatus correctamente',
                     type: 'success',
                     timer: 2000
                 })
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
  }
</script>
@include('comunes.busca_cuenta')

@endpush