<%- include('header') %>
    <div class="bg-gray-100 pt-4 w-full text-sm">
        <div class="flex min-h-screen md:w-8/12 mx-auto">
            <!-- Sidebar -->
            <%- include('profile-sidebar') %>
                <!-- Profile Content -->
                <div class="flex-1 p-2">
                    <!-- Personal Information Header -->
                    <div class="bg-white p-4 shadow-md mb-4">
                        <div class="flex items-center">
                            <h2 class="text-xl font-semibold text-gray-800">Personal Information</h2>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mt-4">
                            <!-- Name -->
                            <form id="nameForm" action="/account/update-name" method="POST" class="flex items-center">
                                <div class="w-full">
                                    <label class="text-gray-600">Name</label>
                                    <input id="nameInput" type="text" name="name" class="w-full border p-2 rounded-lg"
                                        value="<%= user.name %>" disabled>
                                </div>
                                <div class="flex items-center">
                                    <a href="#" class="text-primary ml-2" id="nameEdit" onclick="editField('name')">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <a href="#" class="text-red-500 ml-2 hidden" id="nameCancel"
                                        onclick="cancelEdit('name')">
                                        <i class="fas fa-times"></i>
                                    </a>
                                    <button type="submit" class="text-green-500 ml-2 hidden" id="nameSubmit">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </div>
                            </form>
                            <!-- Email -->
                            <div class="flex items-center mt-5">
                                <div class="w-full">
                                    <label class="text-gray-600">Email Address</label>
                                    <input id="emailInput" type="email" name="email"
                                        class="w-full border p-2 rounded-lg" value="<%= user.email %>" disabled>
                                </div>
                            </div>
                            <!-- Phone -->
                            <form id="phoneForm" action="/account/update-phone" method="POST" class="flex items-center mt-5">
                                <div class="w-full">
                                    <label class="text-gray-600">Mobile Number</label>
                                    <input id="phoneInput" type="tel" name="phone_number"
                                        class="w-full border p-2 rounded-lg" value="<%= user.phone_number %>" disabled>
                                </div>
                                <div class="flex items-center">
                                    <a href="#" class="text-primary ml-2" id="phoneEdit" onclick="editField('phone')">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <a href="#" class="text-red-500 ml-2 hidden" id="phoneCancel"
                                        onclick="cancelEdit('phone')">
                                        <i class="fas fa-times"></i>
                                    </a>
                                    <button type="submit" class="text-green-500 ml-2 hidden" id="phoneSubmit">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="bg-white p-4 shadow-md">
                        <h3 class="text-lg font-semibold text-gray-800">FAQs</h3>
                        <div class="mt-4 space-y-4">
                            <div>
                                <h4 class="font-semibold text-gray-600">What happens when I update my email address?
                                </h4>
                                <p class="text-gray-500">Your login email id will change. You'll receive account-related
                                    communication at your updated email address.</p>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-600">When will my ToyHub account be updated?</h4>
                                <p class="text-gray-500">Your account will be updated as soon as you confirm the
                                    verification code sent to your email or mobile.</p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <script>
        function editField(field) {
            // Enable the input field
            document.getElementById(`${field}Input`).disabled = false;

            // Show cancel (cross) and submit (tick) buttons
            document.getElementById(`${field}Edit`).classList.add('hidden');
            document.getElementById(`${field}Cancel`).classList.remove('hidden');
            document.getElementById(`${field}Submit`).classList.remove('hidden');

            // Focus on the input field
            document.getElementById(`${field}Input`).focus();
        }

        function cancelEdit(field) {
            // Reset the field value to its original value
            document.getElementById(`${field}Input`).disabled = true;

            // Hide cancel (cross) and submit (tick) buttons
            document.getElementById(`${field}Edit`).classList.remove('hidden');
            document.getElementById(`${field}Cancel`).classList.add('hidden');
            document.getElementById(`${field}Submit`).classList.add('hidden');
        }
    </script>