{% extends 'menu/menu.html' %}
{% load static %}


{% block title %} Pagar mi Suscripción {% endblock %}

{% block body %}

<style>
    .custom-search-bar {
        display: flex;
        justify-content: flex-start;
        /* Alinea los elementos a la izquierda */
        align-items: center;
        background: white;
        /* Fondo blanco del buscador */
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* Sombra suave */
        max-width: 600px;
        /* Ancho máximo del buscador */
        width: 100%;
        /* Asegura que no exceda su contenedor */
        margin: 0 auto;
        /* Centra el buscador horizontalmente */
        padding: 0.5rem 0.7rem;
        /* Espaciado interno compacto */
    }

    @media (max-width: 768px) {
        .custom-search-bar {
            max-width: 90%;
            /* Se ajusta en pantallas más pequeñas */
            padding: 0.4rem;
            /* Espaciado reducido */
        }
    }

    .custom-search-item {
        display: flex;
        align-items: center;
        background: #f8f8f8;
        /* Fondo gris claro para el input */
        padding: 0.2rem 0.6rem;
        /* Tamaño compacto */
        border-radius: 20px;
        flex-grow: 1;
        /* Permite que el input ocupe el espacio disponible */
    }

    .custom-search-item i {
        margin-right: 0.4rem;
        /* Espaciado entre ícono y texto */
        color: #888;
        /* Color del ícono */
    }

    .custom-search-item input {
        border: none;
        outline: none;
        box-shadow: none;
        background: none;
        font-size: 0.9rem;
        /* Texto más pequeño */
        width: 100%;
        /* Ocupar todo el espacio del contenedor */
    }

    .custom-search-item input:focus {
        outline: none;
        box-shadow: none;
    }

    .custom-search-button {
        background: #000;
        /* Fondo negro */
        color: white;
        /* Color del texto */
        padding: 0.4rem 1rem;
        /* Compacta el botón */
        border: none;
        border-radius: 20px;
        /* Bordes redondeados */
        font-size: 0.8rem;
        cursor: pointer;
        transition: background 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-search-button i {
        font-size: 0.9rem;
        /* Ajusta el tamaño del ícono */
    }

    .custom-search-button:hover {
        background: #444;
        /* Cambia el color del fondo al pasar el mouse */
    }

    .custom-carousel {
        scroll-behavior: smooth;
    }
</style>

<h4><strong>Suscripción para tu cuenta:</strong></h4>
<br>

<style>
    .card:hover {
        transform: none !important;
    }
</style>

<div class="container mb-5">

    <div class="row">
        <!-- Card Title -->
        <h3 class="card-title text-center mb-4">Detalles del Pago</h3>

        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Concepto</th>
                        <th>Cantidad</th>
                        <th>Tarifa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold text-wrap">
                            Período de Pago
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Muestra la frecuencia con la que se realizan los pagos, por ejemplo: mensual, trimestral, etc."></i>
                        </td>
                        <td class="text-end" id="detallesPeriodoPagoVerbosed"></td>
                        <td class="text-end"></td>
                    </tr>
                    <!-- Mes de Pago -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Mes de Pago
                            <!-- <i class="fas fa-question-circle text-primary" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Muestra la frecuencia con la que se realizan los pagos, por ejemplo: mensual, trimestral, etc."></i> -->
                        </td>
                        <td class="text-end fw-bold text-wrap" id="detallesMesVerbosed"></td>
                        <td class="text-end"></td>
                    </tr>
                    <!-- Pedidos creados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Creados
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Cantidad de pedidos que se han creado durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosCreado"></td>
                        <td class="text-end" id="detallesTarifaCreado"></td>
                    </tr>
                    <!-- Pedidos enviados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Enviados
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Cantidad de pedidos que se han enviado durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosEnviado"></td>
                        <td class="text-end" id="detallesTarifaEnviado"></td>
                    </tr>
                    <!-- Pedidos rechazados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Rechazados
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Número de pedidos que han sido rechazados durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosRechazado"></td>
                        <td class="text-end" id="detallesTarifaRechazado"></td>
                    </tr>
                    <!-- Pedidos aprobados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Aprobados
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Pedidos que han sido aprobados durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosAprobado"></td>
                        <td class="text-end" id="detallesTarifaAprobado"></td>
                    </tr>
                    <!-- Pedidos aprobados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos en Preparación
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Pedidos que han sido marcados como 'preparando' durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosPreparando"></td>
                        <td class="text-end" id="detallesTarifaPreparando"></td>
                    </tr>
                    <!-- Pedidos aprobados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Listos
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Pedidos que han sido marcado como 'listo' durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosListo"></td>
                        <td class="text-end" id="detallesTarifaListo"></td>
                    </tr>
                    <!-- Pedidos aprobados -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Pedidos Entregados
                            <i class="fas fa-question-circle text-primary" tabindex="0"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Pedidos que han sido entregados durante el mes de pago."></i>
                        </td>
                        <td class="text-end" id="detallesPedidosEntregado"></td>
                        <td class="text-end" id="detallesTarifaEntregado"></td>
                    </tr>
                    <!-- Estado de Cuenta -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            Estado de pago
                            <!-- <i class="fas fa-question-circle text-primary" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Define si la cuenta está activa, suspendida o cerrada."></i> -->
                        </td>
                        <td class="text-end"><span class="badge" id="detallesEstadoPagoVerbosed"></span>
                        </td>
                        <td class="text-end"></td>
                    </tr>
                    <!-- Total a Pagar -->
                    <tr>
                        <td class="fw-bold text-wrap">
                            TOTAL
                        </td>
                        <td class="text-end"></td>
                        <td class="text-end fw-bold text-wrap" id="detallesPagoValor"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Opciones de Pago -->
        <div class="mt-4" id="opcionesPagoContainer" style="display: none;">
            <h5>Opciones de Pago</h5>
            <button type="button" class="btn btn-warning fw-bold text-wrap" data-bs-toggle="modal"
                data-bs-target="#paypalModal">
                Pagar con PayPal (Sandbox)
            </button>
        </div>
    </div>

    <div class="row d-flex justify-content-end align-items-end">
        <div class="col-sm-3">
            <a href="{% url 'control_print_suscripcion' pk_pago %}"
                class="btn btn-outline-danger text-black w-100 p-2 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                <i class="material-icons mb-2 animated-icon">print</i>
                <span>Reimprimir Voucher</span>
            </a>
        </div>
    </div>


</div>

<!-- Modal PayPal -->
<div class="modal" id="paypalModal" tabindex="-1" aria-labelledby="paypalModalLabel" aria-hidden="true"
    data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <!-- title -->
                <h5 class="modal-title" id="paypalModalLabel">Pagar con PayPal (SandBox)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="fs-6 fw-bold w-100">Valor de la transacción <br>
                    <span id="paymentUSD">0.54</span> USD
                    <span class="float-end">(<span id="paymentHNL">12.45</span> LPS)</span>
                </p>
                <hr>

                <div id="paypal-button-container"></div>
                <p id="result-message"></p>
            </div>
        </div>
    </div>
</div>


<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Inicializa los tooltips
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl)
        });
    });
