@extends('fragments.fullTemplate')
@section('titulo')
Clientes
@endsection
@section('contenido')
@php
//use App\Http\Controllers\plaza_de_cobros;
//$objPlaza = new plaza_de_cobros();
use App\Constants\Api;
$baseUrl = Api::BASE_URL;
@endphp
{{--<nav class="nav nav-pills nav-justified" style="padding-bottom: 10px">
        <a class="text-sm-center nav-link @if($tipo_cliente == 0) active @endIf" href="{{url('clientes/0')}}">Empresa cliente</a>
        <a class="text-sm-center nav-link @if($tipo_cliente == 1) active @endIf" href="{{url('clientes/1')}}">Gestionar Cliente Informe</a>
    </nav>--}}
    @if($tipo_cliente == 0)
        @include('Clientes.Tabs.indexClienteFactura')
        @include('Clientes.new_empresa')
    @elseif($tipo_cliente == 1)
        @include('Clientes.Tabs.indexClienteInforme')
    @endif

    <!---WIZARD--------------------->
   <style type="text/css">
    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    .stepwizard-row:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-order: 0;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
    }

    .dropdown-menu.show {
        max-width: 100% !important;
    }
</style>
@include('Clientes.new_cliente')
@include('Clientes.edit_cliente')
<script>
    otro_estado = function(id_estado) {
        if (id_estado == 33) {
            $('#otro').html(
                `<label class="font-weight-bold" for="otro_estado">Otro Estado</label>
                        <input type="text" class="form-control" placeholder="Estado" id="otro_estado" name="otro_estado" required>
                        <div class="valid-feedback">¡Bien!</div>
                        <div class="invalid-feedback">¡El campo es obligatorio!</div>`
            )
        } else {
            $('#otro').html('');
        }
    }

    add_otro_estado = function() {
        $('#id_estado_factura').change(function() {
            const id_estado = $('#id_estado_factura').val();
            otro_estado(id_estado);
        });

    }

    const updateSelectRegimen = (value) => {
        $("#id_tipo_persona").change(function() {
            const id_tipo_persona = $(this).val();
            showLoader();
            $.ajax({
                url: "{{url('cliente/regimenFiscal')}}",
                method: "POST",
                data: {
                    'id_tipo_persona': id_tipo_persona,
                    '_token': _token = $('input[name="_token"]').val()
                },
                success: function(response) {
                    //alert(response);
                    result = JSON.parse(response);
                    resultData = result.data;
                    let datos = {
                        "-1": {
                            text: "--Seleccione--"
                        }
                    };
                    datos = $.map(resultData, function(obj) {

                        obj.id = obj.id || obj.id; // replace pk with your identifier
                        obj.text = obj.text || obj.text; // replace name with the property used for the text

                        return obj;
                    });

                    $('#idRegimenFiscal').empty().trigger("change");
                    $("#idRegimenFiscal").select2({
                        id: '-1',
                        text: "--Seleccione--",
                        placeholder: "--Seleccione--",
                        width: "100%",
                        data: datos,
                    });
                    //Mustra valor regimen
                    $('#idRegimenFiscal').val(value).trigger('change.select2');
                    hideLoader();
                },
                error: (xhr, status, error) => {
                    hideLoader();
                }
            });
        });
    }
    let selectContact = '';
    var id_cliente = 0;
    $(document).ready(function() {
        $('#select_id_cliente_informe').change(function() {
            $('#vincular_empresa').removeAttr('disabled');
        });

        $('#new_cliente').click(function() {
            num_contactos = 2;
            $('div#insert_cliente').load('{{url("form_new_cliente")}}', function() {
                $(".liveSearchJquery ").select2({
                    id: '-1',
                    text: "--Seleccione--",
                    placeholder: "--Seleccione--",
                    width: "100%"
                });

                $(".selectNotSearch").select2({
                    id: '-1',
                    text: "--Seleccione--",
                    placeholder: "--Seleccione--",
                    width: "100%",
                    minimumResultsForSearch: Infinity
                });

                updateSelectRegimen();
                readButtons();
                add_otro_estado();

                // se cargan los ejecutivos de roles
                cargarEjecutivosSC();

                $('div#insert_cliente').removeAttr('hidden');
                $('#ModalCliente').modal('show');
            });
        });


        $(document).on('click', '.edit_cliente', function(e) {

    e.preventDefault();

    let id_cliente_factura = $(this).data('id_cliente');

    $('#id_cliente_factura').val(id_cliente_factura);
    $('#motivo_estatus_credito').text(resultData['motivo_estatus_credito'] || '');

    num_contactos = 1;

    showLoader();

    $('#edit_cliente').html('');

    $('#edit_cliente').load('{{ url("form_new_cliente") }}', function() {

        readButtons("edit_cliente");
        add_otro_estado();

        $.ajax({
            url: "{{ url('show_clientes') }}",
            method: "POST",
            data: {
                id_cliente: id_cliente_factura,
                _token: $('input[name="_token"]').val()
            },

            success: function(result) {

                if (!result || !result.data) {
                    hideLoader();
                    alert('Error al cargar datos');
                    return;
                }

                resultData = result.data.client;
                contact_types = result.data.contactTypes || [];
                serviciosSinDescuento = result.data.serviciosSinDescuento || [];
                let preciosCliente = result.data.preciosCliente || [];
        let preciosGenerales = result.data.preciosGenerales || [];

        let select = $('#edit_cliente select[name="precios_sin_descuento[]"]');

        select.empty();

        if (preciosCliente.length > 0) {

            let groupCliente = $('<optgroup label="Precios del Cliente"></optgroup>');

            preciosCliente.forEach(function(p) {

                groupCliente.append(`
                    <option value="${p.id_precio_x_servicio}">
                        ${p.nombre_completo}
                    </option>
                `);

            });

            select.append(groupCliente);
        }

        let groupGeneral = $('<optgroup label="Precios Generales"></optgroup>');

        preciosGenerales.forEach(function(p) {

            groupGeneral.append(`
                <option value="${p.id_precio_x_servicio}">
                    ${p.nombre_completo}
                </option>
            `);

        });

        
        select.append(groupGeneral);

                validate_check_edit();
                updateSelectRegimen(resultData.idRegimenFiscal);

                cargarEjecutivosSC(resultData.id_usuario_sc ?? null);

                hideLoader();

                $('#ModalEditCliente').modal('show');
            },

                    error: function() {
                        hideLoader();
                        alert('Error AJAX');
                    }
                });

            });

        });

    });

    let num_contactos = 1;
    let num_representantes = 1;
    readButtons = function(type_accion = "insert_cliente") {
        $(document).on("input change", "input, select, textarea", function() {
            const $field = $(this);
            const value = $field.val();
            if (
                value !== null &&
                (
                    (Array.isArray(value) && value.length > 0) ||
                    (typeof value === 'string' && value.trim() !== "" && value !== "-1")
                )
            ) {
                $field.removeClass("is-invalid");
                $field.closest(".form-group").removeClass("has-error");
            }
        });
        let navListItems = $('div#' + type_accion + ' div.setup-panel div a'),
            allWells = $('div#' + type_accion + ' .setup-content'),
            allNextBtn = $('div#' + type_accion + ' .nextBtn');
        allBackBtn = $('div#' + type_accion + ' .backBtn');

        navListItems.click(function(e) {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                $item = $(this);

            if (!$item.hasClass('disabled')) {
                navListItems.removeClass('btn-primary').addClass('btn-default');
                $item.addClass('btn-primary').removeClass('disabled');
                allWells.hide();
                $target.show();
            }
        });

        allNextBtn.click(function() {
            $("#nuevo_cliente").valid(); // Validar el formulario antes de continuar
            $("#editar_cliente").valid(); // Validar el formulario antes de continuar
            var curStep = $(this).closest("div#" + type_accion + " .setup-content"),
                curStepBtn = curStep.attr("id"),
                nextStepWizard = $('div#' + type_accion + ' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                curInputs = curStep.find("input, select, textarea").not('[type="hidden"]'),
                isValid = true;
            $(".form-group").removeClass("has-error");
            curInputs.each(function() {
                const $field = $(this);
                const tagName = $field.prop("tagName").toLowerCase();
                const fieldType = $field.attr("type");

                $field.removeClass("is-invalid");
                let value = $field.val() || null;
                if ((tagName === "select" || fieldType === "select") && $field.prop("required")) {
                    if (value === null || value === "" || value === "-1") {
                        isValid = false;
                        $field.closest(".form-group");
                    }
                } else {
                    if (!this.checkValidity() || (!value && value?.trim() === "")) {
                        isValid = false;
                        $field.closest(".form-group");
                    }
                }
            });

            if (isValid) {
                navListItems.addClass('disabled');
                nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            } else {
                // alert("Por favor completa todos los campos requeridos antes de continuar.");
            }
        });

        allBackBtn.click(function() {
            var curStep = $(this).closest("div#" + type_accion + " .setup-content"),
                curStepBtn = curStep.attr("id"),
                nextStepWizard = $('div#' + type_accion + ' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='url']"),
                isValid = true;

            $(".form-group").removeClass("has-error");
            navListItems.addClass('disabled');
            nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
        });

        $('div.setup-panel div a.btn-primary').trigger('click');

        $('#add_contacto').click(function() {
            // aqui agregamos campos extras para agregar contactos
            add_contactos = `
                <div class="card">
                    <div class="card-header" id="heading${num_contactos}">
                        <h5 class="mb-0">
                            <a class="btn btn-link" href="#" data-toggle="collapse" data-target="#collapse${num_contactos}" aria-expanded="true" aria-controls="collapse${num_contactos}">
                            Contacto ${num_contactos}
                            </a>
                        </h5>
                    </div>
                    <div id="collapse${num_contactos}" class="collapse" aria-labelledby="heading${num_contactos}" data-parent="#accordion">
                        <div class="card-body" id="contactos_edit_${num_contactos}">
                            <label class="font-weight-bold" for="nombre_contacto_factura_${num_contactos}">Contacto</label>
                            <input type="text" class="form-control" placeholder="Contacto ${num_contactos}" id="nombre_contacto_factura_${num_contactos}" name="contactos[${num_contactos}][nombre]" required>
                            <div class="form-row mt-3">
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="telefono_contacto_${num_contactos}" class="">Teléfono oficina</label>
                                    <input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_${num_contactos}" name="contactos[${num_contactos}][telefono]">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="extension_contacto_factura_${num_contactos}" class="">Extensión</label>
                                    <input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_${num_contactos}" name="contactos[${num_contactos}][extension]">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="celular_contacto_factura_${num_contactos}" class="">Teléfono móvil</label>
                                    <input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_${num_contactos}" name="contactos[${num_contactos}][celular]">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="correo_contacto_factura_${num_contactos}">Email de contacto</label>
                                    <input type="email" class="form-control" placeholder="Email de contacto" id="correo_contacto_factura_${num_contactos}" name="contactos[${num_contactos}][email]" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="correo_contacto_2_factura_${num_contactos}">Email de contacto opcional</label>
                                    <input type="text" class="form-control" placeholder="Email de contacto" id="correo_contacto_2_factura_${num_contactos}" name="contactos[${num_contactos}][correo_opcional]">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="comision_contacto_factura_${num_contactos}">Porcentaje de comisión</label>
                                    <div class="input-group mb-3">
                                        <input type="number" class="form-control" aria-label="" placeholder="Porcentaje de comisión de contacto" id="comision_contacto_factura_${num_contactos}" name="contactos[${num_contactos}][comision]" min="0" max="100" value="0">
                                        <div class="input-group-append"><span class="input-group-text">%</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="type_id_${num_contactos+1}">Formatos para enviar</label>
                                    <select class="custom-select" id="type_id_${num_contactos+1}" name="contactos[${num_contactos}][type_id][]" multiple>
                                        <option selected disabled>Selecciona un formato a enviar...</option>
                                        ${contact_types.map(type => `<option value="${type.id}">${type.type}</option>`).join('')}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                $('#contactos').append(add_contactos);

                $(`#type_id_${num_contactos+1}`).select2({
                    placeholder: "Selecciona uno o más formatos",
                    width: "100%"
                });

                // aqui agregamos las validaciones a contactos
                if (window.jQuery || jQuery) {
                    // validacion de campos requeridos
                    $(`#nombre_contacto_factura_${num_contactos}`).rules("add", {
                        required: true,
                        minlength: 3,
                        maxlength: 50,
                        normalizer: v => $.trim(v),
                        messages: {
                            required: "* Ingresa el nombre del contacto.",
                            minlength: "El nombre debe tener al menos 3 caracteres.",
                            maxlength: "El nombre no debe ser mayor a 50 caracteres.",
                        }
                    });
                    $(`#telefono_contacto_${num_contactos}`).rules("add", {
                        required: true,
                        minlength: 8,
                        maxlength: 15,
                        messages: {
                            required: "* Ingresa tu número de teléfono.",
                            minlength: "El teléfono debe tener al menos 8 dígitos.",
                            maxlength: "El teléfono no debe ser mayor a 15 dígitos.",
                        }
                    });
                    $(`#correo_contacto_factura_${num_contactos}`).rules("add", {
                        required: true,
                        email: true,
                        minlength: 5,
                        maxlength: 80,
                        messages: {
                            required: "* Ingresa tu correo electrónico.",
                            email: "Ingresa una dirección de correo válida, p. ej. tuNombre@outlook.com",
                            minlength: "Tu correo debe tener al menos 5 caracteres.",
                            maxlength: "Tu correo no debe ser mayor a 80 caracteres.",
                        }
                    });
                    // validacion de campos opcionales
                    $(`#correo_contacto_2_factura_${num_contactos}`).rules("add", {
                        email: true,
                        minlength: 5,
                        maxlength: 80,
                        messages: {
                            email: "Ingresa una dirección de correo válida, p. ej. tuNombre@outlook.com",
                            minlength: "Tu correo debe tener al menos 5 caracteres.",
                            maxlength: "Tu correo no debe ser mayor a 80 caracteres.",
                        }
                    });
                    $(`#comision_contacto_factura_${num_contactos}`).rules("add", {
                        min: 0,
                        max: 100,
                        messages: {
                            min: "El descuento mínimo es 0.",
                            max: "El descuento máximo es 100.",
                        }
                    });
                    validateNumberInput(`telefono_contacto_${num_contactos}`,0,999999999999999,15);
                    validateNumberInput(`extension_contacto_factura_${num_contactos}`,0,999999,6);
                    validateNumberInput(`celular_contacto_factura_${num_contactos}`,0,999999999999999,15);
                    validateNumberInput(`comision_contacto_factura_${num_contactos}`);
                }
                num_contactos += 1;
            });


        // agregamos listener a los input de porcentaje
        validateNumberInput('descuento_factura');
        validateNumberInput('dias_credito', 0, 365, 3);
        validateNumberInput('codigo_postal_factura', 0, 99999, 5);
        // agregamos listener de validacion solo numero a campos de contacto
        validateNumberInput(`telefono_contacto_1`, 0, 999999999999999, 15);
        validateNumberInput(`extension_contacto_factura_1`, 0, 999999, 6);
        validateNumberInput(`celular_contacto_factura_1`, 0, 999999999999999, 15);
        validateNumberInput('comision_contacto_factura_1');

        // Validar solo el campo 'correo' al hacer clic en el botón
        $('#validarCorreo').on('click', function() {
            var esValido = $("#correo").valid(); // <-- valida solo ese campo
            if (esValido) {
                alert("Correo válido.");
            } else {
                alert("Corrige el correo.");
            }
        });
    }

    function actualizarEstatusCreditoCliente(campoModificado = null) {
        const dias = parseInt($('#dias_credito').val() || 0, 10);
        const estatusReal = ($('#estatus_credito').data('estatus-real') || '').trim();

        // Si el backend dijo Suspendido, no lo cambies solo por modificar días
        if (estatusReal === 'Suspendido' && campoModificado === 'dias_credito') {
            $('#estatus_credito').val('Suspendido');
            return;
        }

        // Si sigue viniendo Suspendido y no tienes forma de recalcular deuda real en frontend,
        // mantenlo visualmente suspendido hasta guardar.
        if (estatusReal === 'Suspendido') {
            $('#estatus_credito').val('Suspendido');
            return;
        }

        let estatus = 'Inactivo';

        if (dias > 0) {
            estatus = 'Activo';
        }

        $('#estatus_credito').val(estatus);
    }

    $(document).on('input change', '#dias_credito, #monto_limite_credito, #fecha_limite_credito', function () {
        actualizarEstatusCreditoCliente(this.id);
    });

    $(document).ready(function () {
        actualizarEstatusCreditoCliente();
    });

    var validate_check = function() {
        $("input#datos_facturacion").on('click', function() {
            if ($("input[type=checkbox]").prop('checked') == true) {
                $('div#insert_cliente #nombre_empresa_informe').val($("#nombre_empresa_factura").val());
                $('div#insert_cliente #calle_informe').val($("#calle_factura").val());
                $('div#insert_cliente #numero_exterior_informe').val($("#numero_exterior_factura").val());
                $('div#insert_cliente #numero_interior_informe').val($("#numero_interior_factura").val());
                $('div#insert_cliente #codigo_postal_informe').val($("#codigo_postal_factura").val());
                $('div#insert_cliente #id_estado_informe').val($("#id_estado_factura").val());
                $('div#insert_cliente #colonia_informe').val($("#colonia_factura").val());
                $('div#insert_cliente #delegacion_informe').val($("#delegacion_factura").val());
                $("div#insert_cliente #parent-selector :input").attr("readonly", true);
            } else if ($("input[type=checkbox]").prop('checked') == false) {
                $("div#insert_cliente #parent-selector :input").attr("readonly", false);
                $('div#insert_cliente #nombre_empresa_informe').val("");
                $('div#insert_cliente #calle_informe').val("");
                $('div#insert_cliente #numero_exterior_informe').val("");
                $('div#insert_cliente #numero_interior_informe').val("");
                $('div#insert_cliente #codigo_postal_informe').val("");
                $('div#insert_cliente #id_estado_informe').val("");
                $('div#insert_cliente #colonia_informe').val("");
                $('div#insert_cliente #delegacion_informe').val("");
            }
        });
    }

    var validate_check_edit = function() {
        $("input#datos_facturacion").on('click', function() {
            if ($("input[type=checkbox]").prop('checked') == true) {
                $('div#edit_cliente #nombre_empresa_informe').val($("#nombre_empresa_factura").val());
                $('div#edit_cliente #calle_informe').val($("#calle_factura").val());
                $('div#edit_cliente #numero_exterior_informe').val($("#numero_exterior_factura").val());
                $('div#edit_cliente #numero_interior_informe').val($("#numero_interior_factura").val());
                $('div#edit_cliente #codigo_postal_informe').val($("#codigo_postal_factura").val());
                $('div#edit_cliente #id_estado_informe').val($("#id_estado_factura").val());
                $('div#edit_cliente #colonia_informe').val($("#colonia_factura").val());
                $('div#edit_cliente #delegacion_informe').val($("#delegacion_factura").val());
                $("div#edit_cliente #parent-selector :input").attr("readonly", true);
            } else if ($("input[type=checkbox]").prop('checked') == false) {
                $("div#edit_cliente #parent-selector :input").attr("readonly", false);
                $('div#edit_cliente #nombre_empresa_informe').val("");
                $('div#edit_cliente #calle_informe').val("");
                $('div#edit_cliente #numero_exterior_informe').val("");
                $('div#edit_cliente #numero_interior_informe').val("");
                $('div#edit_cliente #codigo_postal_informe').val("");
                $('div#edit_cliente #id_estado_informe').val("");
                $('div#edit_cliente #colonia_informe').val("");
                $('div#edit_cliente #delegacion_informe').val("");
            }
        });
    }

    $('#ModalEditCliente').on('show.bs.modal', function() {
        $('#id_clnt').val(id_cliente);
        $(".liveSearchJquery ").select2({
            id: '-1',
            text: "--Seleccione--",
            placeholder: "--Seleccione--",
            width: "100%"
        });

        $(".selectNotSearch").select2({
            id: '-1',
            text: "--Seleccione--",
            placeholder: "--Seleccione--",
            width: "100%",
            minimumResultsForSearch: Infinity
        });

        //updateSelectRegimen();

        if (resultData['id_estado_factura'] == 33) {
            otro_estado(33);
        }
        $("#ModalEditCliente :input").each(function() {
            input = $(this).attr('id');
            if (input) {
                if (input in resultData) {
                    if (input == "modelo" && resultData[input] == 0) {
                        $('#ModalEditCliente #' + input).prop("checked", false);
                    } else if (input == "marca" && resultData[input] == 0) {
                        $('#ModalEditCliente #' + input).prop("checked", false);
                    } else if (input == "norma" && resultData[input] == 0) {
                        $('#ModalEditCliente #' + input).prop("checked", false);
                    } else if (input == "producto" && resultData[input] == 0) {
                        $('#ModalEditCliente #' + input).prop("checked", false);
                    } else if (input == "direccion_mayus") {
                        if (resultData[input] == 0) {
                            $('#ModalEditCliente #' + input).prop("checked", false);
                        } else {
                            $('#ModalEditCliente #' + input).prop("checked", true);
                        }
                    } else if (input == "id_tipo_persona") {
                        if (resultData[input]) {
                            $('#id_tipo_persona').val(resultData[input]); // Select the option with a value of '1'
                            $('#id_tipo_persona').trigger('change'); // Notify any JS components that the value changed
                        }
                    } else if (input == "idRegimenFiscal") {
                        if (resultData[input]) {
                            updateSelectRegimen(resultData[input]);
                        }
                    } else {
                        $('#ModalEditCliente #' + input).val(resultData[input]);
                    }
                    //
                    if (input == "id_cliente_tipo") {
                        if (resultData[input] == '1') {
                            if (!($('.change_gestor').attr('hidden'))) {
                                $('.change_gestor').attr('hidden', 'true');
                            }
                            $('.change_directo').removeAttr('hidden');
                        } else if (resultData[input] == '2') {
                            if (!($('.change_directo').attr('hidden'))) {
                                $('.change_directo').attr('hidden', 'true');
                            }
                            $('.change_gestor').removeAttr('hidden');
                        }
                    }
                }
            }
        });
        $('#contactos_edit').html('');
        contactos_edit = `<div id="accordion">`;
        for (i = 0;
            (resultData['contactos'].length) > i; i++) {
            contactos_edit += `
                    <div class="card">
                        <div class="card-header" id="heading${i}">
                            <h5 class="mb-0">
                                <a class="btn btn-link" href="#" data-toggle="collapse" data-target="#collapse${i}" aria-expanded="true" aria-controls="collapse${i}">
                                Contacto ${i+1}
                                </a>
                            </h5>
                        </div>

                        <div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#accordion">
                            <div class="card-body" id="contactos_edit_${i}">
                            </div>
                        </div>
                    </div>`;
        }
        contactos_edit += `</div>`;

            $('#contactos_edit').html(contactos_edit);
            $('#rep_edit').html('');

            for(i = 0; (resultData['contactos'].length) > i; i++){
                let nombre_contacto = resultData['contactos'][i]['nombre_contacto'] == null || resultData['contactos'][i]['nombre_contacto'] == 'null' ? '' : resultData['contactos'][i]['nombre_contacto'];
                let tel = resultData['contactos'][i]['telefono'] == null || resultData['contactos'][i]['telefono'] == 'null' ? '' : resultData['contactos'][i]['telefono'];
                let extension = resultData['contactos'][i]['extension'] == null || resultData['contactos'][i]['extension'] == 'null' ? '' : resultData['contactos'][i]['extension'];
                let celular = resultData['contactos'][i]['celular'] == null || resultData['contactos'][i]['celular'] == 'null' ? '' : resultData['contactos'][i]['celular'];
                let correo = resultData['contactos'][i]['correo'] == null || resultData['contactos'][i]['correo'] == 'null' ? '' : resultData['contactos'][i]['correo'];
                let correo_opcional = resultData['contactos'][i]['correo_opcional'] == null || resultData['contactos'][i]['correo_opcional'] == 'null' ? '' : resultData['contactos'][i]['correo_opcional'];
                let formatosSeleccionados = [];

            try {
                let tmp = JSON.parse(resultData['contactos'][i]['type_id']);

                if (Array.isArray(tmp)) {
                    formatosSeleccionados = tmp.map(String);
                }

            } catch (e) {
                formatosSeleccionados = [];
            }

                add_contactos = `
                <input type="text" class="form-control" id="id_cliente_contacto_factura_${i+1}" name="contactos[${num_contactos}][id_contacto_factura]" value="${resultData['contactos'][i]['id_cliente_contacto_factura']}" hidden>
                <label class="font-weight-bold" for="nombre_contacto_factura_${i+1}">Contacto</label>
                <input type="text" class="form-control" placeholder="Contacto ${i+1}" id="nombre_contacto_factura_${i+1}" name="contactos[${num_contactos}][nombre]" value="${nombre_contacto}" required>
                <div class="form-row mt-3">
                    <div class="form-group col-md-4">
                        <label class="font-weight-bold" for="telefono_contacto_${i+1}" class="">Teléfono oficina</label>
                        <input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_${i+1}" name="contactos[${num_contactos}][telefono]" value="${tel}" required>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="font-weight-bold" for="extension_contacto_factura_${i+1}" class="">Extensión</label>
                        <input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_${i+1}" name="contactos[${num_contactos}][extension]" value="${extension}">
                    </div>
                    <div class="form-group col-md-4">
                        <label class="font-weight-bold" for="celular_contacto_factura_${i+1}" class="">Teléfono móvil</label>
                        <input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_${i+1}" name="contactos[${num_contactos}][celular]" value="${celular}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label class="font-weight-bold" for="correo_contacto_factura_${i+1}">Email de contacto</label>
                        <input type="email" class="form-control" placeholder="Email de contacto" id="correo_contacto_factura_${i+1}" name="contactos[${num_contactos}][email]" value="${correo}" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label class="font-weight-bold" for="correo_contacto_2_factura_${i+1}">Email de contacto opcional</label>
                        <input type="text" class="form-control" placeholder="Email de contacto" id="correo_contacto_2_factura_${i+1}" name="contactos[${num_contactos}][correo_opcional]" value="${correo_opcional}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label class="font-weight-bold" for="comision_contacto_factura_${i+1}">Porcentaje de comisión (%)</label>
                        <input type="number" class="form-control" aria-label="" placeholder="Porcentaje de comisión de contacto" id="comision_contacto_factura_${i+1}" name="contactos[${num_contactos}][comision]" min="0" max="100" value="${resultData['contactos'][i]['comision']}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label class="font-weight-bold" for="type_id_${i+1}">Formatos para enviar</label>
                        <select class="custom-select" id="type_id_${i+1}" name="contactos[${num_contactos}][type_id][]" multiple>
                            ${contact_types.map(type => `
                        <option value="${type.id}"
                            ${formatosSeleccionados.includes(String(type.id)) ? 'selected' : ''}>
                            ${type.type}
                        </option>
                    `).join('')}
                    </select>

                    </div>
                </div>
                <div class="form-check text-right">
                    <input class="form-check-input" type="checkbox" value="1" id="delete_${i+1}" name="contactos[${num_contactos}][delete]">
                    <label class="form-check-label" for="delete_${i+1}">
                        Selecciona para eliminar contacto
                    </label>
                </div>`;

                $('#contactos_edit_'+i).append(add_contactos);

                $(`#type_id_${i+1}`).select2({
                    placeholder: "Selecciona uno o más formatos",
                    width: "100%"
                });
                // aqui agregamos las validaciones a contactos
                if (window.jQuery || jQuery) {
                    // validacion de campos requeridos
                    $(`#nombre_contacto_factura_${num_contactos}`).rules("add", {
                        required: true,
                        minlength: 3,
                        maxlength: 50,
                        normalizer: v => $.trim(v),
                        messages: {
                            required: "* Ingresa el nombre del contacto.",
                            minlength: "El nombre debe tener al menos 3 caracteres.",
                            maxlength: "El nombre no debe ser mayor a 50 caracteres.",
                        }
                    });
                    $(`#telefono_contacto_${num_contactos}`).rules("add", {
                        required: true,
                        minlength: 8,
                        maxlength: 15,
                        messages: {
                            required: "* Ingresa tu número de teléfono.",
                            minlength: "El teléfono debe tener al menos 8 dígitos.",
                            maxlength: "El teléfono no debe ser mayor a 15 dígitos.",
                        }
                    });
                    $(`#correo_contacto_factura_${num_contactos}`).rules("add", {
                        required: true,
                        email: true,
                        minlength: 5,
                        maxlength: 80,
                        messages: {
                            required: "* Ingresa tu correo electrónico.",
                            email: "Ingresa una dirección de correo válida, p. ej. tuNombre@outlook.com",
                            minlength: "Tu correo debe tener al menos 5 caracteres.",
                            maxlength: "Tu correo no debe ser mayor a 80 caracteres.",
                        }
                    });
                    // validacion de campos opcionales
                    $(`#correo_contacto_2_factura_${num_contactos}`).rules("add", {
                        email: true,
                        minlength: 5,
                        maxlength: 80,
                        messages: {
                            email: "Ingresa una dirección de correo válida, p. ej. tuNombre@outlook.com",
                            minlength: "Tu correo debe tener al menos 5 caracteres.",
                            maxlength: "Tu correo no debe ser mayor a 80 caracteres.",
                        }
                    });
                    $(`#comision_contacto_factura_${num_contactos}`).rules("add", {
                        min: 0,
                        max: 100,
                        messages: {
                            min: "El descuento mínimo es 0.",
                            max: "El descuento máximo es 100.",
                        }
                    });
                    validateNumberInput(`telefono_contacto_${num_contactos}`,0,999999999999999,15);
                    validateNumberInput(`extension_contacto_factura_${num_contactos}`,0,999999,6);
                    validateNumberInput(`celular_contacto_factura_${num_contactos}`,0,999999999999999,15);
                    validateNumberInput(`comision_contacto_factura_${num_contactos}`);
                }
                num_contactos++;
            }
            // ===============================
            // Marcar servicios sin descuento
            // ===============================
            if (serviciosSinDescuento.length > 0) {

                let valores = serviciosSinDescuento.map(String);

                $('#edit_cliente select[name="precios_sin_descuento[]"]')
                    .val(valores)
                    .trigger('change');

            }

            if (resultData['estatus_credito']) {
                $('#ModalEditCliente #estatus_credito')
                    .val(resultData['estatus_credito'])
                    .data('estatus-real', resultData['estatus_credito']);
            }
    });

    //funcion para cargar roles
    function cargarEjecutivosSC(idSeleccionado = null) {
        $.ajax({
            url: 'cliente_controller/ejecutivos_sc',
            type: 'GET',
            success: function(response) {
                if (!response.success) return;

                let select = $('#id_usuario_sc');
                if (!select.length) return;

                select.empty();
                select.append('<option value="">Seleccione</option>');

                response.data.forEach(item => {
                    let selected = false;

                    if (
                        idSeleccionado !== null &&
                        idSeleccionado !== '' &&
                        idSeleccionado !== 0 &&
                        parseInt(idSeleccionado) === parseInt(item.id_usuario)
                    ) {
                        selected = true;
                    }

                    select.append(
                        new Option(item.nombre, item.id_usuario, selected, selected)
                    );
                });

                //
                select.val(idSeleccionado || '').trigger('change');
            }
        });
    }



    $('#ModalCliente').on('hide.bs.modal', function() {
        $('div#insert_cliente').html('');
    });

    $('#ModalEditCliente').on('hide.bs.modal', function() {
        $('div#edit_cliente').html('');
        $('#id_cliente_factura').val('');
        $('#id_cliente_informe').val('');
    });

    async function activateReportClient(check, id_cliente_informe) {
        const confirmado = await showConfirmModal(`¿Seguro que deseas ${check.checked ? 'activar' : 'desactivar'} este registro?`);
        if (confirmado) {
            showLoader();
            $.ajax({
                url: "{{$baseUrl}}/clientes/informe/active",
                method: "POST",
                data: {
                    'id_cliente_informe': id_cliente_informe,
                    'active': check.checked ? 1 : 0,
                    '_token': _token = $('input[name="_token"]').val()
                },
                success: function(response) {
                    showAlert(response.message, 'success');
                    if (response.success) {
                        hideLoader();
                        window.location.reload();
                    }
                },
                error: function(xhr, status, error) {
                    hideLoader();
                    window.location.reload();
                }
            });
        } else {
            check.checked = !check.checked;
        }
    }

    async function activateBillingClient(check, id_cliente_factura) {
        const confirmado = await showConfirmModal(`¿Seguro que deseas ${check.checked ? 'activar' : 'desactivar'} este registro?`);
        if (confirmado) {
            showLoader();
            $.ajax({
                url: "{{$baseUrl}}/clientes/factura/active",
                method: "POST",
                data: {
                    'id_cliente_factura': id_cliente_factura,
                    'active': check.checked ? 1 : 0,
                    '_token': _token = $('input[name="_token"]').val()
                },
                success: function(response) {
                    showAlert(response.message, 'success');
                    if (response.success) {
                        hideLoader();
                        window.location.reload();
                    }
                },
                error: function(xhr, status, error) {
                    hideLoader();
                    window.location.reload();
                }
            });
        } else {
            check.checked = !check.checked;
        }
    }

    /* funcion para validar existencia del cliente */
    function validateReportClient() {
        let isValid = $(`#crear_cliente_informe`).valid();
        if (!isValid) return;
        showLoader();
        $.ajax({
            url: "{{$baseUrl}}/clientes/informe/exists",
            method: "POST",
            data: {
                'nombre_empresa': $(`#nombre_empresa_informe`).val(),
                '_token': _token = $('input[name="_token"]').val()
            },
            success: async function(response) {
                if (!response.success) {
                    hideLoader();
                    const confirmado = await showConfirmModal(`${response.message}, Al confirmar los otros clientes se desactivaran y solo este quedara activo ¿Desea continuar?`);
                    if (confirmado) {
                        $(`#crear_cliente_informe`).submit();
                    }
                } else {
                    $(`#crear_cliente_informe`).submit();
                }
            },
            error: function(xhr, status, error) {
                hideLoader();
            }
        });
    }

    function validateBillingClient() {
        let isValid = $(`#nuevo_cliente`).valid();
        if (!isValid) return;
        showLoader();
        $.ajax({
            url: "{{$baseUrl}}/clientes/factura/exists",
            method: "POST",
            data: {
                'nombre_factura': $(`#nombre_factura`).val(),
                'rfc_factura': $(`#rfc_factura`).val(),
                '_token': _token = $('input[name="_token"]').val()
            },
            success: async function(response) {
                if (!response.success) {
                    hideLoader();
                    const confirmado = await showConfirmModal(`${response.message}, Al confirmar los otros clientes se desactivaran y solo este quedara activo ¿Desea continuar?`);
                    if (confirmado) {
                        $(`#nuevo_cliente`).submit();
                    }
                } else {
                    $(`#nuevo_cliente`).submit();
                }
            },
            error: function(xhr, status, error) {
                hideLoader();
            }
        });
    }
