<?php
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../db.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../includes/Language.php';

if (!isLoggedIn() || $_SESSION['user_type'] !== 'seller') {
    redirect('../login.php');
}

$lang = new Language($db);
$current_lang = $lang->getCurrentLanguage();
$user_id = $_SESSION['user_id'];

$success_msg = '';
$error_msg = '';
if (isset($_SESSION['flash_success'])) {
    $success_msg = $_SESSION['flash_success'];
    unset($_SESSION['flash_success']);
}
if (isset($_SESSION['flash_error'])) {
    $error_msg = $_SESSION['flash_error'];
    unset($_SESSION['flash_error']);
}

$upload_dir = '../uploads/profiles/';
if (!is_dir($upload_dir)) {
    @mkdir($upload_dir, 0777, true);
}

// ---- KYC module ----
require_once __DIR__ . '/../includes/kyc.php';
kyc_ensure_schema($db);
kyc_handle_post($db, $user_id, '../uploads/kyc/', 'profile.php#kyc');
$kyc_data = kyc_get_data($db, $user_id);

// Fetch user and seller data combined
$user_data = $db->select("SELECT u.*, s.business_name, s.business_category, s.full_address FROM users u LEFT JOIN sellers s ON u.id = s.user_id WHERE u.id = ?", [$user_id]);
$user = !empty($user_data) ? $user_data[0] : null;

// ---- ID card + seller certificate ----
require_once __DIR__ . '/../includes/credentials.php';
cred_ensure_schema($db);
$my_cert = $user ? cred_get_certificate($db, $user, true) : null;

// Handle Profile Pic Upload
if (isset($_POST['upload_pic']) && isset($_FILES['profile_pic']) && $_FILES['profile_pic']['error'] == 0) {
    $allowed_types = ['jpg', 'jpeg', 'png', 'gif'];
    $filename = $_FILES['profile_pic']['name'];
    $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
    
    if (in_array($ext, $allowed_types) && $_FILES['profile_pic']['size'] <= 2097152) {
        $new_name = 'seller_' . $user_id . '_' . time() . '.' . $ext;
        $destination = $upload_dir . $new_name;
        
        if (move_uploaded_file($_FILES['profile_pic']['tmp_name'], $destination)) {
            $old_pic = $user['profile_pic'];
            $db->insert("UPDATE users SET profile_pic = ? WHERE id = ?", [$new_name, $user_id]);
            if ($old_pic && file_exists($upload_dir . $old_pic)) {
                @unlink($upload_dir . $old_pic);
            }
            $_SESSION['flash_success'] = $lang->translate('pic_updated', 'Profile picture updated successfully!');
        } else {
            $_SESSION['flash_error'] = $lang->translate('pic_upload_failed', 'Failed to upload picture.');
        }
    } else {
        $_SESSION['flash_error'] = $lang->translate('invalid_pic', 'Only JPG, PNG, GIF under 2MB are allowed.');
    }
    redirect('profile.php#edit');
}

// Handle Profile Pic Remove
if (isset($_POST['remove_pic'])) {
    $old_pic = $user['profile_pic'];
    if ($old_pic && file_exists($upload_dir . $old_pic)) {
        @unlink($upload_dir . $old_pic);
    }
    $db->insert("UPDATE users SET profile_pic = NULL WHERE id = ?", [$user_id]);
    $_SESSION['flash_success'] = $lang->translate('pic_removed', 'Profile picture removed successfully!');
    redirect('profile.php#edit');
}

// Handle Basic Profile Update
if (isset($_POST['update_profile'])) {
    $name = sanitize($_POST['name']);
    $email = sanitize($_POST['email']);
    $gender = sanitize($_POST['gender']);
    
    if (empty($name) || empty($email) || empty($gender)) {
        $_SESSION['flash_error'] = $lang->translate('fill_all_fields', 'Please fill all fields.');
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $_SESSION['flash_error'] = $lang->translate('valid_email', 'Valid email required.');
    } else {
        $db->insert("UPDATE users SET name = ?, email = ?, gender = ? WHERE id = ?", [$name, $email, $gender, $user_id]);
        $_SESSION['user_name'] = $name; 
        $_SESSION['flash_success'] = $lang->translate('profile_updated', 'Profile updated successfully!');
    }
    redirect('profile.php#edit');
}

