@push('css')
    <link rel="stylesheet" href="{{ asset('/assets/custom/steps/jquery.steps.css') }}" />
    <link rel="stylesheet" href="{{ asset('/assets/custom/select2/css/select2.min.css') }}" />
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #ccc !important;
            border-radius: .375rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #12263f;
            line-height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #12263f;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none;
        }
    </style>
    <style>
        .wizard>.content {
            overflow-x: hidden !important;
            height: 40vh;
        }

        .wizard>.actions>ul>li:nth-child(3)>a {
            background-color: #F2620F !important;
        }

        .docs-links {
            display: none;
        }

        #modalComentarios .modal-header {
            background-color: #fff;
            border-radius: 5px;
        }

        #modalComentarios .modal-content {
            background-color: transparent;
        }

        .container-chats-cards {
            display: flex;
            flex-direction: row;
            max-height: 60vh;
        }

        .chat-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            min-height: 60vh;
        }


        h4 {
            margin: 0;
        }

        .chat-body {
            flex: 1;
            display: flex;
            flex-direction: column;

            padding: 10px 10px 0 10px;
            overflow-y: auto;
        }

        .message {
            margin-bottom: 10px;
            padding: 10px;
            height: min-content;
        }

        .message-nombre {
            font-size: 12px;
            color: black;
            font-weight: bold;
            margin: 0;
        }

        .message-date {
            font-weight: bold;
            font-size: 10px;
            color: #333;
            margin: 5px 0 0 0;
        }

        .incoming .message-date {
            text-align: right;
        }

        .outgoing .message-date {
            text-align: left;
        }

        .incoming {
            background-color: #e1e1e1;
            margin-right: 20px;
            border-radius: 5px 5px 5px 0;
            background-color: #dce8fd;
        }

        .outgoing {
            margin-left: 20px;
            background-color: #f2f2f2;
            text-align: right;
            border-radius: 5px 5px 0 5px;
            background-color: #39afd1;
        }

        .outgoing p {
            color: white;
        }

        .message p {
            margin: 0;
        }

        .chat-footer {
            padding: 10px;
            background-color: #f2f2f2;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: flex-end;
            border-radius: 0 0 15px 15px;
        }

        .chat-footer textarea {
            padding: 5px;
            flex: 1;
            border: none;
            border-radius: 10px;
        }

        .chat-footer textarea:focus {
            border: 2px solid #0d3973 !important;
        }

        .chat-footer button {
            padding: 5px 10px;
            border: none;
            background-color: #39afd1;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            border-radius: 10px;
            height: min-content;
        }

        .chat-footer button:hover {
            background-color: #4285f4;
        }

        @keyframes chatAnimation {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .chat-card .message {
            animation: chatAnimation 0.3s ease-in-out;
            animation-fill-mode: both;
            animation-delay: 0.1s;
        }

        .chat-card .message:nth-child(even) {
            animation-delay: 0.2s;
        }

        .chat-card .message:nth-child(odd) {
            animation-delay: 0.3s;
        }

        #container-docs .col-md-1 {
            min-width: min-content;
        }

        #container-docs .row {
            --bs-gutter-x: 0;
            padding: 5px;
        }
    </style>
