async function deliverOrder(orderId) {
            try {
                await supabaseRequest(`orders?id=eq.${orderId}`, 'PATCH', {
                    status: 'entregado',
                    delivered_at: new Date().toISOString()
                });
                
                showNotification('Orden marcada como entregada', 'success');
                loadDeliveryOrders();
            } catch (error) {
                console.error('Error delivering order:', error);
                showNotification('Error al marcar como entregada', 'error');
            }
        }

        async function returnOrder(orderId) {
            try {
                const orders = await supabaseRequest(`orders?id=eq.${orderId}&select=*,commerces(name)`);
                const order = orders[0];
                
                if (!order) {
                    showNotification('Orden no encontrada', 'error');
                    return;
                }

                if (confirm(`¿Estás seguro de regresar la orden ${order.order_number} a la tienda?`)) {
                    await supabaseRequest(`orders?id=eq.${orderId}`, 'PATCH', {
                        status: 'devuelto',
                        returned_at: new Date().toISOString()
                    });
                    
                    showNotification(`Orden regresada a ${order.commerces.name}`, 'success');
                    loadDeliveryOrders();
                }
            } catch (error) {
                console.error('Error returning order:', error);
                showNotification('Error al regresar la orden', 'error');
            }
        }

        // Customer validation
        async function loadCustomerOrders() {
            const commerce = document.getElementById('customerCommerce').value;
            const orderSelect = document.getElementById('customerOrderSelect');
            
            orderSelect.innerHTML = '<option value="">Selecciona una orden</option>';
            
            if (!commerce) return;

            try {
                const commerces = await supabaseRequest('commerces');
                const foundCommerce = commerces.find(c => c.name === commerce);
                
                if (!foundCommerce) return;
                
                const orders = await supabaseRequest(`orders?commerce_id=eq.${foundCommerce.id}&status=in.(pendiente,listo)`);

                orders.forEach(order => {
                    orderSelect.innerHTML += `
                        <option value="${order.id}">
                            ${order.order_number} - ${order.amount ? order.amount.toFixed(2) : '0.00'}
                        </option>
                    `;
                });
            } catch (error) {
                console.error('Error loading customer orders:', error);
            }
        }

        async function validateCustomer() {
            const orderId = document.getElementById('customerOrderSelect').value;
            const inputName = document.getElementById('customerValidationName').value;

            if (!orderId || !inputName) {
                showNotification('Selecciona una orden e ingresa tu nombre', 'error');
                return;
            }

            try {
                const orders = await supabaseRequest(`orders?id=eq.${orderId}&select=*,commerces(name)`);
                const order = orders[0];
                
                if (!order) {
                    showNotification('Orden no encontrada', 'error');
                    return;
                }

                if (order.customer_name.toLowerCase() !== inputName.toLowerCase()) {
                    showNotification('Nombre incorrecto', 'error');
                    return;
                }

                // Update order status
                await supabaseRequest(`orders?id=eq.${orderId}`, 'PATCH', {
                    validated: true,
                    status: 'listo'
                });

                // Send notification to delivery person
                playNotificationSound();
                showInAppPopup(order);
                
                showNotification('Validación exitosa. Notificación enviada al entregador', 'success');
                
                // Clear form
                document.getElementById('customerCommerce').value = '';
                document.getElementById('customerOrderSelect').value = '';
                document.getElementById('customerValidationName').value = '';
                
                loadCustomerOrders();
            } catch (error) {
                console.error('Error validating customer:', error);
                showNotification('Error al validar el cliente', 'error');
            }
        }

        // Commerce management
        async function createCommerce() {
            const commerceName = document.getElementById('newCommerce').value.trim();

            if (!commerceName) {
                showNotification('El nombre del restaurante es obligatorio', 'error');
                return;
            }

            try {
                const existingCommerces = await supabaseRequest('commerces');
                const duplicate = existingCommerces.find(c => c.name.toLowerCase() === commerceName.toLowerCase());
                
                if (duplicate) {
                    showNotification('El restaurante ya existe', 'error');
                    return;
                }

                await supabaseRequest('commerces', 'POST', {
                    name: commerceName
                });
                
                showNotification('Restaurante agregado exitosamente', 'success');
                
                // Clear form
                document.getElementById('newCommerce').value = '';
                
                // Reload everything
                loadCommercesIntoSelect();
                loadCommercesTable();
                
            } catch (error) {
                console.error('Error creating commerce:', error);
                showNotification('Error al agregar el restaurante', 'error');
            }
        }

        async function deleteCommerce(commerceName) {
            try {
                const commerces = await supabaseRequest('commerces');
                const foundCommerce = commerces.find(c => c.name === commerceName);
                
                if (!foundCommerce) {
                    showNotification('Restaurante no encontrado', 'error');
                    return;
                }

                const activeOrders = await supabaseRequest(`orders?commerce_id=eq.${foundCommerce.id}&status=in.(pendiente,listo)`);

                if (activeOrders.length > 0) {
                    showNotification(`No se puede eliminar: ${commerceName} tiene ${activeOrders.length} órdenes activas`, 'error');
                    return;
                }

                if (confirm(`¿Estás seguro de eliminar ${commerceName}?`)) {
                    await supabaseRequest(`commerces?id=eq.${foundCommerce.id}`, 'DELETE');
                    showNotification('Restaurante eliminado exitosamente', 'success');
                    
                    loadCommercesIntoSelect();
                    loadCommercesTable();
                }
            } catch (error) {
                console.error('Error deleting commerce:', error);
                showNotification('Error al eliminar el restaurante', 'error');
            }
        }

        async function loadCommercesTable() {
            try {
                const commerces = await supabaseRequest('commerces');
                const commercesTable = document.getElementById('commercesTable');
                
                if (!commercesTable) return;
                
                commercesTable.innerHTML = '';

                for (const commerce of commerces) {
                    const activeOrders = await supabaseRequest(`orders?commerce_id=eq.${commerce.id}&status=in.(pendiente,listo)`);
                    const activeCount = activeOrders.length;

                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${commerce.name}</td>
                        <td>
                            <span class="order-status ${activeCount > 0 ? 'status-listo' : 'status-entregado'}">
                                ${activeCount} órdenes
                            </span>
                        </td>
                        <td>
                            <button class="btn btn-danger" onclick="deleteCommerce('${commerce.name}')" 
                                    ${activeCount > 0 ? 'disabled' : ''}>
                                Eliminar
                            </button>
                        </td>
                    `;
                    commercesTable.appendChild(row);
                }
            } catch (error) {
                console.error('Error loading commerces table:', error);
            }
        }

        // User management
        async function createUser() {
            const username = document.getElementById('newUsername').value;
            const password = document.getElementById('newPassword').value;
            const role = document.getElementById('userRole').value;

            if (!username || !password) {
                showNotification('Usuario y contraseña son obligatorios', 'error');
                return;
            }

            try {
                const existingUsers = await supabaseRequest('users');
                const duplicate = existingUsers.find(u => u.username.toLowerCase() === username.toLowerCase());
                
                if (duplicate) {
                    showNotification('El usuario ya existe', 'error');
                    return;
                }

                await supabaseRequest('users', 'POST', {
                    username: username,
                    password: password,
                    role: role
                });
                
                const roleText = role === 'admin' ? 'Administrador' : 'Entregador';
                showNotification(`Usuario ${username} creado como ${roleText}`, 'success');
                
                // Clear form
                document.getElementById('newUsername').value = '';
                document.getElementById('newPassword').value = '';
                document.getElementById('userRole').value = 'delivery';
                
                loadUsers();
            } catch (error) {
                console.error('Error creating user:', error);
                showNotification('Error al crear el usuario', 'error');
            }
        }

        async function deleteUser(username) {
            try {
                const users = await supabaseRequest('users');
                const user = users.find(u => u.username === username);
                
                if (user && user.role === 'admin') {
                    const admins = users.filter(u => u.role === 'admin');
                    if (admins.length <= 1) {
                        showNotification('No se puede eliminar: debe haber al menos un administrador', 'error');
                        return;
                    }
                }

                if (confirm(`¿Estás seguro de eliminar el usuario ${username}?`)) {
                    await supabaseRequest(`users?username=eq.${username}`, 'DELETE');
                    showNotification('Usuario eliminado', 'success');
                    loadUsers();
                }
            } catch (error) {
                console.error('Error deleting user:', error);
                showNotification('Error al eliminar el usuario', 'error');
            }
        }

        async function loadUsers() {
            try {
                const users = await supabaseRequest('users');
                const usersTable = document.getElementById('usersTable');
                const changePasswordSelect = document.getElementById('changePasswordUser');
                
                if (usersTable) {
                    usersTable.innerHTML = '';
                }
                if (changePasswordSelect) {
                    changePasswordSelect.innerHTML = '<option value="">Selecciona un usuario</option>';
                }

                users.forEach(user => {
                    const roleIcon = user.role === 'admin' ? '👑' : '👤';
                    const roleText = user.role === 'admin' ? 'Administrador' : 'Entregador';
                    
                    if (usersTable) {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${user.username}</td>
                            <td>${roleIcon} ${roleText}</td>
                            <td>
                                <button class="btn btn-danger" onclick="deleteUser('${user.username}')">Eliminar</button>
                            </td>
                        `;
                        usersTable.appendChild(row);
                    }

                    if (changePasswordSelect) {
                        changePasswordSelect.innerHTML += `<option value="${user.username}">${user.username} (${roleText})</option>`;
                    }
                });
            } catch (error) {
                console.error('Error loading users:', error);
            }
        }

        async function changeUserPassword() {
            const username = document.getElementById('changePasswordUser').value;
            const newPassword = document.getElementById('newUserPassword').value;

            if (!username) {
                showNotification('Selecciona un usuario', 'error');
                return;
            }

            if (!newPassword || newPassword.length < 3) {
                showNotification('La contraseña debe tener al menos 3 caracteres', 'error');
                return;
            }

            if (confirm(`¿Estás seguro de cambiar la contraseña de ${username}?`)) {
                try {
                    await supabaseRequest(`users?username=eq.${username}`, 'PATCH', {
                        password: newPassword
                    });
                    
                    showNotification(`Contraseña de ${username} cambiada exitosamente`, 'success');
                    
                    // Clear form
                    document.getElementById('changePasswordUser').value = '';
                    document.getElementById('newUserPassword').value = '';
                    
                } catch (error) {
                    console.error('Error changing password:', error);
                    showNotification('Error al cambiar la contraseña', 'error');
                }
            }
        }

        // Orders table
        async function loadOrdersTable() {
            try {
                const orders = await supabaseRequest('orders?select=*,commerces(name)&order=created_at.desc');
                const ordersTable = document.getElementById('ordersTable');
                
                if (!ordersTable) return;
                
                ordersTable.innerHTML = '';

                orders.forEach(order => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${order.order_number}</td>
                        <td>${order.commerces.name}</td>
                        <td>${order.customer_name}</td>
                        <td>${order.amount ? order.amount.toFixed(2) : '0.00'}</td>
                        <td><span class="order-status status-${order.status}">${order.status.toUpperCase()}</span></td>
                        <td>${new Date(order.created_at).toLocaleDateString()}</td>
                        <td>${order.delivery_person}</td>
                    `;
                    ordersTable.appendChild(row);
                });
            } catch (error) {
                console.error('Error loading orders table:', error);
            }
        }

        async function exportToExcel() {
            try {
                const orders = await supabaseRequest('orders?select=*,commerces(name)&order=created_at.desc');
                
                let csv = 'Orden,Comercio,Cliente,Monto,Estado,Fecha,Entregador\n';
                
                orders.forEach(order => {
                    csv += `${order.order_number},${order.commerces.name},${order.customer_name},${order.amount ? order.amount.toFixed(2) : '0.00'},${order.status},${new Date(order.created_at).toLocaleDateString()},${order.delivery_person}\n`;
                });

                const blob = new Blob([csv], { type: 'text/csv' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'ordenes.csv';
                a.click();
                window.URL.revokeObjectURL(url);
            } catch (error) {
                console.error('Error exporting to Excel:', error);
                showNotification('Error al exportar los datos', 'error');
            }
        }

        // Notification functions
        function playNotificationSound() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
                oscillator.type = 'sine';
                
                gainNode.gain.setValueAtTime(0, audioContext.currentTime);
                gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.01);
                gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);
                
                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (error) {
                console.log('No se pudo reproducir el sonido:', error);
                if (navigator.vibrate) {
                    navigator.vibrate([200, 100, 200]);
                }
            }
        }

        function showInAppPopup(order) {
            const existingPopup = document.querySelector('.delivery-popup');
            if (existingPopup) {
                existingPopup.remove();
            }

            const overlay = document.createElement('div');
            overlay.className = 'delivery-popup';
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                z-index: 10000;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: fadeIn 0.3s ease-out;
            `;

            const popup = document.createElement('div');
            popup.style.cssText = `
                background: white;
                padding: 30px;
                border-radius: 15px;
                text-align: center;
                max-width: 90%;
                width: 400px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            `;

            popup.innerHTML = `
                <div style="font-size: 60px; margin-bottom: 20px;">🚚</div>
                <h2 style="color: #2d3748; margin-bottom: 15px;">¡ORDEN LISTA!</h2>
                <p style="font-size: 18px; color: #4a5568; margin-bottom: 10px;">
                    <strong>${order.customer_name}</strong>
                </p>
                <p style="color: #666; margin-bottom: 15px;">
                    Orden: <strong>${order.order_number}</strong><br>
                    Comercio: <strong>${order.commerces.name}</strong><br>
                    Monto: <strong>${order.amount ? order.amount.toFixed(2) : '0.00'}</strong>
                </p>
                <button onclick="this.parentElement.parentElement.remove()" style="
                    padding: 15px 30px;
                    background: linear-gradient(45deg, #48bb78, #38a169);
                    color: white;
                    border: none;
                    border-radius: 25px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    margin: 10px;
                ">Entendido</button>
            `;

            overlay.appendChild(popup);
            document.body.appendChild(overlay);

            setTimeout(() => {
                if (overlay.parentNode) {
                    overlay.remove();
                }
            }, 10000);
        }

        function requestNotificationPermissions() {
            if ('Notification' in window && Notification.permission === 'default') {
                Notification.requestPermission().then(permission => {
                    if (permission === 'granted') {
                        showNotification('Notificaciones activadas para alertas de órdenes', 'success');
                    }
                });
            }
        }

        // Initialize app
        function init() {
            const urlParams = new URLSearchParams(window.location.search);
            const section = urlParams.get('section');
            
            if (section === 'customer') {
                showSection('customer');
            } else {
                showSection('login');
            }
        }

        // Start the app
        init();
    </script>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Plataforma de Pickup</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .header h1 {
            text-align: center;
            color: #4a5568;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .nav-btn.active {
            background: linear-gradient(45deg, #764ba2, #667eea);
            transform: translateY(-1px);
        }

        .section {
            display: none;
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin-bottom: 20px;
        }

        .section.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #4a5568;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            background: linear-gradient(45deg, #48bb78, #38a169);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .btn-danger {
            background: linear-gradient(45deg, #f56565, #e53e3e);
        }

        .btn-warning {
            background: linear-gradient(45deg, #ed8936, #dd6b20);
        }

        .orders-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .order-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #667eea;
            transition: transform 0.3s ease;
        }

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

        .order-status {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .status-pendiente {
            background: #fed7d7;
            color: #c53030;
        }

        .status-listo {
            background: #c6f6d5;
            color: #2f855a;
        }

        .status-entregado {
            background: #bee3f8;
            color: #2b6cb0;
        }

        .status-devuelto {
            background: #fbb6ce;
            color: #97266d;
        }

        .qr-code {
            text-align: center;
            margin: 20px 0;
        }

        .qr-display {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            display: inline-block;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            z-index: 1000;
            animation: slideIn 0.3s ease-out;
        }

        .notification.success {
            background: #48bb78;
        }

        .notification.error {
            background: #f56565;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        .login-form {
            max-width: 400px;
            margin: 0 auto;
        }

        .table-container {
            overflow-x: auto;
            margin-top: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        th {
            background: #f7fafc;
            font-weight: bold;
            color: #4a5568;
        }

        .hidden {
            display: none;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .nav-buttons {
                gap: 10px;
            }
            
            .nav-btn {
                padding: 10px 20px;
                font-size: 14px;
            }
            
            .orders-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚚 Plataforma de Pickup</h1>
            <div class="nav-buttons">
                <button class="nav-btn active" onclick="showSection('login')" id="loginBtn">Iniciar Sesión</button>
                <button class="nav-btn" onclick="showSection('delivery')" id="deliveryBtn" style="display: none;">Entrega</button>
                <button class="nav-btn" onclick="showSection('customer')">Cliente</button>
                <button class="nav-btn" onclick="showSection('admin')" id="adminBtn" style="display: none;">Administrador</button>
                <button class="nav-btn" onclick="showSection('orders')" id="ordersBtn" style="display: none;">Órdenes</button>
                <button class="nav-btn" onclick="logout()" id="logoutBtn" style="display: none;">Cerrar Sesión</button>
            </div>
        </div>

        <!-- Login Section -->
        <div id="login" class="section active">
            <h2>Iniciar Sesión</h2>
            <div class="login-form">
                <div class="form-group">
                    <label for="username">Usuario:</label>
                    <input type="text" id="username" placeholder="Ingresa tu usuario">
                </div>
                <div class="form-group">
                    <label for="password">Contraseña:</label>
                    <input type="password" id="password" placeholder="Ingresa tu contraseña">
                </div>
                <button class="btn" onclick="login()">Iniciar Sesión</button>
            </div>
        </div>

        <!-- Delivery Section -->
        <div id="delivery" class="section">
            <h2>Panel de Entrega</h2>
            <div style="background: #f0fff4; border: 2px solid #48bb78; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
                <p style="margin: 0; color: #2f855a; font-weight: bold;">
                    🔔 Las notificaciones sonoras están activadas. Recibirás alertas cuando los clientes validen sus órdenes.
                </p>
            </div>
            <div class="form-group">
                <label for="commerce">Comercio:</label>
                <select id="commerce">
                    <option value="">Selecciona un comercio</option>
                </select>
            </div>
            <div class="form-group">
                <label for="orderNumber">Número de Orden:</label>
                <input type="text" id="orderNumber" placeholder="Ej: ORD-001">
            </div>
            <div class="form-group">
                <label for="customerName">Nombre del Cliente:</label>
                <input type="text" id="customerName" placeholder="Nombre completo">
            </div>
            <div class="form-group">
                <label for="orderAmount">Monto de la Orden:</label>
                <input type="number" id="orderAmount" placeholder="0.00" step="0.01" min="0">
            </div>
            <button class="btn" onclick="createOrder()">Crear Orden</button>

            <div id="deliveryOrders" class="orders-grid">
                <!-- Orders will be populated here -->
            </div>
        </div>

        <!-- Customer Section -->
        <div id="customer" class="section">
            <h2>Validación de Cliente</h2>
            <p style="color: #666; margin-bottom: 20px;">No necesitas crear una cuenta. Solo selecciona tu orden y valida tu nombre.</p>
            <div class="form-group">
                <label for="customerCommerce">Comercio:</label>
                <select id="customerCommerce" onchange="loadCustomerOrders()">
                    <option value="">Selecciona un comercio</option>
                </select>
            </div>
            <div class="form-group">
                <label for="customerOrderSelect">Orden:</label>
                <select id="customerOrderSelect">
                    <option value="">Selecciona una orden</option>
                </select>
            </div>
            <div class="form-group">
                <label for="customerValidationName">Tu Nombre:</label>
                <input type="text" id="customerValidationName" placeholder="Ingresa tu nombre">
            </div>
            <button class="btn" onclick="validateCustomer()">Validar</button>
        </div>

        <!-- Admin Section -->
        <div id="admin" class="section">
            <h2>Panel de Administración</h2>
            <div style="background: #fef5e7; border: 2px solid #f6ad55; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
                <p style="margin: 0; color: #c05621; font-weight: bold;">
                    🔒 Acceso Restringido: Solo usuarios administradores pueden acceder a esta sección.
                </p>
            </div>
            
            <!-- User Management -->
            <div style="background: #f7fafc; padding: 20px; border-radius: 10px; margin-bottom: 30px;">
                <h3>👥 Administración de Usuarios</h3>
                <div class="form-group">
                    <label for="newUsername">Nuevo Usuario:</label>
                    <input type="text" id="newUsername" placeholder="Nombre de usuario">
                </div>
                <div class="form-group">
                    <label for="newPassword">Contraseña:</label>
                    <input type="password" id="newPassword" placeholder="Contraseña">
                </div>
                <div class="form-group">
                    <label for="userRole">Rol del Usuario:</label>
                    <select id="userRole">
                        <option value="delivery">👤 Entregador</option>
                        <option value="admin">👑 Administrador</option>
                    </select>
                </div>
                <button class="btn" onclick="createUser()">Crear Usuario</button>

                <h4>Usuarios Existentes</h4>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Usuario</th>
                                <th>Rol</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="usersTable">
                            <!-- Users will be populated here -->
                        </tbody>
                    </table>
                </div>

                <!-- Change Password Section -->
                <div style="background: #fff5f5; border: 2px solid #fed7d7; border-radius: 8px; padding: 15px; margin-top: 20px;">
                    <h4>🔑 Cambiar Contraseña</h4>
                    <div class="form-group">
                        <label for="changePasswordUser">Usuario:</label>
                        <select id="changePasswordUser">
                            <option value="">Selecciona un usuario</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="newUserPassword">Nueva Contraseña:</label>
                        <input type="password" id="newUserPassword" placeholder="Nueva contraseña">
                    </div>
                    <button class="btn btn-warning" onclick="changeUserPassword()">Cambiar Contraseña</button>
                </div>
            </div>

            <!-- Commerce Management -->
            <div style="background: #f0fff4; padding: 20px; border-radius: 10px;">
                <h3>🏪 Administración de Restaurantes</h3>
                <div class="form-group">
                    <label for="newCommerce">Nuevo Restaurante:</label>
                    <input type="text" id="newCommerce" placeholder="Nombre del restaurante">
                </div>
                <button class="btn" onclick="createCommerce()">Agregar Restaurante</button>

                <h4>Restaurantes Existentes</h4>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Restaurante</th>
                                <th>Órdenes Activas</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="commercesTable">
                            <!-- Commerces will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Orders Section -->
        <div id="orders" class="section">
            <h2>Todas las Órdenes</h2>
            <button class="btn" onclick="exportToExcel()">Exportar a Excel</button>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Orden</th>
                            <th>Comercio</th>
                            <th>Cliente</th>
                            <th>Monto</th>
                            <th>Estado</th>
                            <th>Fecha</th>
                            <th>Entregador</th>
                        </tr>
                    </thead>
                    <tbody id="ordersTable">
                        <!-- Orders will be populated here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        let currentUser = null;
        let currentUserData = null;

        // Supabase configuration
        const SUPABASE_URL = 'https://hgrfzkjytmgmhuzcmgez.supabase.co';
        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhncmZ6a2p5dG1nbWh1emNtZ2V6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0MTMwNTgsImV4cCI6MjA2ODk4OTA1OH0.AWR3brvrmPFO0-x3SP5jIlcmNnVP9s_AyjEFvS7Wfdw';

        // Simple Supabase API
        async function supabaseRequest(endpoint, method = 'GET', data = null) {
            const url = `${SUPABASE_URL}/rest/v1/${endpoint}`;
            const options = {
                method: method,
                headers: {
                    'apikey': SUPABASE_ANON_KEY,
                    'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
                    'Content-Type': 'application/json',
                    'Prefer': method === 'POST' ? 'return=representation' : 'return=minimal'
                }
            };

            if (data && (method === 'POST' || method === 'PATCH')) {
                options.body = JSON.stringify(data);
            }

            const response = await fetch(url, options);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return response.status === 204 ? null : await response.json();
        }

        // Show notification
        function showNotification(message, type) {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }

        // Navigation
        function showSection(sectionName) {
            // Hide all sections
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                section.classList.remove('active');
            });

            // Remove active class from all nav buttons
            const navButtons = document.querySelectorAll('.nav-btn');
            navButtons.forEach(btn => {
                btn.classList.remove('active');
            });

            // Show selected section
            const selectedSection = document.getElementById(sectionName);
            if (selectedSection) {
                selectedSection.classList.add('active');
            }

            // Add active class to clicked button
            if (event && event.target) {
                event.target.classList.add('active');
            }

            // Load data when switching sections
            if (sectionName === 'delivery') {
                loadCommercesIntoSelect();
                loadDeliveryOrders();
            } else if (sectionName === 'customer') {
                loadCommercesIntoSelect();
            } else if (sectionName === 'admin') {
                if (!checkAdminAccess()) return;
                loadUsers();
                loadCommercesTable();
            } else if (sectionName === 'orders') {
                loadOrdersTable();
            }
        }

        // Simple commerce loading
        async function loadCommercesIntoSelect() {
            try {
                console.log('🔄 Cargando comercios...');
                const commerces = await supabaseRequest('commerces');
                console.log('📋 Comercios obtenidos:', commerces);
                
                // Update delivery dropdown
                const deliverySelect = document.getElementById('commerce');
                if (deliverySelect) {
                    deliverySelect.innerHTML = '<option value="">Selecciona un comercio</option>';
                    commerces.forEach(commerce => {
                        deliverySelect.innerHTML += `<option value="${commerce.name}">${commerce.name}</option>`;
                    });
                    console.log(`✅ Dropdown entrega: ${commerces.length} opciones`);
                }
                
                // Update customer dropdown
                const customerSelect = document.getElementById('customerCommerce');
                if (customerSelect) {
                    customerSelect.innerHTML = '<option value="">Selecciona un comercio</option>';
                    commerces.forEach(commerce => {
                        customerSelect.innerHTML += `<option value="${commerce.name}">${commerce.name}</option>`;
                    });
                    console.log(`✅ Dropdown cliente: ${commerces.length} opciones`);
                }
                
            } catch (error) {
                console.error('❌ Error cargando comercios:', error);
                showNotification('Error al cargar restaurantes', 'error');
            }
        }

        // Authentication
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            try {
                const users = await supabaseRequest(`users?username=eq.${username}`);
                const user = users[0];
                
                if (user && user.password === password) {
                    currentUser = username;
                    currentUserData = user;
                    showNotification('Sesión iniciada correctamente', 'success');
                    
                    // Update navigation
                    updateNavButtons();
                    
                    // Request notification permissions for delivery people
                    if (user.role !== 'admin') {
                        requestNotificationPermissions();
                    }
                    
                    showSection('delivery');
                } else {
                    showNotification('Credenciales incorrectas', 'error');
                }
            } catch (error) {
                console.error('Login error:', error);
                showNotification('Error al iniciar sesión', 'error');
            }
        }

        function logout() {
            currentUser = null;
            currentUserData = null;
            updateNavButtons();
            showNotification('Sesión cerrada', 'success');
            showSection('login');
        }

        function updateNavButtons() {
            const loginBtn = document.getElementById('loginBtn');
            const deliveryBtn = document.getElementById('deliveryBtn');
            const adminBtn = document.getElementById('adminBtn');
            const ordersBtn = document.getElementById('ordersBtn');
            const logoutBtn = document.getElementById('logoutBtn');
            
            if (currentUserData && currentUserData.role === 'admin') {
                loginBtn.style.display = 'none';
                deliveryBtn.style.display = 'inline-block';
                adminBtn.style.display = 'inline-block';
                ordersBtn.style.display = 'inline-block';
                logoutBtn.style.display = 'inline-block';
            } else if (currentUser) {
                loginBtn.style.display = 'none';
                deliveryBtn.style.display = 'inline-block';
                adminBtn.style.display = 'none';
                ordersBtn.style.display = 'inline-block';
                logoutBtn.style.display = 'inline-block';
            } else {
                loginBtn.style.display = 'inline-block';
                deliveryBtn.style.display = 'none';
                adminBtn.style.display = 'none';
                ordersBtn.style.display = 'none';
                logoutBtn.style.display = 'none';
            }
        }

        function checkAdminAccess() {
            if (!currentUser) {
                showNotification('Debes iniciar sesión primero', 'error');
                showSection('login');
                return false;
            }
            
            if (!currentUserData || currentUserData.role !== 'admin') {
                showNotification('Solo los administradores pueden acceder a esta sección', 'error');
                showSection('delivery');
                return false;
            }
            
            return true;
        }

        // Order management
        async function createOrder() {
            if (!currentUser) {
                showNotification('Debes iniciar sesión primero', 'error');
                return;
            }

            const commerce = document.getElementById('commerce').value;
            const orderNumber = document.getElementById('orderNumber').value;
            const customerName = document.getElementById('customerName').value;
            const orderAmount = parseFloat(document.getElementById('orderAmount').value);

            if (!commerce || !orderNumber || !customerName || !orderAmount || orderAmount <= 0) {
                showNotification('Todos los campos son obligatorios y el monto debe ser mayor a 0', 'error');
                return;
            }

            try {
                // Get commerce ID
                const commerces = await supabaseRequest('commerces');
                const foundCommerce = commerces.find(c => c.name === commerce);
                
                if (!foundCommerce) {
                    showNotification(`Comercio "${commerce}" no encontrado`, 'error');
                    return;
                }

                // Create order
                const orderData = {
                    order_number: orderNumber,
                    commerce_id: foundCommerce.id,
                    customer_name: customerName,
                    amount: orderAmount,
                    status: 'pendiente',
                    delivery_person: currentUser,
                    validated: false
                };

                await supabaseRequest('orders', 'POST', orderData);
                showNotification('Orden creada exitosamente', 'success');
                
                // Clear form
                document.getElementById('commerce').value = '';
                document.getElementById('orderNumber').value = '';
                document.getElementById('customerName').value = '';
                document.getElementById('orderAmount').value = '';
                
                loadDeliveryOrders();
            } catch (error) {
                console.error('Error creating order:', error);
                showNotification('Error al crear la orden', 'error');
            }
        }

        async function loadDeliveryOrders() {
            if (!currentUser) return;

            try {
                const orders = await supabaseRequest(`orders?delivery_person=eq.${currentUser}&select=*,commerces(name)`);
                
                const deliveryOrders = document.getElementById('deliveryOrders');
                deliveryOrders.innerHTML = '';

                orders.forEach(order => {
                    const orderCard = document.createElement('div');
                    orderCard.className = 'order-card';
                    orderCard.innerHTML = `
                        <div class="order-status status-${order.status}">${order.status.toUpperCase()}</div>
                        <h3>Orden: ${order.order_number}</h3>
                        <p><strong>Comercio:</strong> ${order.commerces.name}</p>
                        <p><strong>Cliente:</strong> ${order.customer_name}</p>
                        <p><strong>Monto:</strong> $${order.amount ? order.amount.toFixed(2) : '0.00'}</p>
                        <p><strong>Estado:</strong> ${order.status}</p>
                        <p><strong>Validado:</strong> ${order.validated ? 'Sí' : 'No'}</p>
                        <div class="qr-code">
                            <div class="qr-display">
                                <p style="font-size: 14px; font-weight: bold;">📱 QR Cliente</p>
                                <p style="font-size: 10px; background: #f0f8ff; padding: 5px; border-radius: 4px; margin: 5px 0;">
                                    https://adagio.today?section=customer
                                </p>
                                <p style="font-size: 12px;">Orden: ${order.order_number}</p>
                                <p style="font-size: 12px;">Comercio: ${order.commerces.name}</p>
                                <p style="font-size: 12px;">Monto: $${order.amount ? order.amount.toFixed(2) : '0.00'}</p>
                            </div>
                        </div>
                        ${order.validated && order.status === 'listo' ? 
                            `<button class="btn btn-warning" onclick="deliverOrder(${order.id})">Marcar como Entregado</button>
                             <button class="btn btn-danger" onclick="returnOrder(${order.id})">Regresar a Tienda</button>` : ''}
                        ${order.status === 'pendiente' ? 
                            `<button class="btn btn-danger" onclick="returnOrder(${order.id})">Regresar a Tienda</button>` : ''}
                    `;
                    deliveryOrders.appendChild(orderCard);
                });
            } catch (error) {
                console.error('Error loading delivery orders:', error);
            }
        }

        async function deliverOrder(orderId) {
            try {
                await supabaseRequest(`orders?id=eq.${orderId}`, 'PATCH', {
                    status