{% extends "userapp/master.html" %}
{% load static %}
{% block content %}

<body>

    <!-- Start Hero Section -->
    <div class="hero">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-5">
                    <div class="intro-excerpt">
                        <h1>Update Profile</h1>
                    </div>
                </div>
                <div class="col-lg-7"></div>
            </div>
        </div>
    </div>
    <!-- End Hero Section -->

<div class="container profile-container">
    <div class="card">
        <div class="card-header">
            <h4><i class="fas fa-user-edit"></i> Manage Profile</h4>
        </div>
        <div class="card-body">
            
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-success" id="successMessage">
                        <i class="fas fa-check-circle"></i> {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label class="form-label"><i class="fas fa-user"></i> Username</label>
                    <input type="text" name="username" class="form-control" value="{{ user.username }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label"><i class="fas fa-envelope"></i> Email</label>
                    <input type="email" name="email" class="form-control" value="{{ user.email }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label"><i class="fas fa-phone"></i> Phone</label>
                    <input type="tel" name="phone" class="form-control" value="{{ user.phone|default_if_none:'' }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label"><i class="fas fa-map-marker-alt"></i> Address</label>
                    <textarea name="address" class="form-control" rows="2" required>{{ user.address|default_if_none:'' }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary w-100"><i class="fas fa-edit"></i> Update Profile</button>
            </form>

            <!-- Button to redirect to user index view -->
            <a href="{% url 'userindex' %}" class="btn btn-secondary w-100"><i class="fas fa-home"></i> Go to Dashboard</a>
        </div>
    </div>
</div>

<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script>
    // Hide the success message after 3 seconds
    window.onload = function() {
        var successMessage = document.getElementById("successMessage");
        if (successMessage) {
            setTimeout(function() {
                successMessage.classList.add("fade-out");
                setTimeout(function() {
                    successMessage.style.display = "none";
                }, 500);
            }, 3000);
        }
    };
</script>

<style>
    body {
        background-color: #f8f9fa;
    }
    .profile-container {
        max-width: 500px;
        margin: 50px auto;
    }
    .card {
        border-radius: 12px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    }
    .card-header {
        
        border-radius: 12px 12px 0 0;
        text-align: center;
        padding: 20px;
        font-size: 20px;
        font-weight: bold;
    }
    .form-control {
        border-radius: 8px;
    }
    .btn-primary {
        background-color: #ff7e5f;
        border: none;
        border-radius: 8px;
        padding: 12px;
        transition: all 0.3s ease;
        font-size: 16px;
    }
    .btn-primary:hover {
        background-color: #e76f51;
    }
    .btn-secondary {
        background-color: #6c757d;
        border: none;
        border-radius: 8px;
        padding: 12px;
        transition: all 0.3s ease;
        font-size: 16px;
        color: white;
        margin-top: 10px;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
    }
    .alert {
        border-radius: 8px;
        transition: opacity 0.5s ease-in-out;
    }
    .fade-out {
        opacity: 0;
    }
</style>

</body>
</html>
{% endblock  %}