</script>
@include('Clientes.delete_modal')
<script>
    $(document).on('click', '.delete_cliente', function() {
        var id_cliente = $(this).attr('data-id_cliente');
        var nombre_cliente = $(this).attr('data-nombre_cliente');
        var rfc_cliente = $(this).attr('data-rfc_cliente');
        $('#id_clnt_destroy').val(id_cliente);
        $('#nombre_clnt').html(nombre_cliente);
        $('#rfc_clnt').html(rfc_cliente);
        $('#delete_cliente_modal').modal('show');
    });
</script>

@include('Clientes.empresas_gestor_modal')
<script>
    let resultData = {};
    let serviciosSinDescuento = [];
    let contact_types = @json($contactTypes);
    $(document).ready(function() {
        $('a.empresas_gestor').on('click', function() {
            idCliente = $(this).attr('id');
            id_cliente = $('#' + idCliente).data('id_cliente');
            $('#id_cliente_gestor').val(id_cliente);
            $('#id_cliente_factura_gestor').val(id_cliente);
            permiso_actualizar = $('#' + idCliente).data('permiso_actualizar');
            $.ajax({
                url: "{{url('show_empresas_gestor')}}",
                method: "POST",
                data: {
                    'id_cliente': id_cliente,
                    '_token': _token = $('input[name="_token"]').val()
                },
                success: function(response) {
                    resultData = response.data.empresa_gestor;
                    contactsReport = response.data.contactos;
                    createInvoiceContacts = response.data.contactos ?? [];
                    $('#empresas_gestor_modal').modal('show');
                }
            });
        });
    });
    $('#empresas_gestor_modal').on('show.bs.modal', function() {
        if (permiso_actualizar == 1) {
            tabla_empresas = "<table class='ui celled table unstackable'><thead><tr><th class='text-center'>Razón social</th><th class='text-center collapsing'>Acciones</th></tr></thead><tbody>";
            if (resultData.length > 0) {
                $.each(resultData, function(key, value_empresas_gestor) {
                    tabla_empresas += "<tr><td>" + value_empresas_gestor['nombre_empresa'] + "</td><td><div class='ui tiny icon buttons'><a class='ui button secondary unlink_empresa' data-id_empresa='" + value_empresas_gestor['id_empresa'] + "' data-nombre_empresa='" + value_empresas_gestor['nombre_empresa'] + "' data-id_cliente='" + value_empresas_gestor['id_cliente'] + "'><i class='unlink icon'></i></a></div></td></tr>";
                });
            } else {
                tabla_empresas += "<tr><td class='text-center' colspan='8'>No se encontraron registros</td></tr>"
            }
            tabla_empresas += "</tbody></table>";
            $('#empresas_de_gestores').html(tabla_empresas);
        } else {
            tabla_empresas = "<table class='ui celled table unstackable'><thead><tr><th class='text-center'>Razón social</th><th class='text-center collapsing'>Acciones</th></tr></thead><tbody>";
            if (resultData.length > 0) {
                $.each(resultData, function(key, value_empresas_gestor) {
                    tabla_empresas += "<tr><td>" + value_empresas_gestor['nombre_empresa'] + "</td><td><div class='ui tiny icon buttons'><a class='ui button secondary unlink_empresa' data-id_empresa='" + value_empresas_gestor['id_empresa'] + "' data-nombre_empresa='" + value_empresas_gestor['nombre_empresa'] + "' data-id_cliente='" + value_empresas_gestor['id_cliente'] + "'><i class='unlink icon'></i></a></div></td></tr>";
                });
            } else {
                tabla_empresas += "<tr><td class='text-center' colspan='8'>No se encontraron registros</td></tr>"
            }
            tabla_empresas += "</tbody></table>";
            $('#empresas_de_gestores').html(tabla_empresas);
        }

        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);


    });
