<?php include 'header.php'; ?>

<div style="padding:24px;font-family:sans-serif;box-sizing:border-box">
    
<div style="display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:stretch">

    <!-- Left Profile Card -->
    <div style="background:#fff; border:1px solid #e5e7eb; border-radius:24px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.04); min-height:100%;">
        <div style="text-align:center">

            <!-- Avatar -->
            <div style="position:relative;display:inline-block">
                <img src="https://i.pravatar.cc/200?img=12"
                     style="width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #eef2ff"
                     alt="Rahul Sharma">

                <span style="position:absolute;bottom:8px;right:4px;width:18px;height:18px;background:#22c55e;border:3px solid #fff;border-radius:50%"></span>
            </div>

            <h2 style="margin:16px 0 4px;font-size:22px;font-weight:700;color:#111827">
                Rahul Sharma
            </h2>

            <p style="margin:0;color:#6b7280;font-size:14px">
                Senior Frontend Developer
            </p>

            <span style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#eef2ff;color:#4f46e5;border-radius:999px;font-size:12px;font-weight:600;margin-top:14px">
                Frontend Developer
            </span>

        </div>

        <div style="height:1px;background:#f1f5f9;margin:24px 0"></div>

        <!-- Employee ID -->
        <div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #f1f5f9;border-radius:14px;background:#fafafa;margin-bottom:12px">

            <div style="width:42px;height:42px;background:#eef2ff;color:#4f46e5;border-radius:12px;display:flex;align-items:center;justify-content:center">
                <i class="ri-id-card-line"></i>
            </div>

            <div>
                <p style="margin:0;font-size:11px;color:#9ca3af">
                    Employee ID
                </p>
                <p style="margin:2px 0 0;font-size:14px;font-weight:600;color:#111827">
                    EMP-1025
                </p>
            </div>

        </div>


        <!-- Joining Date -->
        <div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #f1f5f9;border-radius:14px;background:#fafafa;margin-bottom:12px">

            <div style="width:42px;height:42px;background:#eff6ff;color:#3b82f6;border-radius:12px;display:flex;align-items:center;justify-content:center">
                <i class="ri-calendar-line"></i>
            </div>

            <div>
                <p style="margin:0;font-size:11px;color:#9ca3af">
                    Joining Date
                </p>
                <p style="margin:2px 0 0;font-size:14px;font-weight:600;color:#111827">
                    12 Jan 2023
                </p>
            </div>

        </div>

        <!-- Status -->
        <div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #f1f5f9;border-radius:14px;background:#fafafa">

            <div style="width:42px;height:42px;background:#f0fdf4;color:#22c55e;border-radius:12px;display:flex;align-items:center;justify-content:center">
                <i class="ri-user-follow-line"></i>
            </div>

            <div>
                <p style="margin:0;font-size:11px;color:#9ca3af">
                    Employment Type
                </p>
                <p style="margin:2px 0 0;font-size:14px;font-weight:600;color:#111827">
                    Full Time
                </p>
            </div>

        </div>
        
        <div style="margin-top:20px">

    <button onclick="openPasswordModal()" style="width:100%;height:46px;border:none;border-radius:12px;background:#111827;color:#fff;font-size:14px;font-weight:600;cursor:pointer;">
        Change Password
    </button>

</div>

    </div>
    
    <!-- Right Column -->
    <div style="display:flex;flex-direction:column;gap:20px">
        
        <!-- Contact Information -->
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.03)">
        
                <div class="flex items-center justify-between mb-2">
                
                    <div>
                        <h3 class="font-bold text-slate-800">
                            Contact Information
                        </h3>
                        <p class="text-xs text-slate-400">
                            Employee contact details
                        </p>
                    </div>
                
<div class="flex items-center gap-2">

    <button id="editBtn"
    onclick="editContactInfo()"
    class="w-9 h-9 rounded-lg bg-slate-100 flex items-center justify-center">
        <i class="ri-pencil-line"></i>
    </button>

    <div id="actionBtns" class="hidden flex gap-2">

        <button onclick="saveContactInfo()"
        class="px-3 py-1 bg-green-600 text-white rounded-lg text-sm">
            Save
        </button>

        <button onclick="cancelContactInfo()"
        class="px-3 py-1 bg-slate-200 rounded-lg text-sm">
            Cancel
        </button>

    </div>

</div>
                
                </div>
        
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px">
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px">
                        Email Address
                    </p>
        
                 <div id="emailView">
    <p id="emailText" style="margin:0;font-size:14px;font-weight:600;color:#2563eb">
        rajesh21@gmail.com
    </p>
