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

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

<div class="container-fluid">
    <div class="row">
        <!-- Filtro de estado (a la izquierda) -->
        <div class="col-lg-3 col-md-4 d-none d-md-block">
            <div class="filter-controls p-3 bg-light rounded" id="filterContainer">
                <h5 class="mb-3">Filtros</h5>
                <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" class="w-100">
                <!-- Las tarjetas se renderizarán aquí -->
            </div>
        </div>

        <!-- Filtro de categorías (a la derecha) -->
        <div class="col-lg-3 col-md-4 d-none d-md-block">
            <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>


<!-- Modal para ver detalles del pedido -->
<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">
            <div class="modal-header">
                <h5 class="modal-title" id="orderDetailModalLabel">Detalles del
                    Pedido</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Información general del pedido -->
                <div class="mb-3">
                    <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>

                <div id="cancelOrderContainer" class="text-center mt-3">
                    <div class="card-actions">
                        <button
                            class="btn btn-outline-secondary btn-sm btn-success btnAction text-white"
                            id="autorizar">Aceptar</button>
                        <button
                            class="btn btn-outline-secondary btn-sm btn-danger btnAction text-white"
                            id="rechazar">Rechazar</button>
                    </div>
                </div>

                <div id="prepararOrderContainer" class="text-center mt-3">
                    <div class="card-actions">
                        <button
                            class="btn btn-outline-secondary btn-sm btn-success btnGestion text-white"
                            data-value="5"
                            data-text="Preparando!">Preparar</button>
                    </div>
                </div>
                <div id="listoOrderContainer" class="text-center mt-3">
                    <div class="card-actions">
                        <button
                            class="btn btn-outline-secondary btn-sm btn-warning btnGestion text-white"
                            data-value="6" data-text="Listo!">Listo para
                            Entrega</button>
                    </div>
                </div>
                <div id="finalizarOrderContainer" class="text-center mt-3">
                    <div class="card-actions">
                        <button
                            class="btn btn-outline-secondary btn-sm btn-info btnGestion text-white"
                            data-value="7"
                            data-text="Entregado y Finalizado!">Entregado</button>
                    </div>
                </div>

                <br>

                <!-- Tabla de productos -->
                <div class="table-responsive">
                    <table class="table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>Cantidad</th>
                                <th>Precio</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="productList">
                            <!-- Productos del pedido se agregarán aquí -->
                        </tbody>
                    </table>
                </div>

                <!-- Comentarios del pedido -->
                <div class="order-comments my-3">
                    <h6>Comentarios</h6>
                    <div id="commentsContainer"
                        style="border: 1px solid #ddd; padding: 10px; max-height: 200px; overflow-y: auto; border-radius: 5px;">
                        <!-- Los mensajes se agregarán dinámicamente aquí -->
                    </div>
                    <div class="input-group mt-2" id="entregadoOrderContainer">
                        <textarea type="text" id="commentInput"
                            class="form-control"
                            placeholder="Comentario"></textarea>
                        <button class="btn btn-primary"
                            id="sendCommentBtn">Enviar</button>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger"
                    data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

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

        $('#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: 3,
                    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 orderCard = `
            <div class="order-card mb-3 p-3 bg-white rounded shadow-sm">
                <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-danger">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();

            showOrderDetails(pedido_id);
        });

        function showOrderDetails(pedidoId) {
            $.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(`
                            <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));
                    });

                    if (order.estado_text == "ENVIADO") {
                        $("#cancelOrderContainer").show();
                        
                    } else {
                        $("#cancelOrderContainer").hide();
                    }

                    $("#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);
                    $("#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
                    }
                }
            });
        });


    });
</script>

{% endblock %}