openclassify/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig

{% extends "theme::layouts/default" %}
{% block content %}

    {% set profile_photo = profiles.file %}
    {% if profile_photo %}
        {% set profile_photo = file(profile_photo.id).url %}
    {% else %}
        {% set profile_photo = img('visiosoft.module.profile::images/profile-default.png').url %}
    {% endif %}

    <div class="row">
        {% include "visiosoft.module.profile::profile/partials/navigation" %}
        <div class="col-md-12">
            <div class="row px-3">

                <!-- User Profile Detail Section-->
                <div class="col-md-12 bg-dark">
                    <div class="row">

                        <div class="col-md-4 p-5">
                            <div class="row">
                                {% if setting_value('visiosoft.module.profile::upload_avatar') %}
                                    <div class="col-md-12 text-center align-middle">
                                        <img src="{{ profile_photo }}" class="img-responsive w-100"
                                             style="max-width: 150px">
                                    </div>
                                {% endif %}
                                <div class="col-md-12 text-center align-middle text-white p-2 text-truncate">
                                    <h3>{{ user().first_name }} {{ user().last_name }}</h3>
                                    <small>{{ auth_user().last_login_at|date("d/m/Y H:i:s") }}</small>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- User Profile Detail Section-->


                <!-- User Profile Form Section-->
                <div class="col-md-12 mt-5 bg-light profile-section">

                    <nav>
                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active text-dark" id="nav-profile-tab" data-toggle="tab"
                               href="#nav-profile"
                               role="tab" aria-controls="nav-profile" aria-selected="true">
                                {{ trans('visiosoft.module.profile::field.profile.name') }}
                            </a>
                            <a class="nav-item nav-link text-dark" id="nav-details-tab" data-toggle="tab"
                               href="#nav-details"
                               role="tab" aria-controls="nav-details" aria-selected="false">
                                {{ trans('visiosoft.module.profile::field.details.name') }}
                            </a>
                            <a class="nav-item nav-link text-dark" id="nav-password-tab" data-toggle="tab"
                               href="#nav-password"
                               role="tab" aria-controls="nav-password" aria-selected="false">
                                {{ trans('visiosoft.module.profile::field.password.name') }}
                            </a>
                            {{ addBlock('profile/detail/content-tab')|raw }}
                        </div>
                    </nav>

                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-profile" role="tabpanel"
                             aria-labelledby="nav-profile-tab">
                            <div class="col-12">
                                {% set userForm = form('userProfile').entry(auth_user().id).get() %}
                                {{ userForm.open()|raw }}
                                <div class="form-group">
                                    <label class="control-label font-weight-bold">
                                        {{ trans("visiosoft.module.profile::field.first_name.name") }}
                                    </label>
                                    {{ userForm.fields.first_name.input|raw }}
                                </div>
                                <div class="form-group">
                                    <label class="control-label font-weight-bold">
                                        {{ trans("visiosoft.module.profile::field.last_name.name") }}
                                    </label>
                                    {{ userForm.fields.last_name.input|raw }}
                                </div>
                                <div class="form-group">
                                    <label class="control-label font-weight-bold">
                                        {{ trans("visiosoft.module.profile::field.email.name") }}
                                    </label>
                                    <input value="{{ auth_user().email }}" type="text" disabled class="form-control">
                                </div>
                                <div class="form-group">
                                    {{ userForm.actions|raw }}
                                </div>
                                {{ userForm.close()|raw }}
                            </div>
                        </div>

                        <div class="tab-pane fade" id="nav-details" role="tabpanel"
                             aria-labelledby="nav-details-tab">
                            <div class="col-12">
                                {% set profileForm = form('profile').entry(profiles.id).get() %}

                                {{ profileForm.open()|raw }}

                                {% if setting_value('visiosoft.module.profile::upload_avatar') %}
                                    <div class="form-group">
                                        {{ profileForm.fields.file|raw }}
                                    </div>
                                {% endif %}

                                <div class="form-group required-profile-phone-field">
                                    <label class="control-label font-weight-bold">
                                        {{ profileForm.fields.gsm_phone.label }}
                                    </label>
                                    {{ profileForm.fields.gsm_phone.input|raw }}
                                </div>
                                <div class="form-group required-profile-phone-field">
                                    <label class="control-label font-weight-bold">
                                        {{ profileForm.fields.office_phone.label }}
                                    </label>
                                    {{ profileForm.fields.office_phone.input|raw }}
                                </div>
                                <div class="form-group required-profile-phone-field">
                                    <label class="control-label font-weight-bold">
                                        {{ profileForm.fields.land_phone.label }}
                                    </label>
                                    {{ profileForm.fields.land_phone.input|raw }}
                                </div>
                                <div class=" form-group">
                                    <label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.identification_number.name") }}</label>
                                    {{ profileForm.fields.identification_number.input|raw }}
                                </div>
                                <div class="form-group">
                                    <label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.register_type.name") }}</label>
                                    {{ profileForm.fields.register_type.input|raw }}
                                </div>
                                <div class="form-group">
                                    {{ profileForm.actions|raw }}
                                </div>
                                {{ profileForm.close()|raw }}
                            </div>
                        </div>

                        <div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
                            {% set passwordForm = form('updatePassword').get() %}

                            {{ passwordForm.open()|raw }}

                            <div class="form-group">
                                <label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.new_password.name") }}</label>
                                {{ passwordForm.fields.new_password.input|raw }}
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.re_new_password.name") }}</label>
                                {{ passwordForm.fields.re_new_password.input|raw }}
                            </div>

                            <div class="form-group confirm-password-field row pl-3">
                                {{ passwordForm.fields.confirm_password|raw }}
                                <div class="col-10">
                                    <label>
                                        {{ trans("visiosoft.module.profile::field.confirm_password_input.name") }}.
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                {{ passwordForm.actions|raw }}
                            </div>
                        </div>
                        {{ passwordForm.close|raw }}
                        {{ addBlock('profile/detail/content')|raw }}
                    </div>
                    <!-- User Profile Form Section-->

                </div>
            </div>


        </div>
    </div>
    {{ asset_add("scripts.js", "visiosoft.theme.base::js/intlTelInput.min.js") }}
    {{ asset_add("scripts.js", "visiosoft.theme.base::js/utils.js") }}
    {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }}
    {{ asset_add("styles.css", "visiosoft.theme.base::css/intlTelInput.css") }}
    {{ asset_add("styles.css", "visiosoft.module.profile::assets/css/profile.css") }}
{% endblock %}