{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Edit Customer</title>
{% endblock title %}

{% block content %}
<div class="page-content">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <form method="post" action="" enctype="multipart/form-data">
                    {% csrf_token %}

                    <!-- Thumbnail Upload Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Profile Photo</h4>
                            <div class="mb-3" id="file-previews" style="display: flex; flex-wrap: wrap; margin-top: 10px;">
                                {% if customer.profile_image %}
                                    <img src="{{ customer.profile_image.url }}" class="img-thumbnail" width="150px" alt="Customer Photo">
                                {% endif %}
                            </div>
                            <input class="form-control mt-3" name="profile" type="file" accept="image/png, image/jpeg, image/gif" id="imageUpload">
                        </div>
                    </div>

                    <!-- General Information Section -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Customer Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- First Name -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="first-name" class="form-label">First Name</label>
                                        <input type="text" name="first_name" id="first-name" class="form-control" value="{{ user.first_name }}" required>
                                    </div>
                                </div>

                                <!-- Last Name -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="last-name" class="form-label">Last Name</label>
                                        <input type="text" name="last_name" id="last-name" class="form-control" value="{{ user.last_name }}" required>
                                    </div>
                                </div>

                                <!-- Username -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="username" class="form-label">Username</label>
                                        <input type="text" name="username" id="username" class="form-control" value="{{ user.username }}" required>
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" name="email" id="email" class="form-control" value="{{ user.email }}" required>
                                    </div>
                                </div>

                                <!-- Phone Number -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="phone-number" class="form-label">Phone Number</label>
                                        <input type="text" name="phone_number" id="phone-number" class="form-control" value="{{ customer.phone_number }}" required>
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="status" class="form-label">Status</label>
                                        <select name="status" class="form-control" id="status" required>
                                            <option value="1" {% if customer.status == 1 %}selected{% endif %}>Active</option>
                                            <option value="0" {% if customer.status == 0 %}selected{% endif %}>Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Password -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="password" class="form-label">Password</label>
                                        <div class="input-group">
                                            <input type="password" name="password" id="password" class="form-control" placeholder="Leave blank to keep current password">
                                            <button type="button" class="btn btn-outline-secondary" id="toggle-password" onclick="togglePasswordVisibility('password')">
                                                <i class="bi bi-eye" id="password-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Confirm Password -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="confirm-password" class="form-label">Confirm Password</label>
                                        <div class="input-group">
                                            <input type="password" name="confirm_password" id="confirm-password" class="form-control" placeholder="Leave blank to keep current password">
                                            <button type="button" class="btn btn-outline-secondary" id="toggle-confirm-password" onclick="togglePasswordVisibility('confirm-password')">
                                                <i class="bi bi-eye" id="confirm-password-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Address Information Section -->
                                <div class="card-header">
                                    <h4 class="card-title">Customer Address</h4>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="address-line-1" class="form-label">Address Line 1</label>
                                        <input type="text" name="address_line_1" id="address-line-1" class="form-control" value="{{ address.address_line_1 }}" required>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="address-line-2" class="form-label">Address Line 2</label>
                                        <input type="text" name="address_line_2" id="address-line-2" class="form-control" value="{{ address.address_line_2 }}">
                                    </div>
                                </div>

                                <!-- City, State, Postal Code, Country -->
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="city" class="form-label">City</label>
                                        <input type="text" name="city" id="city" class="form-control" value="{{ address.city }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="state" class="form-label">State</label>
                                        <input type="text" name="state" id="state" class="form-control" value="{{ address.state }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="mb-3">
                                        <label for="postal-code" class="form-label">Postal Code</label>
                                        <input type="text" name="postal_code" id="postal-code" class="form-control" value="{{ address.postal_code }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="country" class="form-label">Country</label>
                                        <input type="text" name="country" id="country" class="form-control" value="{{ address.country }}" required>
                                    </div>
                                </div>

                                <!-- Is Default Address -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="is-default" class="form-label">Set as Default Address</label>
                                        <input type="checkbox" name="is_default" id="is-default" class="form-check-input" {% if address.is_default %}checked{% endif %}>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="p-3 bg-light mb-3 rounded">
                        <div class="row justify-content-end g-2">
                            <div class="col-lg-2">
                                <button type="submit" class="btn btn-outline-secondary w-100">Save</button>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% url 'customers_list' %}" class="btn btn-primary w-100">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <script>document.write(new Date().getFullYear())</script> &copy; Aquarium E-Commerce. Developed by 
                    <iconify-icon icon="iconamoon:heart-duotone" class="fs-18 align-middle text-danger"></iconify-icon> 
                    <a href="https://geegatechnologies.com/" class="fw-bold footer-text" target="_blank">GeegaTechnologies</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<!-- Add Bootstrap Icons for the eye icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<!-- Custom script for password visibility toggle -->