</div>

<div id="emailEdit" class="hidden mt-2">
    <input
    id="emailInput"
    type="email"
    value="rajesh21@gmail.com"
    class="w-full h-10 px-3 border border-gray-200 rounded-lg">
</div>
                </div>
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px">
                        Phone Number
                    </p>
        
                    <div id="phoneView">
    <p id="phoneText" style="margin:0;font-size:14px;font-weight:600;color:#111827">
        +91 9876543210
    </p>
</div>

<div id="phoneEdit" class="hidden mt-2">
    <input
    id="phoneInput"
    type="tel"
    value="9876543210"
    class="w-full h-10 px-3 border border-gray-200 rounded-lg">
</div>
                </div>
        
            </div>
        
        </div>
        
        <!-- Personal Information -->
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.03)">
                
            <div class="flex items-center justify-between mb-2">
            
                <div>
                    <h3 class="font-bold text-slate-800">
                        Personal Information
                    </h3>
                    <p class="text-xs text-slate-400">
                        Basic employee details
                    </p>
                </div>
            
                <div class="flex items-center gap-2">
            
                    <button id="personalEditBtn"
                    onclick="editPersonalInfo()"
                    class="w-9 h-9 rounded-xl bg-slate-100 hover:bg-indigo-100 text-slate-600 hover:text-indigo-600 flex items-center justify-center transition">
                        <i class="ri-pencil-line"></i>
                    </button>
            
                    <div id="personalActionBtns" class="hidden flex gap-2">
            
                        <button onclick="savePersonalInfo()"
                        class="px-3 py-1 bg-green-600 text-white rounded-lg text-sm">
                            Save
                        </button>
            
                        <button onclick="cancelPersonalInfo()"
                        class="px-3 py-1 bg-slate-200 rounded-lg text-sm">
                            Cancel
                        </button>
            
                    </div>
            
                </div>
            
            </div>
        
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px">
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase">
                        Date of Birth
                    </p>
        
                   <div id="dobView">
    <p style="margin:0;font-size:14px;font-weight:600;color:#111827">
        15 Aug 1999
    </p>
</div>

<div id="dobEdit" class="hidden">
    <input type="date"
    class="w-full h-10 px-3 border border-gray-200 rounded-lg"
    value="1999-08-15">
</div>
                </div>
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase">
                        Gender
                    </p>
        
 <div id="genderView">
        <p id="genderText" style="margin:0;font-size:14px;font-weight:600;color:#111827">
            Male
        </p>
    </div>

    <div id="genderEdit" class="hidden">
        <select id="genderInput"
        class="w-full h-10 px-3 border border-gray-200 rounded-lg mt-2">
            <option selected>Male</option>
            <option>Female</option>
            <option>Other</option>
        </select>
    </div>
                </div>
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase">
                        Joining Date
                    </p>
        
              <div id="joiningView">
                    <p id="joiningText" style="margin:0;font-size:14px;font-weight:600;color:#111827">
                        12 Jan 2023
                    </p>
                </div>
            
                <div id="joiningEdit" class="hidden">
                    <input
                    id="joiningInput"
                    type="date"
                    value="2023-01-12"
                    class="w-full h-10 px-3 border border-gray-200 rounded-lg mt-2">
                </div>
                </div>
        
                <div style="padding:16px;border:1px solid #f1f5f9;border-radius:16px;background:#fafafa">
                    <p style="margin:0 0 6px;font-size:11px;color:#9ca3af;text-transform:uppercase">
                        Employment Type
                    </p>
        
<div id="employmentView">
        <p id="employmentText" style="margin:0;font-size:14px;font-weight:600;color:#111827">
            Full Time
        </p>
    </div>

    <div id="employmentEdit" class="hidden">
        <select id="employmentInput"
        class="w-full h-10 px-3 border border-gray-200 rounded-lg mt-2">
            <option selected>Full Time</option>
            <option>Part Time</option>
            <option>Contract</option>
            <option>Intern</option>
        </select>
    </div>
                </div>
        
            </div>
        
        </div>
        
        <!-- Address Information -->
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.03)">
        
                
<div class="flex items-center justify-between mb-2">

    <div>
        <h3 class="font-bold text-slate-800">
            Address Information
        </h3>
        <p class="text-xs text-slate-400">
            Current and permanent address details
        </p>
    </div>

    <div class="flex items-center gap-2">

        <button id="addressEditBtn"
        onclick="editAddressInfo()"
        class="w-9 h-9 rounded-xl border-gray-200 hover:bg-indigo-100 text-slate-600 hover:text-indigo-600 flex items-center justify-center transition">
            <i class="ri-pencil-line"></i>
        </button>

        <div id="addressActionBtns" class="hidden flex gap-2">

            <button onclick="saveAddressInfo()"
            class="px-3 py-1 bg-green-600 text-white rounded-lg text-sm">
                Save
            </button>

            <button onclick="cancelAddressInfo()"
            class="px-3 py-1 bg-slate-200 rounded-lg text-sm">
                Cancel
            </button>

        </div>

    </div>

