{% 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);
}

.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="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <div class="filter-controls p-3 bg-light rounded" id="filterContainer">
                <h5 class="mb-3">Filtros</h5>
                <!-- Dropdown para filtrar -->
                <div class="dropdown">
                    <button
                        class="btn btn-light dropdown-toggle w-100 text-start"
                        type="button"
                        id="filterMenu"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                    >
                        Por estado
                    </button>
                    <ul class="dropdown-menu w-100" aria-labelledby="filterMenu">
                        <li><a class="dropdown-item" href="#">Todos</a></li>
                        <li><a class="dropdown-item" href="#">Creado y sin Enviar</a></li>
                        <li><a class="dropdown-item" href="#">Enviado</a></li>
                        <li><a class="dropdown-item" href="#">Rechazado</a></li>
                        <li><a class="dropdown-item" href="#">Aprobado</a></li>
                        <li><a class="dropdown-item" href="#">Preparando</a></li>
                        <li><a class="dropdown-item" href="#">Listo Entrega</a></li>
                        <li><a class="dropdown-item" href="#">Entregado</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Buscador y tarjetas en el centro -->
        <div class="col-lg-6 col-md-8">
            <!-- Buscador centrado -->
            <div class="d-flex justify-content-center align-items-center mb-3">
                <div class="input-group" style="max-width: 600px; width: 100%;">
                    <input type="text" class="form-control" placeholder="Buscar productos...">
                    <button class="btn btn-danger" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>

            <!-- Contenedor de tarjetas -->
            <div id="ordersContainer">
               
            </div>
        </div>

        <!-- Filtro adicional a la derecha -->
        <div class="col-lg-3 col-md-4">
            <div class="filter-controls p-3 bg-light rounded" id="filterContainerCategories">
                <h5 class="mb-3">Categorías</h5>
                <div class="dropdown">
                    <button
                        class="btn btn-light dropdown-toggle w-100 text-start"
                        type="button"
                        id="filterCategoryMenu"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                    >
                        Por categoría
                    </button>
                    <ul class="dropdown-menu w-100" aria-labelledby="filterCategoryMenu">
                        <li><a class="dropdown-item" href="#" data-value="0">Todas</a></li>
                        <li><a class="dropdown-item" href="#" data-value="1">Comida rápida</a></li>
                        <li><a class="dropdown-item" href="#" data-value="2">Bebidas</a></li>
                        <li><a class="dropdown-item" href="#" data-value="3">Postres</a></li>
                        <li><a class="dropdown-item" href="#" data-value="4">Snacks</a></li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="modal fade" id="orderDetailModal" tabindex="-1" aria-labelledby="orderDetailModalLabel" aria-hidden="true"
    data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <!-- Cabecera del modal -->
            <div class="modal-header bg-light">
                <h5 class="modal-title text-uppercase fw-bold" id="orderDetailModalLabel">Detalles del Pedido</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Cuerpo del modal -->
            <div class="modal-body">
                <!-- Información general -->
                <div class="card mb-3 p-3 shadow-sm">
                    <h6 class="mb-1"><strong>Nombre del Negocio:</strong> <span id="businessName"></span></h6>
                    <p class="mb-1"><strong>Tipo Entrega:</strong> <span id="orderEntrega"></span></p>
                    <p class="mb-1"><strong>Estado:</strong> <span id="orderStatus"></span></p>
                    <p class="mb-1"><strong>Fecha:</strong> <span id="orderDate"></span></p>
                    <p class="mb-1"><strong>Total:</strong> L <span id="orderTotal"></span></p>
                    <p class="mb-1"><strong>Observaciones:</strong> <span id="orderObservations"></span></p>
                </div>

                <!-- Tabla de productos -->
                <div class="table-responsive shadow-sm">
                    <table class="table table-hover table-bordered align-middle">
                        <thead class="table-secondary">
                            <tr>
                                <th>Producto</th>
                                <th>Cantidad</th>
                                <th>Precio</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="productList">
                            <!-- Productos se cargarán dinámicamente -->
                        </tbody>
                    </table>
                </div>

                <!-- Comentarios -->
                <div class="order-comments my-4">
                    <h6 class="text-uppercase fw-bold mb-2">Comentarios</h6>
                    <div id="commentsContainer" class="border rounded p-3 bg-light"
                        style="max-height: 200px; overflow-y: auto;">
                        <!-- Comentarios dinámicos -->
                    </div>
                    <div class="input-group mt-3">
                        <textarea id="commentInput" class="form-control" placeholder="Escribe un comentario"></textarea>
                        <button class="btn btn-primary" id="sendCommentBtn">Enviar</button>
                    </div>
                </div>

                <!-- Botón de cancelar -->
                <div id="cancelOrderContainer" class="text-center mt-4">
                    <button id="cancelOrderBtn" class="btn btn-danger btn-lg">Cancelar Pedido</button>
                </div>
            </div>

            <!-- Pie del modal -->
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


{% include 'pedidos/modales/m_calificar_estrellas.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;

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

        $('#filterStatus').on('change', function () {
            const estado = $(this).val();
            loadOrders(estado, 1);
        });


        function loadOrders(estado = 0, opc = 1) {
            $.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) {
                        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}">
                
                <!-- 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>
                            <h5 class="card-title mb-1">${pedido.nombre}</h5>
                            <p class="card-text text-muted small mb-0">${pedido.descripcion_negocio}</p>
                            <p class="text-muted small">Horario: ${pedido.horario_atencion} (${pedido.dias_atencion})</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">${pedido.fecha_hora_creado_text}</p>
                    </div>
                </div>

                <!-- Información del pedido -->
                <div class="mb-2">
                    <span class="fw-bold">Total:</span> L ${dollarUSLocale.format(pedido.total)}<br>
                    <span class="fw-bold">Productos:</span> ${intergerLocale.format(pedido.product_count)} producto(s)
                </div>

                <!-- Acciones -->
                <div class="d-flex justify-content-end gap-2">
                    ${showOpinarButton ? `
                        <button class="btn btn-warning btn-sm btnOpinar text-white" data-id="${pedido.id_pedido}">Opinar</button>
                        <button class="btn btn-success btn-sm text-white" data-id="${pedido.id_pedido}">Repetir</button>
                    ` : ''}
                </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();

            showOrderDetails(pedido_id);
        });

        function showOrderDetails(pedido_id) {
            $.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) {
                    // 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(`
                            <tr>
                                <td>${producto.nombre_producto}</td>
                                <td class="text-center">${intergerLocale.format(producto.cantidad)}</td>
                                <td class="text-right">L ${dollarUSLocale.format(producto.precio_venta)}</td>
                                <td class="text-right">L ${dollarUSLocale.format((producto.cantidad * producto.precio_venta).toFixed(2))}</td>
                            </tr>
                        `);

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

                    // Muestra el modal
                    $("#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);
            });

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


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

            pedido_id = $(this).data('id'); // Obtener el ID del pedido
            $('#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 = $('#commentInput').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");
                        $('#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 %}