@extends('layouts.admin')
@section('agendar', 'active bg-gradient-primary')

@section('css')

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

    <style>
        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }

        #table_id td {
            color: black;

            font-size: 11px;
        }

        .form-select1 {
            border: 1px solid #d2d6da;
            border-radius: 0.375rem;
            border-top-left-radius: 0.375rem !important;
            border-bottom-left-radius: 0.375rem !important;
            padding: 0.625rem 0.75rem !important;
            padding-top: 0px !important;
            line-height: 1.3 !important;
            background-image:
                linear-gradient(45deg, transparent 50%, gray 50%),
                linear-gradient(135deg, gray 50%, transparent 50%),
                linear-gradient(to right, #ccc, #ccc);
            background-position:
                calc(100% - 20px) calc(1em + 2px),
                calc(100% - 15px) calc(1em + 2px),
                calc(100% - 2.5em) 0.5em;
            background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
            background-repeat: no-repeat;

        }

        .form-select1:focus {
            border-color: #495057;
        }
    </style>

    <style>
        .table-agendamiento th {
            font-size: 10px;
        }

        .table-agendamiento td {
            font-size: 10px
        }

        /* Estilos para el <select> dentro de los elementos <td> de la primera tabla */
        .table-agendamiento td select {
            /* Agrega aquí los estilos que desees para el <select> en la primera tabla */
            height: 35px;
            font-size: 10px;
        }

        .form-select-option option {
            width: 200px;
        }
    </style>
@endsection

@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa-solid fa-calendar-days"></i>
                            Agendar
                        </h6>
                    </div>
                </div>
                <br>
                @if (Session::has('mensaje'))
                    <p class="alert alert-success2 col-10 offset-1" align="center">
                        <strong>{{ Session::get('mensaje') }}</strong>
                        <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </p>
                @endif

                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5">
                                <label class="form-label">Zonal</label>
                                <select id="zonal_id" name="zonal_id" class="form-select "
                                    onchange="buscarLocalidades(this.value)">
                                    <option>Seleccione Zonal</option>
                                    @foreach ($zonales as $zonal)
                                        <option value="{{ $zonal->id }}">{{ $zonal->codigo }} - {{ $zonal->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Localidad</label>
                                <select id="localidad_id" name="localidad_id" class="form-select ">
                                    <option>Seleccione Localidad</option>

                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Desde</label>
                                <input type="date" id="desde" name="desde" class="form-select"
                                    value="{{ date('Y-m-01') }}" required>
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Hasta</label>
                                <input type="date" id="hasta" name="hasta" class="form-select"
                                    value="{{ date('Y-m-d') }}" required>
                            </div>
                            <br>
                            <div class="col-md-3" style="margin:20px">
                                <label>
                                    <input type="checkbox" id="chkPendientes" value="1" /> Solo sin agendar
                                </label>
                            </div>
                            <div class="col-md-2 offset-6">
                                <label>&nbsp;</label>
                                <a type="submit" class="btn bg-gradient-primary w-100 " onclick="ordenarEjecuciones()">
                                    <i class="fa fa-search" aria-hidden="true"></i> Visualizar

                                </a>
                            </div>

                        </div>
                        <div class="col-md-12 row" id="div_table" name="div_table" hidden>
                            <table id="table_id" class="display compact config-table">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Servicio</th>
                                        <th>Petición</th>
                                        <th>Fecha Fin</th>
                                        <th>Rut</th> <!--nuevo-->
                                        <th>Fono</th>
                                        <th>Sector</th>
                                        <th>Direccion</th>
                                        <th>Equipos</th>
                                        <th>Asoc S/N baja</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>

                                    </tr>
                                </thead>
                                <tbody id="fila_bajas" name="fila_bajas">
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="div_total" name="div_total"></div>

    <!--Modal Agendar Usuario-->
    <form method="POST" id="frmAgendar" name="frmAgendar" action="{{ asset('agendar') }}">
        @csrf
        <div class="modal fade" id="modalAgendar" tabindex="-1" role="dialog" aria-labelledby="modalAgendar"
            aria-hidden="true" name="modalAgendar">
            <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
                <div class="modal-content col-md-12">
                    <input hidden name="accion" id="accion">

                    <div class="modal-header col-md-12">
                        <h5 class="modal-title" id="modalAgregar">
                            Agendar
                            <a type="button" style="position: right" class="close" data-bs-dismiss="modal"
                                aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </a>
                        </h5>
                        <span id="icoBanStack" name="icoBanStack" class="fa-stack fa-2x" style="cursor:pointer">
                            <i class="fa-solid fa-edit fa-stack-1x" style="color:orange"></i>
                            <i id="icoBan" name="icoBan" class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
                        </span>



                    </div>
                    <input hidden name="servicio_id" id="servicio_id">
                    <div class="modal-header container col-md-12">
                        <div class="row">
                            <strong style="font-size:12px" id="nombre" name="nombre"> </strong>
                            <span style="font-size:12px" id="equipos" name="equipos"></span>
                            <div class="col-md-6">
                                <div class="input-group input-group-outline my-3 focus is-focused">
                                    <label class="form-label">Direccion</label>
                                    <input style="font-size:12px" id="direccion" name="direccion" type="text"
                                        class="form-control col-md-6">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-outline my-3 focus is-focused">
                                    <label class="form-label">Fono</label>
                                    <input style="font-size:12px" id="fono" name="fono" type="text"
                                        class="form-control col-md-6">
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-body col-md-12 container row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3 focus is-focused">
                                <label class="form-label">Fecha</label>
                                <input id="fecha" name="fecha" type="date" class="form-control"
                                    value="{{ old('fecha') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3 focus is-focused">
                                <label class="form-label">Estado</label>
                                <select id="estado_id" name="estado_id" class="form-select"
                                    value="{{ old('estado_id') }}">
                                    <option selected value="4">Agendado</option>
                                    <option value="1">Pendiente</option>
                                    <option value="2">Irrecuperable</option>
                                    <option value="6">Gestionado</option>
                                    <option value="7">Visita</option>

                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3 focus is-focused">
                                <label class="form-label">Técnico</label>
                                <select id="tecnico_id" name="tecnico_id" class="form-select"
                                    value="{{ old('tecnico') }}">
                                    <option></option>
                                    @foreach($tecnicos as $tecnico)
                                    <option value="{{$tecnico->id}}">{{$tecnico->usuario}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>



                    </div>

                    <div class="modal-footer col-md-12">
                        <div class="col-md-12">
                            <div class="input-group input-group-outline my-3 focus is-focused">
                                <label class="form-label">Observaciones</label>
                                <textarea id="observaciones" name="observaciones" type="text" class="form-control col-md-12"></textarea>

                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"
                            aria-label="Close">Cerrar</button>


                        <button type="submit" id="btnAceptar" name="btnAceptar" value="aceptar" form="frmAgendar"
                            class="btn btn-primary btn-sm">Aceptar</button>
                    </div>

                </div>


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

    <!--Modal Cargando-->
    <div class="modal fade" id="modalCargando" tabindex="-1" role="dialog" aria-labelledby="modalCargando"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">


                <div class="modal-body col-md-12 text-center">

                    Esta operación puede tardar unos minutos. <br>
                    Espere por favor. <br>
                    <img onclick="$('#modalCargando').modal('hide');" style="width:40%" align="center"
                        src="img/progress.gif">

                </div>

            </div>

        </div>
    </div>

    <!--modal actualizarFono-->
    <div class="modal fade" id="modalActualizarFono" tabindex="-1" role="dialog"
        aria-labelledby="modalActualizarFono" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">

                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="modalAgregar">
                        Verificar Número Telefónico
                        <a type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </a>
                    </h5>
                </div>

                <div class="modal-body col-md-12">
                    <form id="frmActualizar" action="peticiones" method="POST" class="row">
                        @csrf
                        <input hidden id="id" name="id">

                        <div class="col-md-12 row">
                            <div class="col-md-6">
                                <div class="input-group input-group-outline my-3 focus is-focused">
                                    <label class="form-label">Teléfono</label>
                                    <input id="fono2" name="fono2" type="text" class="form-control"
                                        value="{{ old('fono2') }}">
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="input-group input-group-outline my-3 focus is-focused">
                                    <label class="form-label">Sector</label>
                                    <input id="sector2" name="sector2" type="text" class="form-control"
                                        value="{{ old('sector2') }}">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="input-group input-group-outline my-3 focus is-focused">
                                    <label class="form-label">Nota</label>
                                    <textarea id="notas2" name="notas2" type="text" class="form-control" value="{{ old('notas2') }}"></textarea>
                                </div>
                            </div>
                        </div>

                    </form>

                </div>


                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Cerrar</button>
                    <button type="submit" form="frmActualizar" class="btn btn-primary">Confirmar</button>
                </div>
            </div>

        </div>
    </div>

    <!--modal notas-->
    <div class="modal fade" id="modalNotas" tabindex="-1" role="dialog" aria-labelledby="modalNotas"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">

                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="modalAgregar">
                        Nota
                        <a type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </a>
                    </h5>
                </div>

                <div class="modal-body col-md-12">
                    <form id="frmNotas" action="actualizar_notas" method="POST" class="row">
                        @csrf
                        <input hidden id="id_notas" name="id_notas">
                        <div class="col-md-12">
                            <div class="input-group input-group-outline my-3 focus is-focused">
                                <label class="form-label">Notas</label>
                                <textarea id="notas" name="notas" type="text" class="form-control" value="{{ old('notas') }}"></textarea>
                            </div>
                        </div>

                    </form>

                </div>


                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Cerrar</button>
                    <button type="submit" form="frmNotas" class="btn btn-primary">Confirmar</button>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('js')

    <!-- datatable-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>


    <script>
        function ordenarEjecuciones() {
            $("#div_table").removeAttr('hidden');
            $('#modalCargando').modal('show');
            buscarBajas().done(function() {
                aplicarDT(function() {
                    setTimeout(function() {
                        $('#modalCargando').modal('hide');
                    }, 500); // Retraso de 500 milisegundos (ajústalo según tus necesidades)
                });
            });
        }

        function buscarLocalidades(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "get",
                dataType: "json",
                url: "../buscar_localidades_" + id,
                success: function(resultado) {
                    $('#localidad_id').empty();
                    $('#localidad_id').append(
                        `<option value="Todas">Todas</option>`);
                    resultado.localidades.forEach(localidad => {

                        $('#localidad_id').append(
                            `<option value="${localidad.id}">${localidad.nombre}</option>`)
                    });

                },
                error: function() {
                    alert("error");

                }
            });
            return true;
        }

        function buscarBajas() {
            $('#table_id').DataTable().destroy();
            desde = $("#desde").val();
            hasta = $("#hasta").val();
            id_localidad = $("#localidad_id").val();
            id_zonal = $("#zonal_id").val();
            var valorPendientes = $("#chkPendientes").is(":checked");

            // Convertimos el valor a "1" o "0"
            var chk = valorPendientes ? 1 : 0;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            return $.ajax({
                type: "get",
                dataType: "json",
                url: "../buscar_bajas2_" + id_zonal + "_" + id_localidad + "_" + desde + "_" + hasta + "_" + chk,

                success: function(resultado) {
                    $('#fila_bajas').empty();
                    console.log(resultado);
                    resultado.bajas.forEach(bajas => {
                                estado =
                                    '<span class="badge badge-sm bg-gradient-warning">por confirmar</span>';
                        switch (bajas['estado_id']) {
                            case 1:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-warning">Pendiente</span>';
                                break;
                            case 5:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-info">verificado</span>';
                                break;
                            case 4:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-success">agendado</span>';
                                break;
                            case 2:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-danger">Irrecuperable</span>';
                                break;
                            case 3:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-success">Recuperado</span>';
                                break;
                            case 6:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-secondary">Gestionado</span>';
                                break;
                            case 7:
                                estado =
                                    '<span class="badge badge-sm bg-gradient-success">Visita</span>';
                                break;

                        }

                        if (bajas['servicio'].includes('TV')) {
                            const tipoServicio = bajas['sin_baja_emitida'] !== null && bajas[
                                    'sin_baja_emitida'].includes('D00') ? 'TV con D00' :
                                'TV sin D00';

                            if (tipoServicio === 'TV con D00') {
                                equipamiento = ((bajas.peticion.decodificadores || "")).replace(
                                    /null/gi, '');
                            } else {
                                equipamiento = ((bajas.peticion.decodificadores || "") +
                                    (bajas.peticion.modems || "") +
                                    (bajas.peticion.otros || "")).replace(/null/gi, '');
                            }
                        } else {
                            equipamiento = ((bajas.peticion.decodificadores || "") +
                                (bajas.peticion.modems || "") +
                                (bajas.peticion.otros || "")).replace(/null/gi, '');

                        }


                        if (bajas['estado_actual'] == "Irrecuperable" || bajas['estado_actual'] ==
                            "Agendado") {
                            var partesFecha = bajas.peticion.fin_mgr_inst.split("-");
                            var fechaFormateada = partesFecha[2] + "-" + partesFecha[1] + "-" +
                                partesFecha[0];
                            var sin_baja;
                            if (bajas['sin_baja_emitida'] !== null) {
                                sin_baja = bajas['sin_baja_emitida'];
                            } else {
                                sin_baja = '';
                            }
                            $('#fila_bajas').append(
                                `<tr>
                                <td>` + bajas.cliente.nombre + `</td>
                                <td>` + bajas['servicio'] + `</td>
                                <td>` + bajas.peticion.numero + `</td>
                                <td>` + fechaFormateada + `</td>
                                <td>` + bajas.cliente.rut + `</td>
                                <td>` + bajas.cliente.fono + `</td>
                                <td>` + bajas['sector'] + `</td>
                                <td>` + bajas['direccion'] + `</td>
                                <td>` + equipamiento + `</td>
                                <td>` + sin_baja + `</td>

                                <td>` + estado +
                                `</td>
                                <td>
                                    <i style="cursor:pointer;color:crimson" title="Reagendar" class="fa-solid fa-2x fa-calendar" onclick="abrirModalAgendar('` +
                                bajas['servicio'] + `','` + bajas['id'] + `','` + bajas[
                                    'estado_id'] +
                                `')"></i>
                                </td>
                            </tr>`
                            )
                        } else {
                            const resultado_nota = bajas.peticion.notas === null ? '' : bajas.peticion
                                .notas.replace(/"/g, '').replace(/(\r\n|\n|\r)/gm, ' ');
                            var partesFecha = bajas.peticion.fin_mgr_inst.split("-");
                            var fechaFormateada = partesFecha[2] + "-" + partesFecha[1] + "-" +
                                partesFecha[0];
                            var sin_baja;
                            if (bajas['sin_baja_emitida'] !== null) {
                                sin_baja = bajas['sin_baja_emitida'];
                            } else {
                                sin_baja = '';
                            }
                            $('#fila_bajas').append(
                                `
                                <tr>
                                    <td>${bajas.cliente.nombre}</td>
                                    <td>${bajas['servicio']}</td>
                                    <td>${bajas.peticion.numero}</td>
                                    <td>${fechaFormateada}</td>
                                    <td>${bajas.cliente.rut}</td>
                                    <td id="td_fono_${bajas['id']}">${bajas.cliente.fono}</td>
                                    <td id="td_sector_${bajas['id']}">${bajas['sector']}</td>
                                    <td id="td_direccion_${bajas['id']}">${bajas['direccion']}</td>
                                    <td>${equipamiento}</td>
                                    <td>${sin_baja}</td>
                                    <td id="td_${bajas['id']}">${estado}</td>
                                    <td id="td_acciones_${bajas['id']}">
                                        <i onclick="abrirModalActualizarFono(${bajas['id']},'${bajas['cliente']['fono']}','${bajas['direccion'].replace('"', '').replace('\'','').replace('/\n/g', '')}','${bajas['sector']}','${resultado_nota}')" class="fa fa-check fa-2x" style="color:green; cursor: pointer;"></i>
                                        <i id="i_notas_${bajas['id']}" onclick="abrirModalNotas(${bajas['id']},'${resultado_nota}')" class="fa-regular fa-clipboard fa-2x" style="color:${bajas.peticion.notas ? 'red' : 'green'}; cursor: pointer;"></i>
                                        <i style="cursor:pointer;color:cadetblue" title="Agendar" class="fa-solid fa-2x fa-calendar" onclick="abrirModalAgendar('${bajas['servicio']}','${bajas['id']}','${bajas['estado_id']}')"></i>
                                    </td>
                                </tr>
                                `
                            )
                        }
                    });
                    //$("#div_total").html(resultado.total);

                },
                error: function() {
                    alert("error");

                }

            });

        }

        function aplicarDT(callback) {
            var groupColumn = 0;
            $('#table_id').DataTable({
                responsive: true,

                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [-1]
                }],
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": "Anterior",
                        "sNext": "Siguiente",
                        "sInfo": "Mostrando _START_ a _END_ de un total de _TOTAL_"

                    },
                    "sZeroRecords": "Sin registros para mostrar",
                    "sInfo": "mostrando _START_ a _END_, de un total de _TOTAL_ registros",
                    "sInfoFiltered": " - filtrado de _MAX_ registros",
                    "sInfoEmpty": "Sin registros para mostrar",
                    "sSearch": "Buscar",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sLoadingRecords": "Por favor, espere un momento...9"

                },
                columnDefs: [{
                    visible: false,
                    targets: groupColumn
                }],
                order: [
                    [groupColumn, 'asc']
                ],
                displayLength: 25,
                drawCallback: function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;

                    api
                        .column(groupColumn, {
                            page: 'current'
                        })
                        .data()
                        .each(function(group, i) {
                            if (last !== group) {
                                $(rows)
                                    .eq(i)
                                    .before('<tr class="group"><td colspan="11">' + group + '</td></tr>');

                                last = group;
                            }
                        });
                },
            });
            $('#table_id tbody').on('click', 'tr.group', function() {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
                    table.order([groupColumn, 'desc']).draw();
                } else {
                    table.order([groupColumn, 'asc']).draw();
                }
            });
            callback();


        }

        $("#icoBanStack").on("click", function() {
            $("#icoBan").toggle(); // Toggle the visibility of the icon

            // Enable or disable inputs based on icon visibility
            var isVisible = $("#icoBan").is(":visible");
            $("#btnAceptar").attr("disabled", isVisible);
            $("#direccion").attr("disabled", isVisible);
            $("#fono").attr("disabled", isVisible);
            $("#fecha").attr("disabled", isVisible);
            $("#tecnico_id").attr("disabled", isVisible);
            $("#observaciones").attr("disabled", isVisible);
        });

        function abrirModalAgendar(servicio, id, estado_id) {
            $("#estado_id").val(-1);
            if (estado_id == 4) {
                $('#icoBanStack').show();
                $('#btnAceptar').attr('disabled', true);
                $('#direccion').attr('disabled', true);
                $('#fono').attr('disabled', true);
                $('#fecha').attr('disabled', true);
                $('#tecnico_id').attr('disabled', true);
                $('#observaciones').attr('disabled', true);
            } else {
                $('#icoBanStack').hide();

                $('#btnAceptar').attr('disabled', false);
                $('#direccion').attr('disabled', false);
                $('#fono').attr('disabled', false);
                $('#fecha').attr('disabled', false);
                $('#tecnico_id').attr('disabled', false);
                $('#observaciones').attr('disabled', false);
            }
            $("#estado_id").val(estado_id);
            if (estado_id === '2' || estado_id==='6') {
                // Desactivar el campo tecnico_id
                $('#tecnico_id').prop('disabled', true);
                // Establecer el valor seleccionado del campo tecnico_id en blanco
                $('#tecnico_id').val('');
            }              
            else {
                // Si no es "Irrecuperable", asegurarse de que el campo tecnico_id esté habilitado
                $('#tecnico_id').prop('disabled', false);
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "get",
                dataType: "json",
                url: "buscar_servicio_" + id,
                success: function(resultado) {

                    $("#nombre").text(resultado.servicio.cliente.nombre);
                    $("#equipos").text(((resultado.servicio.peticion.decodificadores || "") +
                            (resultado.servicio.peticion.modems || "") +
                            (resultado.servicio.peticion.otros || ""))
                        .replace(/null/gi, ''));

                    $('#direccion').val(resultado.servicio['direccion']);
                    $('#fono').val(resultado.servicio.cliente.fono);
                    //$("#tecnico_id").empty();

                    //$("#tecnico_id").append(
                      //  `<option value="0">Seleccione Técnico</option>`
                    //);
                    $("#observaciones").val(resultado.servicio['observaciones']);
                    //$("#tecnico_id").val(resultado.agendamiento.user_id);

                    console.log(resultado);
                    //resultado.tecnicos.forEach(tecnico => {
                    //    $("#tecnico_id").append(
                    //        `<option value="` + tecnico.id + `">` + tecnico.usuario + `</option>`
                    //    )
                    //});
                    if (estado_id == "4" || estado_id == "1") {
                        $("#observaciones").val(resultado.servicio['observaciones']);
                        $("#tecnico_id").val(resultado.agendamiento.user_id);
                        $('#fecha').val(new Date(resultado.agendamiento.fecha).toISOString().split('T')[0]);
                    } else {
                        $("#tecnico_id").val(0);
                    }
                },
                error: function() {
                    alert("error");
                }
            });

            $("#servicio_id").val(id);

            $("#modalAgendar").modal('show');
        }

        function abrirModalActualizarFono(id, fono, direccion, sector, notas) {
            $('#id').val(id);
            $("#fono2").val(fono);
            $("#sector2").val(sector);

            $("#notas2").val(notas);

            $("#modalActualizarFono").modal('show');

            // $('#frmActualizarPassword').submit();
        }


        function abrirModalNotas(id, nota) {
            $('#id_notas').val(id);
            $("#notas").val(nota);
            $("#modalNotas").modal('show');

            // $('#frmActualizarPassword').submit();
        }

        $("#frmActualizar").submit(function(event) {
            // Evita que el formulario se envíe normalmente
            event.preventDefault();



            // Realiza la solicitud AJAX al servidor
            $.ajax({
                type: "POST",
                url: $(this).attr('action'), // Obtiene la URL del formulario
                data: $(this).serialize(), // Envía los datos del formulario
                success: function(response) {
                    // La actualización del registro fue exitosa
                    console.log(
                        response); // Muestra la respuesta del servidor en la consola
                    response.servicios.forEach(servicio => {
                        $("#td_fono_" + servicio['id']).html(
                            $("#fono2").val()
                        );

                        $("#td_sector_" + servicio['id']).html(
                            $("#sector2").val()
                        );

                        $("#td_" + servicio['id']).html(
                            '<span class="badge badge-sm bg-gradient-info">Verificado</span>'
                        );

                        $("#td_acciones_" + servicio['id']).html(
                            `
                            <i onclick="abrirModalActualizarFono(${servicio['id']}, '${$("#fono2").val()}', '${servicio['direccion'].replace('"', '').replace('\'','').replace('/\n/g', '')}', '${servicio['sector']}', '${$("#notas2").val().replace(/(\r\n|\n|\r)/gm,' ')}')" class="fa fa-check fa-2x" style="color:green; cursor: pointer;"></i>
                            <i id="i_notas_${servicio['id']}" onclick="abrirModalNotas(${servicio['id']},'${servicio.peticion.notas.replace(/(\r\n|\n|\r)/gm,' ')}')" class="fa-regular fa-clipboard fa-2x" style="color:${servicio.peticion.notas ? 'red' : 'green'}; cursor: pointer;"></i>
                            <i style="cursor:pointer;color:cadetblue" title="Agendar" class="fa-solid fa-2x fa-calendar" onclick="abrirModalAgendar('${servicio['servicio']}','${servicio['id']}','${servicio['estado_id']}')"></i>
                            `

                        );
                    });

                    // Opcional: Mostrar una notificación o mensaje al usuario
                    alert('Registro actualizado exitosamente');
                    $("#modalActualizarFono").modal("hide");

                },
                error: function(error) {
                    // La actualización del registro falló
                    console.error(error); // Muestra el error en la consola

                    // Opcional: Mostrar una notificación o mensaje de error al usuario
                    alert('Error al actualizar el registro');
                }
            });
        })

        $('#modalAgendar').on('hidden.bs.modal', function() {
            $("#observaciones").val('');
            $("#fecha").val('');


        });

        $("#frmNotas").submit(function(event) {
            // Evita que el formulario se envíe normalmente
            event.preventDefault();

            // Realiza la solicitud AJAX al servidor
            $.ajax({
                type: "POST",
                url: $(this).attr('action'), // Obtiene la URL del formulario
                data: $(this).serialize(), // Envía los datos del formulario
                success: function(response) {
                    nota = response['nota'];
                    // La actualización del registro fue exitosa
                    console.log(
                        response); // Muestra la respuesta del servidor en la consola
                    response.servicios.forEach(servicio => {

                        $("#i_notas_" + servicio['id']).css('color', 'red');
                        $("#i_notas_" + servicio['id']).on('click', function() {
                            abrirModalNotas(servicio['id'], nota);
                        })

                    });
                    alert('Nota ingresada');
                    $("#modalNotas").modal("hide");

                },
                error: function(error) {
                    // La actualización del registro falló
                    console.error(error); // Muestra el error en la consola

                    // Opcional: Mostrar una notificación o mensaje de error al usuario
                    alert('Error al actualizar el registro');
                }
            });
        })

        $("#frmAgendar").submit(function(event) {
            // Evita que el formulario se envíe normalmente
            event.preventDefault();
            console.log("url", $(this).attr('action'));
            // Realiza la solicitud AJAX al servidor
            $.ajax({
                type: "POST",
                url: $(this).attr('action'), // Obtiene la URL del formulario
                data: $(this).serialize(), // Envía los datos del formulario
                success: function(response) {
                    // La actualización del registro fue exitosa
                    console.log("response", response); // Muestra la respuesta del servidor en la consola

                    response.servicios.forEach(servicio => {
                        if (servicio['estado_id'] == "1") {                            
                            $("#td_" + servicio['id']).html(
                                '<span class="badge badge-sm bg-gradient-warning">pendiente</span>'
                            );
                            $("#td_acciones_" + servicio['id']).html(
                                `
                                <i onclick="abrirModalActualizarFono(${servicio['id']}, '${$("#fono2").val()}', '${servicio['direccion'] ? servicio['direccion'].replace(/("|'|\n)/g, '') : ''}', '${servicio['sector']}', '${$("#notas2").val() ? $("#notas2").val().replace(/(\r\n|\n|\r)/gm,' ') : ''}')" class="fa fa-check fa-2x" style="color:green; cursor: pointer;"></i>
                                <i id="i_notas_${servicio['id']}" onclick="abrirModalNotas(${servicio['id']},'${servicio.peticion && servicio.peticion.notas ? servicio.peticion.notas.replace(/(\r\n|\n|\r)/gm,' ') : ''}')" class="fa-regular fa-clipboard fa-2x" style="color:${servicio.peticion && servicio.peticion.notas ? 'red' : 'green'}; cursor: pointer;"></i>
                                <i style="cursor:pointer;color:cadetblue" title="Reagendar" class="fa-solid fa-2x fa-calendar" 
                                onclick="abrirModalAgendar('${servicio['servicio'] ? servicio['servicio'].replace(/(\r\n|\n|\r)/gm, ' ') : ''}', '${servicio['id']}', '${servicio['estado_id']}')" aria-hidden="true"></i>`.replace(/(\r\n|\n|\r)/gm, '')
                            );
                        }
                        if (servicio['estado_id'] == "4") {
                            $("#td_" + servicio['id']).html(
                                '<span class="badge badge-sm bg-gradient-success">agendado</span>'
                            );
                            $("#td_acciones_" + servicio['id']).html(
                                `<i style="cursor:pointer;color:crimson" title="Reagendar"
                                class="fa-solid fa-2x fa-calendar"
                                onclick="abrirModalAgendar('${servicio['servicio']}', '${servicio['id']}', '${servicio['estado_id']}')"
                                aria-hidden="true"></i>`.replace(/(\r\n|\n|\r)/gm, ' ')

                            );

                        }
                        if (servicio['estado_id'] == "7") {
                            $("#td_" + servicio['id']).html(
                                '<span class="badge badge-sm bg-gradient-success">visita</span>'
                            );
                            $("#td_acciones_" + servicio['id']).html(
                                `<i style="cursor:pointer;color:cadetblue" title="Reagendar"
                                class="fa-solid fa-2x fa-calendar"
                                onclick="abrirModalAgendar('${servicio['servicio']}', '${servicio['id']}', '${servicio['estado_id']}')"
                                   aria-hidden="true"></i>`.replace(/(\r\n|\n|\r)/gm, ' ')

                            );

                        }
                        if (servicio['estado_id'] == "2") {
                            $("#td_" + servicio['id']).html(
                                '<span class="badge badge-sm bg-gradient-danger">irrecuperable</span>'
                            );

                            $("#td_acciones_" + servicio['id']).html(
                                `<i style="cursor:pointer;color:crimson" title="Reagendar"
                                class="fa-solid fa-2x fa-calendar"
                                onclick="abrirModalAgendar('${servicio['servicio'].replace(/(\r\n|\n|\r)/gm, ' ')}', '${servicio['id']}', '${servicio['estado_id']}')"
                                aria-hidden="true"></i>`
                                .replace(/(\r\n|\n|\r)/gm, ' ')
                            );

                        }
                        if (servicio['estado_id'] == "6") {
                            $("#td_" + servicio['id']).html(
                                '<span class="badge badge-sm bg-gradient-secondary">gestionado</span>'
                            );
                            $("#td_acciones_" + servicio['id']).html(
                                `<i style="cursor:pointer;color:cadetblue" title="Reagendar" class="fa-solid fa-2x fa-calendar" onclick="abrirModalAgendar('${servicio['servicio'].replace(/(\r\n|\n|\r)/gm, ' ')}
                                 ','${ servicio['id']}','${servicio['estado_id']}')" aria-hidden="true"></i>`.replace(
                                    /(\r\n|\n|\r)/gm, '')
                            );

                        }

                    });
                    // por ejemplo, actualizar la tabla sin recargar la página
                    // ...

                    // Opcional: Mostrar una notificación o mensaje al usuario
                    alert('Registro actualizado exitosamente');
                    $("#modalAgendar").modal("hide");
                    $("#observaciones").empty();
                    $("#fecha").empty();

                },
                error: function(error) {
                    // La actualización del registro falló
                    console.error(error); // Muestra el error en la consola

                    // Opcional: Mostrar una notificación o mensaje de error al usuario
                    alert('Error al actualizar el registro');
                }
            });
        })


    </script>


<script>
    $(document).ready(function() {
        // Detectar cambios en el campo estado_id
        $('#estado_id').change(function() {
            // Obtener el valor seleccionado del estado
            var estadoSeleccionado = $(this).val();

            // Si el estado seleccionado es "2" (Irrecuperable)
            if (estadoSeleccionado === '2' || estadoSeleccionado==='6') {
                // Desactivar el campo tecnico_id
                $('#tecnico_id').prop('disabled', true);
                // Establecer el valor seleccionado del campo tecnico_id en blanco
                $('#tecnico_id').val('');
            } else {
                // Si no es "Irrecuperable", asegurarse de que el campo tecnico_id esté habilitado
                $('#tecnico_id').prop('disabled', false);
            }
        });

        // Llamar al evento change al cargar la página para inicializar el estado correcto
        $('#estado_id').change();
    });
</script>

@endsection