</script>
<script>
    $(document).ready(function() {
        $('#new_empresa').click(function() {
            $('#Modal_nueva_empresa').modal('show');
        });
    });

    $('#Modal_nueva_empresa').on('show.bs.modal', function() {
        initFormInfClient("crear_cliente_informe");
        singleAddress(false, 'Modal_nueva_empresa');
    });
</script>
@include('Clientes.unlink_empresa_modal')
<script>
    $(document).on('click', '.unlink_empresa', function() {
        var id_empresa = $(this).attr('data-id_empresa');
        var nombre_empresa = $(this).attr('data-nombre_empresa');
        var id_cliente = $(this).attr('data-id_cliente');
        $('#id_empresa_unlink').val(id_empresa);
        $('#id_cliente_unlink').val(id_cliente);
        $('#nombre_empresa').html(nombre_empresa);
        $('#unlink_empresa_modal').modal('show');
    });
</script>
@include('Clientes.modify_empresa_modal')
<script>

var clienteInforme = {};
var contactsReport = [];
var numContactReports = 1;
var id_empresa = null;


/* ===========================
   BORRAR CAMPOS
=========================== */

function delete_representante(num){
    $(`#representante_legal_informe_${num}`).rules("remove");
    $(`#representante_legal_informe_content_${num}`).remove();
}

