{% extends 'accounts/base_account.html' %}
{% load widget_tweaks %}

{% block account_content %}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0">Edit Profile</h5>
    </div>
    <div class="card-body">
        <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
            {% csrf_token %}
            
            <div class="row">
                <div class="col-md-4 text-center mb-4">
                    <div class="profile-picture-container mb-3">
                        <div class="position-relative d-inline-block">
                            <img id="profilePicturePreview" 
                                 src="{{ user.get_profile_picture_url }}" 
                                 class="rounded-circle img-thumbnail" 
                                 alt="Profile Picture"
                                 style="width: 200px; height: 200px; object-fit: cover;">
                            <div class="position-absolute bottom-0 end-0">
                                <label for="id_profile_picture" class="btn btn-primary btn-sm rounded-circle" 
                                       style="width: 36px; height: 36px; line-height: 24px; cursor: pointer;">
                                    <i class="fas fa-camera"></i>
                                </label>
                                {{ form.profile_picture|add_class:"d-none" }}
                            </div>
                        </div>
                    </div>
                    <div class="form-text">
                        <small>Click on the camera icon to upload a new profile picture.</small>
                    </div>
                </div>
                
                <div class="col-md-8">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.first_name.id_for_label }}" class="form-label">
                                    {{ form.first_name.label }}
                                    {% if form.first_name.field.required %}<span class="text-danger">*</span>{% endif %}
                                </label>
                                {{ form.first_name|add_class:"form-control"|add_error_class:"is-invalid" }}
                                {% if form.first_name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.first_name.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.last_name.id_for_label }}" class="form-label">
                                    {{ form.last_name.label }}
                                    {% if form.last_name.field.required %}<span class="text-danger">*</span>{% endif %}
                                </label>
                                {{ form.last_name|add_class:"form-control"|add_error_class:"is-invalid" }}
                                {% if form.last_name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.last_name.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="form-group mb-3">
                                <label for="{{ form.bio.id_for_label }}" class="form-label">
                                    {{ form.bio.label }}
                                    <span class="text-muted small">(Optional)</span>
                                </label>
                                {{ form.bio|add_class:"form-control"|add_error_class:"is-invalid"|attr:"rows:4" }}
                                <div class="form-text">
                                    <small>Tell others about yourself, your experience with equipment, or anything else you'd like to share.</small>
                                </div>
                                {% if form.bio.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.bio.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.phone_number.id_for_label }}" class="form-label">
                                    {{ form.phone_number.label }}
                                    {% if form.phone_number.field.required %}<span class="text-danger">*</span>{% endif %}
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">+254</span>
                                    {{ form.phone_number|add_class:"form-control"|add_error_class:"is-invalid"|attr:"placeholder:" }}
                                </div>
                                {% if form.phone_number.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.phone_number.errors.0 }}
                                    </div>
                                {% endif %}
                                <div class="form-text">
                                    <small>Enter your phone number without the country code or leading zero.</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.location.id_for_label }}" class="form-label">
                                    {{ form.location.label }}
                                    <span class="text-muted small">(Optional)</span>
                                </label>
                                {{ form.location|add_class:"form-control"|add_error_class:"is-invalid" }}
                                {% if form.location.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.location.errors.0 }}
                                    </div>
                                {% endif %}
                                <div class="form-text">
                                    <small>City, State, Country</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <hr class="my-4">
                            <h5 class="mb-3">Social Media</h5>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.website.id_for_label }}" class="form-label">
                                    <i class="fas fa-globe me-1"></i> Website
                                </label>
                                {{ form.website|add_class:"form-control"|add_error_class:"is-invalid"|attr:"placeholder:https://" }}
                                {% if form.website.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.website.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.facebook_url.id_for_label }}" class="form-label">
                                    <i class="fab fa-facebook-f me-1"></i> Facebook
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">facebook.com/</span>
                                    {{ form.facebook_url|add_class:"form-control"|add_error_class:"is-invalid" }}
                                </div>
                                {% if form.facebook_url.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.facebook_url.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.twitter_handle.id_for_label }}" class="form-label">
                                    <i class="fab fa-twitter me-1"></i> Twitter
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">@</span>
                                    {{ form.twitter_handle|add_class:"form-control"|add_error_class:"is-invalid" }}
                                </div>
                                {% if form.twitter_handle.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.twitter_handle.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.instagram_handle.id_for_label }}" class="form-label">
                                    <i class="fab fa-instagram me-1"></i> Instagram
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">@</span>
                                    {{ form.instagram_handle|add_class:"form-control"|add_error_class:"is-invalid" }}
                                </div>
                                {% if form.instagram_handle.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.instagram_handle.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-12 mt-4">
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'accounts:profile' 'me' %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> Back to Profile
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Save Changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
// Profile picture preview
const profilePictureInput = document.getElementById('id_profile_picture');
const profilePicturePreview = document.getElementById('profilePicturePreview');

profilePictureInput.addEventListener('change', function(e) {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            profilePicturePreview.src = e.target.result;
        }
        reader.readAsDataURL(file);
    }
});

// Form validation
(function () {
    'use strict';
    
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation');
    
    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            form.classList.add('was-validated');
        }, false);
    });
})();

// Phone number formatting
const phoneNumberInput = document.getElementById('{{ form.phone_number.id_for_label }}');
if (phoneNumberInput) {
    phoneNumberInput.addEventListener('input', function(e) {
        // Remove any non-digit characters
        let value = this.value.replace(/\D/g, '');
        
        // Format as Kenyan phone number (7XX XXX XXX)
        if (value.length > 0) {
            value = value.match(new RegExp('.{1,3}', 'g')).join(' ');
        }
        
        this.value = value;
    });
}
</script>
{% endblock %}