/home/awneajlw/.trash/order-slip.php
<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
require_once 'config/database.php';
require_once 'includes/auth.php';

// Check if user is logged in
if (!isLoggedIn()) {
    header('Location: welcome.php');
    exit();
}

// Handle status update
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();
        }
    }
}

// Get order ID from URL
$order_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

// Get order details
$order_data = null;
$shop_data = null;

if ($order_id > 0) {
    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);
        
        $user_id = $_SESSION['user_id'];
        
        // Get order details
        $order_query = "SELECT * FROM orders WHERE id = ? AND user_id = ?";
        $order_stmt = $db->prepare($order_query);
        $order_stmt->execute([$order_id, $user_id]);
        $order_data = $order_stmt->fetch(PDO::FETCH_ASSOC);
        
        // Get shop details
        $shop_query = "SELECT s.*, u.name as owner_name FROM shops s 
                       JOIN users u ON s.user_id = u.id 
                       WHERE s.user_id = ?";
        $shop_stmt = $db->prepare($shop_query);
        $shop_stmt->execute([$user_id]);
        $shop_data = $shop_stmt->fetch(PDO::FETCH_ASSOC);
        
    } catch (Exception $e) {
        $error_message = 'Error loading order details.';
    }
}

// If no order data, show placeholder data
if (!$order_data) {
    $order_data = [
        'tracking_id' => 'T1001',
        'description' => '#Loremipsum',
        'patient_name' => 'Lorem ipsum',
        'booking_date' => date('d/m/Y'),
        'delivery_date' => date('d/m/Y'),
        'total_amount' => '100',
        'advance' => '50',
        'balance' => '50'
    ];
}

