<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

    <title>Panel de Administrador</title>
    <style>
        /* Estilos para la tabla */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        /* Estilos para el login */
        #loginContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f8f9fa;
        }

        #loginContainer h2 {
            color: #343a40;
            margin-bottom: 20px;
        }

        #loginContainer input[type="text"],
        #loginContainer input[type="password"] {
            width: 250px;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }

        #loginContainer button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
        }

        #loginContainer button:hover {
            background-color: #0056b3;
        }

        /* Estilos para el panel del administrador */
        #managerPanel {
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            max-width: 1200px;
        }

        body {
            font-family: system-ui, -apple-system, BlinkFontFeatures, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        .footer {
            text-align: center;
            font-size: 0.9em;
            padding: 15px;
            background-color: #343a40; /* Gris oscuro */
            color: white;
            margin-top: auto; /* Para que se quede abajo */
        }



    </style>
</head>
<body>

    <div id="loginContainer">
        <h2>Login de Administrador</h2>
        <input type="text" id="username" placeholder="Usuario">
        <input type="password" id="password" placeholder="Contraseña">
        <button onclick="login()">Acceder</button>
    </div>

    <div id="managerPanel" style="display:none;">
        <h2>Pedidos Actuales</h2>
        <div id="currentOrders"></div>

        <div id="orderHistorySection" style="margin-top: 50px;">
            <h2>Historial de Pedidos</h2>
            <div id="orderHistory"></div>
            <button onclick="clearOrderHistory()">Limpiar Historial</button>
        </div>

        <div id="corteCajaSection" style="margin-top: 50px;">
            <h2>Total Hoy</h2>
            <p>Total del día: $<span id="totalDia">0.00</span></p>
        </div>

        <button onclick="refreshManagerData()">Refrescar</button>
        <button onclick="downloadOrderHistoryExcel()">Descargar Excel</button>


    </div>
    <div class="footer">
        <p>INOVAT TECH GROUP - Software Alx, Versión 1.0</p>
    </div>

    <script>
        let totalDia = 0;

        function login() {
            // ... (tu código de login)
            const username = document.getElementById('username').value;
             const password = document.getElementById('password').value;

         if (username === 'root' && password === 'root') { // Credenciales correctas
        // Mostrar el panel del administrador y ocultar el formulario de login
        document.getElementById('loginContainer').style.display = 'none';
        document.getElementById('managerPanel').style.display = 'block';

        // Cargar los datos del administrador
        loadManagerData();  // <-- Asegúrate de llamar a esta función
    } else {
        // Mostrar un mensaje de error
        alert('Credenciales incorrectas. Inténtalo de nuevo.');
    }
        }

        function loadManagerData() {
            updateOrders();
        }

        //excel 
        function downloadOrderHistoryExcel() {
    const storedOrders = JSON.parse(localStorage.getItem('orders')) || [];
    const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
    const allOrders = [...storedOrders, ...orderHistory];

    const data = []; // Array para los datos del Excel

    // Agregar encabezados de columna
    data.push(["Pedido", "Mesa", "Producto", "Cantidad", "Precio", "Subtotal", "Estado", "Hora"]);

    allOrders.forEach((order, orderIndex) => {
        let mesa = order.length > 0 ? (order[0].mesa || "Sin Asignar") : "Sin Asignar";


        order.forEach(plate => {
            Object.entries(plate.items).forEach(([item, details]) => {
                const subtotal = details.quantity * details.price;
                data.push([orderIndex + 1, mesa, item, details.quantity, details.price, subtotal.toFixed(2), order.status || 'Pendiente', order.completionTime || '']);
            });
        });
    });

    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Historial de Pedidos");
    XLSX.writeFile(wb, "historial_pedidos.xlsx");
}









        function updateTotalDia(orders) {
            let total = 0;
            orders.forEach(order => {
                order.forEach(plate => {
                    Object.entries(plate.items).forEach(([item, details]) => {
                        total += details.quantity * details.price;
                    });
                });
            });
            totalDia = total;
            document.getElementById('totalDia').textContent = totalDia.toFixed(2);
        }

        function createOrderTable(orders, startIndex = 1) {
            let tableHTML = `<table><thead><tr><th>Pedido</th><th>Mesa</th><th>Detalles</th><th>Total</th><th>Estado</th><th>Hora</th><th>Acciones</th></tr></thead><tbody>`;

            orders.forEach((order, index) => {
                let total = 0;
                let mesa = order.length > 0 ? (order[0].mesa || "Sin Asignar") : "Sin Asignar";
                let orderDetails = "<ul>";

                order.forEach(plate => {
                    Object.entries(plate.items).forEach(([item, details]) => {
                        orderDetails += `<li>${item} x ${details.quantity} - $${(details.quantity * details.price).toFixed(2)}</li>`;
                        total += details.quantity * details.price;
                    });
                });

                orderDetails += "</ul>";
                let status = order.status || 'Pendiente';
                let completionTime = order.completionTime || '';

                tableHTML += `<tr>
                    <td>${startIndex + index}</td>
                    <td>${mesa}</td>
                    <td>${orderDetails}</td>
                    <td>$${total.toFixed(2)}</td>
                    <td>${status}</td>
                    <td>${completionTime}</td>
                    <td>
                       ${status === 'Pendiente' || status === 'Preparando' ?
                       ` <button onclick="updateOrderStatus(${index}, 'Preparando')">Preparando</button>
                        <button onclick="updateOrderStatus(${index}, 'Listo')">Listo</button>
                        <button onclick="updateOrderStatus(${index}, 'Entregado')">Entregado</button>` : ''}
                        <button onclick="deleteOrder(${startIndex + index -1})">Eliminar</button>
                    </td>
                </tr>`;
            });


            tableHTML += `</tbody></table>`;
            return tableHTML;
        }

        function displayCurrentOrders(orders) {
            const currentOrdersDiv = document.getElementById('currentOrders');
            currentOrdersDiv.innerHTML = orders.length === 0 ? '<p>No hay pedidos actuales.</p>' : createOrderTable(orders);
        }

        function displayOrderHistory(orders) {
            const storedOrders = JSON.parse(localStorage.getItem("orders")) || [];

            const orderHistoryDiv = document.getElementById('orderHistory');
            orderHistoryDiv.innerHTML = orders.length === 0 ? '<p>No hay pedidos en el historial.</p>' : createOrderTable(orders, storedOrders.length + 1);
        }


        function updateOrders() {
            const storedOrders = JSON.parse(localStorage.getItem('orders')) || [];
            const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];

            displayCurrentOrders(storedOrders);
            displayOrderHistory(orderHistory);
            updateTotalDia([...storedOrders, ...orderHistory]);
        }



        function deleteOrder(orderIndex) {
            const storedOrders = JSON.parse(localStorage.getItem('orders')) || [];
            const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];

             if (orderIndex < storedOrders.length) { // Pedido actual
                storedOrders.splice(orderIndex, 1);
                localStorage.setItem('orders', JSON.stringify(storedOrders));
            } else { // Pedido en el historial
                orderHistory.splice(orderIndex - storedOrders.length, 1);
                localStorage.setItem('orderHistory', JSON.stringify(orderHistory));
            }

            updateOrders();  // Recargar todos los pedidos

        }


        function clearOrderHistory() {
            localStorage.removeItem('orderHistory');
            updateOrders(); // Actualizar la vista
        }


        function updateOrderStatus(orderIndex, newStatus) {
            const storedOrders = JSON.parse(localStorage.getItem('orders')) || [];


            if (storedOrders[orderIndex]) {
                storedOrders[orderIndex].status = newStatus;
                localStorage.setItem('orders', JSON.stringify(storedOrders));
                updateOrders(); // Actualizar la vista después de cambiar el estado
                localStorage.setItem('managerUpdate', new Date().getTime());

            }

        }





        function refreshManagerData() {
            updateOrders();
        }



        window.addEventListener('storage', (event) => {
            if ((event.key === 'orders' || event.key === 'orderHistory') && document.getElementById('managerPanel').style.display === 'block') {
                updateOrders();
            }
        });

        setInterval(updateOrders, 5000);


        login();

    </script>
</body>
</html>