{% extends 'base.html.twig' %}

{% block title %}
    OceanExpert | Profile
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/ionicons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/jquery-ui.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/custom-modal.css') }}">
{% endblock %}

{% block body %}
    {% include "navbarlogin.html.twig" %}
    <div class="container-lg">
        <div class="wait">
            <div id="cssload-wrapper">
                <div id="cssload-border">
                    <div id="cssload-whitespace">
                        <div id="cssload-line"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- some whitespace.... -->
            <div class="login-logo">
            </div>

            <div class="content-wrapper">
                <div class="box-body">
                    <h4 style="margin: 10px 0;">
                        {% if app.user.id is defined %}
                            Edit
                        {% else %}
                            Complete
                        {% endif %}
                        Your Profile
                    </h4>
                    <form
                            id="addIndividual"
                            action="{{ path('fos_confirm_profile') }}"
                            method="post"
                            enctype="multipart/form-data"
                            accept-charset="utf-8"
                            autocomplete="off"
                            onsubmit="return validateAllFields();">

                        {% if mode is defined and mode == 'newExpert' %}
                            <input
                                    type="hidden"
                                    name="newExpert"
                                    value="1">
                        {% endif %}

                        {# define what email we want to use #}
                        {% if app.user.id is defined and expert.0.email1 is defined %}
                            {% set userEmail = expert.0.email1 %}
                        {% else %}
                            {% set userEmail = app.user.email %}
                        {% endif %}
                        <input
                                type="hidden"
                                name="userEmail"
                                id="inputUserEmail"
                                class="form-control"
                                value="{{ userEmail }}">

                        <div
                                class="panel-group"
                                id="accordion"
                                role="tablist"
                                aria-multiselectable="true">
                            <div class="panel panel-default">
                                {% include "Profile/editProfilePersonal.html.twig" %}
                            </div>

                            <div class="panel panel-default">
                                {% include "Profile/editProfileAffiliation.html.twig" %}
                            </div>

                            <div class="panel panel-default">
                                {% include "Profile/editProfileProfessional.html.twig" %}
                            </div>

                            <div class="panel panel-default">
                                {% include "Profile/editProfileFinalise.html.twig" %}
                            </div>
                        </div>
                    </form><!-- /.login-box-body -->
                </div>

                <div class="col-lg-12">
                    <div class="checkbox icheck">
                        <a
                                href="{{ path('frontend_homepage') }}"
                                class="btn btn-primary">
                            <i class="fa fa-home" aria-hidden="true"></i>
                            Back to the Home Page
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html.twig" %}

    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/registration.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/googleplaces.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.noty.packaged.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/zebra_tooltips.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        /*
        code to be executed after loading the page
        this code will overwrite whatever has been set before
        like the code in registration.js $(document).ready

        this code is not in registration.js because it may need Twig conditions to be set
        e.g. 'if expert is defined' or 'path('add_institution')'
         */

        {% if expert is defined %}
            $("#tab1, #tab2, #tab3, #tab4").css('pointer-events', 'all');
        {% endif %}

        var isAdmin = false;
        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
            isAdmin = true;
        {% endif %}

        var addInstitutionUrl = "{{ path('add_institution') }}";
        var getInstitutionUrl = "{{ path('get_institution_by_country') }}";
        var getInstitutionAddress = "{{ path('get_institution_address') }}";

        $(function () {

            {% if not app.user %}
                var dialog = new  BootstrapDialog.confirm({
                    title: '<span class="highlight"><i class="icon fa fa-check"></i> Activation Email Sent!</span>',
                    message: '<p>An email with an activation link has been sent to <strong>{{ email }}</strong>.'+
                        ' Use this link <strong>within 48 hours</strong> to activate your profile or else all the details you enter here will be deleted from OceanExpert.</p>' +
                        '<p class="text-danger"><strong>If you do not enter your details in the step 2, your profile will not be created.</strong></p>',
                    type: BootstrapDialog.TYPE_SUCCESS,
                    closable: false,
                    draggable: false,
                    btnCancelLabel: '<i class="fa fa-thumbs-down fa-fw" aria-hidden="true"></i> Cancel',
                    btnOKLabel: '<i class="fa fa-thumbs-up fa-fw" aria-hidden="true"></i> Let\'s create my profile',
                    btnOKClass: 'btn-success',
                    btnCancelClass: 'btn-danger',
                    callback: function(result) {
                        if(result) {
                            return true;
                        }else {
                            BootstrapDialog.confirm({
                                title: '<span class="highlight"><i class="icon fa fa-exclamation-triangle"></i> Cancel My Account</span>',
                                message: '<p class="text-danger"><strong>Your profile will not be created. Do you want to proceed?.</strong></p>' +
                                    '<p><small>Click on <strong>Cancel</strong></small> if you wish to create your profile.</p>',
                                type: BootstrapDialog.TYPE_SUCCESS,
                                closable: false,
                                draggable: false,
                                btnCancelLabel: '<i class="fa fa-thumbs-down fa-fw" aria-hidden="true"></i> Cancel',
                                btnOKLabel: '<i class="fa fa-thumbs-up fa-fw" aria-hidden="true"></i> Don\'t create My Profile.',
                                btnOKClass: 'btn-success',
                                btnCancelClass: 'btn-danger',
                                callback: function(result) {
                                    if(result) {
                                        window.submitted = "form cancelled."
                                        location.href = "{{ path('frontend_homepage') }}";
                                    }else {
                                        dialog.open()
                                    }
                                }
                            });
                        }
                    }
                });
            {% endif %}

            {% if expert.0.regType is defined %}
                {% if expert.0.regType == 2 %}
                    //expert is not linked to institute

                    //hide the institute info
                    $("#institute-tab").css('display', 'none');

                    //$("#individual").iCheck('check');
                    //$("#institutional").iCheck('uncheck');

                {% else %}
                    //expert is linked to institute
                    //make the list of possible institutes and make the correct one the selected one
                    setInstitutes();

                    //show the institute info
                    $("#institute-tab").css('display', 'block');

                {% endif %}

                {% if expert.0.email1 is defined %}
                    userEmail = "{{ expert.0.email1 }}";
                {% endif %}

                {% if expert.2.instName is defined %}
                    var myInst = "{{ expert.2.instName }}";
                {% endif %}

                var nationality = "idNationality";
                var title = "title";

                {% if expert.jobType is defined %}
                    var jobType = "{{ expert.jobType| e('js') }}";
                    $("#jobtype").select2().val(jobType.split(",")).trigger("change");
                {% endif %}

                {#{% if metadata.researcharea is defined %}#}
                    {#var researcharea = "{{ metadata.researcharea }}";#}
                    {#$("#researcharea").select2().val(researcharea.split("\r ")).trigger("change");#}
                {#{% endif %}#}

                {% if expert.0.studyregion is defined %}
                    var studyregion = "{{ expert.0.studyregion }}";
                    $("#studyregion").select2().val(studyregion.split(", ")).trigger("change");
                {% endif %}

                {% if expert.0.email2 is defined and expert.0.email2 != "" %}
                    $("#email-notification-1").iCheck('check');
                    $("#alternate-email").val("{{ expert.0.email2 }}");
                {% else %}
                    $("#email-notification-0").iCheck('check');
                {% endif %}

                {% if expert.0.tel is defined %}
                    $("#phone").val("{{ expert.0.tel }}");
                {% endif %}

                //set the nationalities of the expert to 'selected'
                $("#nationality").select2().val("{{ expert.0.idNationality }}".split(",")).trigger("change");

                //set the languages of the expert to 'selected'
                $("#languages").select2().val("{{ expert.0.languages }}".split(", ")).trigger("change");

            {% elseif email is defined %}
                userEmail = "{{ email }}";
            {% endif %}
        });

        {% if expert.0.regType == 2 %}
            {#
                expert not linked to an institute
                so it's useless to let you choose to use the institute address
            #}
            $("#useinstaddress").iCheck('disable');
            $("#individual-tab-inst-address").css('display', 'none');
            console.log('no institute selected, we cannot use inst address')
        {% else %}
            console.log('institute selected')
            $("#individual-tab-inst-address").css('display', 'block');
            {% if expert.0.useInstAddr is defined and expert.0.useInstAddr == 1 %}
                console.log('use institute address, checkbox checked, address disabled')
                {# we want to use the institute address #}
                $("#useinstaddress").iCheck('disable');
                $("#useinstaddress").val(1);
                $("#useinstaddress").iCheck('check');
            {% else %}
                console.log('do not use institute address, checkbox unchecked, address enabled')
                {# do not use the institute address #}
                $("#useinstaddress").iCheck('enable');
                $("#useinstaddress").val(0);
                $("#useinstaddress").iCheck('uncheck');
            {% endif %}
        {% endif %}
    </script>
{% endblock %}