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

{% block title %} Pedidos a Mi Comercio {% endblock %}

{% block body %}

<style>
    .container {
        padding: 20px;
    }

    .filters .btn {
        margin-right: 10px;
    }

    .order-card {
        border: 1px solid #ddd;
        border-radius: 10px;
        margin-bottom: 15px;
        background-color: #fff;
        padding: 15px;
    }

    /* Tarjetas */
    .card {
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease-in-out;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .pedidoSection:hover,
    .productoSection:hover {
        transform: scale(1.01);
    }

    .card-body img {
        object-fit: cover;
    }

    .card-title {
        font-size: 16px;
        font-weight: bold;
    }

    .card-text {
        font-size: 14px;
        color: #555;
    }

    .order-status {
        font-size: 12px;
        font-weight: bold;
        color: #ff5733;
        margin-bottom: 10px;
    }

    .card-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header {
        display: flex;
        align-items: center;
    }

    .business-logo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .order-info {
        flex: 1;
    }

    .order-info .order-status {
        font-weight: bold;
        color: #28a745;
    }

    .order-info .order-date {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }

    .business-name {
        font-size: 16px;
        font-weight: bold;
    }

    .order-total {
        font-size: 14px;
        color: #333;
    }

    .card-actions {
        display: flex;
        gap: 10px;
    }

    .chat-bubble {
        max-width: 70%;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .chat-bubble.right {
        background-color: #d4edda;
        /* Verde claro */
        color: #155724;
        align-self: flex-end;
        margin-left: auto;
    }

    .chat-bubble.left {
        background-color: #f8f9fa;
        /* Gris claro */
        color: #6c757d;
        align-self: flex-start;
        margin-right: auto;
    }

    #commentsContainer {
        display: flex;
        flex-direction: column;
    }

    @media (max-width: 768px) {
        #ordersContainer .order-card {
            width: 100%;
            margin: 0 auto;
        }
    }
</style>


<h4 class=" mb-4 fw-bold text-center">Pedidos a Mi Comercio</h4>

{% include 'pedidos/componentes/cc_filtros_estados_pedidos.html' %}

<hr>

<div id="ordersContainer" class="w-100">

</div>

{% include 'pedidos/modales/m_order_details_negocio.html' %}
{% include 'pedidos/modales/m_chat.html' %}

