{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% block meta_title %}{{ 'Profile Details'|trans }}{% endblock %}
{% block page_header %}{{ 'User Profile Settings'|trans }}{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">{{ 'Profile'|trans }}</li>{% endblock %}

{% block body_class %}client-profile{% endblock %}
{% set required = guest.client_required %}
{% block content %}
    {% if (guest.client_is_email_validation_required) and (not profile.email_approved) %}
        <div class="alert alert-block alert-danger">
            <div class="row">
                <span>{{ 'You must verify your email address before you may access our services.'|trans }}</span>
            </div>
            <a class="btn btn-primary" href="{{ 'client/resend_email_verification'|api_url }}"
               {{ fb_api_link({message: 'Verification Email Re-sent'|trans}) }}>{{ 'Resend Verification Email'|trans }}</a>
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <nav class="nav nav-tabs card-header-tabs">
                        <a class="nav-link active" id="details-tab" data-bs-toggle="tab"
                           data-bs-target="#details-tab-pane" href="#">{{ 'Details'|trans }}</a>
                        <a class="nav-link" id="pass-tab" data-bs-toggle="tab" data-bs-target="#pass-tab-pane"
                           href="#">{{ 'Change Password'|trans }}</a>
                        <a class="nav-link" id="apikey-tab" data-toggle="tab" data-bs-toggle="tab"
                           data-bs-target="#apikey-tab-pane" href="#">{{ 'API Key'|trans }}</a>
                        <a class="nav-link" id="currency-tab" data-toggle="tab" data-bs-toggle="tab"
                           data-bs-target="#currency-tab-pane" href="#">{{ 'Currency'|trans }}</a>
                    </nav>
                </div>
                <div class="tab-content">
                    <div class="card-body tab-pane active" id="details-tab-pane" role="tabpanel" tabindex="0">
                        <h5 class="card-title mb-1">{{ 'Update Details'|trans }}</h5>
                        <p class="card-text fs-7 text-muted">{{ 'Keep your personal data up to date.'|trans }}</p>
                        <form method="post" action="client/profile/update" id="profile-update" {{ fb_api_form({message: 'Profile Updated'|trans}) }}>
                            <div class="row mb-4 d-flex justify-content-center">
                                <div class="col-md-2">
                                    {{ avatar(profile.email, 100, 'img-thumbnail', null, 'div') }}
                                </div>
                                <div class="col-md-10 d-flex align-items-center">
                                    {{ 'Avatar is derived deterministically from your email address.'|trans }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="first_name">{{ 'First Name'|trans }}</label>
                                    <input type="text" class="form-control" name="first_name" id="first_name" value="{{ profile.first_name }}" required>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="last_name">{{ 'Last Name'|trans }}</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" value="{{ profile.last_name }}" {% if "last_name" in required %} required {% endif %}>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-10">
                                    <label class="form-label" for="email">{{ 'Email Address'|trans }}</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ profile.email }}" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="birthday">{{ 'Birthdate'|trans }}</label>
                                    <input type="date" class="form-control" id="birthday" name="birthday"
                                           value="{{ profile.birthday }}" {% if "birthday" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="gender">{{ 'Gender'|trans }}</label>
                                    <select class="form-select" name="gender" id="gender" {% if "gender" in required %} required {% endif %}>
                                        <option value="male" {{ profile.gender == 'male' ? 'selected' : '' }}>Male
                                        </option>
                                        <option value="female" {{ profile.gender == 'female' ? 'selected' : '' }}>
                                            Female
                                        </option>
                                        <option
                                            value="nonbinary" {{ profile.gender == 'nonbinary' ? 'selected' : '' }}>
                                            Non-binary
                                        </option>
                                        <option
                                            value="other" {% if profile.gender not in ['male', 'female', 'nonbinary'] %} selected {% endif %}>
                                            Other
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-10">
                                    <label class="form-label" for="company">{{ 'Company Name'|trans }}</label>
                                    <input type="text" class="form-control" name="company" id="company" value="{{ profile.company }}" {% if "company" in required %} required {% endif %}>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="company_vat">{{ 'Company VAT'|trans }}</label>
                                    <input type="text" class="form-control" name="company_vat" id="company_vat" value="{{ profile.company_vat }}">
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="company_number">{{ 'Company Number'|trans }}</label>
                                    <input type="text" class="form-control" name="company_number" id="company_number" value="{{ profile.company_number }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="phone_cc">{{ 'Phone Country Code'|trans }}</label>
                                    <input type="text" class="form-control" name="phone_cc" id="phone_cc" value="{{ profile.phone_cc }}" inputmode="numeric" maxlength="3" pattern="[0-9]{1,3}" autocomplete="tel-country-code" {% if "phone" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="phone">{{ 'Phone Number'|trans }}</label>
                                    <input type="text" class="form-control" name="phone" id="phone" value="{{ profile.phone }}" {% if "phone" in required %} required {% endif %}>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="address_1">{{ 'Address'|trans }}</label>
                                    <input type="text" class="form-control" name="address_1" id="address_1" value="{{ profile.address_1 }}" {% if "address_1" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="address_2">{{ 'Address 2'|trans }}</label>
                                    <input type="text" class="form-control" name="address_2" id="address_2" value="{{ profile.address_2 }}" {% if "address_2" in required %} required {% endif %}>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="city">{{ 'City'|trans }}</label>
                                    <input type="text" class="form-control" name="city" id="city" value="{{ profile.city }}" {% if "city" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="country">{{ 'Country'|trans }}</label>
                                    <select class="form-select" id="country" name="country" {% if "country" in required %} required {% endif %}>
                                        <option value="">{{ '-- Select Country --'|trans }}</option>
                                        {% for val,label in guest.system_countries %}
                                            <option value="{{ val }}" label="{{ label|e }}"
                                                    {% if val == profile.country %}selected="selected"{% endif %}>{{ label|e }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="state">{{ 'State'|trans }}</label>
                                    <input type="text" class="form-control" name="state" id="state" value="{{ profile.state }}" {% if "state" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="postcode">{{ 'Zip/Postal Code'|trans }}</label>
                                    <input type="text" class="form-control" id="postcode" name="postcode" value="{{ profile.postcode }}" {% if "postcode" in required %} required {% endif %}>
                                </div>
                                <div class="mb-3 col-md-5">
                                    <label class="form-label" for="document_nr">{{ 'Passport Number'|trans }}</label>
                                    <input type="text" class="form-control" name="document_nr" id="document_nr" value="{{ profile.document_nr }}">
                                </div>
                            </div>
                            {% for i in 1..10 %}
                                {% set custom = 'custom_' ~ i %}
                                {% set current = guest.client_custom_fields[custom] %}
                                {% if current.active %}
                                    <div class="mb-3">
                                        <label class="form-label" for="{{ custom }}">{{ current.title }}</label>
                                        <input type="text" class="form-control" name="{{ custom }}" id="{{ custom }}" value="{{ profile[custom] }}" {% if current.required %} required {% endif %}>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            <button class="btn btn-primary" type="submit">{{ 'Update Profile'|trans }}</button>
                        </form>
                    </div>
                    <div class="card-body tab-pane" id="pass-tab-pane" role="tabpanel" tabindex="0">
                        <h5 class="card-title mb-1">{{ 'Change Password'|trans }}</h5>
                        <p class="card-text fs-7 text-muted">{{ 'Enter your new password twice to avoid mistakes. '|trans }}</p>
                        <form method="post" action="{{ 'profile/change_password'|api_url }}" {{ fb_api_form() }}>
                            <div class="mb-3">
                                <label class="form-label" for="current_password">{{ 'Current Password'|trans }}</label>
                                <input class="form-control" type="password" name="current_password"
                                       id="current_password" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="new_password">{{ 'New Password'|trans }}</label>
                                <input class="form-control" type="password" name="new_password" id="new_password"
                                       required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="confirm_password">{{ 'Confirm Password'|trans }}</label>
                                <input class="form-control" type="password" name="confirm_password"
                                       id="confirm_password" required>
                            </div>
                            <button class="btn btn-primary" type="submit">{{ 'Change Password'|trans }}</button>
                        </form>
                    </div>
                    <div class="card-body tab-pane" id="apikey-tab-pane" role="tabpanel" tabindex="0">
                        <h5 class="card-title mb-1">{{ 'API Key'|trans }}</h5>
                        <p class="card-text fs-7 text-muted">{{ 'API key allows integration with external applications. You will need this key for authentication.'|trans }}</p>
                        <form method="post" action="client/profile/api_key_reset" id="change-api-key" {{ fb_api_form({message: 'API Key Changed'|trans}) }}>
                            {% if client.profile_api_key_get %}
                                <div class="alert alert-warning" role="alert">
                                    <strong>{{ 'Warning!'|trans }}</strong>&nbsp;{{ 'Resetting the key will break existing applications using it!'|trans }}
                                </div>
                            {% endif %}
                            <div class="mb-3">
                                <label for="api-key" class="form-label">{{ 'Your API Key'|trans }}</label>
                                <input class="form-control" readonly type="text"
                                       value="{{ client.profile_api_key_get }}" id="api-key">
                            </div>
                            <button class="btn btn-primary" type="submit">{{ 'Generate a New Key'|trans }}</button>
                        </form>
                    </div>
                    <div class="card-body tab-pane" id="currency-tab-pane" role="tabpanel" tabindex="0">
                        <h5 class="card-title mb-1">{{ 'Currency'|trans }}</h5>
                        <p class="card-text fs-7 text-muted">{{ 'Your profile currency is defined after your first order. Once your currency is set, all your profile accounting will be managed in that currency and cannot be changed.'|trans }}</p>
                        {% if profile.currency %}
                            <p>{{ 'Your profile currency is'|trans }} <strong>{{ profile.currency|currency_name }}</strong></p>
                            <p>{{ 'You will need to create a new client profile to use an alternative currency.'|trans }}</p>
                        {% else %}
                            <div class="alert alert-info" role="alert">
                                {{ 'You do not yet have a currency associated with your profile. You can select the correct one when making your first order.'|trans }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}