</script>


{% endblock %}



{% block scripts %}
<!-- PAYPAL -->
<!-- Initialize the JS-SDK -->
<!-- <script src="https://www.paypal.com/sdk/js?client-id=AcFD5AJaBCBXxBgzUSveE-iL7VKLMg493lxAkd65mbsN4ZDCvp5vC_9fufd6LvYuYGSbEft3DZDdd3ce&currency=USD&components=buttons&enable-funding=card&disable-funding=venmo,paylater"> -->
<script
    src="https://www.paypal.com/sdk/js?client-id=AcFD5AJaBCBXxBgzUSveE-iL7VKLMg493lxAkd65mbsN4ZDCvp5vC_9fufd6LvYuYGSbEft3DZDdd3ce&components=buttons&enable-funding=card&disable-funding=venmo,paylater">
    </script>
<script>
    var PAYMENT_HNL;
    var PAYMENT_USD;

    const API_ORDERS_URL = '{% url "create_order" %}';
    const API_CAPTURE_ORDER_URL = '{% url "capture_order" order_id="orderID" %}';
    const CSRF_TOKEN = "{{ csrf_token }}";

    function showSuccessPayAlert() {
        Swal.fire({
            html: `Por favor espere...<br>
  <div class="spinner-border text-primary mt-3" role="status"><span class="visually-hidden">Cargando...</span></div>`,
            icon: 'success',
            showConfirmButton: false,
            allowOutsideClick: false,
            title: '¡Recibiendo su Pago!'
            //   timerProgressBar: true,
        });

        $.ajax({
            type: 'POST',
            url: '{% url "control_update_estado_pago" %}',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                pk_pago: '{{pk_pago}}',
                estado: 2 //PAGADO
            },
            beforeSend: function (xhr, type) {
                // loading layer
                // $('#loading').show();
            },
            success: function (data) {
                if (data.save == 1) {
                    window.location.href = '{% url "control_print_suscripcion" id=pk_pago %}';

                } else {
                    Swal.fire("", "Error D6: " + data.error, "error");
                }
            },
            error: function (error) {
                Swal.fire("", "Error D5: " + error, "error");
            },
            complete: function (data) {
                // loading layer
                // $('#loading').hide();
            }
        });
    }

    function showErrorPayAlert() {
        Swal.fire({
            icon: 'error',
            title: '¡Algo Falló!',
            text: 'Hubo un problema con el pago, por favor intente de nuevo.',
            showConfirmButton: true,
        });
    }

    function showDeclinedPayAlert() {
        Swal.fire({
            icon: 'warning',
            title: '¡Pago Rechazado!',
            text: 'El pago ha sido rechazado. Por favor, verifica los detalles de la tarjeta o intenta con otro método de pago.',
            showConfirmButton: true,
        });
    }


