<?php
// customer/profile.php
session_start();
require_once '../config/database.php';

if(!isset($_SESSION['customer_id'])) {
    header('Location: ../login.php');
    exit;
}

$database = new Database();
$db = $database->getConnection();
$success = '';
$error = '';

// Get customer info
$query = "SELECT * FROM customers WHERE id = :id";
$stmt = $db->prepare($query);
$stmt->execute([':id' => $_SESSION['customer_id']]);
$customer = $stmt->fetch(PDO::FETCH_ASSOC);

// Handle profile update
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(isset($_POST['update_profile'])) {
        $first_name = trim($_POST['first_name']);
        $last_name = trim($_POST['last_name']);
        $phone = trim($_POST['phone']);
        $address = trim($_POST['address']);
        
        $update_query = "UPDATE customers SET first_name = :first_name, last_name = :last_name, 
                        phone_number = :phone, address = :address WHERE id = :id";
        $update_stmt = $db->prepare($update_query);
        
        if($update_stmt->execute([
            ':first_name' => $first_name,
            ':last_name' => $last_name,
            ':phone' => $phone,
            ':address' => $address,
            ':id' => $_SESSION['customer_id']
        ])) {
            $success = "Profile updated successfully!";
            $_SESSION['customer_name'] = $first_name . ' ' . $last_name;

            // Refresh customer data
            $stmt->execute([':id' => $_SESSION['customer_id']]);
            $customer = $stmt->fetch(PDO::FETCH_ASSOC);
        } else {
            $error = "Error updating profile.";
        }
    }
    
    if(isset($_POST['change_password'])) {
        $current = $_POST['current_password'];
        $new = $_POST['new_password'];
        $confirm = $_POST['confirm_password'];
        
        if(password_verify($current, $customer['password'])) {
            if($new === $confirm) {
                if(strlen($new) >= 8) {
                    $hashed = password_hash($new, PASSWORD_DEFAULT);
                    $pass_query = "UPDATE customers SET password = :password WHERE id = :id";
                    $pass_stmt = $db->prepare($pass_query);

                    if($pass_stmt->execute([
                        ':password' => $hashed,
                        ':id' => $_SESSION['customer_id']
                    ])) {
                        $success = "Password changed successfully!";
                    } else {
                        $error = "Error changing password.";
                    }
                } else {
                    $error = "New password must be at least 8 characters.";
                }
            } else {
                $error = "New passwords do not match.";
            }
        } else {
            $error = "Current password is incorrect.";
        }
    }
}

