<?php
$pageName = "Account Settings";
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/header.php");

// ─── PIN CHANGE (from pin-settings.php) ──────────────────────────────────────
if (isset($_POST['change_pin'])) {
    $current_pin = inputValidation($_POST['current_pin']);
    $new_pin     = inputValidation($_POST['new_pin']);
    $confirm_pin = inputValidation($_POST['confirm_pin']);
    $verify_pin  = $row['acct_pin'];

    if ($current_pin !== $verify_pin) {
        toast_alert('error', 'Invalid Old PIN');
    } elseif ($new_pin !== $confirm_pin) {
        toast_alert('error', 'Confirm PIN does not match');
    } elseif ($new_pin === $verify_pin) {
        toast_alert('error', 'New PIN cannot be the same as Old PIN');
    } else {
        $sql2 = "UPDATE users SET acct_pin=:acct_pin WHERE id=:id";
        $stmt2 = $conn->prepare($sql2);
        $stmt2->execute(['acct_pin' => $new_pin, 'id' => $user_id]);

        $full_name    = $row['firstname'] . " " . $row['lastname'];
        $APP_NAME     = WEB_TITLE;
        $APP_URL      = WEB_URL;
        $SITE_ADDRESS = $page['url_address'];
        $user_email   = $row['acct_email'];
        $user_acctno  = $row['acct_no'];

        $emailBody = $sendMail->PinMsg($full_name, $user_acctno, $APP_NAME, $APP_URL, $SITE_ADDRESS);
        $subject   = "PIN Change - $APP_NAME";
        $email_message->send_mail($user_email, $emailBody, $subject);

        toast_alert('success', 'Transaction PIN changed successfully');
    }
}

// ─── PASSWORD CHANGE (from password-settings.php) ────────────────────────────
if (isset($_POST['change_password'])) {
    $old_password     = inputValidation($_POST['old_password']);
    $new_password     = inputValidation($_POST['new_password']);
    $confirm_password = inputValidation($_POST['confirm_password']);

    if (empty($old_password)) {
        toast_alert('danger', 'Enter your old password');
    } elseif (empty($new_password) || empty($confirm_password)) {
        toast_alert('danger', 'Enter new password and confirmation');
    } else {
        $new_password_hashed = password_hash((string)$new_password, PASSWORD_BCRYPT);
        $verified            = password_verify($old_password, $row['acct_password']);

        if (!$verified) {
            toast_alert('error', 'Incorrect old password');
        } elseif ($new_password !== $confirm_password) {
            toast_alert('error', 'New passwords do not match');
        } elseif ($new_password === $old_password) {
            toast_alert('error', 'New password cannot match old password');
        } else {
            $sql2 = "UPDATE users SET acct_password=:acct_password WHERE id=:id";
            $stmt2 = $conn->prepare($sql2);
            $stmt2->execute(['acct_password' => $new_password_hashed, 'id' => $user_id]);

            $full_name    = $row['firstname'] . " " . $row['lastname'];
            $APP_NAME     = WEB_TITLE;
            $APP_URL      = WEB_URL;
            $SITE_ADDRESS = $page['url_address'];
            $user_email   = $row['acct_email'];
            $user_acctno  = $row['acct_no'];

            $emailBody = $sendMail->PasswordMsg($full_name, $user_acctno, $APP_NAME, $APP_URL, $SITE_ADDRESS);
            $subject   = "Password Change - $APP_NAME";
            $email_message->send_mail($user_email, $emailBody, $subject);

            toast_alert('success', 'Password changed successfully');
        }
    }
}

// ─── Helpers ──────────────────────────────────────────────────────────────────
$fullName   = $row['firstname'] . ' ' . $row['lastname'];
$acctPhoto  = !empty($row['acct_photo'])
    ? $_SERVER['DOCUMENT_ROOT'] . '/storage/photos/' . $row['acct_photo']
    : '/assets/img/default-avatar.png';
$acctPhotoUrl = !empty($row['acct_photo'])
    ? $web_url . '/storage/photos/' . $row['acct_photo']
    : $web_url . '/assets/img/default-avatar.png';

// Format DOB
$dob = '';
if (!empty($row['acct_dob'])) {
    $dob = date('M d, Y', strtotime($row['acct_dob']));
}

// Format joined date
$joinedDate = '';
if (!empty($row['createdAt'])) {
    $joinedDate = date('M d, Y', strtotime($row['createdAt']));
}
?>

