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


{% block title %} Mis Pedidos {% 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;
    }

    .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;
    }

    /* Filtros */
    .filter-controls {
        border: 1px solid #ddd;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .filter-label {
        font-weight: bold;
        color: #333;
    }

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

    /* Buscador */
    .input-group {
        border-radius: 5px;
        overflow: hidden;
    }

    .input-group .form-control {
        border-right: none;
    }

    .input-group .btn {
        border-left: none;
    }

    /* Ocultar los filtros en dispositivos móviles */
    @media (max-width: 768px) {
        .filter-controls {
            display: none !important;
        }

        .col-lg-3,
        .col-md-4 {
            display: none;
        }

        .col-lg-6,
        .col-md-8 {
            width: 100%;
        }
    }

    /* Ajustar el buscador para ocupar todo el ancho */
    @media (max-width: 768px) {
        .input-group {
            max-width: 100%;
            padding: 0 15px;
        }
    }

    /* Tarjetas: Estilo general */
    .card {
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 15px;
        transition: all 0.3s ease-in-out;
    }

    /* Ajustar el diseño en dispositivos móviles */
    @media (max-width: 768px) {
        .card {
            padding: 10px;
            font-size: 14px;
            /* Reducir el tamaño de la tipografía */
            margin: 10px;
        }

        .card h5 {
            font-size: 16px;
        }

        .card img {
            width: 40px;
            /* Ajustar tamaño del avatar */
            height: 40px;
        }

        .card .card-text {
            font-size: 13px;
            /* Reducir subtítulos */
        }
    }

    /* Ajustar imagen del avatar */
    .card img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
        object-fit: cover;
    }

    /* Títulos y textos */
    .card h5 {
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 5px;
        color: #333;
    }

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

    .card .text-success {
        font-weight: bold;
        color: #28a745;
        /* Verde para "Entregado" */
    }

    /* Margen interno entre los elementos */
    .card-body {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
</style>


<div class="d-flex justify-content-end">
    <div class="col-sm-2">
        <button type="button" class="btn btn-sm btn-warning w-100 rounded-pill ms-2 px-3" id="listPedidos"><i class="fas fa-shopping-cart me-1"></i> Realizar Pedido</button>
    </div>
</div>

<h4 class=" mb-4 fw-bold text-center">Mis Pedidos</h4>

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

<hr>

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

</div>



{% include 'pedidos/modales/m_order_details_cliente.html' %}
{% include 'pedidos/modales/m_calificar_estrellas.html' %}
{% include 'pedidos/modales/m_chat.html' %}

{% 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, interact_value = '', header_details = '';

        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: 2,
                    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 showOpinarButton = pedido.estado_text == "ENTREGADO" && pedido.calificacion == 0;

                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="
                        <div class='d-flex gap-2 justify-content-end'>${showOpinarButton ? "<button class='btn btn-warning btn-sm d-flex align-items-center justify-content-center gap-2 w-50 btnOpinar text-dark' data-id='${pedido.id_pedido}'><i class='fas fa-star'></i> Opinar</button>" : ""}<button class='btn btn-success btn-sm d-flex align-items-center justify-content-center gap-2 w-50 text-white' data-id='${pedido.id_pedido}'><i class='fas fa-redo-alt'></i> Repetir Pedido</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>"
                        >

                        <!-- Cabecera de la tarjeta -->
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex align-items-center">
                                <img src="${pedido.foto_perfil}" alt="Perfil" class="business-image rounded-circle me-3" style="width: 50px; height: 50px;">
                                <div>
                                    <h6 class="card-title mb-1">${pedido.nombre}</h6>
                                    <p class="text-muted mb-0" style="font-size: 12px;">L ${dollarUSLocale.format(pedido.total)}</p>
                                    <p class="text-muted mb-0" style="font-size: 12px;">${intergerLocale.format(pedido.product_count)} producto(s)</p>
                                </div>
                            </div>
                            <div class="text-end">
                                <span class="badge ${pedido.estado_text === 'ENTREGADO' ? 'bg-success' : 'bg-secondary'}">${pedido.estado_text}</span>
                                <p class="text-muted small mb-0 text-wrap">${pedido.fecha_hora_creado_text}</p>
                            </div>
                        </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();
            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);
        });

        $('#chatModal').on('shown.bs.modal', function () {
            const commentsContainer = $('#commentsContainer');
            commentsContainer.scrollTop(commentsContainer[0].scrollHeight);
        });


        function showOrderDetails(pedido_id, 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: pedido_id, csrfmiddlewaretoken: csrfToken },
                success: function (response) {
                    if (response.error) {
                        Swal.close();
                        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));
                    });

                    // Aquí puedes agregar la lógica para comentarios si existe en el pedido.
                    // ...

                    // Si el pedido está en estado "Enviado", muestra el botón de cancelar
                    if (order.estado_text == "ENVIADO") {
                        $("#cancelOrderContainer").show();
                    } else {
                        $("#cancelOrderContainer").hide();
                    }

                    loadComments(pedido_id);

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



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

            setTimeout(() => {
                const commentsContainer = $('#commentsContainer');
                commentsContainer.scrollTop(commentsContainer[0].scrollHeight);
            }, 10);
        }

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

            console.log(comentario);

            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('');
                        loadComments(pedido_id); // Recargar comentarios
                    }
                }
            });
        });


        $(document).on('click', '.btnOpinar', function (e) {
            e.stopPropagation();

            pedido_id = $(this).data('id'); // Obtener el ID del pedido

            //$('#orderDetailModal').modal('hide'); // Mostrar el modal
            $('#ratingModal').modal('show'); // Mostrar el modal
        });

        // Manejo de selección de estrellas
        $(document).on('click', '.rating-star', function () {
            const value = $(this).data('value');
            $('#ratingValue').val(value); // Establecer el valor de la calificación

            // Marcar las estrellas seleccionadas
            $('.rating-star').removeClass('selected');
            $(this).addClass('selected');
            $(this).prevAll('.rating-star').addClass('selected');
        });

        // Enviar calificación y comentario
        $('#ratingForm').on('submit', function (e) {
            e.preventDefault();

            const rating = $('#ratingValue').val(); // Obtener calificación
            const comentario = $('#commentInputEstrellas').val(); // Obtener comentario

            if (rating === '0') {
                Swal.fire("", "Debes seleccionar una Calificacion!", "warning");
                return;
            }

            $.ajax({
                url: `{% url 'pedidos_calificar_comentario_x_pedido' %}`, // Cambiar por tu URL
                method: 'POST',
                data: {
                    pedido_id: pedido_id,
                    calificacion: rating,
                    comentario: comentario,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    if (data.save === 1) {
                        Swal.fire("", "Gracias por tu Opinion!", "success");
                        $('#orderDetailModal').modal('hide');
                        $('#ratingModal').modal('hide'); // Ocultar modal
                        $('#ratingValue').val('0'); // Reiniciar valor de calificación
                        $('#commentInput').val(''); // Limpiar comentario
                    } else {
                        Swal.fire("", "Error!", "error");
                        console.log(data.error);
                    }
                }
            });
        });



    });
</script>



{% endblock %}