</div>
        
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px">
        
                <!-- Current Address -->
                <div style="background:#fafafa;border:1px solid #e5e7eb;border-radius:18px;padding:18px">
        
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
        
                        <div style="width:34px;height:34px;border-radius:10px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center">
                            <i class="ri-home-line"></i>
                        </div>
        
                        <p style="margin:0;font-size:13px;font-weight:700;color:#374151">
                            Current Address
                        </p>
        
                    </div>
        
<div id="currentAddressView">
    <p style="margin:0;font-size:13px;color:#111827;line-height:1.8">
        302, Shree Residency,
        Adajan, Surat,
        Gujarat – 395009
    </p>
</div>

<div id="currentAddressEdit" class="hidden">
    <textarea id="currentAddressInput"
    class="w-full border border-gray-200 rounded-lg p-3"
    rows="4">302, Shree Residency, Adajan, Surat, Gujarat – 395009</textarea>
</div>
        
                </div>
        
                <!-- Permanent Address -->
                <div style="background:#fafafa;border:1px solid #e5e7eb;border-radius:18px;padding:18px">
        
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
        
                        <div style="width:34px;height:34px;border-radius:10px;background:#ecfdf5;color:#10b981;display:flex;align-items:center;justify-content:center">
                            <i class="ri-building-line"></i>
                        </div>
        
                        <p style="margin:0;font-size:13px;font-weight:700;color:#374151">
                            Permanent Address
                        </p>
        
                    </div>
        
<div id="permanentAddressView">
    <p style="margin:0;font-size:13px;color:#111827;line-height:1.8">
        45 Krishna Park Society,
        Varachha, Surat,
        Gujarat – 395006
    </p>
</div>

<div id="permanentAddressEdit" class="hidden">
    <textarea id="permanentAddressInput"
    class="w-full border border-gray-200 rounded-lg p-3"
    rows="4">45 Krishna Park Society, Varachha, Surat, Gujarat – 395006</textarea>
</div>
        
                </div>
        
            </div>
        
        </div>
        
    </div>


</div>


<!-- Change Password Modal -->
<div id="passwordModal"
    class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/60 backdrop-blur-sm p-4">

    <div class="w-full max-w-lg overflow-hidden rounded-3xl bg-white shadow-2xl">

        <!-- Header -->
        <div class="relative bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 px-6 py-6">

            <button onclick="closePasswordModal()"
                class="absolute right-5 top-5 h-9 w-9 rounded-full bg-white/20 text-white hover:bg-white/30 transition">
                <i class="ri-close-line text-xl"></i>
            </button>

            <div class="flex items-center gap-4">

                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/20 backdrop-blur">
                    <i class="ri-lock-password-line text-2xl text-white"></i>
                </div>

                <div>
                    <h3 class="text-xl font-bold text-white">
                        Change Password
                    </h3>

                    <p class="text-sm text-indigo-100">
                        Update your account security
                    </p>
                </div>

            </div>

        </div>

        <!-- Body -->
        <div class="p-6 space-y-5">

            <!-- Old Password -->
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">
                    Old Password
                </label>

                <div class="relative">
                    <i class="ri-lock-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                    <input
                        id="oldPassword"
                        type="password"
                        placeholder="Enter old password"
                        class="h-12 w-full rounded-2xl border border-slate-200 bg-slate-50 pl-11 pr-4 outline-none focus:border-indigo-500 focus:bg-white">
                </div>
            </div>

            <!-- New Password -->
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">
                    New Password
                </label>

                <div class="relative">
                    <i class="ri-shield-keyhole-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                    <input
                        id="newPassword"
                        type="password"
                        placeholder="Enter new password"
                        class="h-12 w-full rounded-2xl border border-slate-200 bg-slate-50 pl-11 pr-4 outline-none focus:border-indigo-500 focus:bg-white">
                </div>
            </div>

            <!-- Confirm Password -->
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">
                    Confirm Password
                </label>

                <div class="relative">
                    <i class="ri-check-double-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                    <input
                        id="confirmPassword"
                        type="password"
                        placeholder="Confirm new password"
                        class="h-12 w-full rounded-2xl border border-slate-200 bg-slate-50 pl-11 pr-4 outline-none focus:border-indigo-500 focus:bg-white">
                </div>
            </div>

        </div>

        <!-- Footer -->
        <div class="flex items-center justify-end gap-3 border-t border-slate-100 p-5">

            <button onclick="closePasswordModal()"
                class="h-11 rounded-xl border border-slate-200 px-5 font-medium text-slate-600 hover:bg-slate-50 transition">
                Cancel
            </button>

            <button onclick="savePassword()"
                class="h-11 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-6 font-semibold text-white shadow-lg hover:scale-105 transition">
                Save Password
            </button>

        </div>

    </div>

