@extends('layouts.app')

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i></li>
                        <li class="active">Listado de Rutas</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Bitacora de Rutas</header>
                        </div>
                        <div class="card-body">
                            <div class="row mb-4">

                                @php
                                    $fechaExpira = now();
                                    if (Auth::user()->expired_confirmation_date) {
                                        $fechaExpira = \Carbon\Carbon::createFromFormat(
                                            'd/m/Y',
                                            Auth::user()->expired_confirmation_date,
                                        );
                                    }
                                    $control_access = false; 
                                @endphp

                                @if (Auth::user()->confirmed_log != 1 && $fechaExpira > now())
                                    <div class="col-6 text-left">
                                        <a href="{{ route('bitacora-rutas.create') }}" id="create-bitacora"
                                            class="btn btn-info">
                                            <i class="fas fa-plus-circle"></i> Crear Bitácora
                                        </a>
                                    </div>
                                    @php 
                                        $control_access = true;
                                    @endphp
                                @endif

                                @if (Auth::user()->confirmed_log != 1 && $fechaExpira > now())
                                    <div class="col-6 text-right">
                                        <a href="#" id="confirm-bitacora" class="btn btn-success">
                                            <i class="fas fa-check-circle"></i> Confirmar Bitácora
                                        </a>
                                    </div>
                                    @php 
                                        $control_access = true;
                                    @endphp
                                @endif
                                <div class="tools">
                                    <input type="hidden" id="accion" name="accion" value="1">
                                </div>
                            </div>
                            <div class="row">

                                @foreach ($data as $fecha => $clientes)
                                    <div class="col-md-4">
                                        <div class="card mb-4 card-selectable">
                                            <div class="card-header d-flex justify-content-between">
                                                <h5>Día {{ $fecha }}</h5>
                                                @if (collect($clientes)->contains('is_upcoming', true))
                                                    <i class="fas fa-bell text-warning"></i>
                                                @endif
                                            </div>
                                            <div class="card-body">
                                                <button class="btn btn-primary show-details"
                                                    data-fecha="{{ $fecha }}">Ver Detalles</button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="row  show-change-customer">
                                <div class="col-3 mt-3 mb-5" id="btn-change-date">
                                    <button class="btn btn-primary" id="btn-change"> Pactar Clientes </button>
                                </div>
                            </div>

                            <div class="row mt-5 mb-5" id="show-load-customer">
                                <div class="col-6">
                                    <div id="loading-customer" style="display: flex; justify-content: center;"><span
                                            class="loader"></span></div>
                                </div>
                            </div>

                            <div class="table-responsive" id="details-table" style="display:none;">
                                <table class="table" id="table-responsive-2">
                                    <thead>
                                        <tr>
                                            <th> <b> <input type="checkbox" value="" id="all_customers"> </b> </th>
                                            <th><b>Ruta</b></th>
                                            <th><b>Documento</b></th>
                                            <th><b>Cliente</b></th>
                                            <th><b>Direccion Cliente</b></th>
                                            <th><b>Mensualidad</b></th>
                                            <th><b>Morosidad</b></th>
                                            <th><b>Cancelado</b></th>

                                            <th><b>Acción</b></th>
                                        </tr>
                                    </thead>
                                    <tbody id="details-body">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Editar Dirección -->
    <div class="modal fade" id="editAddressModal" tabindex="-1" role="dialog" aria-labelledby="editAddressModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editAddressModalLabel">Editar Dirección</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="editAddressForm" method="POST" action="{{ route('update_address') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="direccion">Dirección:</label>
                            <input type="text" id="direccion" class="form-control" name="direccion" required>
                        </div>
                    </div>
                    <input type="hidden" id="cliente_id" name="cliente_id">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Clientes Pactados-->
    <div class="modal fade" id="descripcionModal" tabindex="-1" role="dialog" aria-labelledby="descripcionModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descripcionModalLabel">Pactar Cliente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="descripcionForm" method="POST" action="{{ route('agree-clients') }}">
                    @csrf
                    <div class="modal-body">
                        <div id="error-message" class="alert alert-danger d-none"></div>
                        <div id="success-message" class="alert alert-success d-none"></div>
                        <div class="form-group">
                            <label for="customerName">Cliente:</label>
                            <input type="text" id="customerName" class="form-control" name="customer_name" readonly>
                        </div>
                        <div class="form-group">
                            <label for="scheduled_date">Fecha:</label>
                            <input type="date" id="scheduled_date" class="form-control" name="scheduled_date"
                                required />
                        </div>
                        <div class="form-group">
                            <label for="descripcion">Descripción:</label>
                            <textarea id="descripcion" class="form-control" name="descripcion" required></textarea>
                        </div>
                    </div>
                    <input type="hidden" id="ruta_id" name="ruta_id" />
                    <input type="hidden" id="cliente_id" name="cliente_id" />
                    <input type="hidden" id="user_id" value="{{ Auth::user()->id }}">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" id="add-comment" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="descripcionModal-massive" tabindex="-1" role="dialog"
        aria-labelledby="descripcionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descripcionModalLabel-massive">Pactar Clientes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="descripcionForm_massive" method="POST" action="{{ route('agree-clients-massive') }}">
                    @csrf
                    <div class="modal-body">
                        <div id="error-message-massive" class="alert alert-danger d-none"></div>
                        <div id="success-message-massive" class="alert alert-success d-none"></div>
                        <div class="form-group">
                            <h4> Clientes: </h4>

                            <div id="list-client-massive">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="scheduled_date">Fecha:</label>
                            <input type="date" id="scheduled_date_massive" class="form-control" name="scheduled_date"
                                required />
                        </div>
                        <div class="form-group">
                            <label for="descripcion">Descripción:</label>
                            <textarea id="descripcion_massive" class="form-control" name="descripcion" required></textarea>
                        </div>
                    </div>
                    <input type="hidden" id="ruta_massive_id" name="ruta_id" />
                    <input type="hidden" id="user_massive_id" value="{{ Auth::user()->id }}">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" id="add-comment-massive" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal para Cargar Pago Manual -->
    <div class="modal fade" id="manualPaymentModal" tabindex="-1" role="dialog"
        aria-labelledby="manualPaymentModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="manualPaymentModalLabel">Cargar Pago Manual</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="manualPaymentForm" method="GET" action="{{ route('pago_manual.index') }}">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="customerName">Cliente:</label>
                            <input type="text" id="pmcustomerName" class="form-control" name="customer_name"
                                readonly>
                        </div>
                        <div class="form-group">
                            <label for="contractSelect">Contrato:</label>
                            <select id="contractSelect" required class="form-control" name="contract_id">
                                <option value="">Seleccione un contrato</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="serviceSelect">Servicio:</label>
                            <select id="serviceSelect" required class="form-control" name="service_id">
                                <option value="">Seleccione un servicio</option>
                            </select>
                        </div>
                        <input type="hidden" id="customerId" name="customer_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button class="btn btn-primary" id="saveManualPayment">Cargar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal para Ver Morosidad -->
    <div class="modal fade" id="modalMorosida" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMorosidaLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div id="loading" style="display: flex; justify-content: center;"><span class="loader"></span>
                    </div>

                    <table id="table-late-payment-modal" class="table table-bordered table-striped">
                        <thead>
                            <th>Fecha</th>
                            <th>Concepto</th>
                            <th>Contrato</th>
                            <th>Servicio</th>
                            <th>Monto</th>
                        </thead>
                        <tbody id="tbody-late-payment-modal" style="font-size: 12px;">
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>

                        <tfoot>

                            <th></th>
                            <th></th>
                            <th></th>
                            <th>Total:</th>
                            <th id="total-late-payment-modal"></th>

                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Mensualidad -->
    <div class="modal fade" id="modalMontoMensual" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMontoMensualLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="loading-2" style="display: flex; justify-content: center;"><span class="loader"></span>
                    </div>
                    <table id="table-monto-mensual-modal" class="table table-bordered table-striped">
                        <thead>
                            <th>Contrato</th>
                            <th>Servicio</th>
                            <th>Monto</th>
                        </thead>
                        <tbody id="tbody-monto-mensual-modal" style="font-size: 12px;">
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <th></th>
                            <th>Total:</th>
                            <th id="total-monto-mensual-modal"></th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Monto Cancelado -->
    <div class="modal fade" id="modalMontoCancelado" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMontoCanceladoLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="loading-3" style="display: flex; justify-content: center;"><span class="loader"></span>
                    </div>
                    <table id="table-monto-cancelado-modal" class="table table-bordered table-striped">
                        <thead>
                            <th>Fecha</th>
                            <th>Contrato</th>
                            <th>Servicio</th>
                            <th>Monto</th>
                        </thead>
                        <tbody id="tbody-monto-cancelado-modal" style="font-size: 12px;">
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <th></th>
                            <th></th>
                            <th>Total:</th>
                            <th id="total-monto-cancelado-modal"></th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="//cdn.datatables.net/2.0.7/js/dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        var customers = {}
        var dates = null

        var detalles_aux = [];


        let shadow

        function dragit(event) {
            @if($control_access)
                shadow = event.target;
            @endif
        }

        function dragover(e) {
            @if($control_access)
                let children = Array.from(e.target.parentNode.parentNode.children);

                if (children.indexOf(e.target.parentNode) > children.indexOf(shadow)) {
                    e.target.parentNode.after(shadow);
                } else {
                    e.target.parentNode.before(shadow);
                }

                let tempId = e.target.parentNode.getAttribute('data-position');
                e.target.parentNode.setAttribute('data-position', shadow.getAttribute('data-position'));
                shadow.setAttribute('data-position', tempId);

            @endif
        }

        function unFocusRow(e) {

            @if($control_access)

                let rows = document.querySelectorAll("#details-body tr")
                let data = []
                rows.forEach(
                    row => {
                        data.push({
                            position: row.getAttribute('data-position'),
                            id: row.getAttribute('data-id')
                        })
                    }
                )
                sendUpgradePosition(data)

            @endif
        }

        function toggleBtnChangeCustomer() {

            const checks = $("input[name='checklist[]']")

            let show = false

            for (let i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    show = true;
                    break;
                }
            }

            if (show) $(".show-change-customer").show()
            else $(".show-change-customer").hide()

        }

        function sendUpgradePosition(data) {

            $("#show-load-customer").show();

            const url = "{{ asset('') . 'position-update-2' }}";

            const params = {
                'positions': data
            }


            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch(`${url}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(params)
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                    $("#show-load-customer").hide();

                    Swal.fire({
                        icon: 'success',
                        title: '¡Cliente Actualizaddo!',
                        text: 'La posicion del cliente fue actualizada',
                        showConfirmButton: false,
                        timer: 3500
                    });
                })
                .catch((error) => {

                    console.error('Error:', error);
                    $("#show-load-customer").hide();

                    Swal.fire(
                        'Error',
                        'Hubo un problema al actualizar la posicion del cliente',
                        'error'
                    );

                });
        }




        function get_customers_select() {

            let checks = $("input[name='checklist[]']")
            let data = {
                customer_ids: [],
                customer_names: [],
                router_id: 0
            }


            for (let i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    let raw_value = checks[i].value

                    let value = raw_value.split('----')


                    data.router_id = value[0]
                    data.customer_ids.push(value[1])
                    data.customer_names.push(value[2])
                }
            }

            return data;
        }





        $(document).ready(function() {

            toggleBtnChangeCustomer()
            $("#show-load-customer").hide();

            $("#btn-change-date").css("display", "none");

            const today = new Date().toISOString().split('T')[0];

            document.getElementById('scheduled_date').setAttribute('min', today);

            let data = @json($data);

            for (ff in data) {
                for (let r of data[ff]) {
                    if (!customers[r.cliente_id])
                        customers[r.cliente_id] = []

                    customers[r.cliente_id].push(r.fecha_cobro_aux)
                }
            }

            $("#confirm-bitacora").click(function() {
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "Si confirmas la bitácora, no podrás hacer modificaciones y deberás comunicarte con tu supervisor.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('bitacora.confirm') }}", // Ruta al método confirmLog en el controlador
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function(response) {
                                $("#create-bitacora").hide();
                                $("#confirm-bitacora").text('Bitácora Confirmada').prop(
                                    'disabled', true);
                                Swal.fire(
                                    '¡Confirmada!',
                                    'La bitácora ha sido confirmada.',
                                    'success'
                                );

                                location.reload();
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error',
                                    'Hubo un problema al confirmar la bitácora.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });


            function showDetailsCustomers(customers) {

                $("#show-load-customer").show();

                const customer_data = customers.map(c => {
                    return {
                        customer_id: c.cliente_id,
                        position_id: c.position_id,
                        router_id: c.id,
                        date: c.fecha_cobro_aux
                    }
                })

                const url = "{{ asset('') . 'router-log/customers-details' }}";
                const params = {
                    customer_data
                }
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                fetch(`${url}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(params)
                    })
                    .then(response => response.json())
                    .then(data => {
                        $("#show-load-customer").hide();

                        if (!data) return;
                        if (!data.customers) return;

                        data.customers.forEach(customer => {

                            $(`tr[data-id='${customer.position_id}']`).show();

                            if (customer.is_change_date) {
                                $(`tr[data-id='${customer.position_id}']`).hide();
                            }

                            // if (!customer.is_due_payment) {

                            //     if (customer.is_payment)
                            //         $(`tr[data-id='${customer.position_id}']`).hide();
                            // }

                            if (customer.is_payment)
                                    $(`tr[data-id='${customer.position_id}']`).hide();

                        })
                    })
                    .catch((error) => {
                        console.error('Error:', error)
                        Swal.fire(
                            'Error!',
                            'Ha ocurrido un error al buscar detalles de los clientes',
                            'error'
                        );

                    });
            }


            $(".show-details").click(function() {
                let fecha = $(this).data('fecha');

                let detalles = data[fecha];
                let tbody = $("#details-body");
                tbody.empty();

                dates = fecha

                $("#all_customers").prop('checked', false);

                $("#btn-change-date").css("display", "block");

                detalles.forEach(function(detalle) {
                    let direccion = detalle.direccion_cliente ? detalle.direccion_cliente :
                        'Cliente sin Direccion';
                    let direccionClass = detalle.direccion_cliente ? 'text-primary' : 'text-danger';
                    tbody.append(` 
                    <tr data-id="${detalle.position_id}"  data-position="${detalle.position}"  draggable="true" ondragstart="dragit(event)" ondragover="dragover(event)" ondragend="unFocusRow(event)" >
                        <td><input class="form-check-input" type="checkbox" name="checklist[]"  value="${detalle.id}----${detalle.cliente_id}----${detalle.cliente}"   onclick="focusCheckCustomer()"    /> </td>
                        <td>${detalle.ruta}</td>
                       <td class="text-primary">${detalle.cliente_documento}</td>
                        <td>${detalle.cliente}</td>
                        <td><a href="#" class="edit-address ${direccionClass}" data-cliente-id="${detalle.cliente_id}" data-direccion="${detalle.direccion_cliente}">${direccion}</a></td>
                        <td>
                            <a  class='open-modal-monto-mes' data-customer='${detalle.cliente}' data-customer-id='${detalle.cliente_id}' >
                              <i class='fas fa-eye'></i>
                            </a>
                        </td>
                        <td>
                            <a href='#' class='open-modal-morosidad' data-customer='${detalle.cliente}' data-customer-id='${detalle.cliente_id}' >
                                <i class='fas fa-eye'></i>
                            </a>
                        </td>
                        <td> 
                            <a href='#' class='open-modal-monto-cancelado' data-customer='${detalle.cliente}' data-customer-id='${detalle.cliente_id}' >
                                <i class='fas fa-eye'></i>
                            </a>

                        </td>
                       
                        <td>
                            <a href="#" class="cargar-pago-manual" data-toggle="modal" data-target="#manualPaymentModal" data-customer-id="${detalle.cliente_id}" data-customer-name="${detalle.cliente}">
                                <i class="far fa-credit-card" style="color: #007bff;"></i>
                            </a>
                            <a href="#" class="descripcion-cobro-no-ejecutado" data-customer-name="${detalle.cliente}" data-agreed-client="${detalle.agreed_client}" data-id="${detalle.id}" data-customer-id="${detalle.cliente_id}">
                                <i class="fas fa-user-times" style="color: red;"></i>
                            </a>
                        </td>
                    </tr>
                `);
                });

                $(".card-selectable").removeClass("selected-card");
                $(this).closest(".card-selectable").addClass("selected-card");

                $("#details-table").show();

                toggleBtnChangeCustomer();
                showDetailsCustomers(detalles);


                detalles_aux = detalles;

            });


            function template_modal_late_payment(element) {
                return `
                <tr>
                    <td>${element.cobro_fecha_aplicacion}</td>  
                    <td>${element.cobro_concepto}</td>  
                    <td>${element.contrato_codigo}</td>  
                    <td>${element.servicio_nombre}</td>  
                    <td>${element.cobro_valor}</td>  
                </tr>
            `;
            }

            function toggleLoadingAlert(control) {

                if (control) {
                    $("#table-late-payment-modal").hide();
                    $("#loading").show();
                } else {
                    $("#table-late-payment-modal").show();
                    $("#loading").hide();
                }
            }

            function showError(err) {
                let data = err.responseJSON
                let message = data.message
                let errors = data.errors


                console.error(message)
                console.error(errors)
            }


            function modal_moroso() {

                let cliente = $(this).attr("data-customer");
                let id = $(this).attr("data-customer-id");

                $("#modalMorosidaLabel").html("Morosidad de " + cliente);
                $("#modalMorosida").modal('show');

                $.ajax({
                    type: "GET",
                    url: "{{ asset('') . 'customer/late-payment' }}",
                    data: jQuery.param({
                        customer_id: id
                    }),
                    beforeSend: function(xhr) {
                        toggleLoadingAlert(true);
                    },
                    success: function(response) {

                        let data = response.data



                        $("#tbody-late-payment-modal").html("")
                        let node_table = ""
                        let total_late_payment = 0;

                        data.forEach(e => {
                            node_table += template_modal_late_payment(e);
                            total_late_payment += parseFloat(e.cobro_valor)
                        })

                        $("#tbody-late-payment-modal").html(node_table)
                        $("#total-late-payment-modal").html(total_late_payment.toFixed(2))
                        toggleLoadingAlert(false);
                    },
                    error: (error) => {
                        showError(error)
                        toggleLoadingAlert(false);
                    }
                });

            }

            function toggleLoadingAlert2(control) {

                if (control) {
                    $("#table-monto-mensual-modal").hide();
                    $("#loading-2").show();
                } else {
                    $("#table-monto-mensual-modal").show();
                    $("#loading-2").hide();
                }
            }

            function template_modal_monto_mensual(element) {
                return `
                <tr>
                    <td>${element.contrato}</td>  
                    <td>${element.servicio}</td>  
                    <td>${element.monto}</td>  
                </tr>
            `;
            }


            function modal_monto_mes() {

                let cliente = $(this).attr("data-customer");
                let id = $(this).attr("data-customer-id");

                $("#modalMontoMensualLabel").html("Mensualidad de " + cliente);
                $("#modalMontoMensual").modal('show');

                $.ajax({
                    type: "GET",
                    url: "{{ asset('') . 'customer/monthly-amount' }}",
                    data: jQuery.param({
                        customer_id: id
                    }),
                    beforeSend: function(xhr) {
                        toggleLoadingAlert2(true);
                    },
                    success: function(response) {

                        let data = response.data


                        $("#tbody-monto-mensual-modal").html("")
                        let node_table = ""
                        let total_late_payment = 0;

                        data.forEach(e => {
                            node_table += template_modal_monto_mensual(e);
                            total_late_payment += parseFloat(e.monto)
                        })

                        $("#tbody-monto-mensual-modal").html(node_table)
                        $("#total-monto-mensual-modal").html(total_late_payment.toFixed(2))
                        toggleLoadingAlert2(false);
                    },
                    error: (error) => {
                        showError(error)
                        toggleLoadingAlert2(false);
                    }
                });


            }


            function toggleLoadingAlert3(control) {

                if (control) {
                    $("#table-monto-cancelado-modal").hide();
                    $("#loading-3").show();
                } else {
                    $("#table-monto-cancelado-modal").show();
                    $("#loading-3").hide();
                }
            }

            function template_modal_monto_cancelado(element) {
                // Fecha	Concepto	Contrato	Servicio	Monto
                return `
                <tr>
                    <td>${element.fecha}</td>   
                    <td>${element.contrato}</td>  
                    <td>${element.servicio}</td>  
                    <td>${element.monto}</td>  
                </tr>
            `;
            }


            function modal_monto_cancelado() {

                let cliente = $(this).attr("data-customer");
                let id = $(this).attr("data-customer-id");

                $("#modalMontoCanceladoLabel").html("Montos Cancelados de " + cliente);
                $("#modalMontoCancelado").modal('show');

                $.ajax({
                    type: "GET",
                    url: "{{ asset('') . 'customer/amount-paid' }}",
                    data: jQuery.param({
                        customer_id: id,
                        date: dates
                    }),
                    beforeSend: function(xhr) {
                        toggleLoadingAlert3(true);
                    },
                    success: function(response) {

                        let data = response.data;

                        $("#tbody-monto-cancelado-modal").html("");

                        let node_table = "";
                        let total_late_payment = 0;

                        data.forEach(e => {
                            node_table += template_modal_monto_cancelado(e);
                            total_late_payment += parseFloat(e.monto)
                        });

                        $("#tbody-monto-cancelado-modal").html(node_table);
                        $("#total-monto-cancelado-modal").html(total_late_payment.toFixed(2));

                        toggleLoadingAlert3(false);

                    },
                    error: (error) => {

                        showError(error);
                        toggleLoadingAlert3(false);
                    }
                });
            }


            $("body").on('click', 'a.open-modal-monto-mes', modal_monto_mes);
            $("body").on('click', 'a.open-modal-monto-cancelado', modal_monto_cancelado);
            $("body").on('click', 'a.open-modal-morosidad', modal_moroso);

            //Clientes Pactados
            $("#add-comment").click(function() {
                let cliente_id = $("#cliente_id").val();

                let user_id = $("#user_id").val();

                let ruta_id = $("#ruta_id").val();
                let descripcion = $("#descripcion").val();
                let scheduled_date = $("#scheduled_date").val();


                if (descripcion.trim() === "") {
                    $("#error-message").text("El campo descripción es obligatorio").removeClass("d-none");
                } else {
                    $("#error-message").addClass("d-none");
                    $.post("{{ route('agree-clients') }}", {
                        ruta_id: ruta_id,
                        cliente_id: cliente_id,
                        descripcion: descripcion,
                        scheduled_date: scheduled_date,
                        user_id: user_id
                    }, function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Cliente Pactado!',
                            text: 'El cliente fue pactado con éxito.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            $('#descripcionModal').modal('hide');
                            $("#success-message").addClass("d-none");
                        });

                        showDetailsCustomers(detalles_aux);
                    });
                }
            });



            $("#add-comment-massive").click(function() {

                let customer_selects = get_customers_select();



                let ruta_id = customer_selects.router_id;

                let descripcion = $("#descripcion_massive").val();
                let scheduled_date = $("#scheduled_date_massive").val();
                let user_id = $("#user_massive_id").val();

                let customer_ids = customer_selects.customer_ids;


                const date_valiidate = new Date(scheduled_date);

                const now = new Date();
                now.setHours(0, 0, 0, 0)
                date_valiidate.setHours(0, 0, 0, 0)
                date_valiidate.setDate(date_valiidate.getDate() + 1);


                let time1 = date_valiidate.getTime();
                let time2 = now.getTime();

                if (time1 < time2) {
                    Swal.fire(
                        'Error!',
                        'La fecha debe ser igual o mayor a la de hoy',
                        'error'
                    );

                    $('#descripcionModal-massive').modal('hide');
                    $("#success-message-massive").addClass("d-none");

                    return;
                }


                if (descripcion.trim() === "") {
                    $("#error-message-massive").text("El campo descripción es obligatorio").removeClass(
                        "d-none");
                } else {
                    $("#error-message-massive").addClass("d-none");

                    $.post("{{ route('agree-clients-massive') }}", {
                        ruta_id,
                        customer_ids,
                        descripcion,
                        scheduled_date,
                        user_id
                    }, function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Clientes Pactados!',
                            text: 'Los clientes fueron pactados con éxito.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            $('#descripcionModal-massive').modal('hide');
                            $("#success-message-massive").addClass("d-none");
                        });
                    });
                }
            });

            //

            $('#descripcionModal').on('hidden.bs.modal', function() {
                $("#descripcion").val('');
                $("#error-message").addClass("d-none");
            });

            $('#descripcionModal-massive').on('hidden.bs.modal', function() {
                $("#descripcion-massive").val('');
                $("#error-message-massive").addClass("d-none");
            });

            // Cobros no Ejecutados
            $(document).on('click', '.descripcion-cobro-no-ejecutado', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                var cliente_id = $(this).data('customer-id');
                var customerName = $(this).data('customer-name');
                var agreed_cliente = parseInt($(this).data('agreed-client'));
                $("#ruta_id").val(id);
                $("#cliente_id").val(cliente_id);
                $('#customerName').val(customerName);
                if (agreed_cliente > 0) {

                    Swal.fire({
                        title: 'Cliente ya posee una fecha pactada',
                        text: '¿Desea modificarla?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Continuar',
                        cancelButtonText: 'No'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#descripcionModal').modal('show');
                        }
                    });
                } else {
                    $('#descripcionModal').modal('show');
                }

            });

            // Cargar Pago Manual
            $(document).on('click', '.cargar-pago-manual', function() {
                var customerId = $(this).data('customer-id');
                var customerName = $(this).data('customer-name');
                $('#customerId').val(customerId);
                $('#pmcustomerName').val(customerName);

                // AJAX para obtener los contratos del cliente
                $.ajax({
                    url: '/pagos/asociacion/manual/contratos/ajax/' + customerId,
                    method: 'GET',
                    success: function(data) {
                        data = JSON.parse(data);
                        $('#contractSelect').empty().append(
                            '<option value="">Seleccione un contrato</option>');
                        $.each(data, function(key, value) {
                            $('#contractSelect').append('<option value="' + value
                                .contrato_id + '">' + value.contrato_codigo +
                                '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log('Error al obtener los contratos:', error);
                    }
                });
            });

            // Cuando se selecciona un contrato
            $('#contractSelect').change(function() {
                var contractId = $(this).val();

                // Llamada AJAX para obtener los servicios del contrato
                $.ajax({
                    url: '/pagos/asociacion/manual/servicios/ajax/' + contractId,
                    method: 'GET',
                    success: function(data) {
                        data = JSON.parse(data);
                        $('#serviceSelect').empty().append(
                            '<option value="">Seleccione un servicio</option>');
                        $.each(data, function(key, value) {
                            $('#serviceSelect').append('<option value="' + value
                                .contrato_servicio_id + '">' + value
                                .servicio_nombre + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log('Error al obtener los servicios:', error);
                    }
                });
            });

            $('#saveManualPayment').click(function() {
                var contractId = $('#contractSelect').val();
                var serviceId = $('#serviceSelect').val();
                var customerId = $('#customerId').val();
                var customerName = $('#customerName').val();
            });

            // Evento para modal editar cliente
            $(document).on('click', '.edit-address', function(e) {
                e.preventDefault();
                var clienteId = $(this).data('cliente-id');
                var direccion = $(this).data('direccion');
                $('#editAddressForm #cliente_id').val(clienteId);
                $('#editAddressForm #direccion').val(direccion);
                $('#editAddressModal').modal('show');
            });

            // mensaje de éxito
            $('#editAddressForm').submit(function(e) {
                e.preventDefault();

                var form = $(this);
                var url = form.attr('action');
                var formData = form.serialize();

                $.post(url, formData, function(response) {
                    if (response.success) {
                        $('#editAddressModal').modal('hide');
                        Swal.fire(
                            '¡Éxito!',
                            response.message,
                            'success'
                        ).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire(
                            'Error',
                            'No se pudo actualizar la dirección.',
                            'error'
                        );
                    }
                }).fail(function() {
                    Swal.fire(
                        'Error',
                        'No se pudo actualizar la dirección.',
                        'error'
                    );
                });
            });

        })




        $('#all_customers').click(function() {
            $("input[name='checklist[]']").prop('checked', this.checked);
            toggleBtnChangeCustomer();
        });


        $("#btn-change").click(() => {

            let customer_data = get_customers_select();

            $('#descripcionModal-massive').modal('show');


            let template = `<ul>`


            customer_data.customer_names.forEach(name => {
                template += `<li>${name}</li>`
            })

            template += `</ul>`

            $("#list-client-massive").html(template)
        })


        function focusCheckCustomer() {
            toggleBtnChangeCustomer()
        }
    </script>

    <style>
        .loader {
            width: 16px;
            height: 16px;
            position: relative;
            left: -32px;
            border-radius: 50%;
            color: #fff;
            background: currentColor;
            box-shadow: 32px 0, -32px 0, 64px 0;
        }

        .loader::after {
            content: '';
            position: absolute;
            left: -32px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 10px;
            background: #FF3D00;
            animation: move 3s linear infinite alternate;
        }

        @keyframes move {

            0%,
            5% {
                left: -32px;
                width: 16px;
            }

            15%,
            20% {
                left: -32px;
                width: 48px;
            }

            30%,
            35% {
                left: 0px;
                width: 16px;
            }

            45%,
            50% {
                left: 0px;
                width: 48px;
            }

            60%,
            65% {
                left: 32px;
                width: 16px;
            }

            75%,
            80% {
                left: 32px;
                width: 48px;
            }

            95%,
            100% {
                left: 64px;
                width: 16px;
            }
        }


        [draggable="true"] {
            cursor: move;
        }

        [draggable="true"]:active {
            background-color: #eee;
            /* Change color when dragging */
        }
    </style>
@endsection