/home/awneajlw/public_html/codestechvista.com/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' => 'testnewnew',
    'address' => 'Address not provided',
    'whatsapp' => '+923325122739',
    'facebook' => 'testnewnew',
    'instagram' => 'testnewnew',
    'website' => 'testnewnew.com',
    'shop_logo' => ''
];

// Check if user is sub user and get access permissions
$is_sub_user = false;
$can_access_sales = true;

// If user is logged in, get their shop data
if (isLoggedIn()) {
    try {
        // Use singleton pattern to prevent multiple connections
        $database = Database::getInstance();
        $db = $database->getConnection();
        
        // Check if connection is valid
        if (!$db) {
            throw new Exception("Database connection failed");
        }
        
        // Check user type and permissions
        $current_user_id = $_SESSION['user_id'] ?? null;
        if ($current_user_id) {
            $check_user_query = "SELECT user_type, parent_user_id, can_access_sales FROM users WHERE id = ?";
            $check_user_stmt = $db->prepare($check_user_query);
            $check_user_stmt->execute([$current_user_id]);
            $user_info = $check_user_stmt->fetch(PDO::FETCH_ASSOC);
            
            if ($user_info) {
                $is_sub_user = ($user_info['user_type'] === 'sub');
                $can_access_sales = ($user_info['can_access_sales'] == 1);
            }
        }
        
        // Get user email from session or fetch from database using user_id
        $user_email = $_SESSION['user_email'] ?? null;
        $user_id = $_SESSION['user_id'] ?? null;
        
        if (!$user_email && $user_id) {
            // Fetch user email from database if not in session
            $user_query = "SELECT email FROM users WHERE id = ?";
            $user_stmt = $db->prepare($user_query);
            $user_stmt->execute([$user_id]);
            $user_data = $user_stmt->fetch(PDO::FETCH_ASSOC);
            
            if ($user_data) {
                $user_email = $user_data['email'];
                $_SESSION['user_email'] = $user_email; // Update session
            }
        }
        
        if ($user_email || $user_id) {
            // Get the correct user ID for shop lookup
            $shop_owner_id = $user_id;
            
            // If current user is a sub user, get the main user's shop
            if ($is_sub_user && $user_info && isset($user_info['parent_user_id'])) {
                $shop_owner_id = $user_info['parent_user_id'];
                error_log("Sub user detected. Using main user ID: " . $shop_owner_id . " for shop details");
            }
            
            // Get shop details using the correct owner 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([$shop_owner_id]);
            $user_shop = $stmt->fetch(PDO::FETCH_ASSOC);
            
            // Debug log
            error_log("Shop lookup for user ID: " . $shop_owner_id . ". Shop found: " . ($user_shop ? 'Yes' : 'No'));
        } else {
            $user_shop = null;
        }
    
    if ($user_shop) {
        $shop_data = [
                'shop_name' => $user_shop['shop_name'] ?: 'Opti Slip',
            'address' => $user_shop['shop_address'] ?: 'Address not provided',
                'whatsapp' => $user_shop['shop_whatsapp'] ?: '+1 218-310-3335',
                'facebook' => $user_shop['shop_facebook'] ?: '@optislip',
                'instagram' => $user_shop['shop_instagram'] ?: '@opti.slip',
                'website' => $user_shop['shop_website'] ?: 'optislip.com',
                'shop_logo' => $user_shop['shop_logo'] ?: ''
            ];
        }
    } catch (Exception $e) {
        error_log("Error fetching shop data: " . $e->getMessage());
    }
}
?>
<!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', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
        }
        
        .container {
            max-width: 100%;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        /* Top Navigation */
        .top-nav {
            background: #ffffff;
            padding: 25px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-bottom: 1px solid #e9ecef;
            position: relative;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1600px;
            padding: 0 30px;
        }
        
        .nav-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .nav-item {
            color: #169D53;
            text-decoration: none;
            font-weight: 500;
            font-size: 19px;
            padding: 6px 10px;
            border-radius: 6px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .nav-item.active {
            background: #169D53;
            color: white;
        }
        
        .nav-item:hover {
            background: #169D53;
            color: white;
        }
        
        .logout-btn {
            background: #dc3545;
            color: white !important;
            padding: 6px 12px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            font-size: 19px;
            transition: all 0.3s ease;
        }
        
        .logout-btn:hover {
            background: #c82333;
            color: white !important;
        }
        
        .nav-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .opti-logo {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #169D53;
            font-weight: 700;
            font-size: 19px;
        }
        
        .opti-logo-icon {
            width: 30px;
            height: 30px;
            background: white;
            border: 2px solid #169D53;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #169D53;
            font-size: 14px;
        }
        
        .search-calculator {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Mobile Menu Styles */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: #169D53;
            cursor: pointer;
            padding: 8px;
        }
        
        .mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        
        .mobile-menu {
            display: none;
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100%;
            background: white;
            z-index: 1001;
            transition: left 0.3s ease;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        
        .mobile-menu.active {
            left: 0;
        }
        
        .mobile-menu-overlay.active {
            display: block;
        }
        
        .mobile-menu-header {
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .mobile-menu-close {
            background: none;
            border: none;
            font-size: 20px;
            color: #666;
            cursor: pointer;
        }
        
        .mobile-menu-content {
            padding: 20px 0;
        }
        
        .mobile-nav-link {
            display: block;
            padding: 15px 20px;
            color: #169D53;
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }
        
        .mobile-nav-link:hover {
            background: #f8f9fa;
            color: #128a43;
        }
        
        .mobile-nav-link.active {
            background: #169D53;
            color: white;
        }
        
        .mobile-search-section {
            padding: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .mobile-search-section .search-box {
            margin-bottom: 15px;
        }
        
        .mobile-search-section .search-input {
            width: 100%;
        }
        
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .search-input {
            border: 1px solid #169D53;
            border-radius: 20px;
            padding: 6px 12px 6px 30px;
            font-size: 19px;
            width: 200px;
            outline: none;
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #169D53;
            font-size: 12px;
            z-index: 10;
        }
        
        .calculator-btn {
            background: #169D53;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 19px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .calculator-btn:hover {
            background: #128a43;
        }
        
        /* Main Content */
        .main-content {
            padding: 25px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Shop Info Card */
        .shop-info-card {
            background: white;
            border: none;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            position: relative;
        }
        
        .shop-info-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 15px;
            padding: 4px;
            background: linear-gradient(45deg, #169D53, #22c55e);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: exclude;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            
        }
        
        .shop-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .shop-logo {
            width: 120px;
            height: 120px;
            background: #169D53;
            border: 2px solid #169D53;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #169D53;
            font-size: 24px;
            overflow: hidden;
            padding: 10px;
            flex-shrink: 0; /* prevent shrinking */
        }
        
        .shop-logo img {
            width: 100px !important;
            height: 100px !important;
            object-fit: contain !important;
            filter: none !important;
            max-width: 100%;
            max-height: 100%;
        }
        
        .shop-details h2 {
            color: #333;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .shop-address {
            color: #666;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .shop-address i {
            color: #169D53;
        }
        
        .contact-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 8px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            transition: all 0.3s ease;
            min-height: 50px;
        }
        
        .contact-item:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .contact-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .contact-icon.whatsapp { background: #25D366; }
        .contact-icon.facebook { background: #1877f2; }
        .contact-icon.instagram { background: #E4405F; }
        .contact-icon.website { background: #6c757d; }
        
        .contact-text {
            font-size: 14px;
            color: #333;
            font-weight: 600;
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            flex: 1;
            line-height: 1.4;
        }
        
        /* Action Buttons Grid */
        .action-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 25px;
        }
        
        .action-btn {
            background: #169D53;
            color: white;
            border: none;
            padding: 25px 20px;
            border-radius: 10px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            min-height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .action-btn:hover {
            background: #128a43;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .action-btn:active {
            transform: translateY(0);
        }
        
        /* Mobile Responsive */
        @media (max-width: 1200px) {
            .nav-container {
                max-width: 100%;
                padding: 0 15px;
            }
            
            .main-content {
                max-width: 100%;
                padding: 25px 15px;
            }
        }
        
        @media (max-width: 1024px) {
            .search-input {
                width: 180px;
            }
            
            .action-buttons {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .nav-left {
                display: none;
            }
            
            .nav-center {
                flex: 1;
                position: static;
                transform: none;
                justify-content: center;
            }
            
            .nav-right {
                gap: 8px;
            }
            
            .search-calculator {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .mobile-menu {
                display: block;
            }
            
            .main-content {
                padding: 20px 15px;
            }
            
            .shop-info-card {
                padding: 12px 15px;
                margin-bottom: 20px;
            }
            
            .shop-header {
                gap: 12px;
                /*margin-bottom: 15px;*/
            }
            
            .shop-logo {
                width: 60px;
                height: 60px;
                font-size: 18px;
                padding: 8px;
                border-radius: 50%; /* ensure perfect circle */
                overflow: hidden;   /* cut extra edges */
                flex-shrink: 0;    /* prevent shrinking */
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .shop-logo img {
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;  /* maintain aspect ratio */
                max-width: 100%;
                max-height: 100%;
            }
            
            .shop-details h2 {
                font-size: 18px;
            }
            
            .shop-address {
                font-size: 13px;
            }
            
            .contact-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                margin-top: 15px;
            }
            
            .contact-item {
                gap: 10px;
                padding: 10px 6px;
                min-height: 45px;
            }
            
            .contact-icon {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
            
            .contact-text {
                font-size: 13px;
                font-weight: 600;
            }
        }
        
        @media (max-width: 480px) {
            .shop-header {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            
            .shop-logo {
                width: 80px;
                height: 80px;
                margin: 0 auto;
            }
            
            .shop-details {
                text-align: center;
            }
            
            .shop-details h2 {
                font-size: 16px;
                margin-bottom: 5px;
            }
            
            .shop-address {
                font-size: 12px;
            }
            
            .contact-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            
            .contact-item {
                justify-content: center;
                padding: 8px 4px;
                min-height: 40px;
                flex-direction: column;
                text-align: center;
                gap: 6px;
            }
            
            .contact-icon {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
            
            .contact-text {
                font-size: 11px;
                font-weight: 600;
                text-align: center;
                line-height: 1.2;
            }
            
            .action-buttons {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px;
                margin-top: 20px;
                display: grid !important; 
            }
            
            .action-btn {
                padding: 16px 12px;
                font-size: 13px;
                min-height: 56px;
            }
        }
        
        @media (max-width: 480px) {
            .top-nav {
                padding: 3px 0;
            }
            
            .nav-container {
                padding: 0 10px;
            }
            
            .logout-btn {
                font-size: 13px;
                padding: 6px 10px;
            }
            
            .opti-logo {
                font-size: 16px;
            }
            
            .main-content {
                padding: 15px 10px;
            }
            
            .shop-info-card {
                padding: 15px;
                /*margin-bottom: 15px;*/
            }
            
            .shop-header {
                gap: 10px;
                /*margin-bottom: 12px;*/
            }
            
            .shop-logo {
                width: 70px;
                height: 70px;
                font-size: 16px;
                padding: 6px;
            }
            
            .shop-logo img {
                width: 58px !important;
                height: 58px !important;
            }
            
            .shop-details h2 {
                font-size: 16px;
            }
            
            .shop-address {
                font-size: 12px;
            }
            
            .contact-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                margin-top: 12px;
                
            }
            
            .contact-item {
                gap: 6px;
                padding: 4px 0;
                overflow: hidden;
            }
            
            .contact-icon {
                width: 22px;
                height: 22px;
                font-size: 10px;
            }
            
            .contact-text {
                font-size: 10px;
                word-break: break-all;
                line-height: 1.3;
            }
            
            .action-buttons {
                grid-template-columns: 1fr;
                gap: 12px;
                margin-top: 15px;
            }
            
            .action-btn {
                padding: 14px;
                font-size: 13px;
                min-height: 45px;
            }
        }
        
        @media (max-width: 320px) {
            .search-input {
                width: 160px;
            }
            
            .nav-item {
                font-size: 12px;
                padding: 5px 8px;
            }
            
            .contact-text {
                font-size: 12px;
            }
            
            .action-btn {
                padding: 14px;
                font-size: 13px;
                min-height: 45px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
            <!-- Top Navigation -->
        <nav class="top-nav">
            <div class="nav-container">
                <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
                
                <div class="nav-left">
                    <a href="home.php" class="nav-item active">Home</a>
                    <a href="my-shop.php" class="nav-item">My Shop</a>
                    <a href="terms-conditions.php" class="nav-item">Terms & Conditions</a>
                    <!--<a href="#" class="nav-item">Promotion</a>-->
                    <a href="privacy-policy.php" class="nav-item">Privacy Policy</a>
                </div>
                
                <div class="nav-center">
                    <div class="opti-logo">
                        <img src="assets/images/Optislipimage.png" alt="Opti Slip Logo" style="width: 120px; height: 170px; object-fit: contain; filter: brightness(0) saturate(100%);" onerror="this.style.display='none'; this.parentElement.querySelector('.opti-logo-icon').style.display='flex';">
                        <div class="opti-logo-icon" style="display: none;">
                            <i class="fas fa-glasses"></i>
                        </div>
                        <!-- <span>OPTI SLIP</span> -->
                    </div>
                </div>
                
                <div class="nav-right">
                    <a href="logout.php" class="logout-btn" onclick="logout(event)">Logout</a>
                    <div class="search-calculator">
                        <div class="search-box">
                            <form method="GET" action="search-record.php" style="display: flex;">
                        <i class="fas fa-search search-icon"></i>
                                <input type="text" name="q" class="search-input" placeholder="Search Record...." required>
                            </form>
                        </div>
                        <button class="calculator-btn" onclick="window.location.href='calculator.php'">Calculator</button>
                    </div>
                </div>
            </div>
            
            <!-- Mobile Menu Overlay -->
            <div class="mobile-menu-overlay" id="mobileMenuOverlay" onclick="closeMobileMenu()"></div>
            
            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <div class="mobile-menu-header">
                    <div class="opti-logo">
                        <img src="assets/images/Optislipimage.png" alt="Opti Slip Logo" style="width: 120px; height: 80px; object-fit: contain; filter: brightness(0) saturate(100%);" onerror="this.style.display='none'; this.parentElement.querySelector('.opti-logo-icon').style.display='flex';">
                        <div class="opti-logo-icon" style="display: none;">
                            <i class="fas fa-glasses"></i>
                        </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="privacy-policy.php" class="mobile-nav-link">Privacy Policy</a>
                </div>
                
                <div class="mobile-search-section">
                    <div class="search-box">
                        <form method="GET" action="search-record.php" style="display: flex; position: relative;">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" name="q" class="search-input" placeholder="Q Search Here...." required>
                        </form>
                    </div>
                    <button class="calculator-btn" onclick="window.location.href='calculator.php'; closeMobileMenu();" style="width: 100%;">Calculator</button>
                    <a href="logout.php" class="mobile-nav-link logout-btn" onclick="logout(event); closeMobileMenu();" style="margin-top: 15px; background: #dc3545; color: white; text-align: center; border-radius: 8px;">Logout</a>
                </div>
            </div>
        </nav>
        
        <!-- Main Content -->
        <div class="main-content">
            <!-- Access Denied Message -->
            <?php if (isset($_SESSION['access_denied_message'])): ?>
                <div class="alert alert-danger" style="background: #fee2e2; color: #991b1b; border: 1px solid #dc2626; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 500;">
                    <i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>
                    <?php echo htmlspecialchars($_SESSION['access_denied_message']); ?>
                </div>
                <?php unset($_SESSION['access_denied_message']); ?>
            <?php endif; ?>
            
            <!-- Shop Information Card -->
            <div class="shop-info-card">
                <div class="shop-header">
                    <div class="shop-logo">
                        <?php 
                        $logo_src = 'assets/images/OptiSlip.png'; // Default logo
                        if (!empty($shop_data['shop_logo'])) {
                            $uploaded_logo = 'uploads/logos/' . $shop_data['shop_logo'];
                            if (file_exists($uploaded_logo)) {
                                $logo_src = $uploaded_logo;
                            }
                        }
                        ?>
                        <img src="<?php echo htmlspecialchars($logo_src); ?>" alt="Shop Logo" onerror="this.style.display='none'; this.parentElement.innerHTML='<i class=\'fas fa-glasses\' style=\'color: #169D53; font-size: 24px;\'></i>'">
                    </div>
                    <div class="shop-details">
                        <h2><?php echo htmlspecialchars($shop_data['shop_name']); ?></h2>
                        <div class="shop-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Address: <?php echo htmlspecialchars($shop_data['address']); ?></span>
                        </div>
                    </div>
                </div>
                
                <div class="contact-row">
                    <!-- Row 1: WhatsApp and Facebook -->
                    <div class="contact-item">
                        <div class="contact-icon whatsapp">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <span class="contact-text"><?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 class="contact-text"><?php echo htmlspecialchars($shop_data['facebook']); ?></span>
                    </div>
                    
                    <!-- Row 2: Instagram and Website -->
                    <div class="contact-item">
                        <div class="contact-icon instagram">
                            <i class="fab fa-instagram"></i>
                        </div>
                        <span class="contact-text"><?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 class="contact-text"><?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>
                <?php if ($can_access_sales): ?>
                <button class="action-btn" onclick="handleAction('Sale Record')">
                    Sale Record
                </button>
                <?php endif; ?>
                <button class="action-btn" onclick="handleAction('Add Record')">
                    Add Record
                </button>
                <!-- <button class="action-btn" onclick="handleAction('Calculator')">
                    Calculator
                </button> -->
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        /**
         * Mobile Menu Functions
         */
        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
         * Routes to appropriate pages based on button clicked
         */
        function handleAction(action) {
            console.log('Action clicked:', action);
            
            switch(action) {
                case 'New Order':
                    window.location.href = 'new-order.php';
                    break;
                case 'Pending Order':
                    window.location.href = 'pending-orders.php';
                    break;
                case 'Complete Order':
                    window.location.href = 'completed-orders.php';
                    break;
                case 'Search Record':
                    window.location.href = 'search-record.php';
                    break;
                case 'Sale Record':
                    window.location.href = 'sale-record.php';
                    break;
                case 'Add Record':
                    window.location.href = 'add-record.php';
                    break;
                case 'Calculator':
                    window.location.href = 'calculator.php';
                    break;
                default:
                    alert('Feature coming soon!');
            }
        }
        
        /**
         * Logout Function
         * Logs out the user and redirects to signin page
         */
        function logout(event) {
            // Prevent default link behavior
            if (event) {
                event.preventDefault();
            }
            
            if (confirm('Are you sure you want to logout?')) {
                // Simple redirect to logout.php - let server handle the logout
                window.location.href = 'logout.php';
            }
        }
        
        /**
         * Search Form Enhancement
         * Handle search form submission
         */
        document.addEventListener('DOMContentLoaded', function() {
            const searchForm = document.querySelector('form');
            const searchInput = document.querySelector('.search-input');
            
            if (searchForm && searchInput) {
                searchForm.addEventListener('submit', function(e) {
                    const query = searchInput.value.trim();
                    if (!query) {
                        e.preventDefault();
                        alert('Please enter a search term');
                        searchInput.focus();
                    }
                });
                
                // Add enter key support
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        searchForm.submit();
                    }
                });
            }
        });
        
        // Clean up database connections
        if (isset($database)) {
            $database->closeConnection();
        }
        
        // Force garbage collection to free memory
        if (function_exists('gc_collect_cycles')) {
            gc_collect_cycles();
        }
    </script>
</body>
</html>