function delete_tramitador(num){
    $(`#tramitador_${num}`).rules("remove");
    $(`#tramitador_content_${num}`).remove();
}


/* ===========================
   CLICK EDITAR INFORME
=========================== */

$(document).on('click','.edit_modify_empresa_modal_legacy',function(){

    showLoader();

    $('#representantes').html('');
    $('#tramitadores').html('');

    numContactReports = 1;

    id_empresa = $(this).data('id_empresa');


    $.ajax({

        url: "{{url('show_edit_empresas')}}",
        method: "POST",

        data:{
            id_empresa: id_empresa,
            _token: $('input[name="_token"]').val()
        },

        success:function(result){

            console.log('FACTURAS:', result.data.facturas);

            hideLoader();

            if(!result || !result.data){
                alert('Error al cargar datos');
                return;
            }

            clienteInforme = result.data.report;
            $('#id_edit_empresa_modify').val(clienteInforme.id_cliente_informe);

            contactsReport = result.data.contacts || [];

            let facturas       = result.data.facturas || [];
            let facturaDefault = result.data.factura_default || null;
            $('#id_cliente_factura_actual').val(facturaDefault);



            // Mostrar modal
            $('#Modal_edit_empresa').modal('show');

            // Render select facturas
            renderFacturaSelect(facturas,facturaDefault);

            // Render tramitadores
            renderTramitadores(contactsReport);
        },

        error:function(){
            hideLoader();
            alert('Error AJAX');
        }

    });

});


