{% extends 'client/base.html' %}
{% load static %}
{% block title %}Account Settings - BidMe {% endblock %}

<!-- Account settings -->
{% block content %}
<style>
    body {
        margin-top: 20px;
        color: #1a202c;
        text-align: left;
        background-color: #e2e8f0;
    }

    .main-body {
        padding: 15px;
    }

    .nav-link {
        color: #4a5568;
    }

    .card {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 0 solid rgba(0, 0, 0, .125);
        border-radius: .25rem;
    }

    .card-body {
        flex: 1 1 auto;
        min-height: 1px;
        padding: 1rem;
    }

    .gutters-sm {
        margin-right: -8px;
        margin-left: -8px;
    }

    .gutters-sm>.col,
    .gutters-sm>[class*=col-] {
        padding-right: 8px;
        padding-left: 8px;
    }

    .mb-3,
    .my-3 {
        margin-bottom: 1rem !important;
    }

    .bg-gray-300 {
        background-color: #e2e8f0;
    }

    .h-100 {
        height: 100% !important;
    }

    .shadow-none {
        box-shadow: none !important;
    }
</style>

<div class="main-banner" id="top">
    <div class="container-fluid">
        <div class="row gutters-sm">
            <div class="col-md-4 d-none d-md-block">
                <div class="card">
                    <div class="card-body">
                        <nav class="nav flex-column nav-pills nav-gap-y-1">
                            <a href="#profile" data-toggle="tab"
                                class="nav-item nav-link has-icon nav-link-faded active">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-user mr-2">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>Profile Information
                            </a>
                            <a href="#security" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-lock">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg> Password
                            </a>
                            <a href="#verification" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-check-circle">
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                </svg> Account Verification
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header border-bottom mb-3 d-flex d-md-none">
                        <ul class="nav nav-tabs card-header-tabs nav-gap-x-1" role="tablist">
                            <li class="nav-item">
                                <a href="#profile" data-toggle="tab" class="nav-link has-icon active"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-user">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg></a>
                            </li>
                            <li class="nav-item">
                                <a href="#security" data-toggle="tab" class="nav-link has-icon"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-lock">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                    </svg></a>
                            </li>
                            <li class="nav-item">
                                <a href="#verification" data-toggle="tab"
                                    class="nav-item nav-link has-icon nav-link-faded">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-check-circle">
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body tab-content">

                        <!-- PROFILE INFORMATION -->
                        <div class="tab-pane active" id="profile">
                            <h6>YOUR PROFILE INFORMATION</h6>
                            <hr>
                            <form id="profileInfoForm">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- first Name -->
                                        <div class="form-group">
                                            <label for="firstName">First Name</label>
                                            <input type="text" name="first_name" class="form-control" id="firstName"
                                                aria-describedby="firstNameHelp" value="{{ first_name }}">
                                        </div>
                                    </div>

                                    <!-- last Name -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="lastName">Last Name</label>
                                            <input type="text" name="last_name" class="form-control" id="lastName"
                                                aria-describedby="lastNameHelp" value="{{ last_name }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="userName">Username</label>
                                    <input type="text" name="username" class="form-control" id="userName"
                                        value="{{ request.user.username }}" disabled />
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" class="form-control" id="email"
                                        value="{{ email }}">
                                </div>
                                <div class="form-group">
                                    <label for="phoneNumber">Phone Number</label>
                                    <input type="text" name="phone_number" class="form-control" id="phoneNumber"
                                        value="{{ phone_number }}">
                                </div>
                                <button type="submit" class="btn btn-primary">Update Profile</button>
                            </form>
                        </div>
                        <!-- PROFILE INFORMATION END -->

                        <!-- password settings -->
                        <div class="tab-pane" id="security">
                            <h6>PASSWORD</h6>
                            <hr>
                            <form id="passwordForm">
                                <div class="form-group">
                                    <label class="d-block">Change Password</label>
                                    <input type="password" class="form-control" name="old_password"
                                        placeholder="Enter your old password">
                                    <input type="password" class="form-control mt-1" name="password1"
                                        placeholder="New password">
                                    <input type="password" class="form-control mt-1" name="password2"
                                        placeholder="Confirm new password">
                                </div>
                                <button class="btn btn-primary" type="submit">Change Password</button>
                            </form>
                        </div>
                        <!-- password settings ends here -->

                        <!-- account verification -->
                        <div class="tab-pane" id="verification">
                            <h6>ACCOUNT VERIFICATION</h6>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div>Email</div>
                                    <div>
                                        {% if not request.user.is_email_confirmed %}
                                        <a href="#" id="emailVerification" class="small text-primary">Verify Email</a>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    {% if request.user.is_email_confirmed %}
                                    <p class="small text-success">
                                        <i class="fa-regular fa-circle-check"></i>
                                        Your email address has been successfully verified.
                                    </p>
                                    {% else %}
                                    <p class="small text-warning"><i class="fa-solid fa-triangle-exclamation"></i>
                                        You haven't verified your email address yet.</p>
                                    {% endif %}

                                    <p class="small text-muted">To activate your account, your email address
                                        needs to be verified.</p>
                                </div>
                            </div>
                            <hr>
                            <div class="row mt-2 mt-md-4">
                                <div class="col-md-6">
                                    <div>Phone </div>
                                    <div>
                                        <a href="#" class="small text-primary">Verify Phone Number</a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <p class="small text-warning"><i class="fa-solid fa-triangle-exclamation"></i>
                                        You haven't verified your phone number yet.
                                    </p>
                                    <p class="small text-muted">To start bidding, your phone number needs to be
                                        verified.</p>

                                </div>
                            </div>
                        </div>
                        <!-- account verification end here -->


                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block domready %}