<!-- Modal -->
<div class="modal fade" id="comentarioModal" tabindex="-1" aria-labelledby="comentarioModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="comentarioModalHeader">
                <h5 class="modal-title" id="comentarioModalLabel">Agregar
                    Comentario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="comentarioGestion">Escribe tu comentario</label>
                    <textarea class="form-control" id="comentarioGestion" rows="4" placeholder="Comentario"></textarea>
                    <small class="text-danger" style="color: red;">Este
                        comentario NO es Obligatorio!</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-success" id="btnGuardarComentario">Guardar</button>
                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

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

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";
        var pedido_id = 0, pedido_estado = '', pedido_accion = 0, pedido_gestion = 1, estadoText = '';

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        let dollarUSLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        let intergerLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

        $('.btn-filter-status').on('click', function () {
            const estado = $(this).data('value');
            loadOrders(estado, 1);
        });


        function showLoadingScreen(text = '') {
            Swal.fire({
                title: '',
                html: `<b>${text}</b>`,
                didOpen: () => {
                    Swal.showLoading();
                },
                allowOutsideClick: false,
                showConfirmButton: false
            });
        }


        function loadOrders(estado = 0, opc = 1) {
            showLoadingScreen('');

            $.ajax({
                url: `{% url 'pedidos_list_pedidos_cliente_negocio' %}`,  // Cambia esto a la URL correcta
                method: "POST",
                data: {
                    estado: estado,
                    opc: opc,
                    tipo: 3,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (response) {
                    if (response.data) {
                        Swal.close();
                        renderOrders(response.data);
                    } else if (response.error) {
                        console.error("Error al cargar los pedidos:", response.error);
                    }
                }
            });
        }


        function renderOrders(pedidos) {
            const ordersContainer = $("#ordersContainer");
            ordersContainer.empty();

            pedidos.forEach(pedido => {
                const orderCard = `
                    <div class="order-card pedidoSection mb-3 p-3 bg-white rounded shadow-sm">
                        <input type="hidden" class="pedido_id" id="pedido_id" value="${pedido.id_pedido}">



                        <input type="hidden" class="interact_btn_value" id="interact_btn_value" data-html="
                        ${pedido.estado_text === "ENVIADO" ? "<div id='gestionOrderContainer' class='d-flex gap-2 justify-content-end'><button class='btn btn-success btn-sm d-flex align-items-center justify-content-center gap-2 w-50 btnAction text-white' id='autorizar'><i class='fas fa-check'></i> Aceptar</button><button class='btn btn-danger btn-sm d-flex align-items-center justify-content-center gap-2 w-50 btnAction text-white' id='rechazar'><i class='fas fa-times'></i>Rechazar</button></div>" : ""}"
                        >

                        <input type="hidden" class="modal_details_header_value" id="modal_details_header_value" data-html="
                        <span class='badge ${pedido.estado_text === 'ENTREGADO' ? 'bg-success' : 'bg-secondary'}'>${pedido.estado_text}</span>"
                        >



                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 class="card-title mb-1 text-primary">${pedido.nombre_cliente}</h5>
                                <p class="mb-1"><small class="text-muted"><i class="fas fa-truck me-2"></i>${pedido.forma_entrega}</small></p>
                                <p class="mb-1"><small class="text-muted"><i class="fas fa-phone-alt me-2"></i>${pedido.telefono_cliente}</small></p>
                                <p class="mb-1"><small class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>${pedido.direccion_cliente}</small></p>
                                <p class="mb-0"><small class="text-muted"><i class="fas fa-sticky-note me-2"></i>${pedido.observaciones_cliente}</small></p>
                            </div>
                            <div class="text-end">
                                <span class="badge ${pedido.estado_text === 'ENTREGADO' ? 'bg-success' : 'bg-warning'} text-white">
                                    ${pedido.estado_text}
                                </span>
                                <p class="text-muted small mt-1">${pedido.fecha_hora_creado_text}</p>
                            </div>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Total:</span>
                            <span class="order-total text-dark">L ${dollarUSLocale.format(pedido.total)} • ${intergerLocale.format(pedido.product_count)} producto(s)</span>
                        </div>
                    </div>
                `;
                ordersContainer.append(orderCard);
            });
        }

        // Llama a la función para cargar los pedidos
        loadOrders();

        $(document).on('click', '.pedidoSection', function () {
            pedido_id = $(this).closest('.pedidoSection').find('.pedido_id').val().trim();
            interact_value = $(this).closest('.pedidoSection').find('.interact_btn_value').data('html');
            header_details = $(this).closest('.pedidoSection').find('.modal_details_header_value').data('html');

            showOrderDetails(pedido_id, interact_value, header_details);
        });

        function showOrderDetails(pedidoId, interact_value, header_details) {
            $('#interactSection').empty();
            $('#interactSection').html(interact_value);

            $('#orderDetailModalLabel').empty();
            $('#orderDetailModalLabel').html(header_details);

            showLoadingScreen('');

            $.ajax({
                url: `{% url 'pedidos_list_detalles_x_pedido' %}`, // Cambia esto a la URL que maneja los detalles del pedido
                method: 'POST',
                data: { pedido_id: pedidoId, csrfmiddlewaretoken: csrfToken },
                success: function (response) {
                    // Si la respuesta contiene un error
                    if (response.error) {
                        alert(response.error);
                        return;
                    }

                    const order = response.data[0]; // Información del pedido general (primer elemento en la respuesta)
                    const detalles = response.data; // Detalles del pedido (productos)
                    var total_pedido = 0;

                    // Actualiza la información del pedido en el modal
                    $("#businessName").text(order.nombre);
                    $("#orderEntrega").text(order.forma_entrega);
                    $("#orderStatus").text(order.estado_text);
                    $("#orderDate").text(order.fecha_hora_creado_text);
                    $("#orderObservations").text(order.observaciones_cliente || "Sin observaciones");

                    // Llena la tabla de productos
                    const productList = $("#productList");
                    productList.empty();
                    detalles.forEach(producto => {
                        productList.append(`
                            <div class="d-flex align-items-center justify-content-between productoSection">
                                <div class="d-flex align-items-center">
                                    <img <img src="${producto.img}" alt="${producto.nombre_producto}"style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" class="me-3">
                                    <div>
                                        <p class="mb-0 fw-bold text-wrap">${producto.nombre_producto}</p>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0">${intergerLocale.format(producto.cantidad)}x</p>
                                    <p class="mb-0 fw-bold">L ${dollarUSLocale.format(producto.precio_venta)}</p>
                                </div>
                            </div>
                            <hr>
                        `);

                        total_pedido = parseFloat(total_pedido) + parseFloat((producto.cantidad * producto.precio_venta).toFixed(2));
                    });


                    $("#prepararOrderContainer").hide();
                    $("#listoOrderContainer").hide();
                    $("#finalizarOrderContainer").hide();
                    $("#entregadoOrderContainer").show();

                    if (order.estado_text == "APROBADO") {
                        $("#prepararOrderContainer").show();
                    }
                    if (order.estado_text == "PREPARANDO") {
                        $("#listoOrderContainer").show();
                    }
                    if (order.estado_text == "LISTO") {
                        $("#finalizarOrderContainer").show();
                    }
                    if (order.estado_text == "ENTREGADO") {
                        $("#entregadoOrderContainer").hide();
                    }

                    // Muestra el modal
                    loadComments(pedidoId);

                    Swal.close();
                    $("#orderTotal").text(dollarUSLocale.format(total_pedido));
                    $("#orderDetailModal").modal('show');
                }
            });
        }


        $(document).on('click', '.btnAction', function () {

            btnID = this.id;
            pedido_gestion = 1;

            if (btnID == 'autorizar') {
                estado = 4;
                pedido_accion = 4;
                estadoText = "Autorizado!";

                $('#comentarioModalHeader').css({
                    'background-color': 'green',
                    'color': 'white',
                });
                $('#btnGuardarComentario').text('Aceptar');
            } else {
                estado = 3;
                pedido_accion = 3;
                estadoText = "Rechazado!";

                $('#comentarioModalHeader').css({
                    'background-color': 'red',
                    'color': 'white',
                });
                $('#btnGuardarComentario').text('Rechazar');
            }

            $('#comentarioGestion').val('');
            $('#comentarioModal').modal('show');
        });



        $(document).on('click', '.btnGestion', function () {
            pedido_accion = $(this).data('value');
            estadoText = $(this).data('text');

            $.ajax({
                url: `{% url 'pedidos_gestion_aceptar_rechazar_pedido' %}`,  // Cambia esto a la URL correcta
                method: "POST",
                data: {
                    pedido_id: pedido_id,
                    comentario: '',
                    estado: pedido_accion,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        $('#comentarioModal').modal('hide');
                        $("#orderDetailModal").modal('hide');
                        Swal.fire("", "Pedido # " + pedido_id + " " + estadoText, "success");
                        loadOrders();
                    } else {
                        console.log(data.error);
                    }
                }
            });
        });


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

            comentario = $('#comentarioGestion').val();

            $.ajax({
                url: `{% url 'pedidos_gestion_aceptar_rechazar_pedido' %}`,  // Cambia esto a la URL correcta
                method: "POST",
                data: {
                    pedido_id: pedido_id,
                    comentario: comentario,
                    estado: pedido_accion,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        $('#comentarioModal').modal('hide');
                        $("#orderDetailModal").modal('hide');
                        Swal.fire("", "Pedido # " + pedido_id + " " + estadoText, "success");
                        loadOrders();
                    } else {
                        console.log(data.error);
                    }
                }
            });
        });


        // Cargar comentarios existentes
        function loadComments(pedido_id) {
            $.ajax({
                url: `{% url 'pedidos_comentarios' %}`,
                method: 'POST',
                data: {
                    pedido_id: pedido_id,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (response) {
                    if (response.data) {
                        renderComments(response.data);
                    }
                },
                error: function (error) {
                    console.error("Error al cargar los comentarios:", error);
                }
            });
        }

        // Renderizar comentarios en el contenedor
        function renderComments(comments) {
            const container = $('#commentsContainer');
            container.empty(); // Limpiar comentarios previos

            comments.forEach(comment => {
                const alignment = comment.creado_por == user_id ? 'right' : 'left';
                const bubble = `
                <div class="chat-bubble ${alignment}">
                    ${comment.comentario}
                    <div style="font-size: 0.7rem; text-align: right; margin-top: 5px;">
                        ${new Date(comment.fecha_hora_creado).toLocaleString()}
                    </div>
                </div>
            `;
                container.append(bubble);
            });

            // Desplazar automáticamente al final del contenedor
            container.scrollTop(container.prop("scrollHeight"));
        }

        // Enviar un nuevo comentario
        $('#sendCommentBtn').on('click', function () {
            const commentInput = $('#commentInput');
            const comentario = commentInput.val().trim();

            if (!comentario) {
                Swal.fire("", "Debes escribir un comentario!", "warning");
                return;
            }

            $.ajax({
                url: `{% url 'pedidos_enviar_comentario' %}`, // Cambiar por tu URL
                method: 'POST',
                data: {
                    pedido_id: pedido_id,
                    comentario: comentario,
                    csrfmiddlewaretoken: csrfToken
                },
                success: function (data) {
                    if (data.save == 1) {
                        commentInput.val(''); // Limpiar el input
                        loadComments(pedido_id); // Recargar comentarios
                    }
                }
            });
        });



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

            const secretKey = CryptoJS.enc.Utf8.parse("@Empanadas$$$456!"); // Clave secreta como 16 bytes
            const iv = CryptoJS.enc.Utf8.parse(""); // Sin IV para ECB

            // Generar la URL con el token cifrado
            const url = "/app/pedidos/rastrear/" + pedido_id;

            // Redirigir al usuario a la URL generada
            window.location = url;
        });

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

            const url = `{% url 'pedidos_enviar_comentario' ${pedido_id} %}`
            window.open(url, "_blank");
        });




    });
</script>

{% endblock %}