/* ===========================
   SELECT FACTURAS
=========================== */

function renderFacturaSelect(facturas,facturaDefault){

    let container = $('#factura_select_container');
    let select    = $('#select_factura_informe');

    if(!facturas || facturas.length <= 1){
        $('#factura_select_container').hide();
        return;
    }

    if(!container.length) return;

    select.empty();


    // Solo una factura
    if(facturas.length <= 1){
        container.hide();
        return;
    }

    container.show();

    select.append('<option disabled>Seleccione empresa factura</option>');

    facturas.forEach(f => {

        let selected = f.id_cliente_factura == facturaDefault ? 'selected' : '';

        select.append(`
            <option value="${f.id_cliente_factura}" ${selected}>
                ${f.cliente_factura?.nombre_empresa || 'Empresa '+f.id_cliente_factura}
            </option>
        `);

    });

}


/* ===========================
   CAMBIO FACTURA
=========================== */

$(document).on('change','#select_factura_informe_legacy',function(){

    let facturaId = $(this).val();
    let informeId = clienteInforme.id_cliente_informe;

    if(!facturaId) return;
    // Actualizar factura actual
    $('#id_cliente_factura_actual').val(facturaId);


    showLoader();

    $.ajax({

        url: "{{url('clientes/informe/contacts_factura')}}",
        method: "POST",

        data:{
            id_cliente_factura: facturaId,
            id_cliente_informe: informeId,
            _token: $('input[name="_token"]').val()
        },

        success:function(res){

            hideLoader();

            contactsReport = res.data || [];

            renderTramitadores(contactsReport);
        },

        error:function(){
            hideLoader();
            alert('Error al cargar contactos');
        }

    });

});