</script>
<script src="{% static 'paypal/app.js' %}"></script>
<!-- PAYPAL -->


<script>


    document.addEventListener('DOMContentLoaded', function () {
        const carousel = document.querySelector('.custom-carousel');
        const leftButton = document.querySelector('.custom-carousel-button.custom-left');
        const rightButton = document.querySelector('.custom-carousel-button.custom-right');

        const scrollStep = 160; // Ajusta según el tamaño de los elementos visibles

        // Función para verificar y actualizar la visibilidad de los botones
        function updateButtonVisibility() {
            leftButton.style.display = carousel.scrollLeft > 0 ? 'flex' : 'none';
            rightButton.style.display = (carousel.scrollLeft + carousel.clientWidth) < carousel.scrollWidth ? 'flex' : 'none';
        }

        // Inicializa la visibilidad de los botones
        updateButtonVisibility();

        // Manejador de clics para el botón derecho
        rightButton.addEventListener('click', function () {
            let newScroll = carousel.scrollLeft + scrollStep;
            carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
        });

        // Manejador de clics para el botón izquierdo
        leftButton.addEventListener('click', function () {
            let newScroll = carousel.scrollLeft - scrollStep;
            carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
        });

        // Actualizar visibilidad de botones después de cada scroll
        carousel.addEventListener('scroll', updateButtonVisibility);

        // Recalcular límites y visibilidad de botones al redimensionar la ventana
        window.addEventListener('resize', updateButtonVisibility);
    });

    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";

        $('#filtered-container').hide();
        $('#filteredCards').empty();
        $('#searchInput').val('');

        // Función para normalizar texto (eliminar acentos y convertir a minúsculas)
        function normalizeText(text) {
            // Verifica que text es una cadena
            text = typeof text === 'string' ? text : '';
            return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
        }

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

            $('#filtered-container').hide();
            $('#filteredCards').empty();
            $('#searchInput').val('');
        });

        $('#searchInput').on('keyup', function () {
            var searchTerm = normalizeText($(this).val() || '');

            const filteredContainer = $('#filtered-container');
            const filteredCards = $('#filteredCards');

            filteredCards.empty();

            if (searchTerm.trim() == '') {
                // Si el término está vacío, oculta la sección filtrada
                filteredContainer.hide();
                return;
            }

            let resultsFound = false;
            $('.business-card').each(function () {
                var businessName = normalizeText($(this).data('name') || '');
                var businessCategory = normalizeText($(this).data('category') || '');
                var businessId = $(this).data('id');

                // Mostrar/ocultar tarjetas según la coincidencia
                if (businessName.includes(searchTerm)) {
                    if (filteredCards.find(`.business-card[data-id="${businessId}"]`).length == 0) {
                        const clonedCard = $(this).clone();
                        filteredCards.append(clonedCard);
                        resultsFound = true;
                        $('#filtered-container').show();
                    }
                }
            });

            // Mostrar mensaje si no hay coincidencias
            const visibleCards = $('#filteredCards .business-card').length;

            if (visibleCards == 0) {
                $('#filteredCards').empty();
                $('.container-fluid').last().append('<p id="no-results" class="text-center text-muted">No se encontraron resultados.</p>');
            } else {
                // $('#filteredCards').empty();
            }
        });

        $('.custom-carousel-item').click(function () {
            // Obtener la categoría y el destino de la sección
            var category = $(this).data('category');
            var targetSection = $(this).data('target');

            // Desplazarse suavemente a la sección correspondiente
            $('html, body').animate({
                scrollTop: $('#' + targetSection).offset().top
            }, 500); // 800ms para desplazamiento suave
        });

        const $carousel = $('.custom-carousel');

        let touchStartX = 0;
        let scrollStart = 0;

        $carousel.on('touchstart', function (e) {
            touchStartX = e.originalEvent.touches[0].clientX; // Registrar la posición inicial del toque
            scrollStart = $carousel.scrollLeft(); // Posición inicial del scroll
        });

        $carousel.on('touchmove', function (e) {
            const touchEndX = e.originalEvent.touches[0].clientX;
            const touchDiff = touchStartX - touchEndX;

            $carousel.scrollLeft(scrollStart + touchDiff); // Ajustar el scroll nativo
        });

        $(document).on('click', '.business-card', function () {
            negocio_id = $(this).data('id');
            negocio_name = $(this).data('name');

            // Usamos JavaScript para construir la URL con el valor de negocio_id
            var url = '{% url "control_productos_x_negocio" "negocio_id" %}'.replace("negocio_id", negocio_id);

            window.location.href = url;

        });



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


            window.location = "{% url 'pedidos_listado_cliente' %}";

        });


        function fillDetallesCard() {
            $.ajax({
                type: 'POST',
                url: '{% url "control_get_detalles_x_pago" %}',
                data: {
                    pk_pago: '{{pk_pago}}',
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                beforeSend: function (xhr, type) {
                    // loading layer
                    $('#loading').show();
                },
                success: function (data) {
                    if (data.save == 1) {
                        let centavos = ' LPS';
                        $('#detallesPeriodoPagoVerbosed').text(data.detalles.periodo_pago_verbosed);
                        $('#detallesMesVerbosed').text(data.detalles.mes_verbosed + ' ' + data.detalles.anio);
                        $('#detallesPedidosCreado').text(data.detalles.pedidos_creado);
                        $('#detallesPedidosEnviado').text(data.detalles.pedidos_enviado);
                        $('#detallesPedidosRechazado').text(data.detalles.pedidos_rechazado);
                        $('#detallesPedidosAprobado').text(data.detalles.pedidos_aprobado);
                        $('#detallesPedidosPreparando').text(data.detalles.pedidos_preparando);
                        $('#detallesPedidosListo').text(data.detalles.pedidos_listo);
                        $('#detallesPedidosEntregado').text(data.detalles.pedidos_entregado);
                        $('#detallesPagoValor').text(data.detalles.valor + ' LPS');

                        // modal paypal
                        PAYMENT_HNL = data.detalles.valor;
                        $('#paymentHNL').text(data.detalles.valor);

                        $('#detallesTarifaCreado').text(data.detalles.tarifa_creado + centavos);
                        $('#detallesTarifaEnviado').text(data.detalles.tarifa_enviado + centavos);
                        $('#detallesTarifaRechazado').text(data.detalles.tarifa_rechazado + centavos);
                        $('#detallesTarifaAprobado').text(data.detalles.tarifa_aprobado + centavos);
                        $('#detallesTarifaPreparando').text(data.detalles.tarifa_preparando + centavos);
                        $('#detallesTarifaListo').text(data.detalles.tarifa_listo + centavos);
                        $('#detallesTarifaEntregado').text(data.detalles.tarifa_entregado + centavos);


                        let estado_pago = data.detalles.estado_pago;

                        let estado_pago_bg = 'bg-primary'; // abierto
                        if (estado_pago == 2) estado_pago_bg = 'bg-success' // pagado
                        if (estado_pago == 4) estado_pago_bg = 'bg-secondary' // no hubo actividad
                        if (estado_pago == 3) {
                            $('#opcionesPagoContainer').show();
                            estado_pago_bg = 'bg-danger' // pendiente
                        }
                        $('#detallesEstadoPagoVerbosed').text(data.detalles.estado_pago_verbosed).addClass(estado_pago_bg);

                    } else {
                        Swal.fire("", "Error D2: " + data.error, "error");
                    }
                },
                error: function (error) {
                    Swal.fire("", "Error D1: " + error, "error");
                },
                complete: function (data) {
                    // loading layer
                    $('#loading').hide();

                    getCambioUSDHNL();
                }
            });
        }

        fillDetallesCard();



        function getCambioUSDHNL() {
            $.ajax({
                type: 'POST',
                url: '{% url "control_get_cambio_usd_x_hnl" %}',
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                beforeSend: function (xhr, type) {
                    // loading layer
                    $('#loading').show();
                },
                success: function (data) {
                    if (data.save == 1) {
                        PAYMENT_USD = (PAYMENT_HNL / parseFloat(data.cambio.valor)).toFixed(2);
                        $('#paymentUSD').text(PAYMENT_USD);
                    } else {
                        Swal.fire("", "Error D4: " + data.error, "error");
                    }
                },
                error: function (error) {
                    Swal.fire("", "Error D3: " + error, "error");
                },
                complete: function (data) {
                    // loading layer
                    $('#loading').hide();
                }
            });
        }

    });
</script>



{% endblock %}