{% extends "base.html" %}

{% block title %}Dashboard - My Profile{% endblock %}

{% block content %}

<style>
    .profile-container {
        max-width: 700px;
        margin: auto;
        background: #fff;
        padding: 25px 30px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
    }

    .profile-heading {
        font-size: 22px;
        font-weight: 700;
        color: #1d3a8a;
        margin-bottom: 20px;
    }

    .profile-box label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        font-size: 15px;
    }

    .profile-box input {
        width: 100%;
        padding: 9px 12px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 15px;
        margin-bottom: 15px;
    }

    .profile-box button {
        background-color: #1d3a8a;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        cursor: pointer;
        font-weight: 600;
    }

    .profile-box button:hover {
        background-color: #142a6b;
    }

    .alert-success {
        background: #d4edda;
        color: #155724;
        padding: 8px 14px;
        border-radius: 6px;
        margin-bottom: 15px;
    }

    .alert-error {
        background: #f8d7da;
        color: #721c24;
        padding: 8px 14px;
        border-radius: 6px;
        margin-bottom: 15px;
    }

    .phone-error {
        color: #d9534f;
        font-size: 14px;
        margin-top: -10px;
        margin-bottom: 10px;
        display: none;
    }
</style>

<div class="profile-container">

    <div class="profile-heading">My Profile</div>

    {% if message %}
    <div class="alert-success">{{ message }}</div>
    {% endif %}

    {% if error %}
    <div class="alert-error">{{ error }}</div>
    {% endif %}

    <form method="post"
          action="/dashboard/profile"
          enctype="multipart/form-data"
          class="profile-box"
          onsubmit="return validatePhoneNumber();">

        <label for="username">Username</label>
        <input id="username" type="text" name="username" value="{{ user.username }}" required>

        <label for="email">Email</label>
        <input id="email" type="email" name="email" value="{{ user.email }}" required>

        <label for="phone_number"required>Phone Number</label>
        <input id="phone_number"
               type="text"
               name="phone_number"
               value="{{ user.phone_number or '' }}"
               maxlength="10"
               pattern="[0-9]{10}"
               inputmode="numeric"
               oninput="this.value = this.value.replace(/[^0-9]/g, '')"
               placeholder="Enter 10 digit number">

        <div id="phoneError" class="phone-error">
            Phone number must be exactly 10 digits.
        </div>

        <label for="image">Profile Image</label>
        <input id="image" type="file" name="image" accept="image/*">

        <button type="submit">Update Profile</button>
    </form>
</div>

<script>
function validatePhoneNumber() {
    const phoneInput = document.getElementById("phone_number");
    const phoneError = document.getElementById("phoneError");

    if (phoneInput.value && phoneInput.value.length !== 10) {
        phoneError.style.display = "block";
        phoneInput.focus();
        return false;
    }

    phoneError.style.display = "none";
    return true;
}
</script>

{% endblock %}