@extends('layouts.app')
@php
    use Carbon\Carbon;
@endphp

@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">Clientes Pactados</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>Clientes Pactados</header>
                        </div>
                        <div class="card-body ">

                            <div class="row">
                                <div class="col-3 mt-3 mb-5" id="btn-change-date">
                                    <button class="btn btn-primary" id="btn-change"> Cambiar Fecha </button>
                                </div>

                            </div>

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table class="table display product-overview mb-30">
                                        <thead>
                                            <tr>
                                                <th> <b> <input type="checkbox" value="" id="all_customers"> </b>
                                                </th>
                                                <th><b>Ruta</b></th>
                                                <th><b>Cliente</b></th>
                                                <th><b>Direccion</b></th>
                                                <th><b>Observacion</b></th>
                                                <th>Fecha Real </th>
                                                <th><b>Fecha Pactada</b></th>
                                                <th><b>Estado</b></th>
                                                <th><b>Acción</b></th>
                                                <th><b></b></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>

                                                <form method="GET">
                                                    @csrf
                                                    <td></td>
                                                    <td>
                                                        <select name="router_id" class="form-control">
                                                            <option value='' selected></option>
                                                            @foreach ($routes as $key => $route)
                                                                <option value="{{ $key }}"> {{ $route }}
                                                                </option>
                                                            @endforeach

                                                        </select>
                                                    </td>
                                                    <td> <input name="name" class='form-control' /> </td>
                                                    <td> <input name="address" class='form-control' /> </td>
                                                    <td> <input name="description" class='form-control' /> </td>
                                                    <td> <input name="real_date" class='form-control' type="date" />
                                                    </td>
                                                    <td> <input name="date" class='form-control' type="date" /> </td>
                                                    <td>
                                                        <select name="state" class="form-control">
                                                            <option value='' selected></option>
                                                            <option value='1'>Pactado</option>
                                                            <option value='2'>Visitado</option>
                                                        </select>
                                                    </td>
                                                    <td> <button class="btn btn-primary"> Buscar </button>
                                                       
                                                    </td>
                                                    <td>
                                                     <a class="btn btn-warning"  href="{{ route('clientes-pactados') }}" > Limpiar Filtro </a>
                                                    </td>

                                                </form>
                                            </tr>
                                            @foreach ($agreed_clients as $client)
                                                @php
                                                    $real_date = $filters['real_date'];
                                                    $state = $filters['state'];

                                                    if ($real_date) {
                                                        if ($real_date != $clientPayments[$client->cliente_id]) {
                                                            continue;
                                                        }
                                                    }

                                                    if ($state) {
                                                        if ($state == '1') {
                                                            if (!$client->scheduled_date) {
                                                                continue;
                                                            }
                                                        }

                                                        if ($state == '2') {
                                                            if ($client->scheduled_date) {
                                                                continue;
                                                            }
                                                        }
                                                    }

                                                @endphp
                                                <tr>
                                                    <td><input class="form-check-input" type="checkbox" name="checklist[]"
                                                            value="{{ $client->ruta->ruta_id }}----{{ $client->cliente->cliente_id }}----{{ $client->cliente->cliente_nombres }} {{ $client->cliente->cliente_apellido1 }}" />
                                                    </td>
                                                    <td>{{ $client->ruta->ruta_nombre }}</td>
                                                    <td>{{ $client->cliente->cliente_documento }} -
                                                        {{ optional($client->cliente)->cliente_nombres }}
                                                        {{ optional($client->cliente)->cliente_apellido1 }}
                                                        {{ optional($client->cliente)->cliente_apellido2 }}</td>

                                                    <td>
                                                        {{ $client->cliente->cliente_direccion }}

                                                    </td>
                                                    <td>{{ $client->descripcion }}</td>
                                                    <td>{{ isset($clientPayments[$client->cliente_id]) ? Carbon::parse($clientPayments[$client->cliente_id])->format('d-m-Y') : 'Sin Pago' }}
                                                    </td>


                                                    @php

                                                        $date1 = Carbon::parse(now())->format('d-m-Y');

                                                        $date2 = Carbon::parse($client->scheduled_date)->format(
                                                            'd-m-Y',
                                                        );

                                                        $badge = '';

                                                        if ($date1 == $date2) {
                                                            $badge = 'bg-warning';
                                                        } elseif ($date1 > $date2) {
                                                            $badge = 'bg-danger';
                                                        }

                                                        if (!$client->scheduled_date) {
                                                            $date2 = 'SIN FECHA';
                                                            $badge = 'bg-info';
                                                        }

                                                    @endphp

                                                    <td>
                                                        @if ($badge == '')
                                                            {{ $date2 }}
                                                        @else
                                                            <span class="badge {{ $badge }} ">
                                                                {{ $date2 }}
                                                            </span>
                                                        @endif
                                                    </td>
                                                    <td>

                                                        @if ($client->scheduled_date)
                                                            Pactado
                                                        @else
                                                            Visitado
                                                        @endif

                                                    </td>
                                                    <td>
                                                        <a href="#" class="cargar-pago-manual" data-toggle="modal"
                                                            data-target="#manualPaymentModal"
                                                            data-customer-id="{{ $client->cliente_id }}"
                                                            data-unpaidcharge-id="{{ $client->id }}"
                                                            data-customer-name="{{ $client->cliente->cliente_nombres }} {{ $client->cliente->cliente_apellido1 }} {{ $client->cliente->cliente_apellido2 }}">
                                                            <i class="far fa-credit-card" style="color: #007bff;"></i>
                                                        </a>
                                                        <a href="#" class="eliminar-cliente"
                                                            data-unpaidcharge-id="{{ $client->id }}">
                                                            <i class="far fa-trash-alt" style="color: red;"></i>
                                                        </a>

                                                    </td>
                                                    <td>
                                                    </td>
                                            @endforeach
                                        </tbody>

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

                        </div>
                        <div class="card-footer">
                            <div class="float-right">
                            </div>
                        </div>
                    </div>
                </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="customerName" 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">
                            <input type="hidden" id="unpaidChargeId" name="unpaidcharge_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>

    </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>
