<%- 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 justify-between">
                    <h2 class="text-xl font-semibold text-gray-800">Manage Addresses</h2>
                    <a href="javascript:void(0);" onclick="toggleAddressForm()" class="bg-primary text-white px-4 py-2 rounded-md text-sm">
                        Add New Address
                    </a>
                </div>

                <!-- Hidden Form (Initially Hidden) -->
                <div id="addAddressForm" class="hidden mt-4">
                    <form action="/account/add-address" method="POST" class="bg-white p-4 shadow-md">
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="block text-gray-600">Contact Name</label>
                                <input type="text" name="name" class="w-full border p-2 rounded-lg" placeholder="Mohammed Raihan" required>
                            </div>
                            <div>
                                <label class="block text-gray-600">Street Address</label>
                                <input type="text" name="street" class="w-full border p-2 rounded-lg" placeholder="123 Main Street, Anytown, USA, 12345" required>
                            </div>
                            <div>
                                <label class="block text-gray-600">City</label>
                                <input type="text" name="city" class="w-full border p-2 rounded-lg" placeholder="Trivandrum" required>
                            </div>
                            <div>
                                <label class="block text-gray-600">State</label>
                                <input type="text" name="state" class="w-full border p-2 rounded-lg" placeholder="Kerla" required>
                            </div>
                            <div>
                                <label class="block text-gray-600">Postal Code</label>
                                <input type="text" name="zip" class="w-full border p-2 rounded-lg" placeholder="695505" required>
                            </div>
                            <div>
                                <label class="block text-gray-600">Phone Number</label>
                                <input type="text" name="phone" class="w-full border p-2 rounded-lg" placeholder="9876543210" required>
                            </div>
                        </div>
                        <div class="flex justify-end mt-4">
                            <button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">Submit</button>
                        </div>
                    </form>
                </div>

                <!-- Existing Address List -->
                <div class="grid grid-cols-1 gap-2 mt-4">
                    <div class="bg-white shadow-md mb-4">
                        <% if (user.addresses && user.addresses.length > 0) { %> 
                        <% user.addresses.forEach(address => { %> 
                        <div class="border p-4 mb-4">
                            <div class="flex justify-between">
                                <div>
                                    <p class="font-semibold text-gray-800"><%= address.name %></p>
                                    <p class="text-gray-600"><%= address.street %>, <%= address.city %></p>
                                    <p class="text-gray-600"><%= address.state %> - <%= address.zip %></p>
                                    <p class="text-gray-600">Phone: <%= address.phone %></p>
                                </div>
                                <div class="flex items-center">
                                    <a href="/account/edit-address/<%= address._id %>" class="text-primary ml-2">
                                        <i class="fas fa-pencil-alt"></i> Edit
                                    </a>
                                    <form action="/account/delete-address/<%= address._id %>" method="POST" class="ml-4 delete-address-form">
                                      <button type="submit" class="text-red-500">
                                          <i class="fas fa-trash-alt"></i> Delete
                                      </button>
                                  </form>
                                </div>
                            </div>
                        </div>
                        <% }) %> 
                        <% } else { %> 
                        <p class="text-gray-600">No addresses found. Add a new address to manage your delivery locations.</p>
                        <% } %>
                    </div>
                </div>
            </div>

            <div class="bg-white p-4 shadow-md">
                <h3 class="text-lg font-semibold text-gray-800">Address Management</h3>
                <p class="text-gray-600">Manage your delivery addresses for a smoother shopping experience. You can add, edit, or delete addresses as needed.</p>
                <div class="mt-4">
                    <p class="text-gray-600">To add a new address, click the "Add New Address" button above. You can edit or delete existing addresses by clicking on the respective icons next to each address.</p>
                    <p class="text-gray-600">Please ensure to keep your addresses up-to-date to avoid any delivery issues.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to toggle the Add Address form visibility
    function toggleAddressForm() {
        const form = document.getElementById('addAddressForm');
        form.classList.toggle('hidden');
    }
    // Select all forms that handle address deletion
    const deleteForms = document.querySelectorAll('.delete-address-form');

    // Loop through each form and attach an event listener for SweetAlert confirmation
    deleteForms.forEach(form => {
        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            // Trigger SweetAlert confirmation dialog
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you really want to delete this address? This action cannot be undone!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#19D16F',
                cancelButtonColor: '#b7b7b8',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    // If confirmed, submit the form programmatically
                    form.submit();
                }
            });
        });
    });
</script>