</div>

<script>
function openPasswordModal() {
    document.getElementById('passwordModal').classList.remove('hidden');
    document.getElementById('passwordModal').classList.add('flex');
}

function closePasswordModal() {
    document.getElementById('passwordModal').classList.add('hidden');
    document.getElementById('passwordModal').classList.remove('flex');
}

function savePassword() {

    let oldPass = document.getElementById('oldPassword').value;
    let newPass = document.getElementById('newPassword').value;
    let confirmPass = document.getElementById('confirmPassword').value;

    if (!oldPass || !newPass || !confirmPass) {
        Swal.fire({
            icon: 'warning',
            title: 'All fields are required',
            width: 350
        });
        return;
    }

    if (newPass !== confirmPass) {
        Swal.fire({
            icon: 'error',
            title: 'Passwords do not match',
            width: 350
        });
        return;
    }

    Swal.fire({
        icon: 'success',
        title: 'Password Changed Successfully',
        width: 350
    });

    closePasswordModal();
}
</script>

<script>
function editContactInfo(){

    emailView.classList.add('hidden');
    phoneView.classList.add('hidden');

    emailEdit.classList.remove('hidden');
    phoneEdit.classList.remove('hidden');

    editBtn.classList.add('hidden');
    actionBtns.classList.remove('hidden');
}

function saveContactInfo(){

    emailText.innerText = emailInput.value;
    phoneText.innerText = '+91 ' + phoneInput.value;

    cancelContactInfo();
}

function cancelContactInfo(){

    emailView.classList.remove('hidden');
    phoneView.classList.remove('hidden');

    emailEdit.classList.add('hidden');
    phoneEdit.classList.add('hidden');

    editBtn.classList.remove('hidden');
    actionBtns.classList.add('hidden');
}

function editPersonalInfo(){

    personalEditBtn.classList.add('hidden');
    personalActionBtns.classList.remove('hidden');

    dobView.classList.add('hidden');
    dobEdit.classList.remove('hidden');

    genderView.classList.add('hidden');
    genderEdit.classList.remove('hidden');

    joiningView.classList.add('hidden');
    joiningEdit.classList.remove('hidden');

    employmentView.classList.add('hidden');
    employmentEdit.classList.remove('hidden');
}

function cancelPersonalInfo(){

    personalEditBtn.classList.remove('hidden');
    personalActionBtns.classList.add('hidden');

    dobView.classList.remove('hidden');
    dobEdit.classList.add('hidden');

    genderView.classList.remove('hidden');
    genderEdit.classList.add('hidden');

    joiningView.classList.remove('hidden');
    joiningEdit.classList.add('hidden');

    employmentView.classList.remove('hidden');
    employmentEdit.classList.add('hidden');
}

function editAddressInfo(){

    currentAddressView.classList.add('hidden');
    permanentAddressView.classList.add('hidden');

    currentAddressEdit.classList.remove('hidden');
    permanentAddressEdit.classList.remove('hidden');

    addressEditBtn.classList.add('hidden');
    addressActionBtns.classList.remove('hidden');
}

function saveAddressInfo(){

    currentAddressView.innerHTML =
        '<p style="margin:0;font-size:13px;color:#111827;line-height:1.8">' +
        currentAddressInput.value +
        '</p>';

    permanentAddressView.innerHTML =
        '<p style="margin:0;font-size:13px;color:#111827;line-height:1.8">' +
        permanentAddressInput.value +
        '</p>';

    cancelAddressInfo();
}

function cancelAddressInfo(){

    currentAddressView.classList.remove('hidden');
    permanentAddressView.classList.remove('hidden');

    currentAddressEdit.classList.add('hidden');
    permanentAddressEdit.classList.add('hidden');

    addressEditBtn.classList.remove('hidden');
    addressActionBtns.classList.add('hidden');
}
</script>



<?php include 'footer.php'; ?>