@endpush
<div style="height: 100vh;">
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Title -->
                    <h1 class="header-title">
                        Seguimiento de Trámites
                    </h1>
                </div>
                <div class="col-auto">
                    @if (auth()->user()->can('tramites.crear'))
                        <button class="btn btn-primary lift" wire:click="create" id="agregarTramite">
                            <i class="bi bi-clipboard-plus"></i>
                            Agregar trámite
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <livewire:tramites.tramites-table />
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalTramite" tabindex="-1" role="dialog" aria-hidden="true"
        aria-labelledby="myLargeModalLabel" data-bs-focus="false" wire:ignore data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl justify-content-center" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h4>{{ isset($tramite['id']) ? 'Actualizar Trámite' : 'Registrar Trámite' }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="form-group">
                    <form id="tramiteForm" wire:ignore>
                        <!-- Paso 1 -->
                        <h4>Datos Tramites</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tipo_tramite" class="form-label">Tipo de Trámite <span
                                                class="text-danger">*</span></label>
                                        <select wire:model.defer="tramite.tipo_tramite" class="form-select"
                                            id="tipo_tramite" name="tipo_tramite" required>
                                            <option value="">Seleccione una opción</option>
                                            @foreach ($tipoTramites as $tipo)
                                                <option value="{{ $tipo }}">{{ $tipo }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="ejecutivo" class="form-label">Ejecutivo </label>
                                        <input wire:model.defer="tramite.ejecutivo" type="text" class="form-control"
                                            id="ejecutivo" name="ejecutivo" placeholder="Nombre del ejecutivo"
                                            maxlength="120" oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="dependencia" class="form-label">Dependencia </label>
                                        <select wire:model.defer="tramite.dependencia" class="form-select"
                                            id="dependencia" name="dependencia" required>
                                            <option value="">Seleccione una opción</option>
                                            @foreach ($dependencias as $dependencia)
                                                <option value="{{ $dependencia }}">{{ $dependencia }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label">Póliza </label>
                                        <input wire:model.defer="tramite.poliza" type="text" class="form-control"
                                            id="poliza" name="poliza" placeholder="Póliza" maxlength="30">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="contratante" class="form-label">Nombre del Contratante</label>
                                        <input wire:model.defer="tramite.contratante" type="text"
                                            class="form-control" id="contratante" name="contratante"
                                            placeholder="Nombre del contratante" maxlength="120"
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="asegurado" class="form-label">Nombre del Asegurado</label>
                                        <input wire:model.defer="tramite.asegurado" type="text"
                                            class="form-control" id="asegurado" name="asegurado"
                                            placeholder="Nombre del asegurado" maxlength="120"
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                            </div>

                        </section>

                        <h4>Datos Adicionales</h4>
                        <section>
                            {{-- cancelación --}}
                            <div class="form-section" data-section="CANCELACIÓN" style="display: none;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="estatus_tramite" class="form-label">Estatus trámite  <span
                                                class="text-danger">*</span></label>
                                            <select class="form-select" id="estatus_tramite" name="estatus_tramite"
                                                wire:model.defer="tramite.estatus_tramite">
                                                <option value="">Seleccione una opción</option>
                                                @foreach ($estatus as $item)
                                                    <option value="{{ $item }}">{{ $item }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="fecha_cancelacion_compania" class="form-label">Fecha
                                                Cancelación Compañía</label>
                                            <input type="text" class="form-control"
                                                id="fecha_cancelacion_compania" name="fecha_cancelacion_compania"
                                                wire:model.defer="tramite.fecha_cancelacion_compania">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="importe_reserva" class="form-label">Importe de la
                                                Reserva</label>
                                            <input type="text" class="form-control" id="importe_reserva"
                                                name="importe_reserva" wire:model.defer="tramite.importe_reserva">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="colaborador_id" class="form-label input-ignore">Promotor
                                            </label>
                                            <select wire:model="tramite.colaborador_id" name="colaborador_id"
                                                id="colaborador_id" name="colaborador_id" class="form-control">
                                                <option value="">Selecciona un colaborador</option>
                                                @foreach ($colaboradores ?? [] as $id => $nombre)
                                                    <option value="{{ $id }}">{{ $id . ' - ' . $nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ahorro --}}
                            <div class="form-section" data-section="AHORRO" style="display: none;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="importe_ahorro" class="form-label">Importe Ahorro</label>
                                            <input type="text" class="form-control" id="importe_ahorro"
                                                name="importe_ahorro" wire:model.defer="tramite.importte_ahorro">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- dividendos --}}
                            <div class="form-section" data-section="DIVIDENDOS" style="display: none;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="importe_dividendo" class="form-label">Importe
                                                Dividendos</label>
                                            <input type="text" class="form-control" id="importe_dividendo"
                                                name="importe_dividendo" wire:model.defer="tramite.importe_dividendo">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- aclaración --}}
                            <div class="form-section" data-section="ACLARACIONES" style="display: none;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="referencia" class="form-label">Referencia</label>
                                            <input type="text" class="form-control" id="referencia"
                                                name="referencia" wire:model.defer="tramite.referencia"
                                                oninput="this.value = this.value.toUpperCase()">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="importe_total_reembolso" class="form-label">Total
                                                Reembolso</label>
                                            <input type="text" class="form-control" id="importe_total_reembolso"
                                                name="importe_total_reembolso"
                                                wire:model.defer="tramite.importe_total_reembolso">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- endoso --}}
                            <div class="form-section" data-section="ENDOSO" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="tipo_endoso" class="form-label">Tipo Endoso  <span
                                                class="text-danger">*</span></label>
                                            <select class="form-select" name="tipo_endoso"
                                                wire:model.defer="tramite.tipo_endoso" id="tipo_endoso"
                                                >
                                                <option value="">Seleccione una opción</option>
                                                @foreach ($endosos as $item)
                                                    <option value="{{ $item }}">{{ $item }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- otros --}}
                            <div class="form-section" data-section="OTROS" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="tipo_endoso" class="form-label">Tipo Endoso  <span
                                                class="text-danger">*</span></label>
                                            <select class="form-select" name="tipo_endoso"
                                                wire:model.defer="tramite.tipo_endoso" id="tipo_otros"
                                                >
                                                <option value="">Seleccione una opción</option>
                                                @foreach ($otros as $item)
                                                    <option value="{{ $item }}">{{ $item }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3 -->
                        <h4>Fecha</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="vigencia" class="form-label">Vigencia</label>
                                        <input wire:model.defer="tramite.vigencia" type="text"
                                            class="form-control" id="vigencia" name="vigencia">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha_fin_tramite" class="form-label">Fecha Fin Trámite</label>
                                        <input wire:model.defer="tramite.fecha_fin_tramite" type="text"
                                            class="form-control" id="fecha_fin_tramite" name="fecha_fin_tramite">
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4 -->
                        <h4>Comentarios</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha_envio" class="form-label">Fecha Envío</label>
                                        <input wire:model.defer="tramite.fecha_envio" type="text"
                                            class="form-control" id="fecha_envio" name="fecha_envio">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="orden_trabajo" class="form-label">Orden Trabajo</label>
                                        <input type="text" class="form-control" id="orden_trabajo"
                                            name="orden_trabajo" wire:model.defer="tramite.orden_trabajo"
                                            oninput="this.value = this.value.toUpperCase()" maxlength="64">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="comentarios_gnp" class="form-label">Comentarios GNP </label>
                                        <textarea class="form-control" id="comentarios_gnp" name="comentarios_gnp" rows="5"
                                            placeholder="Comenarios GNP" wire:model.defer="tramite.comentarios_gnp"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="row">
                                    <div class="col-md-4 date-comentarios">
                                        <div class="mb-3">
                                            <label for="fecha_registro" class="form-label">Fecha de Registro</label>
                                            <input wire:model.defer="tramite.created_at" type="text"
                                                class="form-control" readonly name="created_at">
                                        </div>
                                    </div>
                                    <div class="col-md-4 date-comentarios">
                                        <div class="mb-3">
                                            <label for="fecha_actualizacion" class="form-label">Fecha de
                                                Actualización</label>
                                            <input wire:model.defer="tramite.updated_at" type="text"
                                                class="form-control" readonly name="updated_at">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 text-comentarios">
                                    <div class="mb-3">
                                        <label for="comentarios_ave" class="form-label">Comentarios AVE </label>
                                        <textarea class="form-control" id="comentarios_ave" name="comentarios_ave" rows="1"
                                            placeholder="Comenatarios AVE"></textarea>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalComentarios" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true" wire:ignore data-bs-focus="false" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="border-radius: 20px 20px 0 0;">
                    <h3>Comentarios <span id="comment-type-header"></span></h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body" style="padding: 0;">
                    <div class="container-chats-cards">
                        <div class="chat-card">
                            <div class="chat-body" id="msgs">
                                @foreach ($comentarios ?? [] as $comentario)
                                    <div class="message outgoing">
                                        <p>{{ $comentario['comentario'] ?? '' }}</p>
                                        <p class="message-date">
                                            {{ date('d/m/Y H:i', strtotime($comentario['fecha'] ?? now())) }}
                                        </p>
                                    </div>
                                @endforeach
                            </div>
                            <div class="chat-footer">
                                <textarea id="chat-comment" placeholder="Escribe un comentario..." class="form-control"></textarea>
                                <input type="hidden" id="comment-type" value="">
                                <input type="hidden" id="comment-id" value="">
                                <button id="btnSendComment"><i class="bi bi-send"></i></button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Livewire.on('showComments', function(comentarios, tipo, id) {
                const msgsContainer = document.getElementById('msgs');
                msgsContainer.innerHTML = '';

                comentarios.forEach(comentario => {
                    const messageHtml = `
                    <div class="message outgoing">
                        <p>${comentario.comentario}</p>
                        <p class="message-date">${comentario.fecha}</p>
                    </div>
                `;
                    msgsContainer.innerHTML += messageHtml;
                });

                document.getElementById('comment-type').value = tipo;
                document.getElementById('comment-id').value = id;
                document.getElementById('comment-type-header').textContent = tipo.toUpperCase();

                $('#modalComentarios').modal('show');
            });
        });
    </script>