$pageTitle  = 'My Profile';
$activePage = 'profile';
$notifCount = 0;
include __DIR__ . '/includes/header.php';
?>
<style>
        html,
        body {
            min-height: 100vh;
            margin: 0;
        }

        body {
            background: linear-gradient(135deg, #080240 0%, #093349 100%) !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 82px;
            color: #ffffff;
        }

        .app-header {
            background: rgba(15, 31, 74, 0.92) !important;
            color: #ffffff;
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(96, 165, 250, 0.16);
            box-shadow: 0 2px 8px rgba(0,0,0,0.16);
        }

        .header-content {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .back-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: #ffffff !important;
            padding: 0;
            cursor: pointer;
            line-height: 1;
        }

        .header-title {
            font-weight: 800;
            font-size: 18px;
            color: #ffffff !important;
            margin: 0;
            letter-spacing: 0.2px;
        }

        .profile-page {
            max-width: 960px;
            margin: 0 auto;
            padding: 16px 14px;
        }

        .profile-header {
            background: linear-gradient(135deg, #17295e 0%, #102448 100%) !important;
            border: 1px solid rgba(96, 165, 250, 0.22);
            border-radius: 18px;
            padding: 28px 20px;
            text-align: center;
            margin-bottom: 18px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
            color: #ffffff;
        }

        .profile-avatar {
            width: 92px;
            height: 92px;
            background: rgba(56, 189, 248, 0.14);
            border: 1px solid rgba(56, 189, 248, 0.32);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
            color: #dff7ff;
            font-size: 38px;
            box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.12), 0 0 22px rgba(56, 189, 248, 0.18);
        }

        .profile-avatar i {
            color: #dff7ff !important;
        }

        .profile-header h4 {
            color: #ffffff !important;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .profile-header .text-muted {
            color: #aebbd4 !important;
        }

        .card {
            background: linear-gradient(135deg, #17295e 0%, #102448 100%) !important;
            border: 1px solid rgba(96, 165, 250, 0.22) !important;
            border-radius: 16px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
            margin-bottom: 18px;
            overflow: hidden;
            color: #ffffff;
        }

        .card-header {
            background: rgba(56, 189, 248, 0.10) !important;
            border-bottom: 1px solid rgba(96, 165, 250, 0.24) !important;
            font-weight: 800;
            color: #ffffff !important;
            padding: 13px 16px;
        }

        .card-header i {
            color: #dff7ff !important;
        }

        .card-body {
            padding: 16px;
        }

        .card-body label,
        .card-body .form-label,
        .card-body .mb-3 label,
        form label.form-label {
            color: #ffffff !important;
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 6px;
        }

        .card-body small,
        .card-body .text-muted {
            color: #d7e7ff !important;
        }

        .form-control {
            border-radius: 10px;
            border: 1px solid rgba(96, 165, 250, 0.34) !important;
            padding: 11px 14px;
            color: #ffffff !important;
            background: rgba(8, 20, 48, 0.62) !important;
            min-height: 44px;
        }

        .form-control::placeholder {
            color: #aebbd4 !important;
            opacity: 1 !important;
        }
        
        .form-control:focus {
            color: #ffffff !important;
            background: rgba(8, 20, 48, 0.78) !important;
            border-color: rgba(56, 189, 248, 0.60) !important;
            box-shadow: 0 0 0 0.18rem rgba(56, 189, 248, 0.18) !important;
        }

        .form-control:disabled {
            color: #d7e7ff !important;
            background: rgba(8, 20, 48, 0.38) !important;
            opacity: 1 !important;
            cursor: not-allowed;
        }

        textarea.form-control {
            resize: vertical;
        }

        .password-wrapper {
            position: relative !important;
        }

        .password-wrapper .form-control {
            padding-right: 46px !important;
        }

        .password-wrapper button.toggle-password,
        .password-wrapper button.toggle-password:hover,
        .password-wrapper button.toggle-password:focus,
        .password-wrapper button.toggle-password:active,
        .password-wrapper button.toggle-password:focus-visible {
            position: absolute !important;
            top: 50% !important;
            right: 16px !important;
            transform: translateY(-50%) !important;

            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: auto !important;
            min-height: 0 !important;

            padding: 0 !important;
            margin: 0 !important;

            background: transparent !important;
            background-color: transparent !important;
            background-image: none !important;

            border: 0 !important;
            border-color: transparent !important;
            border-radius: 0 !important;

            outline: 0 !important;
            box-shadow: none !important;
            appearance: none !important;
            -webkit-appearance: none !important;

            color: #dff7ff !important;
            line-height: 1 !important;
            cursor: pointer !important;
            z-index: 20 !important;
        }

        .password-wrapper button.toggle-password i,
        .password-wrapper button.toggle-password:hover i,
        .password-wrapper button.toggle-password:focus i,
        .password-wrapper button.toggle-password:active i,
        .password-wrapper button.toggle-password:focus-visible i {
            color: #dff7ff !important;
            font-size: 17px !important;
            line-height: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .btn-save {
            background: linear-gradient(135deg, #1d9bf0 0%, #17bdd4 100%) !important;
            color: #ffffff !important;
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 800;
            box-shadow: 0 10px 18px rgba(29, 155, 240, 0.20);
        }

        .btn-save:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(29, 155, 240, 0.26);
        }

        .btn-save i {
            color: #ffffff !important;
        }

        .btn-outline-danger {
            border-color: rgba(248, 113, 113, 0.55) !important;
            color: #fecaca !important;
            background: rgba(127, 29, 29, 0.22) !important;
            border-radius: 10px;
            padding: 11px;
            font-weight: 800;
        }

        .btn-outline-danger:hover {
            background: rgba(220, 38, 38, 0.82) !important;
            color: #ffffff !important;
        }

        .alert {
            border-radius: 12px;
            font-weight: 700;
            border: none;
        }

        .alert-success {
            background: rgba(22, 163, 74, 0.18);
            color: #bbf7d0;
            border: 1px solid rgba(34, 197, 94, 0.34);
        }

        .alert-danger {
            background: rgba(127, 29, 29, 0.35);
            color: #fecaca;
            border: 1px solid rgba(248, 113, 113, 0.35);
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #080240 !important;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.22);
            border-top: 1px solid rgba(96, 165, 250, 0.18);
            z-index: 1000;
        }
        
        .nav-item {
            text-align: center;
            color: #aebbd4 !important;
            text-decoration: none;
            font-size: 12px;
            flex: 1;
        }
        
        .nav-item.active {
            color: #ffffff !important;
        }
        
        .nav-item i {
            font-size: 22px;
            display: block;
            margin-bottom: 4px;
            color: inherit !important;
        }

        .nav-item span {
            color: inherit !important;
        }

        @media (max-width: 576px) {
            .profile-page {
                padding: 14px 12px;
            }

            .profile-header {
                padding: 24px 16px;
            }

            .profile-avatar {
                width: 82px;
                height: 82px;
                font-size: 34px;
            }

            .card-body {
                padding: 14px;
            }
        }
    </style>

    <link rel="stylesheet" href="../assets/portal-dark.css">

    <style>
        /* Final override after portal-dark.css */
        body {
            background: linear-gradient(135deg, #080240 0%, #093349 100%) !important;
            color: #ffffff !important;
        }

        .app-header {
            background: rgba(15, 31, 74, 0.92) !important;
            padding: 12px 16px !important;
            border-bottom: 1px solid rgba(96, 165, 250, 0.16) !important;
        }

        .header-title,
        .back-btn,
        .back-btn i {
            color: #ffffff !important;
        }

        .profile-header,
        .card {
            background: linear-gradient(135deg, #17295e 0%, #102448 100%) !important;
            border: 1px solid rgba(96, 165, 250, 0.22) !important;
        }

        .profile-header h4,
        .card-header,
        .card-body label,
        .card-body .form-label {
            color: #ffffff !important;
        }

        .profile-header .text-muted,
        .card-body small,
        .card-body .text-muted {
            color: #d7e7ff !important;
        }

        .bottom-nav {
            background: #080240 !important;
        }
    </style>

<main class="profile-page">
        <?php if($success): ?>
            <div class="alert alert-success">
                <?php echo htmlspecialchars($success); ?>
            </div>
        <?php endif; ?>
        
        <?php if($error): ?>
            <div class="alert alert-danger">
                <?php echo htmlspecialchars($error); ?>
            </div>
        <?php endif; ?>
        
        <div class="profile-header">
            <div class="profile-avatar">
                <i class="fas fa-user"></i>
            </div>

            <h4>
                <?php echo htmlspecialchars($customer['first_name'] . ' ' . $customer['last_name']); ?>
            </h4>

            <p class="text-muted mb-0">
                Member since <?php echo date('F Y', strtotime($customer['created_at'])); ?>
            </p>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-user-edit me-2"></i>
                Edit Profile
            </div>

            <div class="card-body">
                <form method="POST">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">First Name</label>
                            <input 
                                type="text" 
                                name="first_name" 
                                class="form-control" 
                                value="<?php echo htmlspecialchars($customer['first_name']); ?>" 
                                required
                            >
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Name</label>
                            <input 
                                type="text" 
                                name="last_name" 
                                class="form-control" 
                                value="<?php echo htmlspecialchars($customer['last_name']); ?>" 
                                required
                            >
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input 
                            type="email" 
                            class="form-control" 
                            value="<?php echo htmlspecialchars($customer['email']); ?>" 
                            disabled
                        >
                        <small>Email cannot be changed</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input 
                            type="tel" 
                            name="phone" 
                            class="form-control" 
                            value="<?php echo htmlspecialchars($customer['phone_number']); ?>" 
                            required
                        >
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea 
                            name="address" 
                            class="form-control" 
                            rows="2"
                        ><?php echo htmlspecialchars($customer['address']); ?></textarea>
                    </div>
                    
                    <button type="submit" name="update_profile" class="btn btn-save w-100">
                        <i class="fas fa-save me-2"></i>
                        Save Changes
                    </button>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-lock me-2"></i>
                Change Password
            </div>

            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label class="form-label">Current Password</label>

                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                name="current_password" 
                                id="current_password"
                                class="form-control"  
                                placeholder="Current Password" 
                                required
                            >

                            <button 
                                type="button" 
                                class="toggle-password" 
                                onclick="togglePassword('current_password', this)"
                                aria-label="Show or hide current password"
                            >
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">New Password</label>

                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                name="new_password" 
                                id="new_password"
                                class="form-control" 
                                minlength="8" 
                                placeholder="New Password" 
                                required
                            >

                            <button 
                                type="button" 
                                class="toggle-password" 
                                onclick="togglePassword('new_password', this)"
                                aria-label="Show or hide new password"
                            >
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Confirm New Password</label>

                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                name="confirm_password" 
                                id="confirm_password"
                                class="form-control" 
                                placeholder="Confirm Password" 
                                required
                            >

                            <button 
                                type="button" 
                                class="toggle-password" 
                                onclick="togglePassword('confirm_password', this)"
                                aria-label="Show or hide confirm password"
                            >
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <button type="submit" name="change_password" class="btn btn-save w-100">
                        <i class="fas fa-key me-2"></i>
                        Change Password
                    </button>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-sign-out-alt me-2" style="color: #fecaca !important;"></i>
                Account Actions
            </div>

            <div class="card-body">
                <a href="logout.php" class="btn btn-danger w-100">
                    <i class="fas fa-sign-out-alt me-2"></i> Logout
                </a>
            </div>
        </div>
    </main>

<?php include __DIR__ . '/includes/footer.php'; ?>

    <script>
        function togglePassword(inputId, button) {
            const input = document.getElementById(inputId);
            const icon = button.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
    </script>
</body>
</html>