/* ===========================
   RENDER TRAMITADORES
=========================== */

function renderTramitadores(data){

    if(!data || data.length === 0){
        $('#tramitadores').html('<p class="text-muted">Sin contactos disponibles</p>');
        return;
    }

    $('#tramitadores').html('');


    let seleccionados = data.filter(c => parseInt(c.id_selected) === 1);

    if(seleccionados.length === 0) return;

    numContactReports = 1;


    seleccionados.forEach(t => {

        $('#tramitadores').append(`

            <div class="w-100 d-flex row ml-0 mr-0 mb-2"
                 id="tramitador_content_${numContactReports}">

                <div class="w-90 d-flex flex-column">

                    <select class="custom-select"
                        id="tramitador_${numContactReports}"
                        name="tramitadores[${numContactReports}][id_cliente_contacto_factura]">

                        <option disabled>Selecciona un tramitador</option>

                        ${data.map(c => `
                            <option value="${c.id_cliente_contacto_factura}"
                                ${t.id_cliente_contacto_factura == c.id_cliente_contacto_factura ? 'selected' : ''}>
                                ${c.nombre_contacto}, ${c.correo}, ${c.telefono}
                            </option>
                        `).join('')}

                    </select>

                </div>

                <div class="w-10 fx-center-end flex-row ui tiny icon buttons">

                    <button type="button"
                        class="ui button red"
                        onclick="delete_tramitador(${numContactReports})">

                        <i class="trash icon"></i>

                    </button>

                </div>

            </div>

        `);


        // Validación
        $(`#tramitador_${numContactReports}`).rules("add", {
            required: true,
            messages:{
                required: "* Seleccione un tramitador."
            }
        });

        numContactReports++;

    });

}


/* ===========================
   AGREGAR TRAMITADOR
=========================== */

$(document).on('click','#add_tramitador', async ()=>{

    let selectedIds = [];

    $('#tramitadores select').each(function(){

        if($(this).val()){
            selectedIds.push(String($(this).val()));
        }

    });


    let disponibles = contactsReport.filter(c =>
        !selectedIds.includes(String(c.id_cliente_contacto_factura))
    );


    if(disponibles.length === 0){

        await showConfirmModal(
            'No hay más tramitadores para agregar.',
            'Mensaje',
            'Aceptar'
        );

        return;
    }


    let index = Date.now();


    $('#tramitadores').append(`

        <div class="w-100 d-flex row mb-2"
             id="tramitador_content_${index}">

            <div class="w-90">

                <select class="custom-select"
                    name="tramitadores[${index}][id_cliente_contacto_factura]">

                    <option selected disabled>Selecciona un tramitador</option>

                    ${disponibles.map(c => `
                        <option value="${c.id_cliente_contacto_factura}">
                            ${c.nombre_contacto}, ${c.telefono}, ${c.correo}
                        </option>
                    `).join('')}

                </select>

            </div>

            <div class="w-10">

                <button type="button"
                    class="ui button red"
                    onclick="$('#tramitador_content_${index}').remove()">

                    <i class="trash icon"></i>

                </button>

            </div>

        </div>

    `);

});


/* ===========================
   REFRESH SELECTS
=========================== */

function refreshTramitadorSelects(){

    let selectedIds = [];


    $('#tramitadores select').each(function(){

        if($(this).val()){
            selectedIds.push(String($(this).val()));
        }

    });


    $('#tramitadores select').each(function(){

        let current = $(this).val();
        let select  = $(this);

        select.html('<option disabled>Selecciona un tramitador</option>');


        contactsReport.forEach(c => {

            if(
                !selectedIds.includes(String(c.id_cliente_contacto_factura))
                || String(c.id_cliente_contacto_factura) === String(current)
            ){

                let sel = String(c.id_cliente_contacto_factura) === String(current)
                    ? 'selected'
                    : '';

                select.append(`
                    <option value="${c.id_cliente_contacto_factura}" ${sel}>
                        ${c.nombre_contacto}, ${c.telefono}, ${c.correo}
                    </option>
                `);

            }

        });

    });

}


// Actualizar combos
$(document).on('change','#tramitadores select',function(){
    refreshTramitadorSelects();
});

$(document).on('click','#tramitadores button',function(){
    setTimeout(()=>refreshTramitadorSelects(),50);
});

</script>

<script>
var createInvoiceContacts = typeof createInvoiceContacts !== 'undefined' ? createInvoiceContacts : [];
var reportInvoiceState = {
    create: {
        facturas: [],
        contactsByFactura: {},
        currentFacturaId: null,
    },
    edit: {
        facturas: [],
        contactsByFactura: {},
        currentFacturaId: null,
    }
};

function escapeReportHtml(value) {
    return $('<div>').text(value ?? '').html();
}

function getReportModalConfig(mode) {
    return mode === 'edit'
        ? {
            container: '#Modal_edit_empresa #tramitadores_edit',
            facturaContainer: '#Modal_edit_empresa #factura_select_container',
            facturaSelect: '#Modal_edit_empresa #select_factura_informe',
            currentFacturaInput: '#Modal_edit_empresa #id_cliente_factura_actual',
        }
        : {
            container: '#Modal_nueva_empresa #tramitadores_create',
        };
}

function resetReportInvoiceState(mode) {
    reportInvoiceState[mode] = {
        facturas: [],
        contactsByFactura: {},
        currentFacturaId: null,
    };

    const config = getReportModalConfig(mode);
    $(config.container).html('');

    if (config.facturaContainer) {
        $(config.facturaContainer).hide();
        $(config.facturaSelect).html('<option selected disabled>Seleccione empresa factura</option>');
    }

    if (config.currentFacturaInput) {
        $(config.currentFacturaInput).val('');
    }
}

function setReportFacturaContacts(mode, facturaId, contacts) {
    reportInvoiceState[mode].contactsByFactura[String(facturaId)] = Array.isArray(contacts) ? contacts : [];
}

