@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Lista de Deudas Historicas')
@section('plugins.Select2', true)
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Listado de Deudas Historicas</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <a href="{{ route('ventas.deudas_historicas.reporte') }}" class="btn btn-danger" target="_blank"> <i class="fas fa-file-pdf"></i> Reporte de Deudas Historicas</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-warning text-white">
            <h1 class="card-title"> <i class="fas fa-file-alt"></i> Lista de Deudas Historicas</h1>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="table-deudas-historicas" class="table  table-bordered table-hover" cellspacing="0"
                style="width:100% !important">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Cliente</th>
                        <th>Serie Venta</th>
                        <th>Fecha Venta</th>
                        <th>Monto Total</th>
                        <th>Monto Recibido</th>
                        <th>Monto Pendiente</th>
                        <th>Estado</th>
                        <th>Observaciones</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($deudas as $deuda)
                        <tr>
                            <td>{{ $deuda->id }}</td>
                            <td>{{ $deuda->cliente->razon_social }}</td>
                            <td>{{ $deuda->serie_venta }}</td>
                            <td>{{ $deuda->fecha_venta }}</td>
                            <td>{{ $deuda->monto_total }}</td>
                            <td>{{ $deuda->monto_recibido }}</td>
                            <td>{{ $deuda->monto_pendiente }}</td>
                            <td>
                                @if ($deuda->monto_pendiente <= 0)
                                    <span class="badge badge-success">Pagado</span>
                                @else
                                    <span class="badge badge-danger">Pendiente</span>
                                @endif
                            </td>
                            <td>{{ $deuda->comentario }}</td>
                            <td>
                                @include('admin.ventas.acciones', ['row' => $deuda])
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
        </div>
    </div>

    <!-- Modal generar pago Metodo A-->
    <div class="modal fade" id="agregarPagoModal" tabindex="-1" role="dialog" aria-labelledby="agregarPagoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="agregarPagoModalLabel">Agregar Pago</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="agregarPagoForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="venta_id" id="venta_id">
                        <input type="hidden" name="cliente_id" id="cliente_id">

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="">Monto a pagar</label>
                                    <input type="text" class="form-control" name="monto_total" id="monto_total" readonly>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="">Fecha del deposito</label>
                                    <input type="date" class="form-control" name="fecha" id="fecha"
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="metodo_pago">Método de Pago</label>
                                    <select class="form-control" name="metodo_pago_id" id="metodo_pago_id" required>
                                        @foreach ($metodos as $metodo)
                                            <option value="{{ $metodo->id }}">{{ $metodo->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col d-flex align-items-center justify-content-center">
                                <div class="form-group m-0">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="checkPagoCompleto">
                                        <label class="custom-control-label" for="checkPagoCompleto">¿Desea hacer el pago completo?</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="holder_id">Titular</label>
                            <select class="form-control" name="holder_id" id="holder_id" required>
                                <!-- Aquí deberías cargar dinámicamente los métodos de pago disponibles -->
                                @foreach ($holders as $holder)
                                    <option value="{{ $holder->id }}">{{ $holder->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group">
                            <label for="entidad">Cuenta destino</label>
                            <select name="banco_id" id="banco_id" class="form-control">
                                @foreach ($bancos as $entidad)
                                    <option value="{{ $entidad->id }}">{{ $entidad->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="numero">Numero de Operación</label>
                                    <input type="text" class="form-control" name="num_operacion" id="num_operacion">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="monto">Ingresar Pago</label>
                                    <input type="number" step="0.01" class="form-control" name="monto" id="monto"
                                        required>
                                </div>
                            </div>
                        </div>



                        <div class="form-group">
                            <label for="capture">Captura o Imagen del pago</label>
                            <input type="file" name="imagen" id="imagen" class="form-control">
                        </div>



                        <div class="form-group">
                            <label for="">Comentario</label>
                            <textarea class="form-control" name="comentario" id="comentario" rows="4"></textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary float-right" id="btnAddpagoMetodoA"> <i class="fas fa-save"></i> Registrar Pago </button>
                        </div>

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

@stop

@section('css')
<style>
    .checkbox-label {
        display: flex;
        align-items: center;
        font-size: 16px;
        /* Tamaño del texto */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el texto */
    }

    .checkbox-label input[type="checkbox"] {
        width: 20px;
        /* Tamaño del checkbox */
        height: 20px;
        /* Tamaño del checkbox */
        margin-right: 10px;
        /* Espacio entre el checkbox y el texto */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el checkbox */
    }

    .select2-selection {
        height: 40px !important;
    }
</style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#table-deudas-historicas').DataTable({
                "language": {
                    "url": "/js/spanish.json"
                }
            });

            var tipoVenta = "{{ $tipoVenta }}";
            console.log('Tipo de venta: ' + tipoVenta);


            //Eliminar venta
            $(document).on('click', '.btnEliminarVenta', function(e) {
                e.preventDefault();
                const ventaId = $(this).data('venta-id');
                console.log('Eliminar venta: ' + ventaId);

                Swal.fire({
                    title: '¿Confirmar eliminación?',
                    text: '¿Estás seguro de eliminar esta venta?',
                    icon: 'warning',
                    input: 'text',
                    inputLabel: 'Motivo de eliminación',
                    inputPlaceholder: 'Ingrese el motivo de la eliminación...',
                    inputAttributes: {
                        'aria-label': 'Motivo de eliminación'
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar',
                    inputValidator: (value) => {
                        if (!value) {
                            return 'Debe ingresar un motivo de eliminación';
                        }
                        if (value.length < 10) {
                            return 'El motivo debe tener al menos 10 caracteres';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const comentario = result.value;

                        $.ajax({
                            url: '/ventas/' + ventaId,
                            type: 'DELETE',
                            data: {
                                comentario: comentario
                            },
                            success: function(response) {
                                // Verificar si la respuesta indica éxito o error
                                if (response.success === false) {
                                    // Es un error del backend
                                    Swal.fire(
                                        'Error!',
                                        response.message || 'No se pudo eliminar la venta',
                                        'error'
                                    );
                                } else {
                                    // Es un éxito
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Éxito',
                                        text: 'Venta eliminada correctamente',
                                        showConfirmButton: false,
                                        timer: 1000
                                    }).then(() => {
                                        location.reload();
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message || 'No se pudo eliminar la venta. Intenta nuevamente.'
                                });
                            }
                        });
                    }
                });
            });

            //Abir modal y pasar datos para la busqueda.
            $('#agregarPagoModal').on('show.bs.modal', function(event) {
                const button = $(event.relatedTarget); // Botón que abrió el modal
                const ventaId = button.data('venta-id'); // Extrae el ID de la venta
                const montoTotal = button.data('venta-monto');
                const clienteId = button.data('venta-cliente-id');

                const modal = $(this);
                modal.find('#venta_id').val(ventaId);
                modal.find('#monto_total').val(montoTotal);
                modal.find('#cliente_id').val(clienteId);
                modal.find('#holder_id').prop('selectedIndex', 4);

                console.log('ventaId: ' + ventaId);
                console.log('montoTotal: ' + montoTotal);
                console.log('clienteId: ' + clienteId);
            });


            $('#checkPagoCompleto').change(function() {
                if ($(this).is(':checked')) {
                    // Obtener el monto total a pagar
                    var montoTotal = parseFloat($('#monto_total').val()) || 0;
                    // Establecer el monto recibido igual al monto total a pagar
                    $('#monto').val(montoTotal);
                } else {
                    // Si no está marcado, limpiar los campos
                    $('#monto').val('0.00');
                }
            });

            // Manejo del envío del formulario, Agregar pago metodo dirigido a venta Metodo A.
            $('#agregarPagoForm').on('submit', function(event) {
                event.preventDefault(); // Evita el envío normal del formulario

                const form = $(this);
                const data = new FormData(this); // 'this' hace referencia al formulario
                data.append('tipo_venta', tipoVenta);
                const monto = parseFloat($('#monto').val());
                const saldo = parseFloat($('#monto_total').val()); // Asegúrate de tener el saldo en el formulario

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este pago?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('pagos.agregar-pago-historico') }}",
                            type: 'POST',
                            data: data,
                            processData: false, // No procesar los datos (importantísimo cuando se envía FormData)
                            contentType: false, // No se especifica el content-type (importantísimo cuando se envían archivos)
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Información',
                                        text: response.message,
                                        showConfirmButton: false,
                                        timer: 1000
                                    }).then(() => {
                                        location.reload(); // Recarga la página después de mostrar la alerta
                                    });
                                } else {
                                    let errorMessages = '';
                                    $.each(response.errors, function(field, messages) {
                                        errorMessages += messages.join(', ') + '\n';
                                    });

                                    Swal.fire({
                                        title: 'Error de validación',
                                        text: errorMessages, // Aquí mostramos los errores concatenados
                                        icon: 'error',
                                        confirmButtonText: 'Ok'
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message,
                                });
                            }
                        });
                    }
                });
            });


        });
    </script>
@stop