@extends('layouts.app', ['activePage' => 'clientes', 'menuParent' => 'catalogos', 'titlePage' => __('Clientes')])

@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <div class="row">
      <div class="col-lg-8">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6 mb-4">
          <div class="flex items-start justify-between mb-2">
            <div>
              <h4 class="text-lg uppercase font-semibold text-slate-900">Clientes</h4>
              <p class="text-sm text-slate-500">Administra tus clientes para facturación, con control fiscal, contacto y datos de pago.</p>
            </div>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3 mb-4">
            <div class="flex items-center gap-3 mb-4">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">👥</span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900">Filtros y acciones</h6>
                <p class="text-sm text-slate-500">Filtra por estatus y ejecuta acciones rápidas sobre el catálogo.</p>
              </div>
            </div>

            <div class="row items-end">
              <div class="col-md-4" id="content_cliente">
                <div class="form-group mb-0">
                  <label class="text-sm font-medium text-slate-700">Estatus:</label>
                  <select id="estatus" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" >
                    <option value="x">Todos</option>
                    <option value="1">Activo</option>
                    <option value="0">Inactivo</option>
                  </select>
                </div>
              </div>
              <div class="col-md-8 text-right mt-3 mt-md-0">
                <button class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-slate-800 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="loadGrid();">
                  <i class="material-icons text-sm">search</i>
                  Buscar
                </button>
                <button class="inline-flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-toggle="modal" data-target="#importarExcel">
                  <i class="material-icons text-sm">upload_file</i>
                  Importar
                </button>
                <button class="inline-flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="newCliente();">
                  <i class="material-icons text-sm">add</i>
                  Nuevo
                </button>
              </div>
            </div>
          </section>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-4 sticky top-4">
          <div class="flex items-center gap-2 mb-3">
            <h6 class="text-sm font-semibold text-slate-900">Ayuda rápida</h6>
          </div>
          <div class="space-y-3">
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">1</div>
              <p class="text-xs text-slate-600 mb-0">Usa estatus para separar clientes activos e inactivos antes de consultar.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">2</div>
              <p class="text-xs text-slate-600 mb-0">Completa RFC, régimen fiscal y uso de CFDI para timbrado correcto.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">3</div>
              <p class="text-xs text-slate-600 mb-0">Puedes importar masivamente clientes desde plantilla Excel.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">4</div>
              <p class="text-xs text-slate-600 mb-0">Desactivar conserva historial y evita capturas duplicadas.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">5</div>
              <p class="text-xs text-slate-600 mb-0">Tip: usa el botón Detalle para abrir historial financiero, movimientos y documentos del cliente.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-3">
            <div>
              <h6 class="text-sm font-semibold text-slate-900 mb-1">Listado de clientes</h6>
              <p class="text-xs text-slate-500 mb-0">Da clic en Detalle para ver historial financiero, movimientos y documentos del cliente.</p>
            </div>
            <p class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1 mb-0">Consulta dinámica</p>
          </div>

          <div class="table-scroll">
            <table class="min-w-full display nowrap  table-striped table-bordered" cellspacing="0" width="100%" style="width:100%" id="gridClientes">
              <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                <tr>
                  <th width="5%" class="px-2 py-2"> ID</th>
                  <th class="px-2 py-2">Nombre/Razón Social</th>
                  <th class="px-2 py-2">RFC</th>
                  <th class="px-2 py-2">Correo</th>
                  <th class="px-2 py-2">Teléfono</th>
                  <th class="px-2 py-2">Contacto</th>
                  <th class="px-2 py-2">Cuenta Bancaria</th>
                  <th class="px-2 py-2">Estatus</th>
                  <th width="10%" class="px-2 py-2">Acciones</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade " id="modalAgregarCliente">
  <div class="modal-dialog modal-lg ">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h5 class="modal-title text-lg font-semibold text-gray-900">
          <i class="fas fa-user mr-2"></i>Agregar cliente
        </h5>
        <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body pt-2">
        <div class="row">
          <div class="col-12 text-center">
            <label>Crear o modifica tu cliente mediante Constancia de Situación Fiscal.</label>
          </div>
        </div>
        <div class="row mb-2" id="dragzone">
          <div class="col-sm-12">
            <div class="img-zone text-center" id="img-zone">
              <div class="img-drop">
                <small>Arrastra y suelta la Constancia de Situación Fiscal</small>
                <span class="btn btn-success btn-file btn-sm">
                  Selecciona desde el explorador<input type="file" accept="application/pdf" id="input-img-zone">
                </span>
              </div>
            </div>
            <div class="progress hidden">
              <div style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-success progress-bar-striped active">
                <span class="sr-only">0% Complete</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="display: none;">
          <input type="text" id="formImgvalue">
        </div>
        <div class="row">
          <div class="col-md-8">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Nombre o razón social:<span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="razon_social" style="text-transform:uppercase">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">RFC:<span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="rfc" style="text-transform:uppercase" maxlength="13" onblur="validaRFC();">
            </div>
          </div>
        </div>
        <div class="row" id="rowsExtranjeros" style="display: none;">
          <div class="col-md-6">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">CIF:<span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="cif" style="text-transform:uppercase" maxlength="13">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Régimen fiscal: <span class="text-danger">*</span></label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="regimen" >
                <option value="0">-Selecciona una opción-</option>
                @foreach ($data['regimen'] as $r)
                <option value="{{ $r->id }}">{{ $r->descripcion }} ({{ $r->c_regimenfiscal }})</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Uso de CFDI: <span class="text-danger">*</span></label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="usocfdi" >
                <option value="0">-Selecciona una opción-</option>
                @foreach ($data['usocfdi'] as $r)
                <option value="{{ $r->id }}">{{ $r->descripcion }} ({{ $r->c_usocfdi }})</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Correo: <span class="text-danger">*</span></label>
              <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="correo">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono:</label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="telefono">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Contacto:</label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="contacto">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Dirección:</label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="direccion">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">País: <span class="text-danger">*</span></label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="pais"  onchange="getEstado();">
                @foreach ($data['paises'] as $r)
                <option value="{{ $r->idpais }}">{{ $r->pais }} ({{ $r->clave }})</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Estado:</label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="estado"  onchange="getMunicipios();">
                <option value="0" selected>-Selecciona una opción-</option>
                @foreach ($data['estados'] as $r)
                <option value="{{ $r->idestado }}">{{ $r->estado }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-1 mt-4">
            <button class="btn btn-sm bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarPEM(2);">+</button>
          </div>
          <div class="col-md-3">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Municipio:</label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="municipios" >
                <option value="0">-Selecciona una opción-</option>
                @foreach ($data['municipios'] as $r)
                <option value="{{ $r->idmunicipio }}">{{ $r->municipio }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-1 mt-4">
            <button class="btn btn-sm bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarPEM(3);">+</button>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Código postal: <span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="codigo_postal">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Cuenta bancaria:</label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="cuenta_bancaria">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Forma de pago: <span class="text-danger">*</span></label>
              <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="metodo_pago" >
                @foreach ($data['metodos_pago'] as $fp)
                <option value="{{ $fp->idFormapago }}">{{ $fp->claveSat }} - {{ $fp->nombre }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button"
          class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">
          <i class="fas fa-times text-sm"></i>
          Cerrar
        </button>
        <button type="button"
          class="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="guardarCliente();">
          <i class="fas fa-save text-sm"></i>
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade draggable " id="importarExcel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h5 class="modal-title text-lg font-semibold text-gray-900">
          <i class="fas fa-file-excel mr-2"></i>Importar clientes
        </h5>
        <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body">
        <h5 class="text-center">Selecciona tu archivo de clientes a importar</h5>
        <h6 class="text-center">
          <a href="{{asset('archivos/estaticos/plantilla_importar_clientes.xlsx')}}" download>(Descargar plantilla)</a>
        </h6>
        <form method="post" enctype="multipart/form-data" id="formImportExcel">
          @csrf
          <div class="row">
            <div class="col-md-6 mt-1">
              <input type="file" name="file" id="file" style="width:130%">
            </div>
            <div class="col-md-6 text-right">
              <button type="submit" id="btn_import" class="btn btn-sm btn-success bg-[#0A415F] border-[#0A415F]">Importar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade " id="modalEstado" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h5 class="modal-title text-lg font-semibold text-gray-900">
          <i class="fas fa-globe mr-2"></i>Agregar estado
        </h5>
        <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body">
        <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Descripción: <span class="text-danger">*</span></label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="descripcionestado">
        </div>
        <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Clave: <span class="text-danger">*</span></label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="claveestado">
        </div>
        <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">País: <span class="text-danger">*</span></label>
          <select id="id_pais" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-width="100%" data-style="select-with-transition" title="País:" data-live-search="true">
            <option value="">-Selecciona una opción-</option>
            @foreach($data['paises'] as $p)
            <option value="{{$p->idpais}}" nombre="{{$p->pais}}">{{$p->pais}}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button"
          class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">
          <i class="fas fa-times text-sm"></i>
          Cerrar
        </button>
        <button type="button"
          class="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="guardarEstamuni(2);">
          <i class="fas fa-save text-sm"></i>
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade " id="modalMunicipio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header border-0 pb-2">
        <h4 class="modal-title text-slate-900" id="titleModal">Agregar municipio</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="material-icons">clear</i>
        </button>
      </div>
      <div class="modal-body">
        <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Descripción: <span class="text-danger">*</span></label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="descripcionmunicipio">
        </div>

        <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Estado: <span class="text-danger">*</span></label>
          <select id="id_estado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-width="100%" data-style="select-with-transition" title="Estado:" data-live-search="true">
            <option value="">-Selecciona una opción-</option>
            @foreach($data['estados'] as $es)
            <option value="{{$es->idestado}}">{{$es->estado}}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button"
          class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">
          <i class="fas fa-times text-sm"></i>
          Cerrar
        </button>
        <button type="button"
          class="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="guardarEstamuni(3);">
          <i class="fas fa-save text-sm"></i>
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .btn-file {
    position: relative;
    overflow: hidden;
  }

  .btn-file input[type=file] {
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 10%;
    font-size: 30px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
  }

  .img-zone {
    background-color: #F2FFF9;
    border: 5px dashed #4cae4c;
    border-radius: 5px;
    padding: 5px;

  }

  .img-zone h2 {
    margin-top: 0;
  }


  .table-scroll {
    max-height: 560px;
    overflow-y: auto;
  }

  .select2-container {
    width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 40px !important;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_processing,
  .dataTables_wrapper .dataTables_paginate {
    font-size: 10px;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 10px !important;
  }

  table.dataTable thead th,
  table.dataTable thead td {
    font-size: 10px !important;
  }

  table.dataTable tfoot th,
  table.dataTable tfoot td {
    font-size: 11px !important;
  }

  table.dataTable tbody td {
    font-size: 11px !important;
  }


  table.dataTable tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }

  .dataTables_wrapper .dataTables_filter input {
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
  }

  .dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: #0A415F !important;
    box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
  }

  .table-scroll {
    max-height: 550px;
    overflow-y: auto;
  }

  .swal-popup-modern {
    border-radius: 14px !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
    padding: 1.2rem 1.1rem !important;
  }

  .swal-title-modern {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .swal-text-modern {
    font-size: 0.875rem !important;
    color: #475569 !important;
  }

  .swal-btn-confirm,
  .swal-btn-cancel {
    border-radius: 10px !important;
    padding: 0.5rem 0.95rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }

  .swal-btn-confirm {
    background: #0A415F !important;
    color: #ffffff !important;
    border: 1px solid #0A415F !important;
  }

  .swal-btn-confirm:hover {
    background: #08344b !important;
    border-color: #08344b !important;
  }

  .swal-btn-cancel {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
  }

  .cliente-name-link {
    color: #0a415f;
    font-weight: 600;
    text-decoration: none;
  }

  .cliente-name-link:hover {
    color: #08344b;
    text-decoration: underline;
  }

  .cliente-detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 0.375rem;
    font-size: 10px;
    font-weight: 700;
    height: 24px;
    padding: 0 0.5rem;
    vertical-align: middle;
  }

  .cliente-detail-cta:hover {
    background: #dbeafe;
    color: #1e40af;
  }

  .swal-btn-cancel:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
  }
</style>

<input type="hidden" id="idCliente">

@endsection

@push('js')
<script>
  const SWAL_THEME = {
    customClass: {
      popup: 'swal-popup-modern',
      title: 'swal-title-modern',
      htmlContainer: 'swal-text-modern',
      confirmButton: 'swal-btn-confirm',
      cancelButton: 'swal-btn-cancel'
    },
    buttonsStyling: false
  };

  const detalleClienteBaseUrl = '{{ url("catalogo/clientes") }}';

  let isSyncingLocation = false;

  function setSelect2Value(selector, value) {
    $(selector).val(value).trigger('change.select2');
  }

  function swalToast(icon, title, timer = 2200) {
    return Swal.fire({
      ...SWAL_THEME,
      toast: true,
      position: 'top-end',
      icon: icon,
      title: title,
      showConfirmButton: false,
      timer: timer,
      timerProgressBar: true
    });
  }

  function swalConfirmAction(title) {
    return Swal.fire({
      ...SWAL_THEME,
      title,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Si',
      cancelButtonText: 'No'
    });
  }

  $(document).ready(function() {
    $('.select2').select2({
      width: '100%',
    });

    loadGrid();

    var img_zone = document.getElementById('img-zone'),
      collect = {
        filereader: typeof FileReader != 'undefined',
        zone: 'draggable' in document.createElement('span'),
        formdata: !!window.FormData
      },
      acceptedTypes = {
        'image/png': true,
        'image/jpeg': true,
        'image/jpg': true,
        'image/gif': true
      };
    if (collect.zone) {
      dragHandle(img_zone);

    } else {
      alert("Drag & Drop isn't supported, use Open File Browser to upload photos.");
    }
  });

  $(document).on('change', '.btn-file :file', function() {
    if (this.id == 'input-img-zone') {

      console.log(this.files)
      ajax_upload(this.files[0]);
    }

  });

  function dragHandle(element) {
    element.ondragover = function() {
      return false;
    };
    element.ondragend = function() {
      return false;
    };
    element.ondrop = function(e) {
      e.preventDefault();
      if (element.id == 'img-zone') {
        console.log('7777777777777')
        console.log(e.dataTransfer)
        ajax_upload(e.dataTransfer.files[0]);
      } else if (element.id == 'img-zone2') {
        //ajax_upload2(e.dataTransfer.files);
        //alert(e.dataTransfer.files)
      } else {
        //ajax_upload3(e.dataTransfer.files);
      }

    }
  }

  function ajax_upload(files) {

    $('.progress').removeClass('hidden');
    $('.progress-bar').css({
      "width": "0%"
    });
    $('.progress-bar span').html('0% complete');

    var formData = new FormData();
    console.log(files)

    $('#formImgvalue').val(formData)


    console.log(formData)

    formData.append('pdf', files);
    //$('#modalCargando').modal('show')
    $.ajax({
      url: '{{ url("configuracion/empresa/leer-pdf") }}', // Change name according to your php script to handle uploading on server
      type: 'post',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false,
      error: function(request) {
        ajax_msg(false, 'Error al subir la imagen.', 'img-zone');
      },
      success: function(json) {
        console.log(json)

        $('#rfc').val(json.rfc);
        $('#razon_social').val(json.razon_social);

        direccion = json.calle + ' ' + json.no_exterior;
        if (json.no_interior != '') {
          direccion += ' int. ' + json.no_interior
        }
        $('#direccion').val(direccion);
        $('#codigo_postal').val(json.codigo_postal);


        if (json.id_estado != '0') {
          $('#estado').val(json.id_estado).trigger('change');
          getMunicipios(json.id_municipio, json.id_estado);
        }

      },
      progress: function(e) {
        if (e.lengthComputable) {
          var pct = (e.loaded / e.total) * 100;
          $('.progress-bar').css({
            "width": pct + "%"
          });
          $('.progress-bar span').html(pct + '% complete');
        } else {
          console.warn('Content Length not reported!');
        }
      }
    });
  }

  function loadGrid() {
    var estatus = $('#estatus').val();


    $('#gridClientes').dataTable().fnDestroy();
    var table = $('#gridClientes').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true,
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('catalogo/get_clientes')}}",
        type: "POST",
        data: {
          estatus: estatus,

        },
      },
      columns: [{
          data: "id"
        },
        {
          data: "razon_social",
          render: function(data, type, row) {
            return '<a href="javascript:void(0)" class="cliente-name-link" onclick="verDetalleCliente(' + row.id + ')">' + (data || '-') + '</a>';
          }
        },
        {
          data: "rfc"
        },
        {
          data: "correo"
        },
        {
          data: "telefono"
        },
        {
          data: "contacto"
        },
        {
          data: "cuenta_bancaria"
        },
        {
          data: "estatus",
          render: function(data, type, row) {
            if (row.estatus == '1') {
              return '<div align="center"><span class="badge badge-success">Activo</span></div>'
            } else {
              return '<div align="center"><span class="badge badge-danger">Inactivo</span></div>'
            }
          }
        },
        {
          data: "estatus",
          render: function(data, type, row) {
            if (row.estatus == '1') {
              return '<div class="d-flex justify-content-center align-items-center"><button class="cliente-detail-cta mr-1" onclick="verDetalleCliente(' + row.id + ')" title="Ver detalle"><i class="material-icons" style="font-size:12px;line-height:1;">visibility</i>Detalle</button><button class="btn btn-secondary btn-xsm mr-1" onclick="edita(' + row.id + ')" title="Editar"><i class="material-icons">edit</i></button><button class="btn btn-secondary btn-xsm" onclick="desactivar(' + row.id + ',0);" title="Desactivar"><i class="fa fa-times" aria-hidden="true"></i></button></div>'
            } else {
              return '<div class="d-flex justify-content-center align-items-center"><button class="cliente-detail-cta mr-1" onclick="verDetalleCliente(' + row.id + ')" title="Ver detalle"><i class="material-icons" style="font-size:12px;line-height:1;">visibility</i>Detalle</button><button class="btn btn-secondary btn-xsm" onclick="desactivar(' + row.id + ',1);" title="Activar"><i class="fa fa-check" aria-hidden="true"></i></button></div>'
            }
          }
        },

      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ]
    });
  }

  function verDetalleCliente(id) {
    window.location.href = detalleClienteBaseUrl + '/' + id + '/detalle';
  }

  function newCliente() {
    $('#idCliente').val('');
    $('#razon_social').val('');
    $('#rfc').val('');
    setSelect2Value('#regimen', 0);
    setSelect2Value('#usocfdi', 0);
    $('#correo').val('');
    $('#telefono').val('');
    $('#contacto').val('');
    $('#direccion').val('');
    setSelect2Value('#estado', 0);
    setSelect2Value('#municipios', 0);
    $('#codigo_postal').val('');
    $('#cuenta_bancaria').val('');
    $('#cif').val('');
    $('#rowsExtranjeros').hide();
    setSelect2Value('#metodo_pago', 1);
    //getMunicipios()
    getEstado(0, function() {
      getMunicipios(0);
    });
    $('#modalAgregarCliente').modal('show')
  }

  function guardarCliente() {
    var id = $('#idCliente').val();
    var razon_social = $('#razon_social').val();
    if (razon_social == '') {
      swalToast('warning', 'Agrega una razón social.');
      $('#razon_social').focus()
      return false;
    }
    if (razon_social == 'Publico en General' || razon_social == 'publico en general') {
      swalToast('warning', 'La razón social Publico en General es inválida.');
      $('#razon_social').focus()
      return false;
    }
    var rfc = ($('#rfc').val() || '').toUpperCase();
    $('#rfc').val(rfc);
    if (rfc == '') {
      swalToast('warning', 'El RFC se encuentra vacío.');
      $('#rfc').focus()
      return false;
    }
    var cif = $('#cif').val()
    if (rfc == 'XEXX010101000' && cif == '') {
      swalToast('warning', 'El CIF se encuentra vacío.');
      $('#cif').focus()
      return false;
    }

    var regimen = $('#regimen').val();
    if (regimen == '0') {
      swalToast('warning', 'Selecciona un régimen fiscal.');
      $('#regimen').focus()
      return false;
    }
    var usocfdi = $('#usocfdi').val();
    if (usocfdi == '0') {
      swalToast('warning', 'Selecciona un uso de CFDI.');
      $('#regimen').focus()
      return false;
    }
    var correo = $('#correo').val();
    if (correo == '') {
      swalToast('warning', 'El correo se encuentra vacío.');
      $('#correo').focus()
      return false;
    }
    var metodopago = $('#metodo_pago').val()
    if (metodopago == '') {
      swalToast('warning', 'Agrega método de pago.');
      $('#correo').focus()
      return false;
    }
    var telefono = $('#telefono').val();
    var contacto = $('#contacto').val();
    var direccion = $('#direccion').val();
    var estado = $('#estado').val();
    var municipio = $('#municipios').val();
    var codigo_postal = $('#codigo_postal').val();

    if (codigo_postal == '') {
      swalToast('warning', 'El código postal se encuentra vacío.');
      $('#codigo_postal').focus()
      return false;
    }
    var pais = $('#pais').val()
    var cuenta_bancaria = $('#cuenta_bancaria').val()

    $.ajax({
        url: '{{ url("catalogo/guardar_cliente") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          razon_social: razon_social,
          rfc: rfc,
          regimen: regimen,
          usocfdi: usocfdi,
          correo: correo,
          telefono: telefono,
          contacto: contacto,
          direccion: direccion,
          estado: estado,
          municipio: municipio,
          codigo_postal: codigo_postal,
          pais: pais,
          cuenta_bancaria: cuenta_bancaria,
          metodopago: metodopago,
          cif: cif,
        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.estatus > 0) {
          $('#modalAgregarCliente').modal('hide')
          swalToast('success', 'Cliente guardado correctamente.', 2000);

          loadGrid();
        } else {
          swalToast('warning', resp.mensaje, 4000);
          $('#rfc').focus();
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });


  }

  function edita(id) {
    $.ajax({
        url: '{{ url("catalogo/get_cliente") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          id: id
        },
      })
      .done(function(resp) {
        console.log("success");
        if (!resp.data) {
          swalToast('warning', resp.mensaje || 'No se pudo obtener la informacion del cliente.', 3200);
          return;
        }

        $('#idCliente').val(id);
        $('#nombre').val(resp.data.nombre);
        $('#razon_social').val(resp.data.razon_social);
        $('#rfc').val(resp.data.rfc);
        var idPais = resp.data.id_pais || '';
        var idEstado = resp.data.id_estado || 0;
        var idMunicipio = resp.data.id_municipio || 0;

        isSyncingLocation = true;
        setSelect2Value('#pais', idPais);
        setSelect2Value('#regimen', resp.data.id_regimen_fiscal);
        setSelect2Value('#usocfdi', resp.data.id_usocfdi);
        $('#correo').val(resp.data.correo);
        $('#telefono').val(resp.data.telefono);
        $('#cuenta_bancaria').val(resp.data.cuenta_bancaria);
        $('#contacto').val(resp.data.contacto);
        $('#direccion').val(resp.data.direccion);

        getEstado(idEstado, function() {
          getMunicipios(idMunicipio, idEstado, function() {
            isSyncingLocation = false;
          });
        }, idPais);

        $('#codigo_postal').val(resp.data.codigo_postal);
        setSelect2Value('#metodo_pago', resp.data.id_metodo_pago)
        if (resp.data.rfc == 'XEXX010101000') {
          $('#rowsExtranjeros').show()
        } else {
          $('#rowsExtranjeros').hide()
        }
        $('#cif').val(resp.data.cif)
        $('#modalAgregarCliente').modal('show')
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function desactivar(id, estatus) {
    if (estatus == 1) {
      var str = 'activar';
    } else {
      var str = 'desactivar'
    }
    Swal.fire({
        ...SWAL_THEME,
        icon: 'warning',
        title: "¿Quieres " + str + " el cliente?",
      text: estatus == 1 ? 'El cliente volvera a estar disponible para uso normal.' : 'El registro se marcara como inactivo y dejara de estar disponible para uso normal.',
        showCancelButton: true,
        confirmButtonText: "Si, " + str,
        cancelButtonText: "Cancelar"
      })
      .then((result) => {
        if (result.isConfirmed) {
          $.ajax({
              url: '{{ url("catalogo/desactivar_cliente") }}',
              type: 'POST',
              dataType: 'json',
              data: {
                id: id,
                estatus: estatus
              },
            })
            .done(function(resp) {
              console.log("success");
              if (resp.estatus > 0) {
                loadGrid();
                if (estatus == 1) {
                  var str = 'Activado';
                } else {
                  var str = 'Desactivado'
                }
                swalToast('success', str + ' correctamente.', 2000);
              } else {
                swalToast('warning', resp.mensaje, 4000);
              }
            })
            .fail(function() {
              console.log("error");
            })
            .always(function() {
              console.log("complete");
            });
        }
      });
  }

  function validaRFC() {

    var rfc = ($('#rfc').val() || '').toUpperCase();
    $('#rfc').val(rfc);
    if (rfc == 'XAXX010101000' || rfc == 'XEXX010101000') {
      if (rfc == 'XEXX010101000') {
        $('#rowsExtranjeros').show()
      } else {
        $('#rowsExtranjeros').hide()
      }
      $.ajax({
          url: '{{ url("catalogo/get_empresa_info") }}',
          type: 'POST',
          dataType: 'json',
          data: {
            param1: 'value1'
          },
        })
        .done(function(resp) {
          console.log("success");
          setSelect2Value('#pais', resp.data.idpais)
          getEstado(resp.data.idestado, function() {
            getMunicipios(resp.data.idmunicipio, resp.data.idestado)
            $('#codigo_postal').val(resp.data.cp)
            setSelect2Value('#usocfdi', 23)
            setSelect2Value('#regimen', 11)
          });

          return 1;

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

    } else {
      $.ajax({
          url: '{{ url("catalogo/valida_rfc_repetido") }}',
          type: 'POST',
          dataType: 'json',
          data: {
            rfc: rfc,
            id_cliente: $('#idCliente').val()
          },
        })
        .done(function(resp) {
          if (resp.estatus > 0) {
            swalToast('warning', 'El RFC se encuentra previamente registrado.');
            $('#rfc').val('').focus()
            return false;
          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });

    }
  }

  function getMunicipios(idMunicipio = 0, idEstado = null, callback = null) {
    if (isSyncingLocation && idEstado === null && idMunicipio === 0) {
      return $.Deferred().resolve().promise();
    }

    var estado = idEstado || $('#estado').val()
    if (!estado || estado == '0') {
      $('#municipios').html('<option value="0">-Selecciona una opción-</option>');
      setSelect2Value('#municipios', 0);
      if (typeof callback === 'function') {
        callback();
      }
      return $.Deferred().resolve().promise();
    }

    return $.ajax({
        url: '{{ url("catalogo/get_municipios") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          estado: estado
        },
      })
      .done(function(resp) {
        console.log("success");
        var html = '<option value="0">-Selecciona una opción-</option>';
        $('#municipios').html('')
        if (resp.estatus > 0) {
          $.each(resp.municipios, function(index, val) {
            html += '<option value="' + val.idmunicipio + '">' + val.municipio + '</option>'
          });
        }
        $('#municipios').html(html)
        if (idMunicipio != 0) {
          $('#municipios').val(idMunicipio)
          if ($('#municipios').val() != String(idMunicipio)) {
            $('#municipios').val(0);
          }
        }
        $('#municipios').trigger('change.select2')

        if (typeof callback === 'function') {
          callback();
        }
      })
      .fail(function() {
        console.log("error");
        $('#municipios').html('<option value="0">-Selecciona una opción-</option>');
        setSelect2Value('#municipios', 0);

        if (typeof callback === 'function') {
          callback();
        }
      })
      .always(function() {
        console.log("complete");
      });

  }

  $("#formImportExcel").on("submit", function(e) {
    e.preventDefault();
    var f = $(this);
    var formData = new FormData(document.getElementById("formImportExcel"));
    formData.append("dato", "valor");
    if ($('#file').val() == '') {
      showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes seleccionar el archivo a importar.')
      return false;
    }

    var tipo = 1;
    if ($(document.activeElement).attr('id') == 'btn_validate')
      tipo = 2;

    formData.append('tipo', tipo);

    $('#loadingLoad').modal('show');
    $.ajax({
        url: "{{ url('catalogo/importar-clientes')}}",
        type: "post",
        data: formData,
        cache: false,
        contentType: false,
        processData: false
      })
      .done(function(resp) {
        setTimeout(() => {
          if (resp.result == 1) {

            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
            $('#gridClientes').DataTable().ajax.reload();
            $('#importarExcel').modal('hide');
          } else if (resp.result == 2) {

            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)

          } else {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
            listVentasErr(resp.data_err);
          }
        }, 2000);

      })
      .fail(function() {
        setTimeout(() => {
          showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Algo salio mal durante el proceso.')
        }, 2000);
      })
      .always(function() {
        setTimeout(() => {
          $('#loadingLoad').modal('hide');
        }, 2000);
      });
  });

  function getEstado(idestado = 0, callback = null, idPais = null) {

    if (isSyncingLocation && idPais === null && idestado === 0) {
      return $.Deferred().resolve().promise();
    }


    var idpais = idPais || $('#pais').val();

    if (!idpais || idpais == '0') {
      $('#estado').html('<option value="0">-Selecciona una opción-</option>');
      $('#id_estado').html('<option value="">-Selecciona una opción-</option>');
      setSelect2Value('#estado', 0);
      setSelect2Value('#id_estado', '');
      getMunicipios(0);
      if (typeof callback === 'function') {
        callback();
      }
      return $.Deferred().resolve().promise();
    }

    return $.ajax({
        url: "{{ url('configuracion/empresa/get_estado')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: idpais,
        },
      })
      .done(function(resp) {
        $('#estado').empty()
        $("#estado").prop("disabled", false);

        $('#id_estado').empty()
        $("#id_estado").prop("disabled", false);

        $('#estado').append('<option value="0">-Selecciona una opción-</option>');
        $('#id_estado').append('<option value="">-Selecciona una opción-</option>');

        $.each(resp.data.estados, function(key, value) {
          $('#estado')
            .append('<option value="' + value['idestado'] + '" nombre="' + value['estado'] + '">' + value['estado'] + '</option>');
          $('#id_estado')
            .append('<option value="' + value['idestado'] + '" nombre="' + value['estado'] + '">' + value['estado'] + '</option>');
        });
        if (idestado != 0) {
          $('#estado').val(idestado);
          $('#id_estado').val(idestado);

          if ($('#estado').val() != String(idestado)) {
            $('#estado').val(0);
          }

          if ($('#id_estado').val() != String(idestado)) {
            $('#id_estado').val('');
          }
        }

        $('#estado').trigger('change.select2');
        $('#id_estado').trigger('change.select2');

        if (typeof callback === 'function') {
          callback();
        }

      })
      .fail(function() {
        console.log("error");
        $('#estado').html('<option value="0">-Selecciona una opción-</option>');
        $('#id_estado').html('<option value="">-Selecciona una opción-</option>');
        setSelect2Value('#estado', 0);
        setSelect2Value('#id_estado', '');
        getMunicipios(0);

        if (typeof callback === 'function') {
          callback();
        }
      })
      .always(function() {
        console.log("complete");
      });
  }

  function agregarPEM(tipo) {
    if (tipo == 1) {


      $('#modalPais').modal('show');
    } else if (tipo == 2) {
      $('#id_pais').val($('#pais').val()).trigger('change')
      $('#modalEstado').modal('show');

    } else {
      $('#id_estado').val($('#estado').val()).trigger('change')
      $('#modalMunicipio').modal('show');
    }
  }

  function guardarEstamuni(tipo) {
    if (tipo == 1) {
      var pais = $('#descripcionpais').val();
      var clave = $('#clavepais').val();
      if (pais == '' || clave == '') {
        showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información');
        return false;
      }
      $.ajax({
          url: "{{ url('configuracion/pem/save_pais')}}",
          type: 'POST',
          dataType: 'json',
          data: {
            pais: pais,
            clave: clave,
          },

        })
        .done(function(resp) {
          console.log(resp);
          if (resp.result == 1) {
            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje);
            $('#modalPais').modal('hide');
            $('#idpais').trigger('change');

          }

        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    } else if (tipo == 2) {
      var estado = $('#descripcionestado').val();
      var clave = $('#claveestado').val();
      var idpais = $('#id_pais option:selected').val();

      if (estado == '' || clave == '' || idpais == '') {
        showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información');
        return false;
      }
      $.ajax({
          url: "{{ url('configuracion/pem/save_estado')}}",
          type: 'POST',
          dataType: 'json',
          data: {
            estado: estado,
            idpais: idpais,
            clave: clave,
          },

        })
        .done(function(resp) {
          console.log(resp);
          if (resp.result > 0) {
            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
            $('#modalEstado').modal('hide')
            // $('.selectpicker').selectpicker('refresh');
            getEstado(resp.result)
          }

        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    } else {
      var municipio = $('#descripcionmunicipio').val();
      var idestado = $('#id_estado option:selected').val();
      if (municipio == '' || idestado == '') {
        showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información');
        return false;
      }
      $.ajax({
          url: "{{ url('configuracion/pem/save_municipio')}}",
          type: 'POST',
          dataType: 'json',
          data: {
            municipio: municipio,
            idestado: idestado,
          },

        })
        .done(function(resp) {
          console.log(resp);
          if (resp.result > 0) {
            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
            $('#modalMunicipio').modal('hide');
            // $('.selectpicker').selectpicker('refresh');
            setTimeout(() => {
              getMunicipios(resp.result)
            }, 1000);

          }

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

  }

  function subirPdf() {
    let formData = new FormData();
    let file = document.getElementById('archivoPdf').files[0];
    formData.append('pdf', file);

    $.ajax({
      url: '{{ url("configuracion/empresa/leer-pdf") }}',
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      data: formData,
      processData: false,
      contentType: false,
      success: function(res) {
        console.log(res);
        $('#rfc').val(res.rfc);
        $('#razon_social').val(res.razon_social);

        direccion = res.calle + ' ' + res.no_exterior;
        if (res.no_interior != '') {
          direccion += ' int. ' + res.no_interior
        }
        $('#direccion').val(direccion);
        $('#codigo_postal').val(res.codigo_postal);


        if (res.id_estado != '0') {
          $('#estado').val(res.id_estado).trigger('change');
          getMunicipios(res.id_municipio, res.id_estado);
        }
      },
      error: function(err) {
        swalToast('warning', 'Error al subir el archivo.', 2600);
        console.log(err);
      }
    });
  }

  function ajax_msg(status, msg, div) {
    var the_msg = '<div class="alert alert-' + (status ? 'success' : 'danger') + '">';
    the_msg += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    the_msg += msg;
    the_msg += '</div>';
    $(the_msg).insertBefore(div);
  }
</script>
@endpush