if (!$shop_data) {
    $shop_data = [
        'shop_name' => 'ABDCG',
        'shop_address' => '95176 Gloria Ranch',
        'shop_whatsapp' => '+91232322739',
        'shop_facebook' => '@webstore',
        'shop_instagram' => '@webstore',
        'shop_website' => 'webstore.com'
    ];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Slip - 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;
        }
        
        .slip-container {
            max-width: 500px;
            margin: 0 auto;
        }
        
        .slip-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .back-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            background: #059669;
            transform: translateY(-1px);
        }
        
        .slip-title {
            color: white;
            font-size: 24px;
            font-weight: 600;
        }
        
        .slip-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .opti-logo-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .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;
        }
        
        .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: #1e40af;
            font-size: 24px;
            font-weight: bold;
        }
        
        .patient-slip-section {
            margin-bottom: 25px;
            position: relative;
        }
        
        .patient-slip-title {
            color: #10b981;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .slip-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .detail-label {
            color: #374151;
            font-weight: 600;
            font-size: 14px;
        }
        
        .detail-value {
            color: #1f2937;
            font-weight: 500;
            font-size: 14px;
        }
        
        .financial-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #e5e7eb;
        }
        
        .shop-info-section {
            background: #10b981;
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin-top: 20px;
        }
        
        .shop-info-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .shop-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .contact-info {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
        }
        
        .contact-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            color: white;
        }
        
        .whatsapp { background: #25d366; }
        .facebook { background: #1877f2; }
        .instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .website { background: #6366f1; }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }
        
        .complete-section {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .complete-btn {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 auto;
        }
        
        .complete-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
        }
        
        .completed-badge {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: white;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .action-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        
        .action-btn:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
        }
        
        /* Watermark effect */
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.1;
            z-index: 1;
            pointer-events: none;
        }
        
        .watermark-logo {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        
        .watermark-logo .opti-logo {
            width: 60px;
            height: 60px;
        }
        
        .watermark-title {
            color: #10b981;
            font-size: 32px;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .slip-container {
                max-width: 100%;
                padding: 0 10px;
            }
            
            .slip-card {
                padding: 20px;
                border-radius: 15px;
            }
            
            .slip-title {
                font-size: 20px;
            }
            
            .opti-title {
                font-size: 20px;
            }
            
            .opti-logo {
                width: 40px;
                height: 40px;
            }
            
            .glasses-icon {
                font-size: 16px;
            }
            
            .action-buttons {
                flex-direction: column;
                gap: 10px;
            }
            
            .action-btn {
                width: 100%;
                justify-content: center;
            }
            
            .contact-info {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .slip-card {
                padding: 15px;
            }
            
            .slip-title {
                font-size: 18px;
            }
            
            .patient-slip-title {
                font-size: 18px;
            }
            
            .detail-label,
            .detail-value {
                font-size: 13px;
            }
            
            .action-btn {
                padding: 12px 20px;
                font-size: 13px;
            }
        }
        
        /* Print styles */
        @media print {
            body {
                background: white;
                padding: 0;
            }
            
            .slip-header,
            .action-buttons {
                display: none;
            }
            
            .slip-card {
                box-shadow: none;
                border: 1px solid #ddd;
                margin: 0;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="slip-container">
        <?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; ?>
        
        <!-- Slip Header -->
        <div class="slip-header">
            <button class="back-btn" onclick="goBack()">
                <i class="fas fa-arrow-left"></i>
                Back
            </button>
            <h1 class="slip-title">Slip</h1>
        </div>
        
        <!-- Slip Card -->
        <div class="slip-card">
            <!-- Watermark -->
            <div class="watermark">
                <div class="watermark-logo">
                    <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 class="watermark-title">OPTI SLIP</div>
                </div>
            </div>
            
            <!-- OPTI SLIP Logo -->
            <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>
            
            <!-- Patient Slip Details -->
            <div class="patient-slip-section">
                <h3 class="patient-slip-title">Patient Slip</h3>
                
                <div class="slip-details">
                    <div class="detail-row">
                        <span class="detail-label">Tracking Id :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['tracking_id'] ?? 'T1001'); ?></span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Description :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['description'] ?? '#Loremipsum'); ?></span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Patient Name :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['patient_name'] ?? 'Lorem ipsum'); ?></span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Booking Date :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['booking_date'] ?? date('d/m/Y')); ?></span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Delivery Date :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['delivery_date'] ?? date('d/m/Y')); ?></span>
                    </div>
                </div>
                
                <!-- Financial Information -->
                <div class="financial-section">
                    <div class="detail-row">
                        <span class="detail-label">Total Amount :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['total_amount'] ?? '100'); ?>$</span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Advance Payment :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['advance'] ?? '50'); ?>$</span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Balance Payment :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($order_data['balance'] ?? '50'); ?>$</span>
                    </div>
                </div>
            </div>
            
            <!-- Shop Information -->
            <div class="shop-info-section">
                <div class="shop-info-title">Shop Information</div>
                
                <div class="shop-details">
                    <div class="detail-row">
                        <span class="detail-label">Shop Name :</span>
                        <span class="detail-value"><?php echo htmlspecialchars($shop_data['shop_name'] ?? 'ABDCG'); ?></span>
                    </div>
                    
                    <div class="detail-row">
                        <span class="detail-label">Address:</span>
                        <span class="detail-value"><?php echo htmlspecialchars($shop_data['shop_address'] ?? '95176 Gloria Ranch'); ?></span>
                    </div>
                </div>
                
                <!-- Contact Information -->
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon whatsapp">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['shop_whatsapp'] ?? '+91232322739'); ?></span>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon facebook">
                            <i class="fab fa-facebook-f"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['shop_facebook'] ?? '@webstore'); ?></span>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon instagram">
                            <i class="fab fa-instagram"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['shop_instagram'] ?? '@webstore'); ?></span>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon website">
                            <i class="fas fa-globe"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['shop_website'] ?? 'webstore.com'); ?></span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="action-buttons">
            <button class="action-btn" onclick="downloadSlip()">
                <i class="fas fa-download"></i>
                Download
            </button>
            <button class="action-btn" onclick="printSlip()">
                <i class="fas fa-print"></i>
                Print
            </button>
            <button class="action-btn" onclick="shareSlip()">
                <i class="fas fa-share"></i>
                Share
            </button>
        </div>
        
        <!-- Mark As Complete Button -->
        <?php if ($order_data && $order_data['status'] === 'Pending'): ?>
        <div class="complete-section">
            <form method="POST" style="display: inline;">
                <input type="hidden" name="action" value="mark_complete">
                <input type="hidden" name="order_id" value="<?php echo $order_data['id']; ?>">
                <button type="submit" class="complete-btn" onclick="return confirm('Are you sure you want to mark this order as complete?')">
                    <i class="fas fa-check-circle"></i>
                    Mark As Complete
                </button>
            </form>
        </div>
        <?php elseif ($order_data && $order_data['status'] === 'Completed'): ?>
        <div class="complete-section">
            <div class="completed-badge">
                <i class="fas fa-check-circle"></i>
                Order Completed
            </div>
        </div>
        <?php endif; ?>
    </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 downloadSlip() {
            // Create a PDF or download the slip as an image
            const slipCard = document.querySelector('.slip-card');
            const slipContainer = document.querySelector('.slip-container');
            
            // Hide header and buttons for download
            const header = document.querySelector('.slip-header');
            const buttons = document.querySelector('.action-buttons');
            
            header.style.display = 'none';
            buttons.style.display = 'none';
            
            // Use html2canvas to convert to image
            html2canvas(slipContainer, {
                backgroundColor: null,
                scale: 2,
                useCORS: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = 'opti-slip-' + Date.now() + '.png';
                link.href = canvas.toDataURL();
                link.click();
                
                // Restore header and buttons
                header.style.display = 'flex';
                buttons.style.display = 'flex';
            }).catch(error => {
                console.error('Download failed:', error);
                alert('Download failed. Please try again.');
                
                // Restore header and buttons
                header.style.display = 'flex';
                buttons.style.display = 'flex';
            });
        }
        
        function printSlip() {
            window.print();
        }
        
        function shareSlip() {
            if (navigator.share) {
                navigator.share({
                    title: 'Opti Slip - Patient Order',
                    text: 'Patient order slip from OPTI SLIP',
                    url: window.location.href
                });
            } else {
                // Fallback for browsers that don't support Web Share API
                const url = window.location.href;
                navigator.clipboard.writeText(url).then(() => {
                    alert('Link copied to clipboard!');
                }).catch(() => {
                    alert('Unable to copy link. Please copy manually: ' + url);
                });
            }
        }
        
        // Auto-focus for better UX
        document.addEventListener('DOMContentLoaded', function() {
            // Add any initialization code here
        });
    </script>
    
    <!-- Include html2canvas for download functionality -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</body>
</html>
Path: home/awneajlw/.trash