function getReportFacturaContacts(mode, facturaId) {
    return reportInvoiceState[mode].contactsByFactura[String(facturaId)] || [];
}

function getReportFacturaName(factura) {
    return factura?.cliente_factura?.nombre_empresa
        || factura?.nombre_empresa
        || `Cliente Factura ${factura.id_cliente_factura}`;
}

function getReportFacturaSection(mode, facturaId) {
    const config = getReportModalConfig(mode);
    return $(config.container).find(`.report-tramitadores-section[data-factura-id="${facturaId}"]`);
}

function getSelectedReportContactIds($section, currentValue = null) {
    const currentString = currentValue !== null ? String(currentValue) : null;
    const selectedIds = [];

    $section.find('.report-tramitador-select').each(function () {
        const value = $(this).val();

        if (!value) {
            return;
        }

        if (currentString !== null && String(value) === currentString) {
            return;
        }

        selectedIds.push(String(value));
    });

    return selectedIds;
}

function syncReportFacturaSelectionState(mode, facturaId) {
    const contacts = getReportFacturaContacts(mode, facturaId);

    if (!contacts.length) {
        return;
    }

    const selectedIds = getSelectedReportContactIds(getReportFacturaSection(mode, facturaId));

    setReportFacturaContacts(mode, facturaId, contacts.map(contacto => {
        return $.extend({}, contacto, {
            id_selected: selectedIds.includes(String(contacto.id_cliente_contacto_factura)) ? 1 : 0
        });
    }));
}

function syncAllReportFacturaSelectionState(mode) {
    reportInvoiceState[mode].facturas.forEach(factura => {
        syncReportFacturaSelectionState(mode, factura.id_cliente_factura);
    });
}

function buildReportTramitadorOptions(mode, facturaId, currentValue = '') {
    const contacts = getReportFacturaContacts(mode, facturaId);
    const $section = getReportFacturaSection(mode, facturaId);
    const currentString = currentValue ? String(currentValue) : '';
    const selectedIds = getSelectedReportContactIds($section, currentString);
    let options = '<option value="">Selecciona un tramitador</option>';

    contacts.forEach(contacto => {
        const contactoId = String(contacto.id_cliente_contacto_factura);

        if (contactoId !== currentString && selectedIds.includes(contactoId)) {
            return;
        }

        const selected = contactoId === currentString ? 'selected' : '';
        const label = [
            contacto.nombre_contacto,
            contacto.correo,
            contacto.telefono
        ].filter(Boolean).join(', ');

        options += `
            <option value="${contactoId}" ${selected}>
                ${escapeReportHtml(label)}
            </option>
        `;
    });

    return options;
}

function toggleReportTramitadorEmptyState(mode, facturaId) {
    const $section = getReportFacturaSection(mode, facturaId);
    const hasRows = $section.find('.report-tramitador-row').length > 0;

    $section.find('.report-tramitadores-empty').toggle(!hasRows);
}

function refreshReportTramitadorSelects(mode, facturaId) {
    const $section = getReportFacturaSection(mode, facturaId);

    $section.find('.report-tramitador-select').each(function () {
        const currentValue = $(this).val() || '';
        $(this).html(buildReportTramitadorOptions(mode, facturaId, currentValue));
    });

    toggleReportTramitadorEmptyState(mode, facturaId);
}

function appendReportTramitadorRow(mode, facturaId, selectedValue = '', rowKey = null) {
    const contacts = getReportFacturaContacts(mode, facturaId);
    const $section = getReportFacturaSection(mode, facturaId);
    const $list = $section.find('.report-tramitadores-list');
    const selectedIds = getSelectedReportContactIds($section);

    if (!selectedValue && selectedIds.length >= contacts.length) {
        return false;
    }

    const safeRowKey = rowKey || `${facturaId}_${Date.now()}_${Math.floor(Math.random() * 1000)}`;

    $list.append(`
        <div class="w-100 d-flex row ml-0 mr-0 mb-2 report-tramitador-row" data-row-key="${safeRowKey}">
            <div class="w-90 d-flex flex-column">
                <select class="custom-select report-tramitador-select"
                    data-mode="${mode}"
                    data-factura-id="${facturaId}"
                    name="tramitadores[${facturaId}][${safeRowKey}][id_cliente_contacto_factura]">
                    ${buildReportTramitadorOptions(mode, facturaId, selectedValue)}
                </select>
            </div>
            <div class="w-10 fx-center-end flex-row ui tiny icon buttons">
                <button type="button"
                    class="ui button red btn-remove-report-tramitador"
                    data-mode="${mode}"
                    data-factura-id="${facturaId}">
                    <i class="trash icon"></i>
                </button>
            </div>
        </div>
    `);

    const $newSelect = $list.find('.report-tramitador-select').last();
    if ($newSelect.length && typeof $newSelect.rules === 'function') {
        $newSelect.rules("add", {
            required: true,
            messages: {
                required: "* Seleccione un tramitador."
            }
        });
    }

    refreshReportTramitadorSelects(mode, facturaId);
    return true;
}

function showReportFacturaSection(mode, facturaId) {
    if (!facturaId) {
        return;
    }

    const config = getReportModalConfig(mode);
    reportInvoiceState[mode].currentFacturaId = String(facturaId);
    $(config.container).find('.report-tramitadores-section').hide();
    getReportFacturaSection(mode, facturaId).show();

    if (config.currentFacturaInput) {
        $(config.currentFacturaInput).val(facturaId);
    }
}

function renderReportFacturaSections(mode) {
    const state = reportInvoiceState[mode];
    const config = getReportModalConfig(mode);
    const $container = $(config.container);

    $container.html('');

    if (!state.facturas.length) {
        $container.html('<p class="text-muted">Sin contactos disponibles</p>');
        return;
    }

    state.facturas.forEach(factura => {
        const facturaId = String(factura.id_cliente_factura);
        const facturaName = getReportFacturaName(factura);
        const contacts = getReportFacturaContacts(mode, facturaId);
        const contactosCargados = contacts.length > 0;
        const seleccionados = contacts.filter(contacto => parseInt(contacto.id_selected, 10) === 1);

        $container.append(`
            <div class="report-tramitadores-section mb-3" data-factura-id="${facturaId}" style="display:none;">
                ${contactosCargados ? `<input type="hidden" name="tramitadores[${facturaId}][_sync]" value="${facturaId}">` : ''}
                <div class="mb-2"><strong>${escapeReportHtml(facturaName)}</strong></div>
                <div class="report-tramitadores-list"></div>
                <p class="text-muted report-tramitadores-empty mb-0">Sin tramitadores asignados</p>
            </div>
        `);

        if (seleccionados.length > 0) {
            seleccionados.forEach((contacto, index) => {
                appendReportTramitadorRow(
                    mode,
                    facturaId,
                    contacto.id_cliente_contacto_factura,
                    `${facturaId}_${index + 1}`
                );
            });
        } else if (contacts.length > 0) {
            appendReportTramitadorRow(mode, facturaId);
        }

        toggleReportTramitadorEmptyState(mode, facturaId);
    });

    showReportFacturaSection(
        mode,
        state.currentFacturaId || String(state.facturas[0].id_cliente_factura)
    );
}

function renderReportFacturaSelect(facturas, facturaDefault) {
    const config = getReportModalConfig('edit');
    const $container = $(config.facturaContainer);
    const $select = $(config.facturaSelect);

    $select.html('');

    if (!Array.isArray(facturas) || facturas.length <= 1) {
        $container.hide();
        return;
    }

    $container.show();
    $select.append('<option disabled>Seleccione empresa factura</option>');

    facturas.forEach(factura => {
        const selected = String(factura.id_cliente_factura) === String(facturaDefault) ? 'selected' : '';
        $select.append(`
            <option value="${factura.id_cliente_factura}" ${selected}>
                ${escapeReportHtml(getReportFacturaName(factura))}
            </option>
        `);
    });

    $select.val(facturaDefault);
}