</div>
@push('js')
    <script src="{{ asset('/assets/custom/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/steps/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/jquery-validate/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/jquery-validate/localization/messages_es.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            let tipoTramiteSelect = $('#tipo_tramite');
            let step2Title = $('#step-2-title');
            let btnEdit = $('#btnEdit')

            tipoTramiteSelect.on('change', function() {
                const selectedTipo = $(this).val();
                const newTitle = selectedTipo ?
                    `Datos de ${selectedTipo.charAt(0).toUpperCase() + selectedTipo.slice(1).toLowerCase()}` :
                    'Datos de Tramite';

                step2Title.text(newTitle);

                $('a[href="#tramiteForm-h-1"]').html(`<span class="number">2.</span> ${newTitle}`);
            });

            btnEdit.on('click', function() {
                console.log("resetEdit");
                resetForm()
                $('#tipo_tramite').prop('disabled', true)
                $('.text-comentarios').hide()
                $('.date-comentarios').show()
            })
        });
    </script>
    <script>
        document.addEventListener('livewire:load', function() {
            let form = $('#tramiteForm')
            let btnAddTramite = $('#agregarTramite')
            let btnEdit = $('#btnEdit')

            form.steps({
                headerTag: 'h4',
                bodyTag: 'section',
                labels: {
                    finish: "Terminar",
                    next: "Siguiente",
                    previous: "Anterior",
                    loading: "Cargando..."
                },
                transitionEffect: 'slideLeft',
                onStepChanging: function(event, currentIndex, newIndex) {
                    if (currentIndex > newIndex) {
                        return true
                    }

                    if (currentIndex < newIndex) {
                        form.find('.body:eq(' + newIndex + ') label.error').remove()
                        form.find('.body:eq(' + newIndex + ') .error').removeClass('error')
                    }

                    var isFormValid = form.validate({
                        ignore: ':disabled,:hidden'
                    }).form()

                    return isFormValid
                },
                onFinishing: function(event, currentIndex) {
                    form.validate().settings.ignore = ':disabled'
                    form.validate().settings.ignore = '.ignore'
                    return form.valid()
                },
                onFinished: function(event, currentIndex) {
                    Swal.fire({
                        title: 'Cargando...',
                        html: '<div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div>',
                        showCancelButton: false,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    })
                    sendData()
                }
            })

            btnAddTramite.on('click', function() {
                console.log("resetOpen");
                resetForm()
                $('#tipo_tramite').prop('disabled', false)
                $('.text-comentarios').show()
                $('.date-comentarios').hide()
            })

            btnEdit.on('click', function() {
                console.log("resetEdit");
                resetForm()
                $('#tipo_tramite').prop('disabled', true)
                $('.text-comentarios').hide()
                $('.date-comentarios').show()
            })

            async function sendData() {
                try {
                    let data = {}

                    let inputs = $('#tramiteForm :input[name]').not(':input[type="file"]')
                    inputs.each(function() {
                        let input = $(this)
                        let name = input.attr('name')
                        let value = input.val()

                        data[name] = value
                    });
                    console.log(data);

                    let files = $('#tramiteForm input[type="file"]')

                    for (file of files) {
                        if (!file.files[0]) continue
                        if (file.files[0].size > 10000000) {
                            let fileName = file.files[0].name
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'El archivo ' + fileName + ' es demasiado grande'
                            })
                            return
                        }
                        await new Promise((resolve, reject) => {
                            @this.upload('employee.' + file.name, file.files[0], (value) => {
                                console.log(value)
                                resolve()
                            }, () => {
                                console.error('Error al cargar el archivo')
                                reject()
                            }, (event) => {
                                console.log(event.detail.progress)
                            })
                        })
                    }

                    Livewire.emit('hideModal')
                    Livewire.emit('uploadData', data)
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } catch (error) {
                    console.error(error)
                }
            }

        })

        function resetForm() {
            $("#tramiteForm-t-0").click()
            $('#tramiteForm')[0].reset()
            $(".done").removeClass("done").addClass("disabled")
            $('#tramiteForm').validate().resetForm()
            $(".error").removeClass("error").addClass("done")
            $('#tramiteForm select').each(function() {
                $(this).val('').trigger('change')
            })
        }

        Livewire.on('showComments', function(comentarios, tipo) {
            const msgsContainer = document.getElementById('msgs');
            msgsContainer.innerHTML = '';

            comentarios.forEach(comentario => {
                const messageHtml = `
                    <div class="message outgoing">
                        <p>${comentario.comentario}</p>
                        <p class="message-date">${comentario.fecha}</p>
                    </div>
                `;
                msgsContainer.innerHTML += messageHtml;
            });

            $('#modalComentarios').modal('show');
        });
    </script>
    <script src="{{ asset('/assets/js/tramites/tramites.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tipoTramiteSelect = document.getElementById('tipo_tramite');
            const formSections = document.querySelectorAll('.form-section');
            function updateSections(selectedTipo) {
                const formSections = document.querySelectorAll('.form-section');

                formSections.forEach(section => {
                    section.style.display = 'none';
                    updateSelectName(section, '#tipo_endoso', false);
                    updateSelectName(section, '#tipo_otros', false);

                    const tipoEndosoField = section.querySelector('#tipo_endoso');
                    const tipoOtrosField = section.querySelector('#tipo_otros');
                    const estatusTramiteField = section.querySelector('#estatus_tramite');

                    if (tipoEndosoField) {
                        tipoEndosoField.required = false;
                    }

                    if (tipoOtrosField) {
                        tipoOtrosField.required = false;
                    }

                    if (estatusTramiteField) {
                        estatusTramiteField.required = false;
                    }
                });

                if (selectedTipo) {
                    const matchingSection = document.querySelector(`.form-section[data-section="${selectedTipo}"]`);
                    if (matchingSection) {
                        matchingSection.style.display = 'block';
                        updateSelectName(matchingSection, '#tipo_endoso', true);
                        updateSelectName(matchingSection, '#tipo_otros', true);

                        const tipoEndosoField = matchingSection.querySelector('#tipo_endoso');
                        const tipoOtrosField = matchingSection.querySelector('#tipo_otros');
                        const estatusTramiteField = matchingSection.querySelector('#estatus_tramite');

                        if (tipoEndosoField && matchingSection.style.display === 'block') {
                            tipoEndosoField.required = selectedTipo === 'ENDOSO';
                        }

                        if (tipoOtrosField && matchingSection.style.display === 'block') {
                            tipoOtrosField.required = selectedTipo === 'OTROS';
                        }

                        if (estatusTramiteField && matchingSection.style.display === 'block') {
                            estatusTramiteField.required = selectedTipo === 'CANCELACIÓN';
                        }
                    }
                }
            }

            function updateSelectName(section, selector, shouldSetName) {
                const selectElement = section.querySelector(selector);
                if (selectElement) {
                    if (shouldSetName) {
                        selectElement.setAttribute('name', 'tipo_endoso');
                    } else {
                        selectElement.removeAttribute('name');
                    }
                }
            }


            updateSections(tipoTramiteSelect.value);

            tipoTramiteSelect.addEventListener('change', function() {
                updateSections(this.value);
            });

            Livewire.on('updateFormSections', function(tipoTramite) {
                tipoTramiteSelect.value = tipoTramite;
                tipoTramiteSelect.dispatchEvent(new Event('change'));
            });

            Livewire.on('showComments', function(comentarios, tipo, id) {
                const msgsContainer = document.getElementById('msgs');
                msgsContainer.innerHTML = '';

                comentarios.forEach(comentario => {
                    const messageHtml = `
                    <div class="message outgoing">
                        <p>${comentario.comentario}</p>
                        <p class="message-date">${comentario.fecha}</p>
                    </div>
                `;
                    msgsContainer.innerHTML += messageHtml;
                });

                document.getElementById('comment-type').value = tipo;
                document.getElementById('comment-id').value = id;

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

            Livewire.on('tramiteId', function(id) {

                const select = document.getElementById('tipo_tramite');

                select.innerHTML = '<option value="">Seleccione una opción</option>';

                const allOptions = ['CANCELACIÓN', 'AHORRO', 'ENDOSO', 'DIVIDENDOS', 'ACLARACIONES',
                    'OTROS'];

                if (id) {
                    allOptions.forEach(option => {
                        const optionElement = document.createElement('option');
                        optionElement.value = option;
                        optionElement.textContent = option;
                        select.appendChild(optionElement);
                    });
                }
            });

            document.getElementById('agregarTramite').addEventListener('click', function() {
                // Obtener el select de tipo_tramite
                const select = document.getElementById('tipo_tramite');

                // Limpiar las opciones anteriores
                select.innerHTML = '<option value="">Seleccione una opción</option>';

                // Lista de todas las opciones por defecto (sin 'ACLARACIONES' si es nuevo)
                const defaultOptions = ['CANCELACIÓN', 'AHORRO', 'ENDOSO', 'DIVIDENDOS', 'OTROS'];

                // Restaurar las opciones al estado original
                defaultOptions.forEach(option => {
                    const optionElement = document.createElement('option');
                    optionElement.value = option;
                    optionElement.textContent = option;
                    select.appendChild(optionElement);
                });
            });
        });
    </script>
@endpush