@extends('adminlte::page')

@section('title', 'Lista de Ventas')
@section('plugins.Select2', true)
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Listado de Ventas</h1>
@stop

@section('content')

    <a href="{{ route('ventas.create') }}" class="btn btn-primary mb-3 mr-2">Nueva Venta</a>
    <a href="#" class="btn btn-info mb-3" data-toggle="modal" data-target="#addpagoGlobalModal">Aplicar Pago Global</a>


    <div class="card">
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">Buscar</button>
                </div>
            </div>

            <table class="table table-bordered" id="table-ventas">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Cliente</th>
                        <th>Serie Venta</th>
                        <th>Fecha Venta</th>
                        <th>Peso Neto</th>
                        <th>Forma de Pago</th>
                        <th>Monto Total</th>
                        <th>Monto Recibido</th>
                        <th>Saldo Favor</th>
                        <th>Monto Pendiente</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($ventas as $venta)
                        <tr>
                            <td>{{ $venta->id }}</td>
                            <td>{{ $venta->cliente->razon_social }}</td>
                            <td>{{ $venta->serie_venta }}</td>
                            <td>{{ \Carbon\Carbon::parse($venta->fecha_venta)->format('d/m/Y') }}</td>
                            <td>{{ $venta->peso_neto }}</td>
                            <td>{{ $venta->forma_de_pago ? 'A credito' : 'Contado' }}</td>
                            <td>{{ number_format($venta->monto_total, 2) }}</td>
                            <td>{{ number_format($venta->monto_recibido, 2) }}</td>
                            <td>{{ number_format($venta->saldo, 2) }}</td>
                            <td>{{ number_format($venta->monto_pendiente, 2) }}</td>
                            <td>
                                @if ($venta->monto_pendiente <= 0)
                                    <span class="badge badge-success">Pagada</span>
                                @else
                                    <span class="badge badge-danger">Pendiente de pago</span>
                                @endif
                            </td>

                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-info dropdown-toggle" type="button"
                                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        Acciones
                                    </button>


                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        @if ($venta->monto_pendiente > 0)
                                            <a class="dropdown-item" href="#" data-toggle="modal"
                                                data-target="#agregarPagoModal"
                                                data-venta-monto="{{ $venta->monto_pendiente }}"
                                                data-venta-id="{{ $venta->id }}"
                                                data-venta-cliente-id="{{ $venta->cliente_id }}">
                                                Agregar Pago
                                            </a>

                                            <a class="dropdown-item" href="#" data-toggle="modal"
                                                data-target="#descuentoModal"
                                                data-venta-monto="{{ $venta->monto_pendiente }}"
                                                data-venta-id="{{ $venta->id }}"
                                                data-venta-cliente-id="{{ $venta->cliente_id }}">
                                                Agregar Descuento
                                            </a>
                                        @endif

                                        @if ($venta->monto_recibido <= 0)
                                        <a class="dropdown-item" href="">Editar</a>
                                        @endif


                                        <a class="dropdown-item" href="{{ route('ventas.show', $venta->id) }}">
                                            Ver
                                        </a>
                                        <a class="dropdown-item"
                                            href="{{ route('ventas.print', ['id' => $venta->id, 'format' => 'a4']) }}"
                                            target="_blank">
                                            PDF
                                        </a>
                                        <a class="dropdown-item"
                                            href="{{ route('ventas.print', ['id' => $venta->id, 'format' => 'ticket']) }}"
                                            target="_blank">
                                            Ticket
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <form action="{{ route('ventas.destroy', $venta->id) }}" method="POST"
                                            style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="dropdown-item"
                                                style="color: red;">Eliminar</button>
                                        </form>
                                    </div>
                                </div>
                            </td>


                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>


    <!-- Modal generar pago-->
    <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" action="{{ route('pagos.store') }}" 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="form-group">
                            <label for="">Monto a pagar</label>
                            <input type="text" class="form-control" name="monto_total" id="monto_total" readonly>
                        </div>

                        <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>
                                <!-- Aquí deberías cargar dinámicamente los métodos de pago disponibles -->
                                @foreach ($metodos as $metodo)
                                    <option value="{{ $metodo->id }}">{{ $metodo->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="checkPagoCompleto" class="checkbox-label">
                                Desea hacer el pago completo?
                                <input type="checkbox" id="checkPagoCompleto">
                            </label>
                        </div>

                        <div class="form-group">
                            <label for="entidad">Entidad Bancaria</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="form-group">
                            <label for="numero">Numero de Operación</label>
                            <input type="text" class="form-control" name="num_operacion" id="num_operacion">
                        </div>

                        <div class="form-group">
                            <label for="destino">Destino del dinero</label>
                            <input type="text" class="form-control" name="destino" id="destino">
                        </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="monto">Ingresar Pago</label>
                            <input type="number" step="0.01" class="form-control" name="monto" id="monto"
                                required>
                        </div>

                        <button type="submit" class="btn btn-primary">Registrar Pago</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para aplicar descuento -->
    <div class="modal fade" id="descuentoModal" tabindex="-1" aria-labelledby="descuentoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descuentoModalLabel">Aplicar Descuento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="descuentoForm" action="{{ route('descuentos.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="venta_id" id="venta_id">

                        <div class="mb-3">
                            <label for="monto_pendiente" class="form-label">Monto Pendiente</label>
                            <input type="number" step="0.01" class="form-control" id="monto_pendiente"
                                name="monto_pendiente" required readonly>
                        </div>

                        <!-- Monto del descuento -->
                        <div class="mb-3">
                            <label for="monto_descuento" class="form-label">Monto del Descuento</label>
                            <input type="number" step="0.01" class="form-control" id="monto_descuento"
                                name="monto_descuento" required>
                        </div>
                        <!-- Motivo del descuento -->
                        <div class="mb-3">
                            <label for="motivo_descuento" class="form-label">Motivo del Descuento</label>
                            <input type="text" class="form-control" id="motivo_descuento" name="motivo_descuento"
                                required>
                        </div>
                        <!-- Fecha de aplicación (puede ser pre-llenada) -->
                        <div class="mb-3">
                            <label for="fecha_descuento" class="form-label">Fecha del descuento</label>
                            <input type="datetime-local" class="form-control" id="fecha_descuento"
                                name="fecha_descuento" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">Aplicar Descuento</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal pago global --}}
    <div class="modal fade" id="addpagoGlobalModal" tabindex="-1" role="dialog"
        aria-labelledby="addpagoGlobalModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- Título cambiado a 'Agregar Pago Global' -->
                    <h5 class="modal-title" id="addpagoGlobalModalLabel">Agregar Pago Global</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="agregarPagoGlobalForm" action="#!" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-10">
                                    <label for="">Cliente:</label>
                                    <select id="select_cliente_id" name="select_cliente_id" class="form-control selectpicker" required data-live-search="true">
                                        <option value="" disabled selected>Selecciona un cliente</option>
                                        @foreach ($clientes as $cliente)
                                            <option value="{{ $cliente->id }}">{{ $cliente->nombre_comercial }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="">Buscar deuda</label>
                                    <button type="button" id="btnBuscarCliente"
                                        class="btn btn-primary w-100">Buscar</button>
                                </div>
                            </div>
                        </div>


                        <!-- Monto Total (se asume que es readonly, ya que es un monto global) -->
                        <div class="form-group">
                            <label for="monto_total">Total a Pagar</label>
                            <input type="text" class="form-control" name="total_pendiente" id="total_pendiente" readonly>
                        </div>

                        <!-- Método de pago (sin cambios) -->
                        <div class="form-group">
                            <label for="metodo_pago_id">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>

                        <!-- Checkbox para elegir si se quiere hacer el pago completo -->
                        <div class="form-group">
                            <label for="checkPagoCompleto" class="checkbox-label">
                                ¿Desea hacer el pago completo?
                                <input type="checkbox" id="checkPagoCompletoGlobal">
                            </label>
                        </div>

                        <!-- Selección de Banco (Entidad Bancaria) -->
                        <div class="form-group">
                            <label for="banco_id">Entidad Bancaria</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>

                        <!-- Número de operación bancaria -->
                        <div class="form-group">
                            <label for="num_operacion">Número de Operación</label>
                            <input type="text" class="form-control" name="num_operacion" id="num_operacion" required>
                        </div>

                        <!-- Destino del dinero (podría ser una descripción del uso del pago) -->
                        <div class="form-group">
                            <label for="destino">Destino del Dinero</label>
                            <input type="text" class="form-control" name="destino" id="destino">
                        </div>

                        <!-- Imagen o captura del pago (opcional) -->
                        <div class="form-group">
                            <label for="imagen">Captura o Imagen del Pago</label>
                            <input type="file" name="imagen" id="imagen" class="form-control">
                        </div>

                        <!-- Monto a pagar (aquí debería ingresarse el pago real) -->
                        <div class="form-group">
                            <label for="monto">Monto a Pagar</label>
                            <input type="number" step="0.01" class="form-control" name="monto_global" id="monto_global" required>
                        </div>

                        <!-- Botón para registrar el pago -->
                        <button type="button"  id="btnAddpagoGlobal" class="btn btn-primary">Registrar Pago Global</button>
                    </form>
                </div>
            </div>
        </div>
    </div>




@stop

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/css/bootstrap-select.min.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 src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.1/dist/js/bootstrap-select.min.js"></script>


    <script>
        $(document).ready(function() {
            var table = $('#table-ventas').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                "pageLength": 25,
                "order": [
                    [0, 'desc']
                ] // Ordenar la columna 0 de forma ascendente
            });

            //Metodos:

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

            //Agregar descuento de la venta, por devolucion Unidades y kg.
            $('#descuentoModal').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 montoPendiente = button.data('venta-monto');

                const modal = $(this);
                modal.find('#venta_id').val(ventaId);
                modal.find('#monto_pendiente').val(montoPendiente);
            });

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

                var form = $(this);
                var url = form.attr('action'); // Obtiene la URL de acción del formulario
                var data = new FormData(this); // 'this' hace referencia al formulario
                var monto = parseFloat($('#monto').val());
                var saldo = parseFloat($('#monto_total')
            .val()); // Asegúrate de tener el saldo en el formulario


                $.ajax({
                    url: url,
                    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) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: 'Pago agregado correctamente',
                            showConfirmButton: false,
                            timer: 1000
                        }).then(() => {
                            location
                                .reload(); // Recarga la página después de mostrar la alerta
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo agregar el pago. Intenta nuevamente.'
                        });
                    }
                });
            });

            //Manejo del envio, Agregar descuento a la venta.
            $('#descuentoForm').on('submit', function(event) {
                event.preventDefault();

                var form = $(this);
                var url = form.attr('action'); // Obtiene la URL de acción del formulario
                var data = new FormData(this); // 'this' hace referencia al formulario

                $.ajax({
                    url: url,
                    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) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: 'Descuento agregado correctamente',
                            showConfirmButton: false,
                            timer: 1000
                        }).then(() => {
                            location.reload(); // Recarga la página después de mostrar la alerta
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo agregar el descuento. Intenta nuevamente.'
                        });
                    }
                });

            });


            $('#btnBuscarCliente').click(function(e) {
                e.preventDefault();
                // Obtener el ID del cliente de algún campo de la vista (ejemplo: un input con el id 'cliente_id')
                var clienteId = $('#select_cliente_id').val(); // Asumiendo que tienes un campo input con id "cliente_id"
                // Verificar si el clienteId tiene valor
                if (clienteId) {
                    $.ajax({
                        type: "GET", // Método de la solicitud
                        url: "/pagos/total-pendiente/" + clienteId, // La URL que incluye el ID del cliente
                        dataType: "json", // El tipo de datos esperado (json)
                        success: function(response) {
                            // Verificar si la solicitud fue exitosa
                            if (response.success) {
                                // Si la respuesta es exitosa, mostrar el total pendiente
                                $('#total_pendiente').val(response.total_pendiente);

                            } else {
                                $('#total_pendiente').val(response.total_pendiente);
                            }
                        },
                        error: function(xhr, status, error) {
                            // Manejo de errores en la solicitud AJAX
                            alert('Ocurrió un error al obtener la información: ' + error);
                        }
                    });
                } else {
                    // Si el clienteId está vacío
                    Swal.fire({
                            title: 'Información',
                            text: 'Por favor, ingresa un ID de cliente válido.',
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                }
            });


            $('#btnAddpagoGlobal').click(function (e) {
                e.preventDefault();

                var formData = new FormData($('#agregarPagoGlobalForm')[0]); // Captura todo el formulario
                // formData.forEach(element => {
                //     console.log(element);
                // });
                const clienteId = $('#select_cliente_id').val();
                if (!clienteId) {
                    Swal.fire({
                        title: 'Información',
                        text: 'Por favor, selecciona un cliente.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    })
                    return; // Detenemos la ejecución si no hay cliente seleccionado
                }

                //  Hacemos la solicitud AJAX
                $.ajax({
                    type: "POST",
                    url: "/pagos/pago-global/" + clienteId, // Pasamos el clienteId a la URL
                    data: formData, // Enviamos los datos del formulario
                    dataType: "json", // Esperamos un JSON como respuesta
                    processData: false, // Impide que jQuery procese los datos (necesario para FormData)
                    contentType: false, // Impide que jQuery configure el tipo de contenido
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Información',
                                text: 'Pago realizado con éxito.',
                                icon: 'success',
                                showConfirmButton: false,
                                timer: 1000
                            }).then(() => {
                                // Aquí puedes realizar alguna acción como limpiar el formulario o cerrar el modal
                                $('#addpagoGlobalModal').modal('hide');
                                location.reload(); // Recarga la página después de mostrar la alerta
                            });
                        } else {
                            Swal.fire({
                                title: 'Información',
                                text: 'Error' + response.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                            // Si hay errores, puedes mostrarlos al usuario o hacer algo adicional
                        }
                    },
                    error: function(xhr, status, error) {
                        // Si ocurre algún error en la solicitud AJAX
                        Swal.fire({
                            title: 'Información',
                            text: 'Hubo un problema al realizar el pago. Intenta de nuevo.',
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                        console.error(xhr.responseText); // Puedes ver el error para depuración
                    }
                });

            });


            //check si desea cancelar el monto total completo
            $('#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');
                }
            });

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

            // Filtrar cuando se hace clic en el botón de búsqueda
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();

                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(3).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(3).search('').draw();
                }
            });


            $('#addpagoGlobalModal').on('shown.bs.modal', function () {
                // Inicializa Select2 en el select dentro del modal
                $('.selectpicker').selectpicker();

            });

            $('#addpagoGlobalModal').on('hidden.bs.modal', function () {
                // Destruir Select2 cuando el modal se cierra
                $('.selectpicker').selectpicker('destroy').val(null).trigger('change');
            });


        });




    </script>
@stop