/home/awneajlw/.trash/my-shop.php
<?php
/**
 * My Shop Page - Shop Management
 * This page allows users to manage their shop details
 * Features: Shop information update, logo upload, contact details management
 */

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

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

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

// Initialize variables for form handling
$success_message = '';   // Success message after form submission
$error_message = '';     // Error message for validation/database issues
$field_errors = [];      // Array to store field-specific errors
$form_data = [];         // Array to store form data for repopulation

/**
 * Form Submission Handler
 * Process POST request when shop details form is submitted
 */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $shop_name = trim($_POST['shop_name'] ?? '');
    $phone_number = trim($_POST['phone_number'] ?? '');
    $user_name = trim($_POST['user_name'] ?? '');
    $password = trim($_POST['password'] ?? '');
    $whatsapp_number = trim($_POST['whatsapp_number'] ?? '');
    $facebook_id = trim($_POST['facebook_id'] ?? '');
    $instagram_id = trim($_POST['instagram_id'] ?? '');
    $website = trim($_POST['website'] ?? '');
    
    // Enhanced validation with field-specific errors
    $validation_errors = [];
    
    // Required field validation
    if (empty($shop_name)) {
        $validation_errors['shop_name'] = 'Shop name is required';
    } elseif (strlen($shop_name) < 2) {
        $validation_errors['shop_name'] = 'Shop name must be at least 2 characters long';
    }
    
    if (empty($phone_number)) {
        $validation_errors['phone_number'] = 'Phone number is required';
    } elseif (!preg_match('/^[\+]?[0-9\s\-\(\)]{10,15}$/', $phone_number)) {
        $validation_errors['phone_number'] = 'Please enter a valid phone number';
    }
    
    if (empty($user_name)) {
        $validation_errors['user_name'] = 'User name is required';
    } elseif (strlen($user_name) < 2) {
        $validation_errors['user_name'] = 'User name must be at least 2 characters long';
    }
    
    // Optional field validation
    if (!empty($whatsapp_number) && !preg_match('/^[\+]?[0-9\s\-\(\)]{10,15}$/', $whatsapp_number)) {
        $validation_errors['whatsapp_number'] = 'Please enter a valid WhatsApp number';
    }
    
    if (!empty($website) && !filter_var($website, FILTER_VALIDATE_URL)) {
        $validation_errors['website'] = 'Please enter a valid website URL';
    }
    
    // Store form data for repopulation
    $form_data = [
        'shop_name' => $shop_name,
        'phone_number' => $phone_number,
        'user_name' => $user_name,
        'whatsapp_number' => $whatsapp_number,
        'facebook_id' => $facebook_id,
        'instagram_id' => $instagram_id,
        'website' => $website
    ];
    
    if (empty($validation_errors)) {
        try {
            $database = new Database();
            $db = $database->getConnection();
            
            $user_id = $_SESSION['user_id'];
            
            // Check if shop already exists for this user
            $check_query = "SELECT id FROM shops WHERE user_id = ?";
            $check_stmt = $db->prepare($check_query);
            $check_stmt->execute([$user_id]);
            $existing_shop = $check_stmt->fetch(PDO::FETCH_ASSOC);
            
            if ($existing_shop) {
                // Update existing shop
                $update_query = "UPDATE shops SET 
                    shop_name = ?, 
                    shop_phone = ?, 
                    shop_email = ?, 
                    shop_whatsapp = ?, 
                    shop_facebook = ?, 
                    shop_instagram = ?, 
                    shop_website = ?,
                    updated_at = NOW()
                    WHERE user_id = ?";
                $stmt = $db->prepare($update_query);
                $stmt->execute([
                    $shop_name, $phone_number, $website, $whatsapp_number, 
                    $facebook_id, $instagram_id, $website, $user_id
                ]);
                $success_message = 'Shop details updated successfully!';
            } else {
                // Insert new shop
                $insert_query = "INSERT INTO shops (
                    user_id, shop_name, shop_phone, shop_email, shop_whatsapp, 
                    shop_facebook, shop_instagram, shop_website, created_at, updated_at
                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, NOW(), NOW())";
                $stmt = $db->prepare($insert_query);
                $stmt->execute([
                    $user_id, $shop_name, $phone_number, $website, $whatsapp_number, 
                    $facebook_id, $instagram_id, $website
                ]);
                $success_message = 'Shop details saved successfully!';
            }
            
            // Update user password if provided
            if (!empty($password)) {
                $hashed_password = password_hash($password, PASSWORD_DEFAULT);
                $update_user_query = "UPDATE users SET password = ? WHERE id = ?";
                $user_stmt = $db->prepare($update_user_query);
                $user_stmt->execute([$hashed_password, $user_id]);
            }
            
        } catch (Exception $e) {
            $error_message = 'An error occurred. Please try again.';
        }
    } else {
        // Store validation errors for display
        $field_errors = $validation_errors;
        $error_message = 'Please correct the errors below and try again.';
    }
}