@endsection
@section('script')
    <script type="text/javascript">
        $('#all_customers').click(function() {
            $("input[name='checklist[]']").prop('checked', this.checked);
        });

        function validate_date() {

            const hoy = new Date();
            const dd = String(hoy.getDate()).padStart(2, '0'); // Día
            const mm = String(hoy.getMonth() + 1).padStart(2, '0'); // Mes
            const yyyy = hoy.getFullYear(); // Año

            const fechaHoy = yyyy + '-' + mm + '-' + dd;

            document.getElementById('scheduled_date_massive').setAttribute('min', fechaHoy);
        }

        function get_customers_select() {

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


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

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

                    data.push({
                        'router_id': value[0],
                        'customer_id': value[1],
                        'customer_name': value[2],
                    })
                }
            }

            return data;
        }


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

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

            const date_valiidate = new Date(scheduled_date);
            date_valiidate.setHours(0, 0, 0, 0)
            const now = new Date();
            now.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");
                $("#descripcion-massive").val('');
                $("#scheduled_date_massive").val('');
                $("#error-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') }}", {
                    customers,
                    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");
                        window.location.reload()
                    }, 1000);
                });
            }
        });

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




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

            let customer_data = get_customers_select();



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


            let template = `<ul>`


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

            template += `</ul>`

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



        $(document).ready(function() {


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

                // 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);
                    }
                });
            });

            validate_date();

            // 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();
            });

            $('#manualPaymentModal').on('hidden.bs.modal', function() {
                $('#serviceSelect').empty().append('<option value="">Seleccione un servicio</option>');
                $('#contractSelect').val('');
                $('#customerName').val('');
                $('#customerId').val('');


                // Cargar Pago Manual y actualizar la columna charged_payment
                $('#saveManualPayment').click(function() {
                    var contractId = $('#contractSelect').val();
                    var serviceId = $('#serviceSelect').val();
                    var customerId = $('#customerId').val();

                    // Llamada AJAX para cargar el pago manual y actualizar charged_payment
                    $.ajax({
                        url: '{{ route('update-charged-payment') }}',
                        method: 'POST',
                        data: {
                            contract_id: contractId,
                            service_id: serviceId,
                            cliente_id: customerId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                // Eliminar la fila correspondiente en la tabla
                                $('#row-' + customerId).remove();
                                // Cerrar el modal
                                $('#manualPaymentModal').modal('hide');
                            } else {
                                alert('Error al cargar el pago manual.');
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log('Error al cargar el pago manual:', error);
                        }
                    });
                });
            });


            $("body").on('click', 'a.eliminar-cliente', function(e) {
                e.preventDefault();

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "No podrás revertir esto después!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminarlo!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var unpaidChargeId = $(this).data('unpaidcharge-id');

                        $.ajax({
                            url: '{{ route('eliminar-cliente-pactado') }}',
                            method: 'DELETE',
                            data: {
                                unpaid_charge_id: unpaidChargeId,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.message ==
                                    'unpaid_charge deleted successfully') {
                                    Swal.fire(
                                        'Eliminado!',
                                        'El cliente ha sido eliminado.',
                                        'success'
                                    ).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire(
                                        'Error!',
                                        'Hubo un problema al eliminar el cliente.',
                                        'error'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('Error al eliminar el cliente:', error);
                                Swal.fire(
                                    'Error!',
                                    'Hubo un problema al eliminar el cliente.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection