@extends('layout.master',['activePage' => 'clientes_cr', 'menuParent' => 'Catalogos', 'titlePage' => __('Catalogo de cliente')])

@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
@endpush


@section('content')

<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);"> {{__('Catalogos')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('EDICIÓN DE CLIENTES')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>


    </header>
</div>
<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <div class="normal-tab">
            <ul class="nav nav-tabs mb-2 mt-2" id="normaltab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="general-tab" data-toggle="tab" href="#tab-general" role="tab" aria-controls="tab-general" aria-selected="true">{{__('Generales')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="complementos-tab" data-toggle="tab" href="#tab-complementos" role="tab" aria-controls="tab-complementos" aria-selected="false">{{__('Complementos')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="tarjetas-tab" data-toggle="tab" href="#tab-tarjetas" role="tab" aria-controls="tab-tarjetas" aria-selected="false">{{__('Tarjetas')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="telefonos-tab" data-toggle="tab" href="#tab-telefonos" role="tab" aria-controls="tab-telefonos" aria-selected="false">{{__('Telefonos')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="correos-tab" data-toggle="tab" href="#tab-correos" role="tab" aria-controls="tab-correos" aria-selected="false">{{__('Correos')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="estadisticas-tab" data-toggle="tab" href="#tab-estadisticas" role="tab" aria-controls="tab-estadisticas" aria-selected="false">{{__('Estadisticas')}}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" id="saldos-tab" data-toggle="tab" href="#tab-saldos" role="tab" aria-controls="tab-saldos" aria-selected="false">{{__('Saldos')}}</a>
                </li>
            </ul>


            <div class="tab-content" id="normaltabContent">
                <div class="tab-pane fade show active" id="tab-general" role="tabpanel" aria-labelledby="general-tab">
                    <form action="{{url('catalagos/clientes/save-cliente')}}" method="POST" id="formulario" class="form-with-spin">
                        {{ csrf_field() }}
                        <input type="hidden" name="id_cliente" id="id_cliente" value="{{$data['id']}}">
                        <div class="w-100">
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6 class="font-weight-bold">GENERALES</h6>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-2">
                                    <label>Cuenta: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="cuenta" id="cuenta" required>
                                </div>
                                <div class="col-lg-4">
                                    <label>Nombre completo: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="nombre_completo" id="nombre_completo" required>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group ">
                                        <label>Número tarjeta: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control  creditCard" id="numero_tarjeta" name="numero_tarjeta" placeholder="0000 0000 0000 0000" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" style="margin-bottom: -25px;">
                                <div class="col-lg-4">
                                    <label>Razón social: </label>
                                    <input type="text" class="form-control" name="razon_social" id="razon_social">
                                </div>
                                <div class="col-lg-4">
                                    <label>Sucursal: <span class="text-danger">*</span></label>
                                    <select class="form-control basic-select2" name="id_sucursal" id="id_sucursal" required>
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['sucursales'] as $sc)
                                        <option value="{{$sc->id}}"> {{$sc->sucursal}}-{{$sc->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Estatus: <span class="text-danger">*</span></label>
                                    <select class="form-control basic-select2" name="estatus" id="estatus">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['estatus'] as $es)
                                        <option value="{{$es}}">{{$es}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <label>Nombre corto: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="nombre_corto" id="nombre_corto" required>
                                </div>
                                <div class="col-lg-3">
                                    <label>Apellido paterno: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="paterno" id="paterno" required>
                                </div>
                                <div class="col-lg-3">
                                    <label>Apellido materno: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="materno" id="materno" required>
                                </div>
                                <div class="col-lg-3">
                                    <label>Nombres: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="nombre" id="nombre" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <label>RFC: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="rfc" id="rfc" required>
                                </div>
                                <div class="col-lg-3">
                                    <label>CURP: </label>
                                    <input type="text" class="form-control" name="curp" id="curp">
                                </div>
                                <div class="col-lg-3">
                                    <label>HFopa: </label>
                                    <input type="text" class="form-control" name="hfopa" id="hfopa">
                                </div>
                                <!-- <div class="col-lg-2">
                                    <label>Morosidad: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="nombre" id="nombre" required>
                                </div> -->
                                <div class="col-lg-3">
                                    <label>Límite crédito: <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="limite_credito" id="limite_credito" required>
                                    <input type="hidden" class="form-control" name="limite_credito_hidden" id="limite_credito_hidden">
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <h6 class="font-weight-bold">DOMICILIO</h6>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <label>Domicilio: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="domicilio" id="domicilio" required>
                                </div>
                                <div class="col-lg-3">
                                    <label>Cruzamiento: </label>
                                    <input type="text" class="form-control" name="cruzamiento" id="cruzamiento">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary mt-4" type="button" id="btn_add_domicilios">Domicilio</button>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3">
                                    <label>Colonia:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="coloniaV" readonly>
                                    <input type="hidden" class="form-control" name="id_colonia" id="id_colonia">
                                </div>
                                <div class="col-lg-3">
                                    <label>País:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="paisV" readonly>
                                </div>
                                <div class="col-lg-3">
                                    <label>Estado:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="estadoV" readonly>
                                </div>
                                <div class="col-lg-3">
                                    <label>Municipio:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="municipioV" readonly>
                                </div>
                                <div class="col-lg-3">
                                    <label>Poblacion:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="poblacionV" readonly>
                                </div>
                                <div class="col-lg-3">
                                    <label>C.P:<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="cpV" readonly>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <h6 class="font-weight-bold">OTROS DATOS</h6>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-2" style="margin-bottom: -30px;">
                                    <label>Categoria: <span class="text-danger">*</span></label>
                                    <select class="form-control basic-select2" name="id_categoria" id="id_categoria">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['categorias'] as $cat)
                                        <option value="{{$cat->id}}">{{$cat->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2" style="margin-bottom: -30px;">
                                    <label>Tipo de cliente: <span class="text-danger">*</span></label>
                                    <select class="form-control basic-select2" name="id_tipo_cliente" id="id_tipo_cliente">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['tipo_cliente'] as $cat)
                                        <option value="{{$cat->id}}">{{$cat->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Cuenta corporativa:</label>
                                    <input type="text" class="form-control" id="id_corpo" name="id_corpo">
                                </div>
                                <div class="col-lg-2">
                                    <label>Folio solicitud:</label>
                                    <input type="text" class="form-control" id="folio_solicitud" name="folio_solicitud">
                                </div>
                                <!-- <div class="col-lg-2">
                                    <label>Cuenta padre:</label>
                                    <input type="number" class="form-control" id="cuenta_padre" name="cuenta_padre">
                                </div> -->
                            </div>
                        </div>
                        <div class="widget-footer text-right p-0 py-3">
                            <input type="submit" class="btn btn-primary" value="Guardar">
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab-complementos" role="tabpanel" aria-labelledby="complementos-tab">
                    <form action="{{url('catalagos/clientes/save-cliente')}}" method="POST" id="formulario" class="form-with-spin" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="id_cliente" id="id_cliente" value="{{$data['id']}}">
                        <div class="w-100">
                            <div class="form-group row" style="margin-bottom: -25px;">
                                <div class="col-lg-2">
                                    <label>Ruta cobro: </label>
                                    <select class="form-control basic-select2" name="id_ruta_cobro" id="id_ruta_cobro">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['rutas_cobro'] as $rt)
                                        <option value="{{$rt->id}}">{{$rt->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Fecha de nacimiento:</label>
                                    <input id="fecha_nacimiento" name="fecha_nacimiento" class="form-control flatpickr flatpickr-input active" type="text">
                                </div>
                                <div class="col-lg-2">
                                    <label>Tipo persona:</label>
                                    <select class="form-control basic-select2" name="id_tipo_persona" id="id_tipo_persona">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['tipo_persona'] as $tp)
                                        <option value="{{$tp->id}}">{{$tp->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Sexo:</label>
                                    <select class="form-control basic-select2" name="sexo" id="sexo">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['sexo'] as $es)
                                        <option value="{{$es}}">{{$es}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Estado civil:</label>
                                    <select class="form-control basic-select2" name="id_estado_civil" id="id_estado_civil">
                                        <option selected="selected" value="0">-Selecciona una opción-</option>
                                        @foreach($data['estado_civil'] as $tp)
                                        <option value="{{$tp->id}}">{{$tp->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Actividad:</label>
                                    <select class="form-control basic-select2" name="id_actividad" id="id_actividad">
                                        <option selected="selected" value="0">-Selecciona una opción-</option>
                                        @foreach($data['actividades'] as $ac)
                                        <option value="{{$ac->id}}">{{$ac->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row" style="margin-bottom: -25px;">
                                <div class="col-lg-2">
                                    <label>Estado de cuenta:</label>
                                    <select class="form-control basic-select2" name="estado_cuenta" id="estado_cuenta">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['estado_cuenta'] as $es)
                                        <option value="{{$es}}">{{$es}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- <div class="col-lg-2">
                                    <label>Moneda:</label>
                                    <select class="form-control basic-select2" name="moneda" id="moneda">
                                        <option selected="selected" value="">-Selecciona una opción-</option>

                                    </select>
                                </div> -->
                                <!-- <div class="col-lg-2">
                                    <label>Monedero electroníco:</label>
                                    <input type="number" step="any" class="form-control" name="monedero" id="monedero">
                                </div> -->
                                <div class="col-lg-2">
                                    <label>Referencia bancaria: </label>
                                    <input type="text" class="form-control" name="referencia_bancaria" id="referencia_bancaria">
                                </div>
                                <div class="col-lg-2">
                                    <label>Tipo corte:</label>
                                    <select class="form-control basic-select2" name="id_tipo_corte" id="id_tipo_corte">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['tipo_corte'] as $tp)
                                        <option value="{{$tp->id}}">{{$tp->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label>Enviar documentos:</label>
                                    <select class="form-control basic-select2" name="id_envio_doctos" id="id_envio_doctos">
                                        <option selected="selected" value="">-Selecciona una opción-</option>
                                        @foreach($data['tipo_envio'] as $es)
                                        <option value="{{$es->id}}">{{$es->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="widget-footer text-right p-0 py-3">
                            <input type="submit" class="btn btn-primary" value="Guardar">
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="tab-tarjetas" role="tabpanel" aria-labelledby="tarjetas-tab">
                    <div class="row layout-top-spacing justify-content-end">
                        <div class="col-3 text-right">
                            <button class="btn btn-primary" onclick="nuevaTarjeta()">Nueva tarjeta</button>
                        </div>
                    </div>
                    <div class="row date-table-container layout-top-spacing">
                        <div class="table-responsive">
                            <table class="table table-hover display nowrap" style="width:100%" id="list-tarjetas">
                                <thead>
                                    <tr>
                                        <th class="no-content"></th>
                                        <th>{{__('Nombre')}}</th>
                                        <th>{{__('Número de tarjeta')}}</th>
                                        <th>{{__('% Limite de crédito')}}</th>
                                        <th>{{__('Telefono')}}</th>
                                        <th>{{__('Parentesco')}}</th>
                                        <th>{{__('Estatus')}}</th>
                                        <th>{{__('Fecha de creación')}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-telefonos" role="tabpanel" aria-labelledby="telefonos-tab">
                    <div class="row layout-top-spacing justify-content-end">
                        <div class="col-3 text-right">
                            <button class="btn btn-primary" onclick="nuevoTelefono()">Nuevo telefono</button>
                        </div>
                    </div>
                    <div class="row date-table-container layout-top-spacing">
                        <div class="table-responsive">
                            <table class="table table-hover display nowrap" style="width:100%" id="list-telefonos">
                                <thead>
                                    <tr>
                                        <th class="no-content"></th>
                                        <th>{{__('Tipo')}}</th>
                                        <th>{{__('Telefono')}}</th>
                                        <th>{{__('Extensión')}}</th>
                                        <th>{{__('Localización')}}</th>
                                        <th>{{__('Horario')}}</th>
                                        <th>{{__('Fecha de creación')}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-correos" role="tabpanel" aria-labelledby="correos-tab">
                    <div class="row layout-top-spacing justify-content-end">
                        <div class="col-3 text-right">
                            <button class="btn btn-primary" onclick="nuevoCorreo()">Nuevo correo</button>
                        </div>
                    </div>
                    <div class="row date-table-container layout-top-spacing">
                        <div class="table-responsive">
                            <table class="table table-hover display nowrap" style="width:100%" id="list-correos">
                                <thead>
                                    <tr>
                                        <th class="no-content"></th>
                                        <th>{{__('ID')}}</th>
                                        <th>{{__('Correo')}}</th>
                                        <th>{{__('Fecha de creación')}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-estadisticas" role="tabpanel" aria-labelledby="estadisticas-tab">
                    <div class="w-100">
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Fecha ultima compra:</label>
                                <input id="fecha_ultima_compra" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Importe ultima compra:</label>
                                <input id="ultima_compra" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Fecha ultimo pago:</label>
                                <input id="fecha_ultimo_pago" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Importe ultimo pago:</label>
                                <input id="ultimo_pago" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Veces cobro:</label>
                                <input id="veces_cobro" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Compra mayor:</label>
                                <input id="compra_mayor" class="form-control" type="number" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Fecha confirmación:</label>
                                <input id="fecha_confirmacion" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Fecha depuración:</label>
                                <input id="fecha_depuracion" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Saldo depuración:</label>
                                <input id="saldo_depuracion" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Intereses normales acumulados:</label>
                                <input id="int_finan_acum" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Intereses monatorios acumulados:</label>
                                <input id="int_mora_acum" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Gastos de cobranza acumulados:</label>
                                <input id="gastos_acum" class="form-control" type="number" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>IVA intereses acumulados:</label>
                                <input id="iva_int_acum" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>IVA gastos acumulados:</label>
                                <input id="iva_gastos_acum" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Intereses devengados:</label>
                                <input id="intereses_devengados" class="form-control" type="number" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Registrado por:</label>
                                <input id="created_by" class="form-control" type="text" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Registrado el:</label>
                                <input id="created_at" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Modificado por:</label>
                                <input id="updated_by" class="form-control" type="text" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Modificado el:</label>
                                <input id="updated_at" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                            <div class="col-lg-2">
                                <label>Activado por:</label>
                                <input id="activada_por" class="form-control" type="text" readonly>
                            </div>
                            <div class="col-lg-2">
                                <label>Activado el:</label>
                                <input id="activated_at" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-saldos" role="tabpanel" aria-labelledby="saldos-tab">
                    <div class="container">
                        <div class="col-10">
                            <div class="form-group row justify-content-between">
                                <div class="col-lg-4">
                                    <label>Fecha ultimo corte:</label>
                                    <input id="fecha_ultimo_corte" class="form-control flatpickr flatpickr-input active" type="text" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label>Saldo:</label>
                                    <input id="saldo" class="form-control" type="number" readonly>
                                    <label>Pago minimo:</label>
                                    <input id="pago_minimo" class="form-control" type="number" readonly>
                                    <label>Pago para no generar intereses:</label>
                                    <input id="pago_no_genera_interes" class="form-control" type="number" readonly>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <h6>Mes inicial</h6>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Capital:</label>
                                        <input id="capital_mes" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes normal:</label>
                                        <input id="interes_finan_mes" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes monatorio:</label>
                                        <input id="interes_mora_mes" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Gasto cobranza:</label>
                                        <input id="gastos_cob_mes" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes IVA:</label>
                                        <input id="iva_mes" class="form-control" type="number" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="row ">
                                        <div class="col-12 text-center">
                                            <h6>Cargos</h6>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Capital:</label>
                                        <input id="cargos_capital" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes normal:</label>
                                        <input id="cargos_int_finan" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes monatorio:</label>
                                        <input id="cargos_int_mora" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Gasto cobranza:</label>
                                        <input id="" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes IVA:</label>
                                        <input id="cargos_iva" class="form-control" type="number" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="row ">
                                        <div class="col-12 text-center">
                                            <h6>Abonos</h6>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Capital:</label>
                                        <input id="abonos_capital" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes normal:</label>
                                        <input id="abonos_int_finan" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes monatorio:</label>
                                        <input id="abonos_int_mora" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Gasto cobranza:</label>
                                        <input id="" class="form-control" type="number" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Interes IVA:</label>
                                        <input id="abonos_iva" class="form-control" type="number" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modal-nueva-tarjeta" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title-modal-nueva-tarjeta">Agregar nueva tarjeta</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('catalogos/clientes/save-tarjeta')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_tarjeta" id="id_tarjeta">
                <input type="hidden" name="id_cliente" id="id_cliente_tarjeta" value="{{$data['id']}}">
                <div class="modal-body">
                    <div class="form-group ">
                        <label>Nombre tarjeta: <span class="text-danger">*</span></label>
                        <input type="text" name="titular" id="titular" class="form-control" required>
                    </div>
                    <div class="form-group ">
                        <label>Número tarjeta: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control  creditCard" id="numero_tarjeta" name="numero_tarjeta" placeholder="0000 0000 0000 0000" required>
                    </div>
                    <div class="form-group ">
                        <label>Telefono: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="telefono_tarjeta" name="telefono">
                    </div>
                    <div class="form-group ">
                        <label>% Límite de crédito: <span class="text-danger">*</span></label>
                        <input type="number" step="any" class="form-control" id="porcentaje_limite" name="porcentaje_limite" required>
                    </div>
                    <div class="form-group" style="margin-bottom: -25px;">
                        <label>Parentesco: <span class="text-danger">*</span></label>
                        <select class="form-control basic-select-tarjeta" name="parentezco" id="parentezco" required>
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['parentesco'] as $es)
                            <option value="{{$es}}">{{$es}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: -25px;">
                        <label>Estatus: <span class="text-danger">*</span></label>
                        <select class="form-control basic-select-tarjeta" name="estatus" id="estatus_tarjeta" required>
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['estatus_tarjeta'] as $es)
                            <option value="{{$es}}">{{$es}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modal-nuevo-telefono" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title-modal-nueva-tarjeta">Agregar nuevo telefono</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('catalogos/clientes/save-telefono')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_telefono" id="id_telefono">
                <input type="hidden" name="id_cliente" id="id_cliente_telefono" value="{{$data['id']}}">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Tipo: </label>
                        <input type="text" class="form-control" id="tipo" name="tipo">
                    </div>
                    <div class="form-group ">
                        <label>Telefono: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="telefono_cliente" name="telefono" required>
                    </div>
                    <div class="form-group ">
                        <label>Extensión:</label>
                        <input type="text" class="form-control" id="extension" name="extension">
                    </div>
                    <div class="form-group">
                        <label>Localización:</label>
                        <input type="text" class="form-control" id="localizacion" name="localizacion">
                    </div>
                    <div class="form-group ">
                        <label>Horario/Notas:</label>
                        <input type="text" class="form-control" id="horario" name="horario">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modal-nuevo-correo" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title-modal-nueva-correo">Agregar nuevo correo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <form action="{{url('catalogos/clientes/save-correo')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_correo" id="id_correo">
                <input type="hidden" name="id_cliente" id="id_cliente_correo" value="{{$data['id']}}">
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-5">
                            <label>Correo: <span class="text-danger">*</span></label>

                            <input type="text" name="email" id="email" class="form-control" required>
                        </div>

                        <div class="col-7">
                            <label>Sufijo: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        @
                                    </span>
                                </div>
                                <select class="form-control" name="sufijo" id="sufijo" required>
                                    <option selected="selected" value="">-Selecciona una opción-</option>
                                    @foreach($data['sufijos'] as $item)
                                    <option value="{{$item->sufijo}}">{{$item->sufijo}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('configuracion.domicilios.domicilios', ['Paises' => $Paises])

@endsection

@push('plugin-scripts')
{!! Html::script('plugins/table/datatable/datatables.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
{!! Html::script('plugins/flatpickr/flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
{!! Html::script('assets/js/basicui/inputmask.js') !!}
{!! Html::script('assets/js/loader.js') !!}
@endpush

@push('custom-scripts')
<script>
    $(document).ready(function() {


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

        $(".basic-select2").select2({
            tags: true,
        });

        $(".basic-select-tarjeta").select2({
            tags: true,
            dropdownParent: $('#modal-nueva-tarjeta')
        });

        $(".basic-select-correo").select2({
            tags: true,
            dropdownParent: $('#modal-nuevo-correo')
        });

        $("#vigencia_csd").flatpickr({
            mode: "range",
            dateFormat: "Y-m-d",
        });

        $('.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})'
            });
        });

        $('#normaltab a[href="#{{ old("tab") }}"]').tab('show');
        $(".flatpickr").flatpickr();

        getDataCliente();
        getCorreosGrid();
        getTarjetasGrid();
        getTelefonosGrid();
    });

    function getDataCliente() {
        $.ajax({
                url: "{{ url('catalogos/clientes/get-data-cliente')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: $('#id_cliente').val(),
                }
            })
            .done(function(resp) {

                $('#cuenta').val(resp.data['cuenta'])
                $('#razon_social').val(resp.data['razon_social'])
                $('#rfc').val(resp.data['rfc'])
                $('#curp').val(resp.data['curp'])
                $('#domicilio').val(resp.data['domicilio'])
                $('#nombre_completo').val(resp.data['nombre_completo'])
                $('#nombre_corto').val(resp.data['nombre_corto'])
                $('#nombre').val(resp.data['nombre'])
                $('#paterno').val(resp.data['paterno'])
                $('#materno').val(resp.data['materno'])
                $('#hfopa').val(resp.data['hfopa'])
                $('#limite_credito').val(resp.data['limite_credito'])
                $('#limite_credito_hidden').val(resp.data['limite_credito'])
                $('#cruzamiento').val(resp.data['cruzamiento'])
                $('#cliente_intesys').val(resp.data['cliente_intesys'])
                $('#id_sucursal').val(resp.data['id_sucursal']).trigger('change')
                $('#estatus').val(resp.data['estatus']).trigger('change');
                $('#estatus').prop('disabled', true);

                if ('{{auth()->user()->id_perfil}}' == 1) $('#estatus').prop('disabled', false);
                if (resp.data['estatus'] != 'Cancelada') $('#estatus').prop('disabled', false);

                $('#id_categoria').val(resp.data['id_categoria']).trigger('change')
                $('#id_tipo_cliente').val(resp.data['id_tipo_cliente']).trigger('change')
                $('#cruzamiento').val(resp.data['cruzamiento'])
                $('#id_colonia').val(resp.data['id_colonia'])
                $('#id_actividad').val(resp.data['id_actividad']).trigger('change')
                $('#id_ruta_cobro').val(resp.data['id_ruta_cobro']).trigger('change')
                $('#fecha_nacimiento').val(resp.data['fecha_nacimiento'])
                $('#id_tipo_persona').val(resp.data['id_tipo_persona']).trigger('change')
                $('#actividad').val(resp.data['actividad']).trigger('change')
                $('#estado_cuenta').val(resp.data['estado_cuenta']).trigger('change')
                $('#sexo').val(resp.data['sexo']).trigger('change')
                $('#id_tipo_corte').val(resp.data['id_tipo_corte']).trigger('change')
                $('#id_envio_doctos').val(resp.data['id_envio_doctos']).trigger('change')
                $('#referencia_bancaria').val(resp.data['referencia_bancaria'])
                $('#id_estado_civil').val(resp.data['id_estado_civil']).trigger('change')

                $('#fecha_ultima_compra').val(resp.data['fecha_ultima_compra'])
                $('#ultima_compra').val(resp.data['ultima_compra'])
                $('#fecha_ultima_pago').val(resp.data['fecha_ultima_pago'])
                $('#ultimo_pago').val(resp.data['ultimo_pago'])
                $('#veces_cobro').val(resp.data['veces_cobro'])
                $('#compra_mayor').val(resp.data['compra_mayor'])
                $('#fecha_confirmacion').val(resp.data['fecha_confirmacion'])
                $('#fecha_depuracion').val(resp.data['fecha_depuracion'])
                $('#id_corpo').val(resp.data['id_corpo'])
                $('#numero_tarjeta').val(resp.data['numero_tarjeta'])
                $('#folio_solicitud').val(resp.data['folio_solicitud'])

                if (resp.data['saldoscr'] != null) {

                    $('#saldo_depuracion').val(resp.data['saldoscr']['saldo_depuracion'])
                    $('#int_finan_acum').val(resp.data['saldoscr']['int_finan_acum'])
                    $('#int_mora_acum').val(resp.data['saldoscr']['int_mora_acum'])
                    $('#gastos_acum').val(resp.data['saldoscr']['gastos_acum'])
                    $('#iva_int_acum').val(resp.data['saldoscr']['iva_int_acum'])
                    $('#iva_gastos_acum').val(resp.data['saldoscr']['iva_gastos_acum'])
                    $('#intereses_devengados').val(resp.data['saldoscr']['intereses_devengados'])

                    $('#fecha_ultimo_corte').val(resp.data['saldoscr']['fecha_ultimo_corte'])
                    $('#saldo').val(resp.data['saldoscr']['saldo'])
                    $('#pago_minimo').val(resp.data['saldoscr']['pago_minimo'])
                    $('#pago_no_genera_interes').val(resp.data['saldoscr']['pago_no_genera_interes'])
                    $('#capital_mes').val(resp.data['saldoscr']['capital_mes'])
                    $('#interes_finan_mes').val(resp.data['saldoscr']['interes_finan_mes'])
                    $('#interes_mora_mes').val(resp.data['saldoscr']['interes_mora_mes'])
                    $('#gastos_cob_mes').val(resp.data['saldoscr']['gastos_cob_mes'])
                    $('#iva_mes').val(resp.data['saldoscr']['iva_mes'])
                    $('#cargos_capital').val(resp.data['saldoscr']['cargos_capital'])
                    $('#cargos_int_finan').val(resp.data['saldoscr']['cargos_int_finan'])
                    $('#cargos_int_mora').val(resp.data['saldoscr']['cargos_int_mora'])
                    $('#cargos_iva').val(resp.data['saldoscr']['cargos_iva'])
                    $('#abonos_capital').val(resp.data['saldoscr']['abonos_capital'])
                    $('#abonos_int_finan').val(resp.data['saldoscr']['abonos_int_finan'])
                    $('#abonos_int_mora').val(resp.data['saldoscr']['abonos_int_mora'])
                    $('#abonos_iva').val(resp.data['saldoscr']['abonos_iva'])
                }

                getInfoDomicilio(resp.data['id_colonia'])

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");

            });
    }


    function getInfoDomicilio(Colonia_id) {
        $.ajax({
                url: '{{ url("configuracion/empresas/get_domicilio" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: Colonia_id,
                },
            })
            .done(function(resp) {
                $('#coloniaV').val(resp.data.colonia['descripcion'])
                $('#paisV').val(resp.data.pais['descripcion'])
                $('#estadoV').val(resp.data.estado['descripcion'])
                $('#municipioV').val(resp.data.municipio['descripcion'])
                $('#poblacionV').val(resp.data.poblacion['descripcion'])
                $('#cpV').val(resp.data.colonia['codigo_postal'])

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    $('#btn_add_domicilios').click(function() {
        $('#crearDomicilio').modal('show')
    })

    $Colonia.addEventListener('change', async (event) => {
        const $coloniaValue = $Colonia.options[$Colonia.selectedIndex].value;
        $btnIdentificarColonia.disabled = false;
        $formColoniaDomicilio.addEventListener('submit', async (event) => {
            event.preventDefault();
            // console.log($coloniaValue);
            fetchRequest('{{url("/domicilios/colonias/identificador")}}', {
                    id: $coloniaValue
                })
                .then(response => {
                    ({
                        status,
                        message,
                        payload
                    } = response);
                    ({
                        colonia,
                        estado,
                        municipio,
                        pais,
                        poblacion
                    } = payload);
                    if (status == 200) {

                        $('#crearDomicilio').modal('hide')
                        $('#paisV').val(pais.descripcion)
                        $('#estadoV').val(estado.descripcion)
                        $('#municipioV').val(municipio.descripcion)
                        $('#poblacionV').val(poblacion.descripcion)
                        $('#id_colonia').val(colonia.id)
                        $('#coloniaV').val(colonia.descripcion)
                        $('#cpV').val(colonia.codigo_postal)
                    }
                    if (status == 404) {

                        $('#paisV').val('')
                        $('#estadoV').val('')
                        $('#municipioV').val('')
                        $('#poblacionV').val('')
                        $('#coloniaV').val('')
                        $('#cpV').val('')
                        $('#id_colonia').val('')

                    }
                })
        })
    })

    function getTarjetasGrid() {
        $('#list-tarjetas').dataTable().fnDestroy();

        var table = $('#list-tarjetas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-tarjetas')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_tarjeta').val(),
                },
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><button class="btn btn-sm p-0 btn-link text-primary font-20 btn-with-spin" title="Editar tarjeta" onclick="editarTarjeta(' + data + ')"><i class="las la-edit"></i></button><a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar tarjeta" href="{{url("catalogos/clientes/delete-tarjeta")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "titular"
                },
                {
                    data: "numero_tarjeta"
                },
                {
                    data: "porcentaje_limite"
                },
                {
                    data: "telefono"
                },
                {
                    data: "parentezco"
                },
                {
                    data: "estatus",
                    render: function(data) {
                        var estatus = '<span class="badge badge-success">' + data + '</span>';

                        if (data != 'Activa')
                            estatus = '<span class="badge badge-warning">' + data + '</span>';

                        return estatus;
                    }
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevaTarjeta() {
        $('#title-modal-nueva-tarjeta').text('Agregar nueva tarjeta')
        $('#modal-nueva-tarjeta').modal('show');
    }

    function editarTarjeta(id) {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-tarjeta")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_tarjeta').val(resp.data['id']);
                $('#titular').val(resp.data['titular']);
                $('#telefono_tarjeta').val(resp.data['telefono']);
                $('#numero_tarjeta').val(resp.data['numero_tarjeta']);
                $('#porcentaje_limite').val(resp.data['porcentaje_limite']);
                $('#estatus_tarjeta').val(resp.data['estatus']).trigger('change');
                $('#parentezco').val(resp.data['parentezco']).trigger('change');
                $('#title-modal-nueva-tarjeta').text('Editar tarjeta')
                $('#modal-nueva-tarjeta').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function getTelefonosGrid() {
        $('#list-telefonos').dataTable().fnDestroy();

        var table = $('#list-telefonos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-telefonos')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_telefono').val(),
                },
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><button class="btn btn-sm p-0 btn-link text-primary font-20 btn-with-spin" title="Editar telefono" onclick="editarTelefono(' + data + ')"><i class="las la-edit"></i></button><a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar telefono" href="{{url("catalogos/clientes/delete-telefono")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "tipo"
                },
                {
                    data: "telefono"
                },
                {
                    data: "extension"
                },
                {
                    data: "localizacion"
                },
                {
                    data: "horario"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevoTelefono() {
        $('#title-modal-nuevo-telefono').text('Agregar nuevo telefono')
        $('#modal-nuevo-telefono').modal('show');
    }

    function editarTelefono(id) {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-telefono")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_telefono').val(resp.data['id']);
                $('#tipo').val(resp.data['tipo']);
                $('#telefono_cliente').val(resp.data['telefono']);
                $('#extension').val(resp.data['extension']);
                $('#localizacion').val(resp.data['localizacion']);
                $('#horario').val(resp.data['horario']);
                $('#title-modal-nuevo-telefono').text('Editar telefono')
                $('#modal-nuevo-telefono').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function getCorreosGrid() {
        $('#list-correos').dataTable().fnDestroy();

        var table = $('#list-correos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-correos')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_correo').val(),
                },
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><button class="btn btn-sm p-0 btn-link text-primary font-20 btn-with-spin" title="Editar correo" onclick="editarCorreo(' + data + ')"><i class="las la-edit"></i></button><a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar correo" href="{{url("catalogos/clientes/delete-correo")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "id"
                },
                {
                    data: "email"
                },
                {
                    data: "created_at"
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevoCorreo() {
        $('#title-modal-nuevo-correo').text('Agregar nuevo correo')
        $('#modal-nuevo-correo').modal('show');
    }

    function editarCorreo(id) {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-correo")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_correo').val(resp.data['id']);

                if (resp.data['email'] != '') {
                    var correo = resp.data['email'].split('@');
                    $('#email').val(correo[0]);
                    $('#sufijo').find("option:contains('" + correo[1] + "')").prop('selected', true);
                }
                $('#title-modal-nuevo-correo').text('Editar correo')
                $('#modal-nuevo-correo').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
@endpush