@extends('layout.master', [
'activePage' => $activePage,
'categoria' => $categoria,
'menuParent' => $menuParent,
'titlePage' => $titlePage
])



@push('plugin-styles')
{!! 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') !!}
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.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> @if($data['id'] == '')ALTA @else EDICIÓN @endif DE CLIENTES</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>


    </header>
</div>
<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <div class="row">
            <div class="col-lg-2">
                <label class="font-weight-bold">Cuenta: <span class="text-danger">*</span></label>
                <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" id="cuenta_cliente" onkeypress="javascript:if (event.key === 'Enter') getClientesGrid() ">
            </div>
            <div class="col-lg-4">
                <label class="font-weight-bold">Nombre: <span class="text-danger">*</span></label>
                <input type="text" class="form-control form-control-sm bs-popover input-codigo" id="cliente_search" data-container="body" data-trigger="hover" data-content="Teclea el nombre del cliente a buscar.">
                <input type="hidden" class="form-control" id="id_cliente_hidden">
            </div>
            <div class="col-lg-2">
                <button class="btn btn-primary mt-4" type="button" onclick="getClientesGrid()">Buscar</button>
            </div>
            <div class="col-lg-4 text-right">
                <a class="btn btn-primary mt-4" title="Agregar cliente" href="{{url('catalogos/clientes/agregar-cliente')}}">Nuevo cliente</a>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-body">
                <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="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="notas-tab" data-toggle="tab" href="#tab-notas" role="tab" aria-controls="tab-notas" aria-selected="false">{{__('Notas')}}</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="cuentas-bancarias-tab" data-toggle="tab" href="#tab-cuentas-bancarias" role="tab" aria-controls="tab-cuentas-bancarias" aria-selected="false">{{__('Cuentas bancarias')}}</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" id="destinos-tab" data-toggle="tab" href="#tab-destinos" role="tab" aria-controls="tab-destinos" aria-selected="false">{{__('Destinos')}}</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" style="margin-bottom: -25px;">
                                        <div class="col-lg-2">
                                            <label class="font-weight-bold">Cuenta: <span class="text-danger">*</span></label>
                                            <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="codigo" id="codigo" value="{{$data['ultimaCuenta']}}" required>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="font-weight-bold">Nombre completo: <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" name="nombre" id="nombre" maxlength="255" required>
                                        </div>
                                        <div class="col-lg-2">
                                            <label class="font-weight-bold">Cuenta padre: </label>
                                            <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="id_cliente_papa" id="id_cliente_papa">
                                        </div>
                                        <div class="col-lg-2">
                                            <label class="font-weight-bold">Número personal: </label>
                                            <input type="text" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="numero_personal" id="numero_personal">
                                        </div>
                                        <div class="col-lg-2">
                                            <label class="font-weight-bold">Estatus: <span class="text-danger">*</span></label>
                                            <select class="form-control basic-select2" name="estatus" id="estatus" required @if(auth()->user()->id_perfil != 1) disabled @endif>
                                                <option value="Activa" selected>Activa</option>
                                                @foreach($data['estatus'] as $es)
                                                <option value="{{$es}}">{{$es}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>
                                    <div class="form-group row" style="margin-bottom: -25px;">
                                        <div class="col-lg-3">
                                            <label class="font-weight-bold">RFC: <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" name="rfc" id="rfc" maxlength="13" minlength="12" required>
                                        </div>
                                        <div class="col-lg-3">
                                            <label class="font-weight-bold">CURP: </label>
                                            <input type="text" class="form-control form-control-sm" name="curp" id="curp">
                                        </div>
                                        <div class="col-lg-2">
                                            <label class="font-weight-bold">Límite crédito: <span class="text-danger">*</span></label>
                                            <input type="number" onkeydown="validateNumberWithDot(event)" class="form-control form-control-sm" name="limite_credito" id="limite_credito" required>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="font-weight-bold">Regimen fiscal: <span class="text-danger">*</span></label>
                                            <select class="form-control basic-select2" name="regimen_fiscal" id="regimen_fiscal" required>
                                                <option selected="selected" value="">-Selecciona una opción-</option>
                                                @foreach($data['regimen_fiscal'] as $item)
                                                <option value="{{$item->c_RegimenFiscal}}">{{$item->Descripcion}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </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-6">
                                        <label class="font-weight-bold">Domicilio: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" name="domicilio" id="domicilio" maxlength="255" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Cruzamiento: </label>
                                        <input type="text" class="form-control form-control-sm" name="cruzamiento_domicilio" id="cruzamiento_domicilio">
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-primary mt-4 btn_add_domicilios" type="button">Domicilio</button>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Colonia:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="coloniaV" required>
                                        <input type="hidden" class="form-control form-control-sm" name="id_colonia" id="id_colonia" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">País:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="paisV" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Estado:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="estadoV" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Municipio:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="municipioV" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Poblacion:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="poblacionV" required>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">C.P:<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm btn_add_domicilios" id="cpV" required>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="font-weight-bold">OTROS DATOS</h6>
                                    </div>
                                </div>
                                <div class="form-group row" style="margin-bottom: -25px;">
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Tipo de cliente: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_tipo" id="id_tipo" required>
                                            <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-3">
                                        <label class="font-weight-bold">Ruta: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_ruta" id="id_ruta" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['rutas'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Ruta cobro: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_rucob" id="id_rucob" required>
                                            <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-3">
                                        <label class="font-weight-bold">Categoria: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="categoria" id="categoria" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['categoria'] as $es)
                                            <option value="{{$es}}">{{$es}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row" style="margin-bottom: -25px;">
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Area: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_area" id="id_area" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['areas'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Zona: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_zona" id="id_zona" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['zonas'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Agente: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_agente" id="id_agente" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['agentes'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->nombre}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Sub agente: </label>
                                        <select class="form-control basic-select2" name="id_sub_agente" id="id_sub_agente">
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['agentes'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->nombre}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row" style="margin-bottom: -25px;">
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Moneda: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="id_moneda" id="id_moneda" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['monedas'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Addenda: </label>
                                        <select class="form-control basic-select2" name="id_addenda" id="id_addenda">
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['addendas'] as $rt)
                                            <option value="{{$rt->id}}">{{$rt->DescripcionAddenda}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Plazo: <span class="text-danger">*</span></label>
                                        <select class="form-control basic-select2" name="plazo" id="plazo" required>
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['plazos'] as $rt)
                                            <option value="{{$rt->plazo}}">{{$rt->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="font-weight-bold">Forma de pago: </label>
                                        <select class="form-control basic-select2" name="id_forma_pago" id="id_forma_pago">
                                            <option selected="selected" value="">-Selecciona una opción-</option>
                                            @foreach($data['formas_pago'] as $item)
                                            <option value="{{$item->forma_pago}}">{{$item->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">

                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Cuenta externa: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="cliente_externo" id="cliente_externo">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Cuenta contable: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="cuenta_contable" id="cuenta_contable">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">S Cuenta: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="scuenta" id="scuenta">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">SS Cuenta:</label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="sscuenta" id="sscuenta">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">SSS Cuenta: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="ssscuenta" id="ssscuenta">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">SSSS Cuenta: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="sssscuenta" id="sssscuenta">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Web usuario: </label>
                                        <input type="text" class="form-control form-control-sm" name="web_usuario" id="web_usuario">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Web clave: </label>
                                        <input type="text" class="form-control form-control-sm" name="web_clave" id="web_clave">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Descuento: </label>
                                        <input type="number" step="any" class="form-control form-control-sm" name="descuento" id="descuento">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Número de cuenta pago: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="numero_cta_pago" id="numero_cta_pago">
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Tax ID: </label>
                                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" name="tax_id" id="tax_id">
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center mt-3">
                                    <button type="submit" class="btn btn-primary" value="Guardar">
                                        <i class="las la-cloud-upload-alt mr-2" style="font-size: 20px !important"></i> Guardar
                                    </button>
                                </div>

                            </form>
                        </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 bs-popover" @if($data['id']=='' ) data-container="body" data-trigger="hover" data-content="Primero debes guardar la información general del cliente" disabled @endif 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>{{__('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 bs-popover" @if($data['id']=='' ) data-container="body" data-trigger="hover" data-content="Primero debes guardar la información general del cliente" disabled @endif 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 class="font-weight-bold">Fecha ultima compra:</label>
                                        <input id="fecha_ultima_compra" class="form-control form-control-sm input-date" type="date" disabled>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Importe ultima compra:</label>
                                        <input id="ultima_compra" class="form-control form-control-sm" type="number" onkeydown="validateNumberWithDot(event)" readonly>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Fecha ultimo pago:</label>
                                        <input id="fecha_ultimo_pago" class="form-control form-control-sm input-date" type="date" disabled>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Importe ultimo pago:</label>
                                        <input id="ultimo_pago" class="form-control form-control-sm" type="number" onkeydown="validateNumberWithDot(event)" readonly>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Compra mayor:</label>
                                        <input id="compra_mayor" class="form-control form-control-sm" type="number" onkeydown="validateNumberWithDot(event)" readonly>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Fecha último movto:</label>
                                        <input id="fecha_ultimo_movto" class="form-control form-control-sm input-date" type="date" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Días promedio de pago:</label>
                                        <input id="dias_promedio_pago" class="form-control form-control-sm " type="text" disabled>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Modificado el:</label>
                                        <input id="updated_at" class="form-control form-control-sm input-date" type="date" disabled>
                                    </div>
                                    <div class="col-lg-2">
                                        <label class="font-weight-bold">Folio autorización:</label>
                                        <input id="folio_autorizacion" class="form-control form-control-sm " type="text" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-notas" role="tabpanel" aria-labelledby="telefonos-tab">
                            <form action="{{url('catalogos/clientes/save-nota')}}" method="POST" id="formulario" class="form-with-spin">
                                {{ csrf_field() }}
                                <input type="hidden" name="id_nota" id="id_nota">
                                <input type="hidden" name="id_cliente" id="id_cliente_nota" value="{{$data['id']}}">
                                <div class="row layout-top-spacing justify-content-end">
                                    <div class="col-8">
                                        <div class="form-group ">
                                            <label class="font-weight-bold">Nota: <span class="text-danger">*</span></label>
                                            <input type="text" name="descripcion" id="descripcion" class="form-control form-control-sm" required>
                                        </div>
                                    </div>
                                    <div class="col-4 mt-4">
                                        <div class="form-group ">
                                            <button type="submit" class="btn btn-primary bs-popover" @if($data['id']=='' ) data-container="body" data-trigger="hover" data-content="Primero debes guardar la información general del cliente" disabled @endif>Agregar</button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="row date-table-container layout-top-spacing">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="list-notas">
                                        <thead>
                                            <tr>
                                                <th class="no-content"></th>
                                                <th>{{__('Nota')}}</th>
                                                <th>{{__('Fecha de creación')}}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-cuentas-bancarias" role="tabpanel" aria-labelledby="cuentas-bancarias-tab">
                            <div class="row layout-top-spacing justify-content-end">
                                <div class="col-3 text-right">
                                    <button class="btn btn-primary bs-popover" @if($data['id']=='' ) data-container="body" data-trigger="hover" data-content="Primero debes guardar la información general del cliente" disabled @endif onclick="nuevaCuentaBancaria()">Nueva cuenta bancaria</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-cuentas-bancarias">
                                        <thead>
                                            <tr>
                                                <th class="no-content"></th>
                                                <th>{{__('ID')}}</th>
                                                <th>{{__('Banco')}}</th>
                                                <th>{{__('Cuenta bancaria')}}</th>
                                                <th>{{__('Forma de pago')}}</th>
                                                <th>{{__('Moneda')}}</th>
                                                <th>{{__('Fecha de creación')}}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-destinos" role="tabpanel" aria-labelledby="destinos-tab">
                            <div class="row layout-top-spacing justify-content-end">
                                <div class="col-3 text-right">
                                    <button class="btn btn-primary bs-popover" @if($data['id']=='' ) data-container="body" data-trigger="hover" data-content="Primero debes guardar la información general del cliente" disabled @endif onclick="nuevoDestino()">Nuevo destino</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-destinos">
                                        <thead>
                                            <tr>
                                                <th class="no-content"></th>
                                                <th>{{__('ID')}}</th>
                                                <th>{{__('Destino')}}</th>
                                                <th>{{__('Nombre')}}</th>
                                                <th>{{__('Domicilio')}}</th>
                                                <th>{{__('Colonia')}}</th>
                                                <th>{{__('Telefono')}}</th>
                                                <th>{{__('Tipo')}}</th>
                                                <th>{{__('GLN')}}</th>
                                                <th>{{__('Email')}}</th>
                                                <th>{{__('Contacto')}}</th>
                                                <th>{{__('Usuario')}}</th>
                                                <th>{{__('Clave')}}</th>
                                                <th>{{__('Descuento')}}</th>
                                                <th>{{__('Factor')}}</th>
                                                <th>{{__('Fecha de creación')}}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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">Alta 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 class="font-weight-bold">Tipo: </label>
                        <input type="text" class="form-control form-control-sm" id="tipo" name="tipo">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Telefono: <span class="text-danger">*</span></label>
                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" id="telefono_cliente" name="telefono" required>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Extensión:</label>
                        <input type="number" onkeydown="validateNumber(event)" class="form-control form-control-sm" id="extension" name="extension">
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold">Localización:</label>
                        <input type="text" class="form-control form-control-sm" id="localizacion" name="localizacion">
                    </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 class="font-weight-bold">Correo: <span class="text-danger">*</span></label>

                            <input type="text" name="email" id="email" class="form-control form-control-sm" required oninput="validarCaracter(event)">
                        </div>

                        <div class="col-7">
                            <label class="font-weight-bold">Sufijo: <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="font-weight-bold" class="input-group-text">
                                        @
                                    </span>
                                </div>
                                <select class="form-control form-control-sm" 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>

<div class="modal fade draggable" id="modal-nueva-cuenta-bancaria" 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-cuenta-bancaria">Agregar cuenta bancaria</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-cuenta-bancaria')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_cuenta_bancaria" id="id_cuenta_bancaria">
                <input type="hidden" name="id_cliente" id="id_cliente_cuenta_bancaria" value="{{$data['id']}}">
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="font-weight-bold">Banco: <span class="text-danger">*</span></label>
                        <select class="form-control form-control-sm" name="id_banco" id="id_banco" required>
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['bancos'] as $item)
                            <option value="{{$item->id}}">{{$item->descripcion_corta}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Cuenta bancaria: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm" id="cuenta_bancaria" name="cuenta_bancaria" required>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Forma de pago: <span class="text-danger">*</span></label>
                        <select class="form-control form-control-sm" name="c_formapago" id="id_c_formapago" required>
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['formaspago'] as $item)
                            <option value="{{$item->forma_pago}}">{{$item->descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Moneda: <span class="text-danger">*</span></label>
                        <select class="form-control form-control-sm" name="id_moneda" id="id_moneda_cuenta" required>
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['monedas'] as $item)
                            <option value="{{$item->id}}">{{$item->descripcion}}</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-destino" 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-nuevo-destino">Agregar destino</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-destino')}}" method="POST" id="formulario" class="form-with-spin">
                {{ csrf_field() }}
                <input type="hidden" name="id_destino" id="id_destino">
                <input type="hidden" name="id_cuenta" id="id_cliente_destino" value="{{$data['id']}}">
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="font-weight-bold">Destino: <span class="text-danger">*</span></label>
                        <input type="number" class="form-control form-control-sm" id="destino" name="destino" required>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Nombre:</label>
                        <input type="text" class="form-control form-control-sm" id="nombre_destino" name="nombre">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Domicilio:</label>
                        <input type="text" class="form-control form-control-sm" id="domicilio_destino" name="domicilio">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Colonia: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm bs-popover input-codigo" id="colonia_search" data-container="body" data-trigger="hover" data-content="Teclea el nombre de la colonia a buscar.">
                        <input type="hidden" class="form-control" id="id_colonia_destino" name="id_colonia">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Telefono: <span class="text-danger">*</span></label>
                        <input type="number" class="form-control form-control-sm" id="telefono_destino" name="telefono" required>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Tipo destino: </label>
                        <select class="form-control form-control-sm select2" name="tipo_destino" id="tipo_destino">
                            <option selected="selected" value="">-Selecciona una opción-</option>
                            @foreach($data['tipos_destinos'] as $item)
                            <option value="{{$item}}">{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">GLN: </label>
                        <input type="number" class="form-control form-control-sm" id="GLN" name="GLN">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Email: </label>
                        <input type="email" class="form-control form-control-sm" id="email_destino" name="email">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Contacto: </label>
                        <input type="text" class="form-control form-control-sm" id="contacto" name="contacto">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Usuario: </label>
                        <input type="text" class="form-control form-control-sm" id="usuario" name="usuario">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Clave: </label>
                        <input type="text" class="form-control form-control-sm" id="clave" name="clave">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Descuento: </label>
                        <input type="number" step="any" class="form-control form-control-sm" id="descuento_destino" name="descuento">
                    </div>
                    <div class="form-group ">
                        <label class="font-weight-bold">Factor flete precio: </label>
                        <input type="number" step="any" class="form-control form-control-sm" id="factor_flete_precio" name="factor_flete_precio">
                    </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>

<style>
    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 1000;
    }

    .modal-dialog {
        position: relative;
    }

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

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2147483647 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

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

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        height: 2rem !important;
        text
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 0.3rem 0.4rem !important;
    }

    .input-codigo {
        padding-bottom: 0 !important;
    }

    .input-date {
        font-size: 12px !important;
        padding: 0 0.3rem !important;
    }
</style>

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


@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('plugins/jquery-ui/jquery-ui.min.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",
        });


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

        if ('{{$data["id"]}}' != '') {
            getDataCliente()
            getCorreosGrid();
            getTelefonosGrid();
            getNotasCliente();
            getCuentasBancariasGrid();
            getDestinosGrid();
        }
        document.querySelectorAll('.btn_add_domicilios').forEach(input => {
            input.addEventListener('keydown', event => event.preventDefault());
            input.addEventListener('paste', event => event.preventDefault());
        });
        $('#cliente_search').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{url('catalogos/get_clientes/filtro')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        $('#id_cliente_hidden').val('')
                        response(data)
                    }
                })
            },
            select: function(event, ui) {

                $('#id_cliente_hidden').val(ui.item.id)
                $('#cliente_search').val(ui.item.label)
                window.location.replace('{{url("catalogos/clientes/editar-cliente")}}/' + ui.item.id)
                return false;
            },
            selectFirst: true,
            minLength: 3
        });



        $('#colonia_search').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{url('catalogos/get_colonia/filtro')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        $('#id_colonia_destino').val('')
                        response(data)
                    }
                })
            },
            select: function(event, ui) {
                $('#id_colonia_destino').val(ui.item.id)
                $('#colonia_search').val(ui.item.label)
                return false;
            },
            selectFirst: true,
            minLength: 5
        });



    });



    function getClientesGrid() {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-clientes" )}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    cuenta: $('#cuenta_cliente').val(),
                }
            })
            .done(function(resp) {
                if (resp.data != '0') {
                    window.location.replace('{{url("catalogos/clientes/editar-cliente")}}/' + resp.data)
                } else {
                    Swal.fire({
                        title: 'La cuenta no existe',
                        type: 'error',
                    })
                    setTimeout(function() {
                        window.location.replace('{{url("catalogos/clientes")}}')
                    }, 3000)
                }

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

            })
    }

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

                $('#codigo').val(resp.data['codigo'])
                $('#id_cliente_papa').val(resp.data['id_cliente_papa'])
                $('#cliente_externo').val(resp.data['cliente_externo'])
                $('#numero_personal').val(resp.data['numero_personal'])
                $('#rfc').val(resp.data['rfc'])
                $('#curp').val(resp.data['curp'])
                $('#domicilio').val(resp.data['domicilio'])
                $('#nombre').val(resp.data['nombre'])
                $('#cliente_search').val(resp.data['nombre'])
                $('#cuenta_cliente').val(resp.data['codigo'])
                $('#limite_credito').val(resp.data['limite_credito'])
                $('#cruzamiento_domicilio').val(resp.data['cruzamiento_domicilio'])
                $('#id_forma_pago').val(resp.data['id_forma_pago']).trigger('change')
                $('#regimen_fiscal').val(resp.data['regimen_fiscal']).trigger('change')
                $('#categoria').val(resp.data['categoria']).trigger('change')
                $('#estatus').val(resp.data['estatus']).trigger('change')
                $('#id_tipo').val(resp.data['id_tipo']).trigger('change')
                $('#id_colonia').val(resp.data['id_colonia'])
                $('#id_ruta').val(resp.data['id_ruta']).trigger('change');
                $('#id_rucob').val(resp.data['id_rucob']).trigger('change');
                $('#id_area').val(resp.data['id_area']).trigger('change');
                $('#id_zona').val(resp.data['id_zona']).trigger('change');
                $('#id_agente').val(resp.data['id_agente']).trigger('change');
                $('#id_sub_agente').val(resp.data['id_sub_agente']).trigger('change');
                $('#fecha_nacimiento').val(resp.data['fecha_nacimiento'])
                $('#lista_precios').val(resp.data['lista_precios']);
                $('#id_moneda').val(resp.data['id_moneda']).trigger('change');
                $('#id_addenda').val(resp.data['id_addenda']).trigger('change');
                $('#plazo').val(resp.data['plazo']).trigger('change');
                $('#id_tipo_corte').val(resp.data['id_tipo_corte']).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'])
                $('#compra_mayor').val(resp.data['compra_mayor'])
                $('#cuenta_contable').val(resp.data['cuenta_contable'])
                $('#scuenta').val(resp.data['scuenta'])
                $('#sscuenta').val(resp.data['sscuenta'])
                $('#ssscuenta').val(resp.data['ssscuenta'])
                $('#sssscuenta').val(resp.data['sssscuenta'])
                $('#web_usuario').val(resp.data['web_usuario'])
                $('#web_clave').val(resp.data['web_clave'])
                $('#tax_id').val(resp.data['tax_id'])
                $('#numero_cta_pago').val(resp.data['numero_cta_pago'])
                $('#descuento').val(resp.data['descuento'])
                $('#folio_autorizacion').val(resp.data['folio_autorizacion'])
                $('#dias_promedio_pago').val(resp.data['dias_promedio_pago'])
                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 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: "created_at",
                    render: function(data, type, full, meta) {
                        var new_created_at = new Date(data);

                        var day = new_created_at.getDate()
                        if (day < 10) {
                            day = '0' + day;
                        }

                        var month = new_created_at.getMonth() + 1;
                        if (month < 10) {
                            month = `0${month}`;
                        }

                        return day + '-' + month + '-' + new_created_at.getFullYear() + ' ' + new_created_at.getHours() + ':' + new_created_at.getMinutes();
                    }
                },
            ],
            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']);
                $('#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",
                    render: function(data, type, full, meta) {
                        var new_created_at = new Date(data);

                        var day = new_created_at.getDate()
                        if (day < 10) {
                            day = '0' + day;
                        }

                        var month = new_created_at.getMonth() + 1;
                        if (month < 10) {
                            month = `0${month}`;
                        }

                        return day + '-' + month + '-' + new_created_at.getFullYear() + ' ' + new_created_at.getHours() + ':' + new_created_at.getMinutes();
                    }
                },
            ],
            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']);
                $('#correo').val(resp.data['correo']);
                $('#title-modal-nuevo-correo').text('Editar correo')
                $('#modal-nuevo-correo').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function getNotasCliente() {

        $('#descripcion').val('');
        $('#modal-notas').modal('show')

        $('#list-notas').dataTable().fnDestroy();
        var table = $('#list-notas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-notas')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_nota').val(),
                }
            },
            columns: [{
                    data: "id",
                    render: function(data, type, full, meta) {
                        return '<div><a class="btn btn-sm p-0 btn-link text-danger font-20 btn-with-spin" title="Eliminar correo" href="{{url("catalogos/clientes/delete-nota")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "descripcion"
                },
                {

                    data: "created_at",
                    render: function(data, type, full, meta) {
                        var new_created_at = new Date(data);

                        var day = new_created_at.getDate()
                        if (day < 10) {
                            day = '0' + day;
                        }

                        var month = new_created_at.getMonth() + 1;
                        if (month < 10) {
                            month = `0${month}`;
                        }

                        return day + '-' + month + '-' + new_created_at.getFullYear() + ' ' + new_created_at.getHours() + ':' + new_created_at.getMinutes();
                    }
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function validarCaracter(event) {
        const caracterEsperado = '@';
        event.target.value = event.target.value.slice(-1) !== caracterEsperado ? event.target.value : event.target.value.slice(0, -1);
    }

    function getCuentasBancariasGrid() {
        $('#list-cuentas-bancarias').dataTable().fnDestroy();

        var table = $('#list-cuentas-bancarias').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-cuentas-bancarias')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_cuenta_bancaria').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 cuenta bancaria" onclick="editarCuentaBancaria(' + 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 cuenta bancaria" href="{{url("catalogos/clientes/delete-cuenta-bancaria")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "id"
                },

                {
                    data: "banco",
                    render: function(data) {
                        return data == null ? 'Sin banco' : data['descripcion_corta'];
                    }
                },
                {
                    data: "cuenta_bancaria"
                },
                {
                    data: "formapago.descripcion"
                },
                {
                    data: "moneda.descripcion"
                },
                {

                    data: "created_at",
                    render: function(data, type, full, meta) {
                        var new_created_at = new Date(data);

                        var day = new_created_at.getDate()
                        if (day < 10) {
                            day = '0' + day;
                        }

                        var month = new_created_at.getMonth() + 1;
                        if (month < 10) {
                            month = `0${month}`;
                        }

                        return day + '-' + month + '-' + new_created_at.getFullYear() + ' ' + new_created_at.getHours() + ':' + new_created_at.getMinutes();
                    }
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevaCuentaBancaria() {
        $('#title-modal-nueva-cuenta-bancaria').text('Agregar nueva cuenta bancaria')
        $('#modal-nueva-cuenta-bancaria').modal('show');
    }

    function editarCuentaBancaria(id) {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-cuenta-bancaria")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_cuenta_bancaria').val(resp.data['id']);
                $('#cuenta_bancaria').val(resp.data['cuenta_bancaria']);
                $('#id_banco').val(resp.data['id_banco']).trigger('change');
                $('#id_c_formapago').val(resp.data['c_formapago']).trigger('change');
                $('#id_moneda_cuenta').val(resp.data['id_moneda']).trigger('change');
                $('#title-modal-nueva-cuenta-bancaria').text('Editar cuenta bancaria')
                $('#modal-nueva-cuenta-bancaria').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function getDestinosGrid() {
        $('#list-destinos').dataTable().fnDestroy();

        var table = $('#list-destinos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            language: {
                url: "{{asset('assets/material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{url('catalogos/clientes/get-destinos')}}",
                type: "POST",
                data: {
                    id_cliente: $('#id_cliente_destino').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 destino" onclick="editarDestino(' + 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 destino" href="{{url("catalogos/clientes/delete-destino")}}/' + data + '"><i class="las la-trash"></a></div>'
                    }
                },
                {
                    data: "id"
                },

                {
                    data: "destino"
                },
                {
                    data: "nombre"
                },
                {
                    data: "domicilio"
                },
                {
                    data: "colonia.descripcion"
                },
                {
                    data: "telefono"
                },
                {
                    data: "tipo_destino"
                },
                {
                    data: "GLN"
                },
                {
                    data: "email"
                },
                {
                    data: "contacto"
                },
                {
                    data: "usuario"
                },
                {
                    data: "clave"
                },
                {
                    data: "descuento"
                },
                {
                    data: "factor_flete_precio"
                },
                {

                    data: "created_at",
                    render: function(data, type, full, meta) {
                        var new_created_at = new Date(data);

                        var day = new_created_at.getDate()
                        if (day < 10) {
                            day = '0' + day;
                        }

                        var month = new_created_at.getMonth() + 1;
                        if (month < 10) {
                            month = `0${month}`;
                        }

                        return day + '-' + month + '-' + new_created_at.getFullYear() + ' ' + new_created_at.getHours() + ':' + new_created_at.getMinutes();
                    }
                },
            ],
            order: [
                [1, "desc"]
            ],


        });
    }

    function nuevoDestino() {
        $('#title-modal-nuevo-destino').text('Agregar nuevo destino')
        $('#modal-nuevo-destino').modal('show');
        $('#myModal').on('shown.bs.modal', function() {
            $('#myInput').autocomplete({
                source: availableTags
            });
        });
    }

    function editarDestino(id) {
        $.ajax({
                url: '{{ url("catalogos/clientes/get-destino")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#id_destino').val(resp.data['id']);
                $('#destino').val(resp.data['destino']);
                $('#domicilio_destino').val(resp.data['domicilio']);
                $('#nombre_destino').val(resp.data['nombre']);
                $('#id_colonia').val(resp.data['id_colonia']).trigger('change');
                $('#telefono_destino').val(resp.data['telefono']);
                $('#tipo_destino').val(resp.data['tipo_destino']).trigger('change');
                $('#GLN').val(resp.data['GLN']);
                $('#email_destino').val(resp.data['email']);
                $('#contacto').val(resp.data['contacto']);
                $('#usuario').val(resp.data['usuario']);
                $('#clave').val(resp.data['clave']);
                $('#descuento_destino').val(resp.data['descuento']);
                $('#factor_flete_precio').val(resp.data['factor_flete_precio']);
                $('#id_colonia_destino').val(resp.data['id_colonia']);
                $('#colonia_search').val(resp.data['colonia']['descripcion'] + ' CP:' + resp.data['colonia']['codigo_postal']);


                $('#title-modal-nuevo-destino').text('Editar destino')
                $('#modal-nuevo-destino').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
@endpush