/home/awneajlw/.trash/home.php
<?php
/**
 * Home Page - Main Dashboard for OPTI SLIP
 * This page displays the main dashboard with shop information, action buttons, and navigation
 * Users can access various features like New Order, Pending Orders, Search Records, etc.
 */

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

/**
 * Shop Data Configuration
 * Store information displayed on the home page
 * This data can be fetched from database in future
 */
$shop_data = [
    'shop_name' => 'AINAK STORE',                    // Shop name
    'address' => '95176 Gloria Ranch, Pollichworth', // Shop address
    'whatsapp' => '+923325122739',                   // WhatsApp contact
    'facebook' => 'f ainakstore',                    // Facebook handle
    'instagram' => 'ainakstore',                     // Instagram handle
    'website' => 'ainakstore.com'                    // Website URL
];

// If user is logged in, get their shop data
if (isLoggedIn()) {
    $database = new Database();
    $db = $database->getConnection();
    
    $user_id = $_SESSION['user_id'];
    $query = "SELECT s.*, u.name as owner_name, u.email 
              FROM shops s 
              JOIN users u ON s.user_id = u.id 
              WHERE s.user_id = ?";
    $stmt = $db->prepare($query);
    $stmt->execute([$user_id]);
    $user_shop = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($user_shop) {
        $shop_data = [
            'shop_name' => $user_shop['shop_name'] ?: 'My Shop',
            'address' => $user_shop['shop_address'] ?: 'Address not provided',
            'whatsapp' => $user_shop['shop_phone'] ?: '+923325122739',
            'facebook' => 'f ' . strtolower(str_replace(' ', '', $user_shop['shop_name'])),
            'instagram' => strtolower(str_replace(' ', '', $user_shop['shop_name'])),
            'website' => $user_shop['shop_email'] ?: strtolower(str_replace(' ', '', $user_shop['shop_name'])) . '.com'
        ];
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - 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">
    <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: 0;
            margin: 0;
        }
        
        .container {
            max-width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .main-content {
            background: white;
            border-radius: 0;
            padding: 30px;
            box-shadow: none;
            min-height: 100vh;
            max-width: 100%;
            margin: 0;
        }
        
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .mobile-menu-toggle {
            display: none;
            background: #10b981;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
        }
        
        .mobile-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 80%;
            max-width: 300px;
            height: 100vh;
            background: white;
            z-index: 1000;
            transition: left 0.3s ease;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .mobile-menu.active {
            left: 0;
        }
        
        .mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }
        
        .mobile-menu-overlay.active {
            display: block;
        }
        
        .mobile-menu-header {
            padding: 20px;
            background: #10b981;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .mobile-menu-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        
        .mobile-menu-content {
            padding: 20px;
        }
        
        .mobile-nav-link {
            display: block;
            padding: 15px 0;
            color: #374151;
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .mobile-nav-link.active {
            color: #10b981;
            font-weight: bold;
        }
        
        .mobile-search-section {
            padding: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .nav-title {
            color: #1e40af;
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .nav-link {
            color: #6b7280;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .nav-link.active {
            background: #10b981;
            color: white;
        }
        
        .nav-link:hover {
            color: #10b981;
        }
        
        .logout-btn {
            background: rgba(239, 68, 68, 0.8) !important;
            color: white !important;
        }
        
        .logout-btn:hover {
            background: rgba(220, 38, 38, 0.9) !important;
            color: white !important;
        }
        
        .logo-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo {
            width: 50px;
            height: 50px;
            background: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-icon {
            font-size: 24px;
            color: white;
        }
        
        .logo-text {
            color: #1f2937;
            font-size: 18px;
            font-weight: bold;
        }
        
        .search-section {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .search-form {
            display: contents;
        }
        
        .search-bar {
            position: relative;
        }
        
        .search-input {
            padding: 12px 20px 12px 45px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 16px;
            width: 100%;
            min-width: 250px;
            max-width: 300px;
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
        }
        
        .calculator-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .calculator-btn:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .store-info-panel {
            background: white;
            border: 3px solid #10b981;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .store-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .store-logo {
            width: 60px;
            height: 60px;
            background: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .store-logo-icon {
            font-size: 30px;
            color: white;
        }
        
        .store-details h2 {
            color: #1f2937;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .store-address {
            color: #6b7280;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .contact-info {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #374151;
            font-size: 14px;
        }
        
        .contact-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            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: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            width: 100%;
            max-width: 100%;
        }
        
        .action-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 20px;
            border-radius: 15px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .action-btn:hover {
            background: #059669;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
        }
        
        @media (max-width: 1024px) {
            .container {
                max-width: 100%;
            }
            
            .top-nav {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
            
            .nav-menu {
                justify-content: center;
                gap: 15px;
            }
            
            .search-section {
                justify-content: center;
                width: 100%;
            }
            
            .search-input {
                max-width: 100%;
            }
            
            .action-buttons {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 15px;
                margin: 0;
            }
            
            .mobile-menu-toggle {
                display: block;
                order: 2;
            }
            
            .nav-menu {
                display: none;
            }
            
            .search-section {
                display: none;
            }
            
            .logo-section {
                order: 3;
            }
            
            .top-nav {
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
                gap: 10px;
            }
            
            .store-header {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            
            .contact-info {
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }
            
            .contact-item {
                justify-content: center;
            }
            
            .action-buttons {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .main-content {
                padding: 10px;
                margin: 0;
            }
            
            .nav-title {
                font-size: 20px;
            }
            
            .logo-text {
                font-size: 16px;
            }
            
            .nav-link {
                padding: 10px 15px;
                font-size: 14px;
                max-width: 200px;
            }
            
            .search-input {
                padding: 10px 15px 10px 40px;
                font-size: 14px;
            }
            
            .calculator-btn {
                padding: 10px 15px;
                font-size: 14px;
            }
            
            .store-info-panel {
                padding: 20px;
            }
            
            .store-details h2 {
                font-size: 18px;
            }
            
            .store-address {
                font-size: 12px;
            }
            
            .contact-info {
                gap: 10px;
            }
            
            .contact-item {
                font-size: 12px;
                padding: 8px 0;
            }
            
            .action-buttons {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            
            .action-btn {
                padding: 15px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 320px) {
            .main-content {
                padding: 8px;
                margin: 0;
            }
            
            .nav-title {
                font-size: 18px;
            }
            
            .logo-text {
                font-size: 14px;
            }
            
            .logo {
                width: 40px;
                height: 40px;
            }
            
            .logo-icon {
                font-size: 18px;
            }
            
            .nav-link {
                padding: 8px 12px;
                font-size: 12px;
                max-width: 150px;
            }
            
            .search-input {
                padding: 8px 12px 8px 35px;
                font-size: 12px;
            }
            
            .calculator-btn {
                padding: 8px 12px;
                font-size: 12px;
            }
            
            .store-info-panel {
                padding: 15px;
            }
            
            .store-details h2 {
                font-size: 16px;
            }
            
            .store-address {
                font-size: 11px;
            }
            
            .contact-item {
                font-size: 11px;
            }
            
            .action-btn {
                padding: 12px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-content">
            <!-- Top Navigation -->
            <div class="top-nav">
                <!-- <h1 class="nav-title">Home</h1>a -->
                
                <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
                
                <div class="nav-menu">
                    <a href="home.php" class="nav-link active">Home</a>
                    <a href="my-shop.php" class="nav-link">My Shop</a>
                    <a href="terms-conditions.php" class="nav-link">Terms & Conditions</a>
                    <a href="#" class="nav-link">Promotion</a>
                    <a href="#" class="nav-link">Notification</a>
                    <a href="#" class="nav-link logout-btn" onclick="logout()">Logout</a>
                </div>
                
                <div class="logo-section">
                    <div class="logo">
                        <i class="fas fa-glasses logo-icon"></i>
                    </div>
                    <div class="logo-text">OPTI SLIP</div>
                </div>
                
                <div class="search-section">
                    <form method="GET" action="search-results.php" class="search-form">
                        <div class="search-bar">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" name="q" class="search-input" placeholder="Q Search Here...." required>
                        </div>
                    </form>
                    <button class="calculator-btn">Calculator</button>
                </div>
            </div>
            
            <!-- Mobile Menu -->
            <div class="mobile-menu-overlay" id="mobileMenuOverlay" onclick="closeMobileMenu()"></div>
            <div class="mobile-menu" id="mobileMenu">
                <div class="mobile-menu-header">
                    <div class="logo-section">
                        <div class="logo">
                            <i class="fas fa-glasses logo-icon"></i>
                        </div>
                        <div class="logo-text">OPTI SLIP</div>
                    </div>
                    <button class="mobile-menu-close" onclick="closeMobileMenu()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="mobile-menu-content">
                    <a href="home.php" class="mobile-nav-link active">Home</a>
                    <a href="my-shop.php" class="mobile-nav-link">My Shop</a>
                    <a href="terms-conditions.php" class="mobile-nav-link">Terms & Conditions</a>
                    <a href="#" class="mobile-nav-link">Promotion</a>
                    <a href="#" class="mobile-nav-link">Notification</a>
                    <a href="#" class="mobile-nav-link logout-btn" onclick="logout(); closeMobileMenu();">Logout</a>
                </div>
                
                <div class="mobile-search-section">
                    <form method="GET" action="search-results.php" class="search-form">
                        <div class="search-bar">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" name="q" class="search-input" placeholder="Q Search Here...." required>
                        </div>
                    </form>
                    <button class="calculator-btn" onclick="window.location.href='calculator.php'; closeMobileMenu();" style="margin-top: 15px; width: 100%;">Calculator</button>
                </div>
            </div>
            
            <!-- Store Information Panel -->
            <div class="store-info-panel">
                <div class="store-header">
                    <div class="store-logo">
                        <i class="fas fa-glasses store-logo-icon"></i>
                    </div>
                    <div class="store-details">
                        <h2>Name : <?php echo htmlspecialchars($shop_data['shop_name']); ?></h2>
                        <div class="store-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Address: <?php echo htmlspecialchars($shop_data['address']); ?></span>
                        </div>
                    </div>
                </div>
                
                <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['whatsapp']); ?></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['facebook']); ?></span>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon instagram">
                            <i class="fab fa-instagram"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['instagram']); ?></span>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon website">
                            <i class="fas fa-globe"></i>
                        </div>
                        <span><?php echo htmlspecialchars($shop_data['website']); ?></span>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="action-buttons">
                <button class="action-btn" onclick="handleAction('New Order')">
                    New Order
                </button>
                <button class="action-btn" onclick="handleAction('Pending Order')">
                    Pending Order
                </button>
                <button class="action-btn" onclick="handleAction('Complete Order')">
                    Complete Order
                </button>
                <button class="action-btn" onclick="handleAction('Search Record')">
                    Search Record
                </button>
                <button class="action-btn" onclick="handleAction('Sale Record')">
                    Sale Record
                </button>
                <button class="action-btn" onclick="handleAction('Add Record')">
                    Add Record
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            const overlay = document.getElementById('mobileMenuOverlay');
            
            mobileMenu.classList.toggle('active');
            overlay.classList.toggle('active');
            
            // Prevent body scroll when menu is open
            if (mobileMenu.classList.contains('active')) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = 'auto';
            }
        }
        
        function closeMobileMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            const overlay = document.getElementById('mobileMenuOverlay');
            
            mobileMenu.classList.remove('active');
            overlay.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        
        /**
         * Handle Action Button Clicks
         * Redirects user to appropriate pages based on button clicked
         * @param {string} action - The action button that was clicked
         */
        function handleAction(action) {
            console.log('Action clicked:', action);
            
            // Route to appropriate page based on action
            switch(action) {
                case 'New Order':
                    // Redirect to new order creation page
                    window.location.href = 'new-order.php';
                    break;
                case 'Pending Order':
                    // Redirect to pending orders list page
                    window.location.href = 'pending-orders.php';
                    break;
                case 'Complete Order':
                    // Redirect to completed orders list page
                    window.location.href = 'completed-orders.php';
                    break;
                case 'Search Record':
                    // Redirect to search results page
                    window.location.href = 'search-results.php';
                    break;
                case 'Sale Record':
                    // Redirect to sales dashboard page
                    window.location.href = 'sale-record.php';
                    break;
                case 'Add Record':
                    // Redirect to add new record page
                    window.location.href = 'add-record.php';
                    break;
            }
        }
        
        // Search functionality
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = this.value;
                if (searchTerm.trim()) {
                    alert('Searching for: ' + searchTerm);
                }
            }
        });
        
        // Calculator button
        document.querySelector('.calculator-btn').addEventListener('click', function() {
            window.location.href = 'calculator.php';
        });
        
        // Navigation links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                // Only prevent default for # links
                if (this.getAttribute('href') === '#') {
                    e.preventDefault();
                    alert('This feature will be implemented soon!');
                    return;
                }
                
                // For actual links, let them navigate normally
                // Remove active class from all links
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                
                // Add active class to clicked link
                this.classList.add('active');
                
                // Handle navigation
                const page = this.textContent.trim();
                console.log('Navigating to:', page);
            });
        });
        
        // Mobile navigation links
        document.querySelectorAll('.mobile-nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                // Only prevent default for # links
                if (this.getAttribute('href') === '#') {
                    e.preventDefault();
                    alert('This feature will be implemented soon!');
                    closeMobileMenu();
                    return;
                }
                
                // For actual links, let them navigate normally
                // Close mobile menu after navigation
                closeMobileMenu();
            });
        });
        
        // Logout function
        function logout() {
            if (confirm('Are you sure you want to logout?')) {
                // Create a form and submit it to logout
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = 'logout.php';
                document.body.appendChild(form);
                form.submit();
            }
        }
        
        // Auto logout after 30 minutes of inactivity
        let inactivityTimer;
        
        function resetInactivityTimer() {
            clearTimeout(inactivityTimer);
            inactivityTimer = setTimeout(function() {
                if (confirm('You have been inactive for 30 minutes. Do you want to continue your session?')) {
                    resetInactivityTimer();
                } else {
                    logout();
                }
            }, 30 * 60 * 1000); // 30 minutes
        }
        
        // Reset timer on user activity
        document.addEventListener('mousemove', resetInactivityTimer);
        document.addEventListener('keypress', resetInactivityTimer);
        document.addEventListener('click', resetInactivityTimer);
        
        // Start the timer when page loads
        document.addEventListener('DOMContentLoaded', function() {
            resetInactivityTimer();
            
            // Handle search form submission
            const searchForms = document.querySelectorAll('.search-form');
            searchForms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    const searchInput = this.querySelector('.search-input');
                    if (!searchInput.value.trim()) {
                        e.preventDefault();
                        alert('Please enter a search term');
                        searchInput.focus();
                    }
                });
            });
            
            // Auto-submit search on Enter key
            const searchInputs = document.querySelectorAll('.search-input');
            searchInputs.forEach(input => {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        const form = this.closest('form');
                        if (form && this.value.trim()) {
                            form.submit();
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
Path: home/awneajlw/.trash