function loadEditReportFacturaContacts(facturaId) {
    const informeId = $('#id_edit_empresa_modify').val();

    if (!facturaId || !informeId) {
        return;
    }

    reportInvoiceState.edit.currentFacturaId = String(facturaId);
    syncAllReportFacturaSelectionState('edit');
    showLoader();

    $.ajax({
        url: "{{url('clientes/informe/contacts_factura')}}",
        method: "POST",
        data: {
            id_cliente_factura: facturaId,
            id_cliente_informe: informeId,
            _token: $('input[name="_token"]').val()
        },
        success: function(result) {
            hideLoader();

            setReportFacturaContacts(
                'edit',
                facturaId,
                Array.isArray(result?.data) ? result.data : []
            );

            renderReportFacturaSections('edit');
            showReportFacturaSection('edit', facturaId);
        },
        error: function() {
            hideLoader();
            alert('Error al cargar contactos');
        }
    });
}

function prepareCreateReportTramitadores() {
    resetReportInvoiceState('create');

    const facturaId = $('#id_cliente_factura_gestor').val();

    if (!facturaId) {
        $('#Modal_nueva_empresa #tramitadores_create').html('<p class="text-muted">Sin contactos disponibles</p>');
        return;
    }

    reportInvoiceState.create.facturas = [{
        id_cliente_factura: facturaId,
        nombre_empresa: '',
    }];
    reportInvoiceState.create.currentFacturaId = String(facturaId);
    setReportFacturaContacts('create', facturaId, createInvoiceContacts);
    renderReportFacturaSections('create');
}

$(document).on('click', '.edit_modify_empresa_modal', function () {
    showLoader();

    $('#Modal_edit_empresa #representantes').html('');
    resetReportInvoiceState('edit');

    id_empresa = $(this).data('id_empresa');

    $.ajax({
        url: "{{url('show_edit_empresas')}}",
        method: "POST",
        data: {
            id_empresa: id_empresa,
            _token: $('input[name="_token"]').val()
        },
        success: function(result) {
            hideLoader();

            if (!result || !result.data) {
                alert('Error al cargar datos');
                return;
            }

            clienteInforme = result.data.report || {};
            $('#id_edit_empresa_modify').val(clienteInforme.id_cliente_informe);

            const facturas = Array.isArray(result.data.facturas) ? result.data.facturas : [];
            const facturaDefault = result.data.factura_default || (facturas[0]?.id_cliente_factura ?? null);

            reportInvoiceState.edit.facturas = facturas;
            reportInvoiceState.edit.currentFacturaId = facturaDefault ? String(facturaDefault) : null;

            facturas.forEach(factura => {
                setReportFacturaContacts('edit', factura.id_cliente_factura, []);
            });

            if (facturaDefault) {
                setReportFacturaContacts(
                    'edit',
                    facturaDefault,
                    Array.isArray(result.data.contacts) ? result.data.contacts : []
                );
            }

            $('#Modal_edit_empresa').modal('show');
            renderReportFacturaSelect(facturas, facturaDefault);
            renderReportFacturaSections('edit');
        },
        error: function() {
            hideLoader();
            alert('Error AJAX');
        }
    });
});

$(document).on('change', '#select_factura_informe', function () {
    loadEditReportFacturaContacts($(this).val());
});

$(document).on('click', '#add_tramitador_create, #add_tramitador_edit', async function () {
    const mode = this.id.endsWith('_edit') ? 'edit' : 'create';
    const facturaId = reportInvoiceState[mode].currentFacturaId;
    const contacts = getReportFacturaContacts(mode, facturaId);
    const $section = getReportFacturaSection(mode, facturaId);

    if (!facturaId || !contacts.length) {
        await showConfirmModal(
            'No hay contactos activos disponibles para esta empresa factura.',
            'Mensaje',
            'Aceptar'
        );
        return;
    }

    if (getSelectedReportContactIds($section).length >= contacts.length) {
        await showConfirmModal(
            'No hay mas tramitadores para agregar.',
            'Mensaje',
            'Aceptar'
        );
        return;
    }

    appendReportTramitadorRow(mode, facturaId);
});

$(document).on('change', '.report-tramitador-select', function () {
    const mode = $(this).data('mode');
    const facturaId = $(this).data('factura-id');

    refreshReportTramitadorSelects(mode, facturaId);
    syncReportFacturaSelectionState(mode, facturaId);
});

$(document).on('click', '.btn-remove-report-tramitador', function () {
    const mode = $(this).data('mode');
    const facturaId = $(this).data('factura-id');
    const $row = $(this).closest('.report-tramitador-row');
    const $select = $row.find('.report-tramitador-select');

    if ($select.length && typeof $select.rules === 'function') {
        $select.rules("remove");
    }

    $row.remove();
    refreshReportTramitadorSelects(mode, facturaId);
    syncReportFacturaSelectionState(mode, facturaId);
});

$('#Modal_nueva_empresa').on('show.bs.modal', function() {
    prepareCreateReportTramitadores();
});

$('#Modal_nueva_empresa').on('hidden.bs.modal', function() {
    resetReportInvoiceState('create');
});

$('#Modal_edit_empresa').on('hidden.bs.modal', function() {
    resetReportInvoiceState('edit');
    clienteInforme = {};
    id_empresa = null;
});
</script>


@include('Clientes.notas')
<script>
    var id_cliente = 0;
    var resultData1 = null;

    $(document).ready(function() {
        $(document).on('click', '.nota_usuario', function() {
            id_cliente = $(this).data('id');

            $.ajax({
                url: "show_cliente_notas",
                method: "POST",
                data: {
                    id_cliente: id_cliente,
                    _token: $('input[name="_token"]').val()
                },
                success: function(response) {
                    result = typeof response === 'string' ? JSON.parse(response) : response;
                    resultData1 = result.data;

                    $('#modalNotas').modal('show');
                }
            });
        });
    });

    $('#modalNotas').on('show.bs.modal', function() {
        $('#modal-form-modify input#id_cliente').val(id_cliente);

        $('#modal-form-modify input#id_nota_hidden').remove();

        if (resultData1) {
            $('#modal-form-modify').append(
                '<input type="hidden" class="form-control" id="id_nota_hidden" name="id_nota">'
            );

            $('#id_nota_hidden').val(resultData1.id_nota);
            $('#modal-form-modify #nota').val(resultData1.nota);
        } else {
            $('#modal-form-modify #nota').val('');
        }
    });
</script>
@include('Clientes.delete_modal_informe')
<script>
    $(document).on('click', '.delete_empresa', function() {
        var id_cliente = $(this).data('id_cliente');
        var nombre_cliente = $(this).attr('data-nombre_cliente');
        $('#id_clnt_delete').val(id_cliente);
        $('#nombre_clnt_info').html(nombre_cliente);
        $('#delete_cliente_informe').modal('show');
    });
</script>
{{-- <script src="{{ url('assets/js/utils.js') }}"></script> --}}
<script src="{{ url('assets/js/clientes/index.js?v=1.1') }}"></script>
<script src="{{ url('assets/js/clientes/informe.js') }}"></script>

<script>
    /* ===========================
   AGREGAR REPRESENTANTE
=========================== */

$(document).on('click', '#edit_add_representantes', function() {

    num_representantes++;

    $('#Modal_edit_empresa #representantes').append(`

        <div class="d-flex row ml-0 mr-0"
             id="representante_legal_informe_content_${num_representantes}">

            <div class='w-90 d-flex flex-column'>

                <input type="text"
                       id="representante_legal_informe_${num_representantes}"
                       class="form-control mt-2"
                       placeholder="Representante legal ${num_representantes}"
                       name="representante_legal_informe_${num_representantes}">

            </div>

            <div class='w-10 fx-center-end flex-row ui tiny icon buttons mt-2'>

                <button type="button"
                        class="ui button red"
                        onclick="delete_representante(${num_representantes})">

                    <i class="trash icon"></i>

                </button>

            </div>

        </div>

    `);

});

$(document).on('click', '#add_representantes', function() {

    num_representantes++;

    $('#Modal_nueva_empresa #representantes').append(`

        <div class="d-flex row ml-0 mr-0"
             id="representante_legal_informe_content_${num_representantes}">

            <div class='w-90 d-flex flex-column'>

                <input type="text"
                       id="representante_legal_informe_${num_representantes}"
                       class="form-control mt-2"
                       placeholder="Representante legal ${num_representantes}"
                       name="representante_legal_informe_${num_representantes}">

            </div>

            <div class='w-10 fx-center-end flex-row ui tiny icon buttons mt-2'>

                <button type="button"
                        class="ui button red"
                        onclick="delete_representante(${num_representantes})">

                    <i class="trash icon"></i>

                </button>

            </div>

        </div>

    `);

});
</script>
@endsection