// Update user profile
var profileForm = document.getElementById("profileInfoForm");
setupFormAjax(profileForm, '{% url "account:profile_info" %}', function (data) {
// Success callback
toastr.success(data['message']);
}, function (error) {
// Error callback
toastr.error(error['message']);
});


// Update Shipping address
var shippingAddressForm = document.getElementById("shippingAddressForm");
setupFormAjax(shippingAddressForm, "{% url 'account:shipping_address' %}", function (data) {
toastr.success(data['message']);
console.log("Address updated successfully");
}, function (error) {
toastr.error(error['message']);
});


// Change user password
var passwordForm = document.getElementById("passwordForm");
setupFormAjax(passwordForm, '{% url "account:change_password" %}', function (data) {
toastr.success(data['message']);
}, function (error) {
toastr.error(error['message']);
});


// Send email
document.getElementById('emailVerification').addEventListener('click', function(event) {
console.log("email verification")
fetch('{% url "account:send_verification_email" %}')
.then (resp => {
console.log(resp);
return resp.json();
})
.then (data => {
if(data.status === 'ok'){
console.log(data);

toastr.success(data['message']);
}
})
.catch(error => {

console.log(error);
toastr.error(error['message']);
});
});



// Fetch shipping address and populate it in the form
function handleTabClick(tabId) {
const url = '{% url 'account:shipping_address' %}';
const fieldIds = {
'first_name': 'shippingAddressFirstName',
'last_name': 'shippingAddressLastName',
'country': 'country',
'city': 'city',
'address_line1': 'addressLine1',
'address_line2': 'addressLine2',
'state': 'state',
'postal_code': 'postalCode'
};
fetchDataAndPopulate(url, fieldIds);
}

// Fetch shipping address data when tab is clicked (for desktop)
document.getElementById('shippingAddressTab').addEventListener('click', function(event) {
handleTabClick('shippingAddressTab');
});

// Fetch shipping address data when tab is clicked (for mobile)
document.getElementById('shippingAddressTabMobile').addEventListener('click', function(event) {
handleTabClick('shippingAddressTabMobile');
});





{% endblock %}


{% block js %}

{% endblock %}

<!-- Account Settings ends here -->