<section id="crm-contacts-index">
<div class="crm-contacts-index alert-errors"></div>
<div wire:ignore>
<div class="query-filters" id="toolbar">
<div class="d-flex flex-wrap">
<div class="pt-1 pr-2 pb-1" style="min-width: 175px; max-width: 225px">
<button data-bs-toggle='offcanvas' data-bs-target='#offcanvasUser' class="btn btn-primary waves-effect waves-light">Agregar contacto</button>
</div>
<div class="accordion mr-3 mb-3" id="accordionParentFiltrado">
<div class="card accordion-item">
<h2 class="accordion-header" id="headingFiltrado">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionFiltrado" aria-expanded="false" aria-controls="accordionFiltrado">
Filtrado
</button>
</h2>
<div id="accordionFiltrado" class="accordion-collapse collapse" aria-labelledby="headingFiltrado" data-bs-parent="#accordionParentFiltrado">
<div class="accordion-body">
<div class="d-flex flex-wrap">
<div class="pr-2 pl-4">
<div class="form-check form-check-secondary mb-0">
<input class="form-check-input" type="checkbox" id="filter_is_prospect" checked="checked">
<label class="form-check-label" for="filter_is_prospect">Es prospecto</label>
</div>
<div class="form-check form-check-secondary mb-0">
<input class="form-check-input" type="checkbox" id="filter_is_prospect" checked="checked">
<label class="form-check-label" for="filter_is_customer">Es cliente</label>
</div>
<div class="form-check form-check-secondary m-0">
<input class="form-check-input" type="checkbox" id="filter_is_provider" checked="checked">
<label class="form-check-label" for="filter_is_provider">Es proveedor</label>
</div>
</div>
<div class="pr-2 pl-4">
<div class="form-check form-check-secondary m-0">
<input class="form-check-input" type="checkbox" id="filter_is_user">
<label class="form-check-label" for="filter_is_user">Es usuario</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-2 pt-1">
<button class="btn btn-label-secondary waves-effect py-3 btn-refresh" disabled><i class="fa-solid fa-rotate"></i></button>
</div>
<div class="pr-2" style="width: 60px;">
<a href="javascript:void(0)" class="clear-filters">Limpiar Filtrado</a>
</div>
</div>
</div>
<table id="bt-contacts"></table>
</div>
</section>
@push('page-script')
<script>
const store_route = '{{ route('admin.system.users.store') }}',
route_show = '{{ route('admin.contacts.show', ['contact' => '~contact~']) }}',
route_destroy = '{{ route('admin.contacts.destroy', ['contact' => '~contact~']) }}',
statusList = {!! json_encode($status_list) !!},
statusIntCatalogCss = {!! json_encode($status_list_class) !!};
var btt_height;
// BootstrapTable Petición AJAX
function ajaxRequest(params) {
let url = '{{ url()->current() }}' +
'?' +
$.param(params.data) +
'&' +
$('.query-filters :input').serialize();
$.get(url).then(function (res) {
params.success(res)
})
}
// BootstrapTable Formatter
function userAvatarFormatter(value, row, index) {
if(row.id){
let show_href = route_show.replace('~contacto~', row.id);
return [
'<div class="d-flex justify-content-start align-items-center user-name">',
'<div class="avatar-wrapper">',
'<div class="avatar avatar-sm me-4">' +
'<img src="' + row.profile_photo_url + '" alt="Avatar" class="rounded-circle">' +
'</div>',
'</div>',
'<div class="d-flex flex-column">',
'<a href="' + show_href + '" class="text-heading text-truncate"><span class="fw-medium">' + row.name + '</span></a>',
'<small>' + row.email + '</small>',
'</div>',
'</div>',
].join('')
}
}
function uidFormatter(value, row, index) {
if(row.id){
let show_href = route_show.replace('~contacto~', row.id);
return [
'<div class="d-flex align-items-center justify-content-center">',
'<a href="' + show_href + '" class="whitespace-nowrap" title="Ver Contacto"> ' + row.id + '</a>',
@can('crm.contacts.update')
'<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-md"></i></a>',
'<div class="dropdown-menu dropdown-menu-end m-0">',
'<a href="javascript:deleteRow(' + row.id + ');" class="dropdown-item delete-record">Eliminar</a>',
'</div>',
@endcan
'</div>'
].join('')
}
}
// BootstrapTable Init
function initTable(table) {
$(table)
.bootstrapTable('destroy')
.bootstrapTable({
height: btt_height,
locale: 'es-MX',
ajax: "ajaxRequest",
toolbar: "#toolbar",
search: true,
showColumns: true,
showColumnsToggleAll: true,
showExport: true,
showFullscreen: true,
showPaginationSwitch: true,
showRefresh: true,
showToggle: true,
clickToSelect: true,
minimumCountColumns: 4,
fixedColumns: true,
fixedNumber: 1,
idField: "id",
pagination: true,
pageList: [10, 25, 50, 100, 500],
sidePagination: "server",
exportTypes: ['csv', 'txt', 'excel'],
exportOptions: {
fileName: 'Contactos',
},
sortName: 'users.id',
sortOrder: 'desc',
mobileResponsive: true,
cookie: true,
resizable: true,
cookieIdTable:"crm-contacts-index",
columns: [
{
field: 'id',
title: 'UID',
align: 'center',
sortable: true,
sortName: 'users.id',
switchable: false,
formatter: uidFormatter
},
{
field: 'name',
title: 'Nombre',
formatter: userAvatarFormatter,
},
{
field: 'email',
title: 'Correo electrónico',
sortable: true,
visible: false,
},
{
field: 'tipo_persona',
title: 'Tipo persona',
visible: false,
sortable: true,
formatter: window.btFormatter.tipoPersona,
},
{
field: 'rfc',
title: 'RFC',
sortable: true,
},
{
field: 'nombre_fiscal',
title: 'Nombre fiscal',
sortable: true,
},
{
field: 'c_regimen_fiscal',
title: 'Regimen fiscal',
sortable: true,
visible: false,
formatter: window.btFormatter.regimenFiscal,
},
{
field: 'domicilio_fiscal',
title: 'Domicilio fiscal',
sortable: true,
visible: false,
},
{
field: 'estado',
title: 'Estado',
sortable: true,
},
{
field: 'municipio',
title: 'Municipio',
sortable: true,
},
{
field: 'localidad',
title: 'Localidad',
sortable: true,
visible: false,
},
{
field: 'c_uso_cfdi',
title: 'Uso de CFDI',
sortable: true,
visible: false,
formatter: window.btFormatter.usoCfdi,
},
{
field: 'cargo',
title: 'Cargo',
visible: false,
sortable: true,
},
{
field: 'is_prospect',
title: 'Es prospecto',
align: 'center',
visible: false,
sortable: true,
formatter: window.btFormatter.check,
},
{
field: 'is_customer',
title: 'Es cliente',
align: 'center',
visible: false,
sortable: true,
formatter: window.btFormatter.check,
},
{
field: 'is_provider',
title: 'Es proveedor',
align: 'center',
visible: false,
sortable: true,
formatter: window.btFormatter.check,
},
{
field: 'is_user',
title: 'Es usuario',
align: 'center',
visible: false,
sortable: true,
formatter: window.btFormatter.check,
},
{
field: 'status',
title: 'Estado',
align: 'center',
sortable: true,
formatter: window.btFormatter.status,
},
{
field: 'created_at',
title: 'Creado ',
align: 'center',
sortable: true,
visible: false,
},
{
field: 'created_by_name',
title: 'Creado por',
align: 'center',
sortable: true,
visible: false,
sortName: 'created_by_name',
},
{
field: 'updated_at',
title: 'Modificado ',
align: 'center',
sortable: true,
visible: false,
},
]
})
}
function toggleSections() {
const isProspect = $('#is_prospect').is(':checked');
const isCustomer = $('#is_customer').is(':checked');
const isProvider = $('#is_provider').is(':checked');
const isUser = $('#is_user').is(':checked');
$('.div-sat').toggle(isCustomer || isProvider);
$('.div-sat-customer').toggle(isCustomer);
$('.div-user-auth').toggle(isCustomer || isUser);
$('.div-roles').toggle(isUser);
}
function toggleCheckboxes(status) {
const isDisabled = status == 1;
$('#is_prospect, #is_customer, #is_provider, #is_user').prop('disabled', isDisabled);
}
load_js_form = () => {
$('#userForm .select2')
.each(function() {
var $this = $(this)
$this.wrap('<div class="position-relative"></div>')
$this.select2({
dropdownAutoWidth: true,
width: '100%',
dropdownParent: $this.parent()
});
});
$("#pdf-dropzone")
.dropzone({
url: '{{ route('admin.contacts.extraer-datos-pdf-constancia') }}',
paramName: "file",
maxFiles: 1,
acceptedFiles: '.pdf',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function(file, response) {
if($('#name').val().trim() == '')
@this.set('name', response.nombre_fiscal, false);
@this.set('rfc', response.rfc, false);
@this.set('nombre_fiscal', response.nombre_fiscal, false);
if($('#email').val().trim() == '' && response.email)
@this.set('email', response.email, false);
if(response.c_regimen_fiscal)
@this.set('c_regimen_fiscal', response.c_regimen_fiscal, false);
@this.set('domicilio_fiscal', response.domicilio_fiscal, false);
$('.pdf-dropzone-div').slideUp(200);
},
error: function(file, response) {
$('.pdf-dropzone-div .error-message').html('<label class="error">' + response + '</label>');
this.removeAllFiles(true);
}
});
// Evento para los checkboxes
$('#is_prospect, #is_customer, #is_provider, #is_user').on('change', toggleSections);
// Evento para el select de estado
$('.div-status').on('change', 'select[name="status"]', function() {
toggleCheckboxes($(this).val());
});
// Previo de imagenes
document.getElementById("photo").addEventListener('change', updatePreviewImage);
// Reset form
$("#userForm")
.on('reset', function(){
var form = $("#userForm");
form.validate().resetForm();
setTimeout(function(){
$('#roles').trigger('change');
toggleSections();
}, 250)
$('#user-image').prop("src", "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
$('#userForm .alert-errors').html('');
$('.pdf-dropzone-div').show();
$("#pdf-dropzone").removeAllFiles(true);
});
$("#userForm")
.validate({
errorClass: 'error',
highlight: function(element, errorClass, validClass) {
// Agrega la clase de error a la fila (contenedor del campo)
$(element).closest('.mb-3').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
// Elimina la clase de error de la fila (contenedor del campo)
$(element).closest('.mb-3').removeClass('has-error');
},
errorPlacement: function(error, element) {
// Controla dónde se colocan los mensajes de error
error.appendTo(element.closest('.mb-3').find('.error-message'));
},
rules: {
name: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
password: {
required: function(element) {
return !$("#userForm input[name=id]").val() && ($('#is_user').is(':checked') || $('#is_customer').is(':checked'));
},
minlength: 6
}
},
messages: {
name: {
required: "Por favor ingrese su nombre completo",
minlength: "El nombre completo debe tener al menos 8 caracteres"
},
email: {
required: "Por favor ingrese su correo electrónico",
email: "El valor no es una dirección de correo válida"
},
password: {
required: "La contraseña es obligatoria para nuevos usuarios",
minlength: "La contraseña debe tener al menos 6 caracteres"
}
},
submitHandler: function(form, event) {
// Evita que el formulario se envíe automáticamente
event.preventDefault();
var form = $("#userForm")[0],
data = new FormData(form);
$('#userForm :input').prop('disabled', true);
$('#userForm .alert-errors').html('');
$.ajax({
url: store_route,
method: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: data,
contentType: false,
processData: false,
cache: false,
timeout: 3000,
success: function(data) {
$('#userForm :input').prop('disabled', false);
if (data.errors) {
$('#userForm .alert-errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
'<div class="alert-body">' + data.errors + '</div>' +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>');
} else {
let $usersIndexAlert = $('.crm-contacts-index.alert-errors');
$usersIndexAlert.html('<div class="alert alert-success alert-dismissible fade show" role="alert">' +
'<div class="alert-body">' +
'<p class="mb-0"><strong>' + data.success + '</strong></p>' +
'</div>' +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>');
$('#userForm button[type=reset]').trigger('click');
$('#toolbar .clear-filters').trigger('click');
}
},
error: function(e) {
$('#userForm :input').prop('disabled', false);
$('#userForm .alert-errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
'<div class="alert-body">' + e.responseJSON.message + '</div>' +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>');
}
});
}
});
// Inicializar el estado al cargar la página
toggleSections();
toggleCheckboxes($('select[name="status"]').val());
}
// Previo de imagen de perfil
updatePreviewImage = (event) => {
var file = event.target.files[0],
reader = new FileReader();
reader.onload = event => {
document.getElementById('user-image').setAttribute('src', event.target.result);
};
reader.readAsDataURL(file);
}
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
var $table = $('#bt-contacts'),
$btnRefresh = $('#toolbar .btn-refresh'),
$clearFilters = $('a.clear-filters');
var btt_rest_height = 220,
btt_min_height = 600;
btt_height = (window.innerHeight - btt_rest_height) < btt_min_height?
btt_height:
window.innerHeight - btt_rest_height;
var offcanvasElement = document.getElementById('offcanvasUser'),
offcanvasUser = new bootstrap.Offcanvas(offcanvasElement);
const refreshButton = document.querySelector('.btn-refresh');
const inputs = document.querySelectorAll('#toolbar input, #toolbar select');
inputs.forEach(input => {
input.addEventListener('change', () => {
refreshButton.disabled = false;
refreshButton.classList.remove('btn-label-secondary');
refreshButton.classList.add('btn-label-success');
});
});
// Button Refresh
$btnRefresh
.on('click', () => {
$table.bootstrapTable('refresh');
refreshButton.disabled = true;
refreshButton.classList.remove('btn-label-success');
refreshButton.classList.add('btn-label-secondary');
});
// Button clear filters
$clearFilters
.on('click', () => {
$table.bootstrapTable('resetSearch', ''); // Inicializa la búsqueda con cadena vacía
refreshButton.disabled = true;
refreshButton.classList.remove('btn-label-success');
refreshButton.classList.add('btn-label-secondary');
});
initTable('#bt-contacts'); // Una vez que todos los scripts estén cargados, inicializa Bootstrap Table
load_js_form();
});
});
</script>
@endpush