// Handle Business Details Update
if (isset($_POST['update_business'])) {
    $call_number = sanitize($_POST['call_number']);
    $whatsapp_number = sanitize($_POST['whatsapp_number']);
    $business_name = sanitize($_POST['business_name']);
    $full_address = sanitize($_POST['full_address']);
    
    // Update contacts in users table
    $db->insert("UPDATE users SET call_number = ?, whatsapp_number = ? WHERE id = ?", [$call_number, $whatsapp_number, $user_id]);
    
    // Update or Insert into sellers table
    $seller_check = $db->select("SELECT id FROM sellers WHERE user_id = ?", [$user_id]);
    if (!empty($seller_check)) {
        $db->insert("UPDATE sellers SET business_name = ?, full_address = ? WHERE user_id = ?", [$business_name, $full_address, $user_id]);
    } else {
        // Fallback if seller row doesn't exist
        $db->insert("INSERT INTO sellers (user_id, name, phone, email, business_name, full_address, status) VALUES (?, ?, ?, ?, ?, ?, 1)", 
            [$user_id, $user['name'], $user['mobile'], $user['email'], $business_name, $full_address]);
    }
    
    $_SESSION['flash_success'] = "Business details updated successfully!";
    redirect('profile.php#business');
}

// Handle Password Change
if (isset($_POST['change_password'])) {
    $current_password = $_POST['current_password'];
    $new_password = $_POST['new_password'];
    $confirm_password = $_POST['confirm_password'];
    
    if (empty($current_password) || empty($new_password) || empty($confirm_password)) {
        $_SESSION['flash_error'] = $lang->translate('fill_all_fields', 'Please fill all fields.');
    } elseif ($new_password !== $confirm_password) {
        $_SESSION['flash_error'] = $lang->translate('password_mismatch', 'Passwords do not match!');
    } elseif (!password_verify($current_password, $user['password'])) {
        $_SESSION['flash_error'] = $lang->translate('wrong_current_password', 'Wrong current password!');
    } else {
        $hashed_password = password_hash($new_password, PASSWORD_DEFAULT);
        $db->insert("UPDATE users SET password = ? WHERE id = ?", [$hashed_password, $user_id]);
        $_SESSION['flash_success'] = $lang->translate('password_changed', 'Password changed successfully!');
    }
    redirect('profile.php#password');
}

$unread_notifs = $db->select("SELECT * FROM notifications WHERE user_id = ? AND is_read = 0 ORDER BY created_at DESC LIMIT 5", [$user_id]);
$unread_count = count($unread_notifs);

$wallet_balance = isset($user['wallet_balance']) ? $user['wallet_balance'] : '0.00';

$raw_logo = getSetting('company_logo', 'assets/images/logo.png');
$company_logo = (strpos($raw_logo, 'http') === 0) ? $raw_logo : '../' . ltrim($raw_logo, '/');
$company_name = getSetting('company_name', 'WBMCZ');
$profile_image_url = !empty($user['profile_pic']) ? '../uploads/profiles/' . $user['profile_pic'] : null;