<script>
    function togglePasswordVisibility(fieldId) {
        const field = document.getElementById(fieldId);
        const eyeIcon = document.getElementById(fieldId + '-eye');
        if (field.type === 'password') {
            field.type = 'text';
            eyeIcon.classList.remove('bi-eye');
            eyeIcon.classList.add('bi-eye-slash');
        } else {
            field.type = 'password';
            eyeIcon.classList.remove('bi-eye-slash');
            eyeIcon.classList.add('bi-eye');
        }
    }


    document.getElementById('imageUpload').addEventListener('change', function(event) {
    const files = event.target.files;
    const previewsContainer = document.getElementById('file-previews');
    previewsContainer.innerHTML = ''; // Clear previous previews

    if (files.length === 0) {
        document.getElementById('fullImagePreview').style.display = 'none'; // Hide full preview
        return;
    }

    Array.from(files).forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewBox = document.createElement('div');
            previewBox.style.position = 'relative';
            previewBox.style.marginRight = '10px'; // Space between previews
            previewBox.style.width = '100px'; // Set desired width
            previewBox.style.height = '100px'; // Set desired height
            previewBox.style.overflow = 'hidden'; // Hide overflow
            previewBox.style.borderRadius = '8px'; // Optional: add border radius
            previewBox.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; // Optional: add shadow

            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100%'; // Fill the box width
            img.style.height = '100%'; // Fill the box height
            img.style.objectFit = 'cover'; // Cover the box area
            img.style.borderRadius = '8px'; // Optional: add border radius to the image

            // Click event to show the full image preview
            img.addEventListener('click', function() {
                document.getElementById('fullImage').src = e.target.result;
                document.getElementById('fullImagePreview').style.display = 'flex'; // Show full image preview
            });

            const removeButton = document.createElement('button');
            removeButton.innerText = 'X';
            removeButton.style.position = 'absolute';
            removeButton.style.top = '5px';
            removeButton.style.right = '5px';
            removeButton.style.backgroundColor = '#ff6c2f';
            removeButton.style.fontWeight = 'bold';
            removeButton.style.borderRadius = '50%';
            removeButton.style.color = 'white';
            removeButton.style.border = 'none';
            removeButton.style.cursor = 'pointer';
            removeButton.onclick = function() {
                // Remove the preview and the file from the input
                previewBox.remove();
                const newFileList = Array.from(files).filter((_, i) => i !== index);
                const dataTransfer = new DataTransfer();
                newFileList.forEach(file => dataTransfer.items.add(file));
                document.getElementById('imageUpload').files = dataTransfer.files;

                // If no files left, hide full image preview
                if (newFileList.length === 0) {
                    document.getElementById('fullImagePreview').style.display = 'none';
                }
            };

            previewBox.appendChild(img);
            previewBox.appendChild(removeButton);
            previewsContainer.appendChild(previewBox);
        };
        reader.readAsDataURL(file);
    });
});

</script>

{% endblock content %}