// Get existing shop data
$shop_data = [
    'shop_name' => '',
    'phone_number' => '',
    'user_name' => '',
    'whatsapp_number' => '',
    'facebook_id' => '',
    'instagram_id' => '',
    'website' => ''
];

if (isLoggedIn()) {
    try {
        $database = new Database();
        $db = $database->getConnection();
        
        $user_id = $_SESSION['user_id'];
        $query = "SELECT s.*, u.name as user_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]);
        $existing_shop = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($existing_shop) {
            $shop_data = [
                'shop_name' => $existing_shop['shop_name'] ?? '',
                'phone_number' => $existing_shop['shop_phone'] ?? '',
                'user_name' => $existing_shop['user_name'] ?? '',
                'whatsapp_number' => $existing_shop['shop_whatsapp'] ?? '',
                'facebook_id' => $existing_shop['shop_facebook'] ?? '',
                'instagram_id' => $existing_shop['shop_instagram'] ?? '',
                'website' => $existing_shop['shop_website'] ?? ''
            ];
        }
    } catch (Exception $e) {
        // Handle error silently
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Shop - 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: 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;
            position: relative;
        }
        
        .nav-link.active {
            background: #10b981;
            color: white;
        }
        
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            background: #10b981;
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }
        
        .nav-link:hover {
            color: #10b981;
        }
        
        .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;
            position: relative;
        }
        
        .logo::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border: 3px solid white;
            border-radius: 50%;
            border-top-color: transparent;
            border-right-color: transparent;
        }
        
        .logo-icon {
            font-size: 24px;
            color: white;
            z-index: 2;
        }
        
        .logo-text {
            color: #1f2937;
            font-size: 18px;
            font-weight: bold;
        }
        
        .search-section {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .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);
        }
        
        .back-arrow {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #10b981;
            font-weight: 600;
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .back-arrow i {
            font-size: 20px;
            transition: transform 0.3s ease;
        }
        
        .back-arrow:hover i {
            transform: translateX(-5px);
        }
        
        .shop-form-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid #e5e7eb;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .form-title {
            color: #1f2937;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group.full-width {
            grid-column: 1 / -1;
        }
        
        .form-label {
            color: #374151;
            font-weight: 600;
            font-size: 14px;
        }
        
        .form-input {
            padding: 15px 20px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: #f9fafb;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            background: white;
        }
        
        /* Error styling for form inputs */
        .form-input.error {
            border-color: #ef4444;
            background: #fef2f2;
        }
        
        .form-input.error:focus {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }
        
        .form-group.has-error .form-label {
            color: #ef4444;
        }
        
        .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: block;
        }
        
        .upload-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .upload-input {
            flex: 1;
        }
        
        .upload-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .upload-btn:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .form-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .form-btn {
            padding: 15px 40px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }
        
        .save-btn {
            background: #10b981;
            color: white;
        }
        
        .save-btn:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
        }
        
        .edit-btn {
            background: #6b7280;
            color: white;
        }
        
        .edit-btn:hover {
            background: #4b5563;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(107, 114, 128, 0.3);
        }
        
        .alert {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            border: none;
        }
        
        .alert-success {
            background: #d1fae5;
            color: #065f46;
        }
        
        .alert-danger {
            background: #fee2e2;
            color: #991b1b;
        }
        
        @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%;
            }
        }
        
        @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;
            }
            
            .shop-form-container {
                padding: 25px;
                margin: 0;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .upload-section {
                flex-direction: column;
                align-items: stretch;
            }
            
            .form-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .form-btn {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .main-content {
                padding: 10px;
                margin: 0;
            }
            
            .shop-form-container {
                padding: 20px;
                border-radius: 15px;
            }
            
            .form-title {
                font-size: 24px;
            }
            
            .nav-title {
                font-size: 20px;
            }
            
            .logo-text {
                font-size: 16px;
            }
            
            .search-input {
                min-width: 200px;
            }
        }
        
        @media (max-width: 320px) {
            .main-content {
                padding: 10px;
                margin: 2px;
            }
            
            .nav-title {
                font-size: 18px;
            }
            
            .logo-text {
                font-size: 14px;
            }
            
            .form-title {
                font-size: 20px;
            }
            
            .shop-form-container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-content">
            <!-- Top Navigation -->
            <div class="top-nav">
                <!--<h1 class="nav-title">My shop</h1>-->
                
                <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">Home</a>
                    <a href="my-shop.php" class="nav-link active">My Shop</a>
                    <a href="#" class="nav-link">Promotion</a>
                    <a href="#" class="nav-link">Notification</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">
                    <div class="search-bar">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="Search Here.....">
                    </div>
                    <button class="calculator-btn" onclick="window.location.href='calculator.php'">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">Home</a>
                    <a href="my-shop.php" class="mobile-nav-link active">My Shop</a>
                    <a href="#" class="mobile-nav-link">Promotion</a>
                    <a href="#" class="mobile-nav-link">Notification</a>
                </div>
                
                <div class="mobile-search-section">
                    <div class="search-bar">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="Search Here.....">
                    </div>
                    <button class="calculator-btn" onclick="window.location.href='calculator.php'; closeMobileMenu();" style="margin-top: 15px; width: 100%;">Calculator</button>
                </div>
            </div>
            
            <!-- Back Arrow -->
            <div class="back-arrow" onclick="goBack()">
                <i class="fas fa-arrow-left"></i>
                <span>Back</span>
            </div>
            
            <!-- Shop Form -->
            <div class="shop-form-container">
                <h2 class="form-title">Shop Details</h2>
                
                <?php if ($success_message): ?>
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        <?php echo htmlspecialchars($success_message); ?>
                    </div>
                <?php endif; ?>
                
                <?php if ($error_message): ?>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        <?php echo htmlspecialchars($error_message); ?>
                    </div>
                <?php endif; ?>
                
                <form method="POST" enctype="multipart/form-data">
                    <div class="form-grid">
                        <div class="form-group <?php echo isset($field_errors['shop_name']) ? 'has-error' : ''; ?>">
                            <label class="form-label">Shop Name</label>
                            <input type="text" name="shop_name" class="form-input <?php echo isset($field_errors['shop_name']) ? 'error' : ''; ?>" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['shop_name'] ?? $shop_data['shop_name']); ?>" required>
                            <?php if (isset($field_errors['shop_name'])): ?>
                                <div class="error-message"><?php echo htmlspecialchars($field_errors['shop_name']); ?></div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="form-group <?php echo isset($field_errors['phone_number']) ? 'has-error' : ''; ?>">
                            <label class="form-label">Phone Number</label>
                            <input type="tel" name="phone_number" class="form-input <?php echo isset($field_errors['phone_number']) ? 'error' : ''; ?>" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['phone_number'] ?? $shop_data['phone_number']); ?>" required>
                            <?php if (isset($field_errors['phone_number'])): ?>
                                <div class="error-message"><?php echo htmlspecialchars($field_errors['phone_number']); ?></div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="form-group <?php echo isset($field_errors['user_name']) ? 'has-error' : ''; ?>">
                            <label class="form-label">User Name</label>
                            <input type="text" name="user_name" class="form-input <?php echo isset($field_errors['user_name']) ? 'error' : ''; ?>" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['user_name'] ?? $shop_data['user_name']); ?>" required>
                            <?php if (isset($field_errors['user_name'])): ?>
                                <div class="error-message"><?php echo htmlspecialchars($field_errors['user_name']); ?></div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" name="password" class="form-input" 
                                   placeholder="XXXXXXXXXX">
                        </div>
                        
                        <div class="form-group full-width">
                            <label class="form-label">Upload Logo</label>
                            <div class="upload-section">
                                <input type="file" name="logo" accept="image/*" class="form-input upload-input" 
                                       placeholder="img.dd">
                                <button type="button" class="upload-btn" onclick="document.querySelector('input[name=logo]').click()">
                                    UPLOAD
                                </button>
                            </div>
                        </div>
                        
                        <div class="form-group <?php echo isset($field_errors['whatsapp_number']) ? 'has-error' : ''; ?>">
                            <label class="form-label">WhatsApp Number</label>
                            <input type="tel" name="whatsapp_number" class="form-input <?php echo isset($field_errors['whatsapp_number']) ? 'error' : ''; ?>" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['whatsapp_number'] ?? $shop_data['whatsapp_number']); ?>">
                            <?php if (isset($field_errors['whatsapp_number'])): ?>
                                <div class="error-message"><?php echo htmlspecialchars($field_errors['whatsapp_number']); ?></div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Facebook ID</label>
                            <input type="text" name="facebook_id" class="form-input" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['facebook_id'] ?? $shop_data['facebook_id']); ?>">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Instagram ID</label>
                            <input type="text" name="instagram_id" class="form-input" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['instagram_id'] ?? $shop_data['instagram_id']); ?>">
                        </div>
                        
                        <div class="form-group <?php echo isset($field_errors['website']) ? 'has-error' : ''; ?>">
                            <label class="form-label">Website</label>
                            <input type="url" name="website" class="form-input <?php echo isset($field_errors['website']) ? 'error' : ''; ?>" 
                                   placeholder="XXXXXXXXXX" 
                                   value="<?php echo htmlspecialchars($form_data['website'] ?? $shop_data['website']); ?>">
                            <?php if (isset($field_errors['website'])): ?>
                                <div class="error-message"><?php echo htmlspecialchars($field_errors['website']); ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="form-buttons">
                        <button type="submit" class="form-btn save-btn">
                            <i class="fas fa-save"></i>
                            Save
                        </button>
                        <button type="button" class="form-btn edit-btn" onclick="editMode()">
                            <i class="fas fa-edit"></i>
                            Edit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function goBack() {
            window.history.back();
        }
        
        function 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';
        }
        
        function editMode() {
            const inputs = document.querySelectorAll('.form-input');
            inputs.forEach(input => {
                input.disabled = false;
                input.style.background = 'white';
            });
            
            // Focus on first input
            inputs[0].focus();
        }
        
        // Enable edit mode on focus
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('focus', function() {
                if (this.disabled) {
                    editMode();
                }
            });
        });
        
        // 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);
                }
            }
        });
        
        // 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');
            });
        });
        
        // 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();
            });
        });
        
        // Form validation
        document.querySelector('form').addEventListener('submit', function(e) {
            const requiredFields = this.querySelectorAll('input[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.style.borderColor = '#ef4444';
                    isValid = false;
                } else {
                    field.style.borderColor = '#e5e7eb';
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields.');
            }
        });
        
        // Auto-save functionality (optional)
        let autoSaveTimeout;
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('input', function() {
                clearTimeout(autoSaveTimeout);
                autoSaveTimeout = setTimeout(() => {
                    // Auto-save logic can be implemented here
                    console.log('Auto-saving...');
                }, 2000);
            });
        });
    </script>
</body>
</html>
Path: home/awneajlw/.trash