/home/awneajlw/.trash/pending-orders.php
<?php
/**
 * Pending Orders Page - Order Management
 * This page displays all pending orders in a table format
 * Features: Order listing, status updates, view/delete actions, responsive design
 */

// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Include required files
require_once 'config/database.php';  // Database connection configuration
require_once 'includes/auth.php';    // Authentication functions

/**
 * Authentication Check
 * Redirect to welcome page if user is not logged in
 */
if (!isLoggedIn()) {
    header('Location: welcome.php');
    exit();
}

// Initialize variables for order management
$orders = [];              // Array to store pending orders
$error_message = '';       // Error message for failed operations
$success_message = '';     // Success message for completed operations

/**
 * Mark Order as Complete Handler
 * Process POST request to update order status to 'Completed'
 */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'mark_complete') {
    $order_id = isset($_POST['order_id']) ? (int)$_POST['order_id'] : 0;
    
    if ($order_id > 0) {
        try {
            $database = new Database();
            $db = $database->getConnection();
            
            $user_id = $_SESSION['user_id'];
            $update_query = "UPDATE orders SET status = 'Completed' WHERE id = ? AND user_id = ?";
            $stmt = $db->prepare($update_query);
            $stmt->execute([$order_id, $user_id]);
            
            if ($stmt->rowCount() > 0) {
                $success_message = 'Order marked as completed successfully!';
            } else {
                $error_message = 'Failed to update order status.';
            }
        } catch (Exception $e) {
            $error_message = 'Database error: ' . $e->getMessage();
        }
    }
}

try {
    $database = new Database();
    $db = $database->getConnection();
    
    // Create orders table if it doesn't exist
    $create_table_sql = "CREATE TABLE IF NOT EXISTS orders (
        id INT AUTO_INCREMENT PRIMARY KEY,
        user_id INT NOT NULL,
        tracking_id VARCHAR(50) DEFAULT NULL,
        patient_name VARCHAR(255) NOT NULL,
        whatsapp_number VARCHAR(20) NOT NULL,
        frame_detail VARCHAR(255) DEFAULT NULL,
        lens_type VARCHAR(255) DEFAULT NULL,
        total_amount DECIMAL(10,2) NOT NULL,
        advance DECIMAL(10,2) DEFAULT 0,
        balance DECIMAL(10,2) DEFAULT 0,
        delivery_date DATE DEFAULT NULL,
        right_sph VARCHAR(10) DEFAULT NULL,
        right_cyl VARCHAR(10) DEFAULT NULL,
        right_axis VARCHAR(10) DEFAULT NULL,
        left_sph VARCHAR(10) DEFAULT NULL,
        left_cyl VARCHAR(10) DEFAULT NULL,
        left_axis VARCHAR(10) DEFAULT NULL,
        add_power VARCHAR(10) DEFAULT NULL,
        important_note TEXT DEFAULT NULL,
        description TEXT DEFAULT NULL,
        status VARCHAR(20) DEFAULT 'Pending',
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        INDEX idx_user_id (user_id),
        INDEX idx_tracking_id (tracking_id),
        INDEX idx_patient_name (patient_name),
        INDEX idx_created_at (created_at)
    )";
    
    $db->exec($create_table_sql);
    
    // Add status column to existing orders table if it doesn't exist
    try {
        $db->exec("ALTER TABLE orders ADD COLUMN status VARCHAR(20) DEFAULT 'Pending'");
    } catch (PDOException $e) {
        // Column already exists, ignore error
    }
    
    $user_id = $_SESSION['user_id'];
    
    // Get orders for current user
    $query = "SELECT * FROM orders WHERE user_id = ? ORDER BY created_at DESC";
    $stmt = $db->prepare($query);
    $stmt->execute([$user_id]);
    $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch (Exception $e) {
    $error_message = 'Error loading orders: ' . $e->getMessage();
}

// Handle delete action
if (isset($_POST['delete_order'])) {
    $order_id = (int)$_POST['order_id'];
    try {
        $delete_query = "DELETE FROM orders WHERE id = ? AND user_id = ?";
        $delete_stmt = $db->prepare($delete_query);
        $delete_stmt->execute([$order_id, $user_id]);
        
        // Refresh page to show updated list
        header('Location: pending-orders.php');
        exit();
    } catch (Exception $e) {
        $error_message = 'Error deleting order: ' . $e->getMessage();
    }
}