// Seller allowed categories (for sidebar menu)
$sidebar_seller_cat_ids = !empty($user['seller_categories']) ? explode(',', $user['seller_categories']) : [];
$sidebar_allowed_cats = [];
if (!empty($sidebar_seller_cat_ids)) {
    $sidebar_in_clause = implode(',', array_map('intval', $sidebar_seller_cat_ids));
    $sidebar_allowed_cats = $db->select("SELECT * FROM service_categories WHERE id IN ($sidebar_in_clause) AND status = 1 ORDER BY display_order ASC");
}
?>
<!DOCTYPE html>
<html lang="<?php echo $current_lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $lang->translate('my_profile', 'My Profile'); ?> - <?php echo $company_name; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style> body { font-family: 'Inter', sans-serif; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } </style>
</head>
<?php
/* ===== Premium shared layout (Navy + Gold) ===== */
require_once __DIR__ . '/../includes/theme.php';
$__scats = [];
if (isset($categories)) { $__ids = isset($seller_cat_ids) ? $seller_cat_ids : null; foreach ($categories as $__c) { if ($__ids === null || in_array($__c['id'], $__ids)) $__scats[] = $__c; } }
$__menu = theme_seller_menu($__scats);
theme_open([
    'panel'  => 'seller',
    'base'   => '../',
    'title'  => 'My Profile',
    'active' => 'profile',
    'user'   => isset($user) ? $user : ['name' => 'User', 'mobile' => ''],
    'wallet' => isset($wallet_balance) ? $wallet_balance : 0,
    'notifs' => isset($unread_notifs) ? $unread_notifs : [],
    'logo'   => isset($company_logo) ? $company_logo : '../assets/images/logo.png',
    'brand'  => isset($company_name) ? $company_name : 'WBMCZ',
    'menu'   => $__menu,
    'state'  => 'currentTab: (window.location.hash ? window.location.hash.substring(1) : \'profile\')',
]);
?>

            <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 relative">
                
                <?php if ($success_msg): ?>
                <div class="mb-6 bg-teal-50 border border-teal-200 text-teal-700 px-4 py-3 rounded-xl relative flex items-center shadow-sm" role="alert">
                    <i class="fas fa-check-circle text-xl mr-3"></i>
                    <span class="block sm:inline font-medium"><?php echo $success_msg; ?></span>
                </div>
                <?php endif; ?>

                <?php if ($error_msg): ?>
                <div class="mb-6 bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl relative flex items-center shadow-sm" role="alert">
                    <i class="fas fa-exclamation-circle text-xl mr-3"></i>
                    <span class="block sm:inline font-medium"><?php echo $error_msg; ?></span>
                </div>
                <?php endif; ?>

                <div class="max-w-4xl mx-auto pb-20">

                    <div x-show="currentTab === 'profile'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="h-32 bg-gradient-to-r from-teal-500 to-cyan-600"></div>
                            <div class="px-6 py-6 sm:px-10 pb-10 relative">
                                <div class="absolute -top-16 left-6 sm:left-10">
                                    <div class="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden bg-white">
                                        <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                            <img src="<?php echo $profile_image_url; ?>" class="w-full h-full object-cover">
                                        <?php else: ?>
                                            <div class="w-full h-full bg-teal-100 text-teal-700 flex items-center justify-center text-4xl font-bold">
                                                <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="flex justify-end mb-6">
                                    <a href="#edit" class="bg-teal-50 text-teal-600 border border-teal-200 hover:bg-teal-100 font-bold py-2 px-4 rounded-lg transition-colors text-sm"><i class="fas fa-edit mr-1"></i> Edit</a>
                                </div>
                                
                                <h2 class="text-3xl font-extrabold text-gray-900"><?php echo htmlspecialchars($user['name']); ?></h2>
                                <p class="text-teal-600 font-bold uppercase tracking-wider text-sm mt-1 mb-6"><i class="fas fa-store mr-1"></i> <?php echo !empty($user['business_name']) ? htmlspecialchars($user['business_name']) : 'Business Name Not Set'; ?></p>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-10 border-t border-gray-100 pt-6">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Mobile Number</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-phone-alt text-gray-400 mr-2"></i> <?php echo htmlspecialchars($user['mobile']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Email Address</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-envelope text-gray-400 mr-2"></i> <?php echo htmlspecialchars($user['email']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Gender</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-venus-mars text-gray-400 mr-2"></i> <?php echo ucfirst($user['gender']); ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Member Since</p>
                                        <p class="font-semibold text-gray-800"><i class="fas fa-calendar-alt text-gray-400 mr-2"></i> <?php echo date('F d, Y', strtotime($user['created_at'])); ?></p>
                                    </div>
                                    <div class="col-span-full">
                                        <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Business Address</p>
                                        <p class="font-semibold text-gray-800 leading-relaxed"><i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> <?php echo !empty($user['full_address']) ? htmlspecialchars($user['full_address']) : '<span class="italic text-gray-400">Not provided yet. Update in Business Details.</span>'; ?></p>
                                    </div>
                                    
                                    <div class="col-span-full mt-4 bg-blue-50 p-4 rounded-xl border border-blue-100">
                                        <h4 class="text-sm font-bold text-blue-900 mb-3 uppercase tracking-wider"><i class="fas fa-headset mr-2"></i> Support Contact Info Displayed to Buyers</h4>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div>
                                                <p class="text-xs text-blue-700 mb-1 font-semibold">Call Number</p>
                                                <p class="font-bold text-gray-800"><?php echo !empty($user['call_number']) ? htmlspecialchars($user['call_number']) : 'Not Set'; ?></p>
                                            </div>
                                            <div>
                                                <p class="text-xs text-green-700 mb-1 font-semibold">WhatsApp Number</p>
                                                <p class="font-bold text-gray-800"><?php echo !empty($user['whatsapp_number']) ? htmlspecialchars($user['whatsapp_number']) : 'Not Set'; ?></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'edit'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-user-edit text-teal-600 mr-2"></i> Edit Personal Profile</h3>
                            </div>
                            <div class="p-6 md:p-8 flex flex-col md:flex-row gap-8">
                                
                                <div class="w-full md:w-1/3 flex flex-col items-center">
                                    <div class="relative w-32 h-32 mb-4" id="profileImageContainer">
                                        <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                            <img src="<?php echo $profile_image_url; ?>" alt="Profile" class="w-full h-full rounded-full object-cover border-4 border-teal-50 shadow-md">
                                        <?php else: ?>
                                            <div class="w-full h-full rounded-full bg-gradient-to-tr from-teal-500 to-cyan-600 flex items-center justify-center text-4xl font-bold text-white shadow-md border-4 border-teal-50">
                                                <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <form method="POST" enctype="multipart/form-data" class="flex flex-col w-full space-y-2">
                                        <label class="w-full cursor-pointer bg-gray-50 hover:bg-gray-100 text-gray-700 font-medium py-2 px-4 rounded-lg text-sm text-center transition-colors border border-gray-200">
                                            <i class="fas fa-camera mr-1"></i> Choose File
                                            <input type="file" name="profile_pic" class="hidden" accept="image/jpeg, image/png, image/gif" onchange="previewImage(event)">
                                        </label>
                                        <button type="submit" name="upload_pic" id="uploadBtn" class="hidden w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-sm text-sm">
                                            Save Picture
                                        </button>
                                    </form>
                                    <?php if(!empty($profile_image_url) && file_exists($profile_image_url)): ?>
                                    <form method="POST" class="w-full mt-2">
                                        <button type="submit" name="remove_pic" onclick="return confirm('<?php echo $lang->translate('confirm_remove_pic', 'Are you sure you want to remove the picture?'); ?>');" class="w-full bg-white hover:bg-rose-50 text-rose-500 font-medium py-2 px-4 rounded-lg text-sm transition-colors border border-rose-100">
                                            <i class="fas fa-trash-alt mr-1"></i> Remove
                                        </button>
                                    </form>
                                    <?php endif; ?>
                                </div>

                                <div class="w-full md:w-2/3">
                                    <form method="POST" class="space-y-5">
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Full Name <span class="text-rose-500">*</span></label>
                                            <input type="text" name="name" value="<?php echo htmlspecialchars($user['name']); ?>" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Mobile Number <span class="text-xs text-rose-500 font-normal">(Cannot be changed here)</span></label>
                                            <input type="text" value="<?php echo htmlspecialchars($user['mobile']); ?>" disabled class="w-full px-4 py-2.5 bg-gray-100 border border-gray-200 rounded-xl text-gray-500 cursor-not-allowed">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Email Address <span class="text-rose-500">*</span></label>
                                            <input type="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Gender <span class="text-rose-500">*</span></label>
                                            <select name="gender" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all">
                                                <option value="male" <?php echo ($user['gender'] == 'male') ? 'selected' : ''; ?>>Male</option>
                                                <option value="female" <?php echo ($user['gender'] == 'female') ? 'selected' : ''; ?>>Female</option>
                                                <option value="other" <?php echo ($user['gender'] == 'other') ? 'selected' : ''; ?>>Other</option>
                                            </select>
                                        </div>
                                        <div class="pt-4">
                                            <button type="submit" name="update_profile" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors w-full sm:w-auto">
                                                <i class="fas fa-save mr-2"></i> Save Profile
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'business'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-briefcase text-orange-500 mr-2"></i> Business & Support Details</h3>
                            </div>
                            <div class="p-6 md:p-8">
                                <form method="POST" class="space-y-6">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div class="col-span-full">
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Business / Shop Name <span class="text-rose-500">*</span></label>
                                            <input type="text" name="business_name" value="<?php echo htmlspecialchars($user['business_name'] ?? ''); ?>" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all font-bold text-gray-800">
                                        </div>
                                        <div class="col-span-full">
                                            <label class="block text-sm font-bold text-gray-700 mb-1">Complete Business Address <span class="text-rose-500">*</span></label>
                                            <textarea name="full_address" rows="3" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all resize-none"><?php echo htmlspecialchars($user['full_address'] ?? ''); ?></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 mt-6">
                                        <h4 class="font-bold text-blue-900 mb-4"><i class="fas fa-headset mr-2"></i> Public Support Contacts</h4>
                                        <p class="text-xs text-gray-600 mb-4">When buyers purchase a service from you and it's "Pending", they will see these numbers to contact you directly to complete the order.</p>
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div>
                                                <label class="block text-sm font-bold text-gray-700 mb-1">Call Number</label>
                                                <div class="relative">
                                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"><i class="fas fa-phone-alt"></i></span>
                                                    <input type="text" name="call_number" value="<?php echo htmlspecialchars($user['call_number'] ?? ''); ?>" placeholder="+919876543210" class="w-full pl-10 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
                                                </div>
                                            </div>
                                            <div>
                                                <label class="block text-sm font-bold text-gray-700 mb-1">WhatsApp Number</label>
                                                <div class="relative">
                                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-green-500"><i class="fab fa-whatsapp text-lg"></i></span>
                                                    <input type="text" name="whatsapp_number" value="<?php echo htmlspecialchars($user['whatsapp_number'] ?? ''); ?>" placeholder="+919876543210" class="w-full pl-10 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500 transition-all">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="pt-2">
                                        <button type="submit" name="update_business" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors w-full sm:w-auto">
                                            <i class="fas fa-save mr-2"></i> Save Business Details
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'password'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-lock text-rose-500 mr-2"></i> <?php echo $lang->translate('change_password', 'Change Password'); ?></h3>
                            </div>
                            <div class="p-6 md:p-8">
                                <form method="POST">
                                    <div class="space-y-6 max-w-md">
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('current_password', 'Current Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="current_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('new_password', 'New Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="new_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-500 transition-all">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-bold text-gray-700 mb-1"><?php echo $lang->translate('confirm_new_password', 'Confirm New Password'); ?> <span class="text-rose-500">*</span></label>
                                            <input type="password" name="confirm_password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-500 transition-all">
                                        </div>
                                    </div>
                                    <div class="mt-8 pt-6 border-t border-gray-100">
                                        <button type="submit" name="change_password" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors w-full sm:w-auto">
                                            <i class="fas fa-key mr-2"></i> <?php echo $lang->translate('update_password', 'Update Password'); ?>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div x-show="currentTab === 'kyc'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-id-card text-blue-600 mr-2"></i> KYC Verification</h3>
                            </div>
                            <div class="p-6 md:p-8">
                                <?php echo kyc_render_form($kyc_data, '../', 'seller'); ?>
                            </div>
                        </div>
                    </div>

                    <!-- ================= ID CARD ================= -->
                    <div x-show="currentTab === 'id_card'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50 flex flex-wrap items-center justify-between gap-2">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-id-badge text-teal-600 mr-2"></i> My Member ID Card</h3>
                                <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-teal-50 text-teal-700 border border-teal-100">
                                    <?php echo htmlspecialchars(cred_member_id($user_id)); ?>
                                </span>
                            </div>
                            <div class="p-6 md:p-10 bg-slate-50/60">
                                <?php echo cred_render_id_card($db, $user, ['rel' => '../', 'brand' => $company_name, 'logo' => $company_logo]); ?>
                                <p class="text-center text-xs text-slate-500 mt-6 max-w-md mx-auto leading-relaxed">
                                    Your card has a <b>front</b> and a <b>back</b> — card number, employee ID, photo and validity on the front;
                                    QR verification, signature panel, barcode and business details on the back.
                                    <b>Download PDF</b> gives you both faces as a ready-to-print 2-page file (54 × 85.6 mm).
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- ================= CERTIFICATE ================= -->
                    <div x-show="currentTab === 'certificate'" style="display:none;" x-transition.opacity>
                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50 flex flex-wrap items-center justify-between gap-2">
                                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-certificate text-yellow-500 mr-2"></i> Seller Certificate</h3>
                                <?php if ($my_cert): ?>
                                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-100">
                                        <?php echo htmlspecialchars($my_cert['cert_no']); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                            <?php if ($my_cert): ?>
                                <div class="p-5 md:p-8 bg-slate-50/60">
                                    <?php echo cred_render_certificate($db, $user, $my_cert, ['rel' => '../', 'brand' => $company_name, 'logo' => $company_logo]); ?>
                                    <p class="text-center text-xs text-slate-500 mt-6 max-w-lg mx-auto leading-relaxed">
                                        Issued on <b><?php echo date('d M Y', strtotime($my_cert['issued_on'])); ?></b>
                                        <?php if (!empty($my_cert['valid_till'])): ?> • valid till <b><?php echo date('d M Y', strtotime($my_cert['valid_till'])); ?></b><?php endif; ?>.
                                        Print it and display it in your shop, or download the PNG for sharing.
                                    </p>
                                </div>
                            <?php else: ?>
                                <div class="p-16 text-center text-gray-500">
                                    <div class="w-20 h-20 bg-yellow-50 rounded-full flex items-center justify-center mx-auto mb-5 text-yellow-500 text-3xl border border-yellow-100">
                                        <i class="fas fa-award"></i>
                                    </div>
                                    <h3 class="text-2xl font-extrabold text-gray-800 mb-2">Certificate Pending</h3>
                                    <p class="text-gray-500 max-w-sm mx-auto">Your certificate is generated once your seller account is fully approved. Please contact support if this persists.</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                </div>
                <?php echo cred_assets('../'); ?>
            </main>
        </div>
    </div>

    <script>
    function previewImage(event) {
        if(event.target.files.length > 0) {
            var src = URL.createObjectURL(event.target.files[0]);
            var container = document.getElementById('profileImageContainer');
            container.innerHTML = '<img src="' + src + '" class="w-full h-full rounded-full object-cover border-4 border-teal-50 shadow-md">';
            document.getElementById('uploadBtn').classList.remove('hidden');
        }
    }
    </script>
</body>
</html>