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

{% block title %}
    <title>Admin | Create 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="{% url 'customers_create' %}" 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;"></div>
                            <input class="form-control mt-3" name="profile" type="file" accept="image/png, image/jpeg, image/gif" id="imageUpload" required>
                        </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" placeholder="Enter 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" placeholder="Enter 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" placeholder="Enter 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" placeholder="Enter Email" required>
                                    </div>
                                </div>

                                <!-- Phone Number (required) -->
                                <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" placeholder="Enter 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">Active</option>
                                            <option value="0">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="Enter Password" required>
                                            <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="Confirm Password" required>
                                            <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" placeholder="Enter 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" placeholder="Enter Address Line 2">
                                    </div>
                                </div>
                                <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" placeholder="Enter 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" placeholder="Enter 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" placeholder="Enter 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" placeholder="Enter 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">
                                    </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">Create</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@1.10.0/font/bootstrap-icons.css">


<script>
    function togglePasswordVisibility(id) {
        const passwordField = document.getElementById(id);
        const eyeIcon = document.getElementById(`${id}-eye`);
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            eyeIcon.classList.remove('bi-eye');
            eyeIcon.classList.add('bi-eye-slash');
        } else {
            passwordField.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 %}