// Handle status update
if (isset($_POST['update_status'])) {
    $order_id = (int)$_POST['order_id'];
    $new_status = $_POST['status'];
    
    try {
        $update_query = "UPDATE orders SET status = ? WHERE id = ? AND user_id = ?";
        $update_stmt = $db->prepare($update_query);
        $update_stmt->execute([$new_status, $order_id, $user_id]);
        
        // Refresh page to show updated list
        header('Location: pending-orders.php');
        exit();
    } catch (Exception $e) {
        $error_message = 'Error updating status: ' . $e->getMessage();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pending Orders - OPTI SLIP</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
            min-height: 100vh;
            padding: 20px;
            margin: 0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .page-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .back-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .page-title {
            color: white;
            font-size: 28px;
            font-weight: 600;
        }
        
        .main-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .header-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .opti-logo-section {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .opti-logo-container {
            display: flex;
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .opti-logo {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border: 2px solid #e5e7eb;
        }
        
        .opti-logo.qr {
            background: #f3f4f6;
        }
        
        .opti-logo.doc {
            background: #e5e7eb;
        }
        
        .glasses-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #10b981;
            font-size: 20px;
            z-index: 2;
        }
        
        .qr-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                #d1d5db 0px,
                #d1d5db 2px,
                transparent 2px,
                transparent 4px
            ),
            repeating-linear-gradient(
                90deg,
                #d1d5db 0px,
                #d1d5db 2px,
                transparent 2px,
                transparent 4px
            );
        }
        
        .doc-lines {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 20px;
            border-top: 2px solid #9ca3af;
            border-bottom: 2px solid #9ca3af;
        }
        
        .opti-title {
            color: #10b981;
            font-size: 24px;
            font-weight: bold;
        }
        
        .date-range {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f9fafb;
            padding: 10px 15px;
            border-radius: 10px;
            border: 2px solid #e5e7eb;
        }
        
        .date-range i {
            color: #6b7280;
        }
        
        .date-text {
            color: #374151;
            font-weight: 500;
            font-size: 14px;
        }
        
        .orders-table-container {
            overflow-x: auto;
            border-radius: 12px;
            border: 2px solid #e5e7eb;
        }
        
        .orders-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        
        .orders-table th {
            background: #10b981;
            color: white;
            padding: 15px 12px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            border: none;
        }
        
        .orders-table td {
            padding: 15px 12px;
            border-bottom: 1px solid #e5e7eb;
            font-size: 14px;
            color: #374151;
        }
        
        .orders-table tr:hover {
            background: #f9fafb;
        }
        
        .orders-table tr:last-child td {
            border-bottom: none;
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .status-pending {
            background: #fef3c7;
            color: #92400e;
        }
        
        .status-completed {
            background: #d1fae5;
            color: #065f46;
        }
        
        .status-cancelled {
            background: #fee2e2;
            color: #991b1b;
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .action-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }
        
        .view-btn {
            background: #10b981;
            color: white;
        }
        
        .view-btn:hover {
            background: #059669;
            transform: scale(1.1);
        }
        
        .delete-btn {
            background: #ef4444;
            color: white;
        }
        
        .delete-btn:hover {
            background: #dc2626;
            transform: scale(1.1);
        }
        
        .complete-btn {
            background: #10b981;
        }
        
        .complete-btn:hover {
            background: #059669;
            transform: scale(1.1);
        }
        
        .no-orders {
            text-align: center;
            padding: 60px 20px;
            color: #6b7280;
        }
        
        .no-orders i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #d1d5db;
        }
        
        .no-orders h3 {
            margin-bottom: 10px;
            color: #374151;
        }
        
        .no-orders p {
            margin-bottom: 30px;
        }
        
        .create-order-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .create-order-btn:hover {
            background: #059669;
            transform: translateY(-2px);
            color: white;
            text-decoration: none;
        }
        
        .error-message {
            background: #fee2e2;
            color: #991b1b;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #fecaca;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            
            .main-content {
                padding: 20px;
                border-radius: 15px;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .header-section {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .opti-title {
                font-size: 20px;
            }
            
            .opti-logo {
                width: 40px;
                height: 40px;
            }
            
            .glasses-icon {
                font-size: 16px;
            }
            
            .orders-table th,
            .orders-table td {
                padding: 10px 8px;
                font-size: 12px;
            }
            
            .orders-table th:nth-child(3),
            .orders-table td:nth-child(3),
            .orders-table th:nth-child(4),
            .orders-table td:nth-child(4) {
                display: none;
            }
            
            .action-buttons {
                gap: 5px;
            }
            
            .action-btn {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .main-content {
                padding: 15px;
            }
            
            .page-title {
                font-size: 20px;
            }
            
            .orders-table th,
            .orders-table td {
                padding: 8px 6px;
                font-size: 11px;
            }
            
            .orders-table th:nth-child(2),
            .orders-table td:nth-child(2),
            .orders-table th:nth-child(5),
            .orders-table td:nth-child(5),
            .orders-table th:nth-child(6),
            .orders-table td:nth-child(6) {
                display: none;
            }
        }
        
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close:hover {
            color: #000;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #374151;
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-secondary {
            background: #6b7280;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #4b5563;
        }
        
        .btn-danger {
            background: #ef4444;
            color: white;
        }
        
        .btn-danger:hover {
            background: #dc2626;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Page Header -->
        <div class="page-header">
            <button class="back-btn" onclick="goBack()">
                <i class="fas fa-arrow-left"></i>
                Back
            </button>
            <h1 class="page-title">Pending</h1>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <!-- Header Section -->
            <div class="header-section">
                <div class="opti-logo-section">
                    <div class="opti-logo-container">
                        <div class="opti-logo qr">
                            <div class="qr-pattern"></div>
                            <i class="fas fa-glasses glasses-icon"></i>
                        </div>
                        <div class="opti-logo doc">
                            <div class="doc-lines"></div>
                            <i class="fas fa-glasses glasses-icon"></i>
                        </div>
                    </div>
                    <h2 class="opti-title">OPTI SLIP</h2>
                </div>
                
                <div class="date-range">
                    <i class="fas fa-calendar-alt"></i>
                    <span class="date-text">Jan 1 To Jan 30</span>
                    <i class="fas fa-calendar-alt"></i>
                </div>
            </div>
            
            <!-- Error Message -->
            <?php if ($error_message): ?>
                <div class="error-message">
                    <i class="fas fa-exclamation-triangle"></i>
                    <?php echo htmlspecialchars($error_message); ?>
                </div>
            <?php endif; ?>
            
            <!-- Orders Table -->
            <?php if (isset($success_message)): ?>
            <div class="alert alert-success" style="background: #d1fae5; border: 1px solid #10b981; color: #065f46; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; text-align: center;">
                <i class="fas fa-check-circle me-2"></i>
                <?php echo htmlspecialchars($success_message); ?>
            </div>
            <?php endif; ?>
            
            <?php if (isset($error_message)): ?>
            <div class="alert alert-danger" style="background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; text-align: center;">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <?php echo htmlspecialchars($error_message); ?>
            </div>
            <?php endif; ?>
            
            <?php if (!empty($orders)): ?>
                <div class="orders-table-container">
                    <table class="orders-table">
                        <thead>
                            <tr>
                                <th>UID</th>
                                <th>Patient Name</th>
                                <th>Tracking Id</th>
                                <th>Amount</th>
                                <th>Advance</th>
                                <th>Balance</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($orders as $order): ?>
                                <tr>
                                    <td>U<?php echo str_pad($order['user_id'], 4, '0', STR_PAD_LEFT); ?></td>
                                    <td><?php echo htmlspecialchars($order['patient_name']); ?></td>
                                    <td><?php echo htmlspecialchars($order['tracking_id'] ?? 'T001'); ?></td>
                                    <td>$<?php echo number_format($order['total_amount'], 0); ?></td>
                                    <td>$<?php echo number_format($order['advance'], 0); ?></td>
                                    <td>$<?php echo number_format($order['balance'], 0); ?></td>
                                    <td>
                                        <span class="status-badge status-<?php echo strtolower($order['status'] ?? 'pending'); ?>">
                                            <?php echo htmlspecialchars($order['status'] ?? 'Pending'); ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <button class="action-btn view-btn" onclick="viewOrder(<?php echo $order['id']; ?>)" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <?php if (($order['status'] ?? 'Pending') === 'Pending'): ?>
                                            <button class="action-btn complete-btn" onclick="markComplete(<?php echo $order['id']; ?>)" title="Mark As Complete">
                                                <i class="fas fa-check-circle"></i>
                                            </button>
                                            <?php endif; ?>
                                            <button class="action-btn delete-btn" onclick="deleteOrder(<?php echo $order['id']; ?>)" title="Delete Order">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php else: ?>
                <div class="no-orders">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>No Orders Found</h3>
                    <p>You haven't created any orders yet. Create your first order to get started.</p>
                    <a href="new-order.php" class="create-order-btn">
                        <i class="fas fa-plus"></i>
                        Create New Order
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Delete Order</h3>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this order? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <form method="POST" style="display: inline;">
                    <input type="hidden" name="order_id" id="deleteOrderId">
                    <input type="hidden" name="delete_order" value="1">
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function goBack() {
            window.history.back();
        }
        
        function viewOrder(orderId) {
            // Redirect to order slip page
            window.location.href = 'order-slip.php?id=' + orderId;
        }
        
        function deleteOrder(orderId) {
            document.getElementById('deleteOrderId').value = orderId;
            document.getElementById('deleteModal').style.display = 'block';
        }
        
        function markComplete(orderId) {
            if (confirm('Are you sure you want to mark this order as complete?')) {
                // Create a form and submit it
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '';
                
                const actionInput = document.createElement('input');
                actionInput.type = 'hidden';
                actionInput.name = 'action';
                actionInput.value = 'mark_complete';
                
                const orderIdInput = document.createElement('input');
                orderIdInput.type = 'hidden';
                orderIdInput.name = 'order_id';
                orderIdInput.value = orderId;
                
                form.appendChild(actionInput);
                form.appendChild(orderIdInput);
                document.body.appendChild(form);
                form.submit();
            }
        }
        
        function closeModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }
        
        // Close modal when clicking outside
        window.onclick = function(event) {
            const modal = document.getElementById('deleteModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }
        
        // Auto-refresh page every 30 seconds to show updated data
        setTimeout(function() {
            location.reload();
        }, 30000);
    </script>
</body>
</html>
Path: home/awneajlw/.trash