<!-- Main Content Area -->
<main class="pt-10 md:pt-14 pb-24 md:pb-8 min-h-screen lg:ml-80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

<style>
    .field-input {
        background: #FFFFFF;
        border: 2px solid #E0E5E5;
        color: #0D1B23;
        outline: none;
        transition: border-color 0.2s ease;
    }
    .field-input:focus {
        border-color: #49786B;
        box-shadow: 0 0 0 2px rgba(73, 120, 107, 0.12);
    }
    .field-input::placeholder { color: #7A7A7A; }

    @keyframes progress {
        from { width: 100%; }
        to   { width: 0%; }
    }
    @keyframes shake {
        0%, 100% { transform: rotate(0deg); }
        25%       { transform: rotate(-5deg); }
        75%       { transform: rotate(5deg); }
    }
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
</style>

<div x-data="{
    uploadModal:   false,
    pinModal:      false,
    passwordModal: false,
    showOldPin:    false,
    showNewPin:    false,
    showConfirmPin: false,
    showOldPass:   false,
    showNewPass:   false,
    showConfirmPass: false,
    current_pin: '',
    new_pin: '',
    confirm_pin: '',
    old_password: '',
    new_password: '',
    confirm_password: ''
}" class="space-y-6 pb-24">

    <!-- ── Profile Header ───────────────────────────────────────────────────── -->
    <div class="bg-white border border-[#E0E5E5] rounded-xl p-6">
        <div class="flex flex-col md:flex-row items-center md:items-start gap-6">

            <!-- Avatar with upload overlay -->
            <div class="relative group flex-shrink-0">
                <img src="<?= $web_url ?>/assets/user/profile/<?= $row['acct_image'] ?>"
                     alt="<?= htmlspecialchars($fullName) ?>"
                     class="w-24 h-24 rounded-xl object-cover border-2 border-[#C8D1D1]">
                <button @click.prevent="uploadModal = true" type="button"
                        class="absolute inset-0 bg-black/60 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center">
                    <i data-lucide="camera" class="w-6 h-6 text-white mb-1"></i>
                    <span class="text-xs font-semibold text-white">Change</span>
                </button>
            </div>

            <!-- User Info -->
            <div class="flex-1 text-center md:text-left">
                <div class="flex items-center justify-center md:justify-start gap-3 mb-2">
                    <h1 class="text-2xl font-semibold text-[#0D1B23]"><?= htmlspecialchars($fullName) ?></h1>
                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-[#DFE5E5] text-[#4A4A4A] border border-[#C8D1D1]">
                        <?= htmlspecialchars($row['acct_type'] ?? 'Savings Account') ?>
                    </span>
                </div>
                <p class="text-[#7A7A7A] mb-4">Account #<?= htmlspecialchars($row['acct_no']) ?></p>

                <div class="flex flex-wrap gap-4 justify-center md:justify-start">
                    <div class="flex items-center space-x-2 text-sm">
                        <i data-lucide="mail" class="w-4 h-4 text-[#7A7A7A]"></i>
                        <span class="text-[#4A4A4A]"><?= htmlspecialchars($row['acct_email']) ?></span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <i data-lucide="phone" class="w-4 h-4 text-[#7A7A7A]"></i>
                        <span class="text-[#4A4A4A]"><?= htmlspecialchars($row['acct_phone']) ?></span>
                    </div>
                    <?php if (!empty($row['acct_country'])): ?>
                    <div class="flex items-center space-x-2 text-sm">
                        <i data-lucide="map-pin" class="w-4 h-4 text-[#7A7A7A]"></i>
                        <span class="text-[#4A4A4A]"><?= htmlspecialchars($row['acct_country']) ?></span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col gap-2">
                <button @click.prevent="pinModal = true" type="button"
                        class="px-5 py-2.5 rounded-lg bg-[#DFE5E5] hover:bg-[#C8D1D1] border border-[#C8D1D1] transition-colors flex items-center space-x-2">
                    <i data-lucide="shield" class="w-4 h-4 text-primary-500"></i>
                    <span class="text-sm font-semibold text-[#4A4A4A]">Change PIN</span>
                </button>
                <button @click.prevent="passwordModal = true" type="button"
                        class="px-5 py-2.5 rounded-lg bg-[#DFE5E5] hover:bg-[#C8D1D1] border border-[#C8D1D1] transition-colors flex items-center space-x-2">
                    <i data-lucide="key" class="w-4 h-4 text-[#7A7A7A]"></i>
                    <span class="text-sm font-semibold text-[#4A4A4A]">Password</span>
                </button>
            </div>
        </div>
    </div>

    <!-- ── Personal Information ──────────────────────────────────────────────── -->
    <div class="bg-white border border-[#E0E5E5] rounded-xl p-6">
        <h2 class="text-lg font-semibold text-[#0D1B23] flex items-center mb-6">
            <span class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center mr-3">
                <i data-lucide="user" class="w-4 h-4 text-primary-500"></i>
            </span>
            Personal Information
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

            <!-- Full Name -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Full Name</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($fullName) ?></p>
                    </div>
                    <i data-lucide="user-check" class="w-4 h-4 text-primary-500 mt-1"></i>
                </div>
            </div>

            <!-- Date of Birth -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Date of Birth</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($dob ?: '—') ?></p>
                    </div>
                    <i data-lucide="calendar" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>

            <!-- Email -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Email Address</p>
                        <p class="text-base font-semibold text-[#0D1B23] break-all"><?= htmlspecialchars($row['acct_email']) ?></p>
                    </div>
                    <i data-lucide="mail" class="w-4 h-4 text-primary-500 mt-1"></i>
                </div>
            </div>

            <!-- Phone -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Phone Number</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($row['acct_phone']) ?></p>
                    </div>
                    <i data-lucide="phone" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>

            <!-- Gender -->
            <?php if (!empty($row['acct_gender'])): ?>
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Gender</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($row['acct_gender']) ?></p>
                    </div>
                    <i data-lucide="users" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>
            <?php endif; ?>

            <!-- Address -->
            <?php if (!empty($row['acct_address'])): ?>
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Home Address</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($row['acct_address']) ?></p>
                    </div>
                    <i data-lucide="map-pin" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>
            <?php endif; ?>

            <!-- State -->
            <?php if (!empty($row['country'])): ?>
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Country</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($row['country']) ?></p>
                    </div>
                    <i data-lucide="navigation" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>
            <?php endif; ?>

            <!-- Zipcode -->
            <?php if (!empty($row['zipcode'])): ?>
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Zipcode</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($row['zipcode']) ?></p>
                    </div>
                    <i data-lucide="hash" class="w-4 h-4 text-[#7A7A7A] mt-1"></i>
                </div>
            </div>
            <?php endif; ?>

            <!-- Joined Date -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-primary-300 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <p class="text-xs uppercase tracking-wider font-semibold text-[#7A7A7A] mb-1">Member Since</p>
                        <p class="text-base font-semibold text-[#0D1B23]"><?= htmlspecialchars($joinedDate ?: '—') ?></p>
                    </div>
                    <i data-lucide="calendar-check" class="w-4 h-4 text-primary-500 mt-1"></i>
                </div>
            </div>

        </div>
    </div>

    <!-- ── Account Settings ──────────────────────────────────────────────────── -->
    <div class="bg-white border border-[#E0E5E5] rounded-xl p-6">
        <h2 class="text-lg font-semibold text-[#0D1B23] flex items-center mb-6">
            <span class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center mr-3">
                <i data-lucide="settings" class="w-4 h-4 text-[#7A7A7A]"></i>
            </span>
            Account Settings
        </h2>

        <div class="space-y-3">

            <!-- Currency -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5]">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                            <i data-lucide="dollar-sign" class="w-4 h-4 text-[#7A7A7A]"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-[#0D1B23]">Currency Preference</p>
                            <p class="text-xs text-[#7A7A7A]">Default transaction currency</p>
                        </div>
                    </div>
                    <div class="px-4 py-2 rounded-lg bg-primary-50 border border-primary-200">
                        <span class="text-sm font-bold text-primary-500"><?= htmlspecialchars($currency) ?></span>
                    </div>
                </div>
            </div>

            <!-- Account Type -->
            <div class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5]">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                            <i data-lucide="briefcase" class="w-4 h-4 text-primary-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-[#0D1B23]">Account Type</p>
                            <p class="text-xs text-[#7A7A7A]">Your banking tier</p>
                        </div>
                    </div>
                    <div class="px-4 py-2 rounded-lg bg-[#DFE5E5] border border-[#C8D1D1]">
                        <span class="text-sm font-semibold text-[#4A4A4A]"><?= htmlspecialchars($row['acct_type'] ) ?></span>
                    </div>
                </div>
            </div>

            <!-- Security row -->
            <button @click.prevent="passwordModal = true" type="button"
                    class="bg-[#F9F9F9] rounded-xl p-4 border border-[#E0E5E5] hover:border-[#C8D1D1] transition-colors group flex items-center justify-between w-full">
                <div class="flex items-center space-x-3">
                    <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                        <i data-lucide="shield-check" class="w-4 h-4 text-primary-500"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-[#0D1B23]">Security & Password</p>
                        <p class="text-xs text-[#7A7A7A]">Manage your login password</p>
                    </div>
                </div>
                <i data-lucide="chevron-right" class="w-5 h-5 text-[#7A7A7A] group-hover:text-primary-500 transition-colors"></i>
            </button>

        </div>
    </div>

    <!-- ── Session / Logout ──────────────────────────────────────────────────── -->
    <div class="bg-white border border-[#E0E5E5] rounded-xl p-6">
        <h2 class="text-lg font-semibold text-[#0D1B23] flex items-center mb-6">
            <span class="w-9 h-9 rounded-lg bg-red-500/15 flex items-center justify-center mr-3">
                <i data-lucide="alert-triangle" class="w-4 h-4 text-[#D55672]"></i>
            </span>
            Session Management
        </h2>

        <div class="bg-red-500/5 border border-red-500/20 rounded-xl p-4">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <p class="text-sm font-semibold text-[#0D1B23] mb-1">Logout from all devices</p>
                    <p class="text-xs text-[#7A7A7A]">End all active sessions and require re-authentication</p>
                </div>
                <a href="<?= $web_url ?>/user/logout.php"
                   class="flex-shrink-0 px-5 py-2.5 rounded-lg bg-red-500/20 hover:bg-red-500/30 border border-red-500/40 transition-all font-semibold text-sm text-[#D55672] flex items-center space-x-2">
                    <i data-lucide="log-out" class="w-4 h-4"></i>
                    <span>Logout</span>
                </a>
            </div>
        </div>
    </div>

    <!-- ════════════════════════════════════════════════════════════════════════
         MODAL: Upload Profile Photo
    ═══════════════════════════════════════════════════════════════════════════ -->
    <div x-show="uploadModal"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         @click="uploadModal = false"
         class="fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-4"
         style="display: none;">
        <div x-show="uploadModal"
             x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
             x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0"
             @click.stop
             class="bg-white rounded-xl max-w-md w-full border border-[#E0E5E5] overflow-hidden max-h-[90vh] overflow-y-auto">

            <div class="border-b border-[#E0E5E5] p-5 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-[#0D1B23] flex items-center">
                    <span class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center mr-3">
                        <i data-lucide="camera" class="w-4 h-4 text-[#7A7A7A]"></i>
                    </span>
                    Update Profile Photo
                </h3>
                <button @click="uploadModal = false" class="p-2 rounded-lg hover:bg-[#DFE5E5] transition-colors">
                    <i data-lucide="x" class="w-5 h-5 text-[#7A7A7A]"></i>
                </button>
            </div>

            <form action="<?= $web_url ?>/user/upload-photo.php" method="POST" enctype="multipart/form-data" class="p-6 space-y-5">

                <div class="flex justify-center">
                    <img src="<?= htmlspecialchars($acctPhotoUrl) ?>" alt="Current Photo"
                         class="w-24 h-24 rounded-xl object-cover border-2 border-[#C8D1D1]">
                </div>

                <div>
                    <label class="block text-sm font-semibold mb-3 text-[#0D1B23]">New Profile Picture</label>
                    <div class="relative border-2 border-dashed border-[#E0E5E5] hover:border-primary-300 rounded-xl transition-all">
                        <input type="file" name="photo" required accept="image/*"
                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                        <div class="p-8 text-center">
                            <div class="w-14 h-14 mx-auto mb-3 rounded-xl bg-[#DFE5E5] flex items-center justify-center">
                                <i data-lucide="upload" class="w-7 h-7 text-[#7A7A7A]"></i>
                            </div>
                            <p class="text-sm font-semibold text-[#4A4A4A] mb-1">Click to upload new photo</p>
                            <p class="text-xs text-[#7A7A7A]">PNG, JPG up to 5MB</p>
                        </div>
                    </div>
                </div>

                <div class="bg-[#F9F9F9] border border-[#E0E5E5] rounded-xl p-4">
                    <div class="flex items-start space-x-3">
                        <i data-lucide="info" class="w-5 h-5 text-[#7A7A7A] flex-shrink-0 mt-0.5"></i>
                        <p class="text-xs text-[#4A4A4A]">Your photo will be displayed across your account and in transaction history.</p>
                    </div>
                </div>

                <button type="submit"
                        class="w-full px-6 py-3.5 rounded-xl bg-primary-500 hover:bg-primary-600 transition-colors font-semibold text-white flex items-center justify-center space-x-2">
                    <i data-lucide="check" class="w-5 h-5"></i>
                    <span>Update Profile Photo</span>
                </button>
            </form>
        </div>
    </div>

    <!-- ════════════════════════════════════════════════════════════════════════
         MODAL: Change PIN — posts to self with name="change_pin"
    ═══════════════════════════════════════════════════════════════════════════ -->
    <div x-show="pinModal"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         @click="pinModal = false"
         class="fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-4"
         style="display: none;">
        <div x-show="pinModal"
             x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
             x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0"
             @click.stop
             class="bg-white rounded-xl max-w-md w-full border border-[#E0E5E5] overflow-hidden max-h-[90vh] overflow-y-auto">

            <div class="border-b border-[#E0E5E5] p-5 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-[#0D1B23] flex items-center">
                    <span class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center mr-3">
                        <i data-lucide="shield" class="w-4 h-4 text-primary-500"></i>
                    </span>
                    Change Transaction PIN
                </h3>
                <button @click="pinModal = false" class="p-2 rounded-lg hover:bg-[#DFE5E5] transition-colors">
                    <i data-lucide="x" class="w-5 h-5 text-[#7A7A7A]"></i>
                </button>
            </div>

            <form method="POST" class="p-6 space-y-5">
                <input type="hidden" name="change_pin" value="1">

                <div class="bg-[#EBBC46]/10 border border-[#EBBC46]/20 rounded-xl p-4">
                    <div class="flex items-start space-x-3">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-[#EBBC46] flex-shrink-0 mt-0.5"></i>
                        <p class="text-xs text-[#4A4A4A]">Your PIN authorizes all transactions. Choose a secure 4-digit code you can remember.</p>
                    </div>
                </div>

                <!-- Old PIN -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">Current PIN</label>
                    <div class="relative">
                        <input :type="showOldPin ? 'text' : 'password'"
                               name="current_pin" x-model="current_pin"
                               required minlength="4" maxlength="4"
                               inputmode="numeric" pattern="[0-9]+"
                               @input="current_pin = current_pin.replace(/\D/g,'')"
                               placeholder="••••"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-center text-lg font-mono tracking-widest">
                        <button type="button" @click="showOldPin = !showOldPin; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showOldPin ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>

                <!-- New PIN -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">New PIN</label>
                    <div class="relative">
                        <input :type="showNewPin ? 'text' : 'password'"
                               name="new_pin" x-model="new_pin"
                               required minlength="4" maxlength="4"
                               inputmode="numeric" pattern="[0-9]+"
                               @input="new_pin = new_pin.replace(/\D/g,'')"
                               placeholder="••••"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-center text-lg font-mono tracking-widest">
                        <button type="button" @click="showNewPin = !showNewPin; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showNewPin ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>

                <!-- Confirm PIN -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">Confirm New PIN</label>
                    <div class="relative">
                        <input :type="showConfirmPin ? 'text' : 'password'"
                               name="confirm_pin" x-model="confirm_pin"
                               required minlength="4" maxlength="4"
                               inputmode="numeric" pattern="[0-9]+"
                               @input="confirm_pin = confirm_pin.replace(/\D/g,'')"
                               placeholder="••••"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-center text-lg font-mono tracking-widest"
                               :class="confirm_pin && confirm_pin !== new_pin ? 'border-[#D55672]' : ''">
                        <button type="button" @click="showConfirmPin = !showConfirmPin; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showConfirmPin ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <p x-show="confirm_pin && confirm_pin !== new_pin" class="text-xs text-[#D55672] mt-1">PINs do not match</p>
                </div>

                <button type="submit"
                        :disabled="!current_pin || !new_pin || !confirm_pin || new_pin !== confirm_pin || new_pin.length < 4"
                        class="w-full px-6 py-3.5 rounded-xl bg-primary-500 hover:bg-primary-600 transition-colors font-semibold text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2">
                    <i data-lucide="lock" class="w-5 h-5"></i>
                    <span>Update Transaction PIN</span>
                </button>

                <p class="text-xs text-center text-[#7A7A7A]">
                    <i data-lucide="shield-check" class="w-3 h-3 inline mr-1"></i>
                    Your PIN is never stored in plain text
                </p>
            </form>
        </div>
    </div>

    <!-- ════════════════════════════════════════════════════════════════════════
         MODAL: Change Password — posts to self with name="change_password"
    ═══════════════════════════════════════════════════════════════════════════ -->
    <div x-show="passwordModal"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         @click="passwordModal = false"
         class="fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-4"
         style="display: none;">
        <div x-show="passwordModal"
             x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
             x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0"
             @click.stop
             class="bg-white rounded-xl max-w-md w-full border border-[#E0E5E5] overflow-hidden max-h-[90vh] overflow-y-auto">

            <div class="border-b border-[#E0E5E5] p-5 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-[#0D1B23] flex items-center">
                    <span class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center mr-3">
                        <i data-lucide="key" class="w-4 h-4 text-[#7A7A7A]"></i>
                    </span>
                    Change Password
                </h3>
                <button @click="passwordModal = false" class="p-2 rounded-lg hover:bg-[#DFE5E5] transition-colors">
                    <i data-lucide="x" class="w-5 h-5 text-[#7A7A7A]"></i>
                </button>
            </div>

            <form method="POST" class="p-6 space-y-5">
                <input type="hidden" name="change_password" value="1">

                <div class="bg-[#F9F9F9] border border-[#E0E5E5] rounded-xl p-4">
                    <div class="flex items-start space-x-3">
                        <i data-lucide="info" class="w-5 h-5 text-[#7A7A7A] flex-shrink-0 mt-0.5"></i>
                        <p class="text-xs text-[#4A4A4A]">Choose a strong password with at least 8 characters, including uppercase, lowercase, numbers, and special characters.</p>
                    </div>
                </div>

                <!-- Old Password -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">Current Password</label>
                    <div class="relative">
                        <input :type="showOldPass ? 'text' : 'password'"
                               name="old_password" x-model="old_password"
                               required autocomplete="current-password"
                               placeholder="Enter your current password"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-sm">
                        <button type="button" @click="showOldPass = !showOldPass; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showOldPass ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>

                <!-- New Password -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">New Password</label>
                    <div class="relative">
                        <input :type="showNewPass ? 'text' : 'password'"
                               name="new_password" x-model="new_password"
                               required autocomplete="new-password"
                               placeholder="Enter new password"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-sm">
                        <button type="button" @click="showNewPass = !showNewPass; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showNewPass ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>

                <!-- Confirm Password -->
                <div>
                    <label class="block text-xs uppercase tracking-wider font-semibold mb-2 text-[#7A7A7A]">Confirm New Password</label>
                    <div class="relative">
                        <input :type="showConfirmPass ? 'text' : 'password'"
                               name="confirm_password" x-model="confirm_password"
                               required autocomplete="new-password"
                               placeholder="Confirm new password"
                               class="field-input w-full px-4 py-3 pr-12 rounded-lg text-sm"
                               :class="confirm_password && confirm_password !== new_password ? 'border-[#D55672]' : ''">
                        <button type="button" @click="showConfirmPass = !showConfirmPass; setTimeout(() => lucide.createIcons(), 50)"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-[#7A7A7A] hover:text-primary-500 transition-colors">
                            <i :data-lucide="showConfirmPass ? 'eye-off' : 'eye'" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <p x-show="confirm_password && confirm_password !== new_password" class="text-xs text-[#D55672] mt-1">Passwords do not match</p>
                </div>

                <button type="submit"
                        :disabled="!old_password || !new_password || !confirm_password || new_password !== confirm_password"
                        class="w-full px-6 py-3.5 rounded-xl bg-primary-500 hover:bg-primary-600 transition-colors font-semibold text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2">
                    <i data-lucide="check" class="w-5 h-5"></i>
                    <span>Change Password</span>
                </button>

                <p class="text-xs text-center text-[#7A7A7A]">
                    <i data-lucide="lock" class="w-3 h-3 inline mr-1"></i>
                    Your password is encrypted with industry-standard security
                </p>
            </form>
        </div>
    </div>

</div><!-- end x-data -->

<script>
document.addEventListener('DOMContentLoaded', function () {
    lucide.createIcons();
});
document.addEventListener('click', function () {
    setTimeout(() => lucide.createIcons(), 100);
});
</script>

</div>
</main>

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
?>