{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | Add Expert
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin-style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.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 rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
    <style>
        .selectInstitute{cursor: pointer;}
        .instList{max-height: 100px;overflow-y: scroll;margin: 10px 0;}
    </style>

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">

    {% block sidebar %}
        {% include('Admin/adminSidebar.html.twig') %}
    {% endblock %}

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <ol class="breadcrumb">
                <li>
                    <a href="{{ path('admin_dashboard') }}">
                        <i class="fa fa-home"></i> Home
                    </a>
                </li>
                <li class="active">
                    <i class="fa fa-user-plus"></i> Add Expert
                </li>
            </ol>
        </section>
        {% block content %}
            <div class="box-body">
                <legend>
                    Add Expert
                </legend>
                <form
                        id="addIndividual"
                        action="{{ path('add_expert') }}"
                        method="post"
                        enctype="multipart/form-data"
                        accept-charset="utf-8"
                        autocomplete="off">
                    <div
                            class="panel-group"
                            id="accordion"
                            role="tablist"
                            aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading active" role="tab" id="add-details">
                                <h4 class="panel-title">
                                    <a
                                            id="tab1"
                                            role="button"
                                            data-toggle="collapse"
                                            data-parent="#accordion"
                                            aria-href="#collapseOne"
                                            aria-expanded="true"
                                            aria-controls="collapseOne">
                                        Select your Affiliation and Address
                                    </a>
                                </h4>
                            </div>

                            <div
                                    id="collapseOne"
                                    class="panel-collapse collapse in"
                                    role="tabpanel"
                                    aria-labelledby="add-details">
                                <div class="panel-body">
                                    <em>
                                        fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.
                                    </em>
                                    <div class="box-body">
                                        <div class="row padded">
                                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                <div id="step1-error"></div>
                                            </div>
                                        </div>
                                        <div class="row spacing">
                                            <div class="form-group">
                                                <label
                                                        class="col-tn-12 col-xs-12 col-sm-7 col-md-6 col-lg-5 control-label tipso"
                                                        for="radios"
                                                        title='Click on "Yes" if you work for an Organization
                                                        else "No" if you are independent or retired.'>
                                                    Do you work for an Organization/Institute/Company?
                                                    <i
                                                            class="fa fa-question-circle"
                                                            aria-hidden="true"></i>
                                                </label>
                                                <div class="col-sm-4 col-xs-6 col-md-4 col-lg-4 col-tn-12">
                                                    <label class="radio-inline" for="institutional">
                                                        <input
                                                                type="radio"
                                                                name="reg-type"
                                                                id="institutional"
                                                                class="reg-type"
                                                                value="1"
                                                                checked="checked" />
                                                        Yes
                                                    </label>
                                                    <label class="radio-inline" for="individual">
                                                        <input
                                                                type="radio"
                                                                name="reg-type"
                                                                id="individual"
                                                                class="reg-type"
                                                                value="2" />
                                                        No
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="institute-tab">
                                            <div class="row">
                                                <div class="col-md-8 col-sm-8">
                                                    <div class="form-group">
                                                        <label for="country" class="tipso"
                                                               title="Select the country where you are presently based<br />e.g. Belgium">Country
                                                                    <span class="req">*</span>
                                                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <select
                                                                class="form-control select2"
                                                                style="width: 100%;"
                                                                id="country"
                                                                name="country">
                                                            <option
                                                                    value=""
                                                                    selected=""
                                                                    disabled="">
                                                            </option>
                                                            {% for country in data.countries %}
                                                                {% if data.user.instCountry == ""
                                                                    and country.idCountry == data.user.country %}
                                                                    <option
                                                                            value="{{ country.idCountry }}"
                                                                            countryCode="{{ country.countryCode }}"
                                                                            selected>
                                                                        {{ country.country }}
                                                                    </option>
                                                                {% elseif country.idCountry == data.user.instCountry %}
                                                                    <option
                                                                            value="{{ country.idCountry }}"
                                                                            countryCode="{{ country.countryCode }}"
                                                                            selected>
                                                                        {{ country.country }}
                                                                    </option>
                                                                {% else %}
                                                                    <option
                                                                            value="{{ country.idCountry }}"
                                                                            countryCode="{{ country.countryCode }}">
                                                                        {{ country.country }}
                                                                    </option>
                                                                {% endif %}

                                                            {% endfor %}

                                                        </select>
                                                    </div><!-- /.form-group -->

                                                    <div class="form-group">
                                                        <label for="institute">Organization/Institute/Company<span
                                                                    class="req" >*</span> <i
                                                                    class="fa fa-question-circle tipso"
                                                                    aria-hidden="true"
                                                                    title="Select experts Organization/Institute/Company. If you cannot find institution in the list, click on 'Cannot find expert institution- Create New' option to enter details of expert's institution.<br />e.g. National Oceanic and Atmospheric Administration"></i>
                                                            {% if data.userInstitute is empty %}
                                                                <div class="info">
                                                                    Expert has entered <strong>"{{ data.user.institution | raw }}"</strong> as associated institute. This institute is not matching with existing institute in the OceanExpert Database.
                                                                    Kindly select the institution from the dropdown below or <strong>Create a new institution</strong> by selecting <strong>"Cannot find expert's Institution - Create New"</strong>
                                                                </div>
                                                            {% elseif data.userInstitute|length > 1 %}
                                                                <div class="user-info">
                                                                    Expert has entered below associated institute.
                                                                    <div class="padded bold">
                                                                    {{ data.user.institution | raw }}
                                                                    {% if data.user.instAddrLine1 != "" %}
                                                                        <br />{{ data.user.instAddrLine1 }},
                                                                    {% endif %}
                                                                    {% if data.user.instAddrLine2 != "" %}
                                                                        <br />{{ data.user.instAddrLine2 }},
                                                                    {% endif %}
                                                                    {% if data.user.city != "" %}
                                                                        <br />{{ data.user.city }},
                                                                    {% endif %}
                                                                    {% if data.user.state != "" %}
                                                                        {{ data.user.state }} <br />
                                                                    {% endif %}
                                                                    {% if data.user.country != null %}
                                                                        {{ data.user.zipCode }}
                                                                    {% endif %}
                                                                    </div>
                                                                    This institute name matches with the {{ data.userInstitute|length }} institutions in OceanExpert database. Please select / enter from the following institutes from the database.<br/>
                                                                    <ol class="instList">
                                                                        {% for institute in data.userInstitute %}
                                                                            <li
                                                                                    data-id="{{ institute.id_inst }}"
                                                                                    class="selectInstitute">
                                                                                {{ institute.inst_name }}, {{ institute.inst_address }}
                                                                            </li>
                                                                        {% endfor %}

                                                                    </ol>
                                                                </div>
                                                            {% endif %}
                                                        </label>
                                                        <select
                                                                class="form-control select2"
                                                                style="width: 100%;"
                                                                id="institute"
                                                                name="institute">
                                                            <option disabled="" selected="" value="">
                                                                Select Country First
                                                            </option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group">
                                                        <label
                                                                for="department"
                                                                class="tipso"
                                                                title="Enter your Department.<br/>
                                                                e.g. National Ocean Service">
                                                            Department
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                id="department"
                                                                placeholder="e.g. National Ocean Service"
                                                                type="text"
                                                                autocomplete="off"
                                                                class="form-control"
                                                                name="department"
                                                                value="{% if expert.0.dept is defined %}{{ expert.0.dept }}{% endif %}" />
                                                    </div>

                                                    <div class="form-group">
                                                        <input
                                                                type="checkbox"
                                                                name="instaddress"
                                                                class="form-control"
                                                                value="0"
                                                                id="instaddress" />&nbsp;
                                                        <label
                                                                for="instaddress" class="tipso"
                                                                title="Address fields below will be automatically populated
                                                                with the address of your organization in our database.">
                                                            Use Institution Address
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                    </div><!-- /.form-group -->
                                                </div><!-- /.col -->

                                                <div class="col-sm-12 col-md-8">
                                                    <legend>
                                                        <span>
                                                            Address
                                                        </span>
                                                    </legend>
                                                    <div class="form-group">
                                                        <label
                                                                for="route"
                                                                class="tipso"
                                                                title="Enter Your Street Name + No., P.O. Box, Company Name, C/O<br />
                                                                e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">
                                                            Address Line 1<span class="req">*</span>
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                type="text"
                                                                name="route"
                                                                id="route"
                                                                class="form-control"
                                                                value="{% if data.user.addressLine1 is defined %}{{ data.user.addressLine1 }}{% endif %}"
                                                                title=""
                                                                placeholder="e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc." />
                                                    </div>
                                                    <div class="form-group">
                                                        <label
                                                                for="addrline2"
                                                                class="tipso"
                                                                title="Enter Your Building,  Floor or Office number<br />
                                                                e.g.  No.7/61 or Building No. 12 or 2nd Floor etc.">
                                                            Address Line 2
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                type="text"
                                                                name="addrline2"
                                                                id="addrline2"
                                                                class="form-control"
                                                                value="{% if expert.0.addr2 is defined %}{{ expert.0.addr2 }}{% endif %}"
                                                                title=""
                                                                placeholder="e.g.  No.7/61 or Building No. 12 or 2nd Floor etc." />
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-4">
                                                            <label
                                                                    for="postal_code"
                                                                    class="tipso"
                                                                    title="Enter the Postal Area code for Your Locality<br />e.g. 8400">
                                                                Postal/ Zip Code
                                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                            </label>
                                                            <input
                                                                    type="text"
                                                                    name="postal_code"
                                                                    id="postal_code"
                                                                    class="form-control"
                                                                    value="{% if expert.0.postcode is defined %}{{ expert.0.postcode }}{% endif %}"
                                                                    title=""
                                                                    placeholder="e.g. 8400" />
                                                        </div>
                                                        <div class="form-group col-md-8">
                                                            <label for="locality" class="tipso"
                                                                   title="Enter the Name of Your City<br />e.g. Oostende">
                                                                City<span class="req">*</span>
                                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                            </label>
                                                            <input
                                                                    type="text"
                                                                    name="locality"
                                                                    id="locality"
                                                                    class="form-control"
                                                                    value="{% if expert.0.city is defined %}{{ expert.0.city }}{% endif %}"
                                                                    title=""
                                                                    placeholder="e.g. Oostende" />
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="administrative_area_level_2" class="tipso"
                                                               title="Enter Your State/Province/Region <br />e.g. West Vlaanderen">State/Province/Region
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                                        <input type="text" name="administrative_area_level_1"
                                                               id="administrative_area_level_1" class="form-control"
                                                               value="{% if expert.0.state is defined %}{{ expert.0.state }}{% endif %}"
                                                               title="" placeholder="e.g. West Vlaanderen">
                                                    </div>

                                                </div>
                                            </div><!-- /.row -->

                                            <div class="form-group pull-right" id="submit-one">
                                                <button type="button"
                                                   class="btn btn-danger cancel bold">
                                                    <i class="fa fa-times-circle fa-space-right"
                                                       aria-hidden="true"></i>Cancel</button>
                                                <button type="button" class="btn btn-success step2 bold"
                                                        id="next-to-two"> {% if expert is defined %}Add Personal Details{% else %}Add expert to this Institution{% endif %}
                                                    <i class="fa fa-arrow-circle-right fa-space-left"
                                                       aria-hidden="true"></i></button>
                                            </div>
                                        </div>


                                        <div class="row" id="individual-tab" style="display:none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-8">
                                                    <h3 class="tipso" title="Enter Your Postal Address Below.">
                                                        Address</h3>
                                                    <div class="form-group">
                                                        <label for="country2" class="tipso"
                                                               title="Select the country where you are presently based<br />e.g. Belgium">Country<span
                                                                    class="req">*</span> <i
                                                                    class="fa fa-question-circle"
                                                                    aria-hidden="true"></i></label>
                                                        <select
                                                                class="form-control select2"
                                                                style="width: 100%;"
                                                                name="country2"
                                                                id="country2"
                                                                name="country2"
                                                                placeholder="e.g. Belgium">
                                                            {% for country in data.countries %}
                                                                <option
                                                                        value="{{ country.idCountry }}"
                                                                        countrycode="{{ country.countryCode }}">{{ country.country }}
                                                                </option>
                                                            {% endfor %}
                                                        </select>
                                                    </div><!-- /.form-group -->
                                                    <div class="form-group">
                                                        <label
                                                                for="address2"
                                                                class="tipso"
                                                                title="Enter Your Street Name + No., P.O. Box, Company Name, C/O<br />
                                                                e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">
                                                            Address Line 1<span class="req">*</span>
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                type="text"
                                                                name="address2"
                                                                id="address2"
                                                                class="form-control"
                                                                value="{% if expert.0.addr1 is defined %}{{ expert.0.addr1 }}{% endif %}"
                                                                title=""
                                                                placeholder="e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">
                                                    </div>
                                                    <div class="form-group">
                                                        <label
                                                                for="addr2line2"
                                                                class="tipso"
                                                                title="Enter Your Building,  Floor or Office number<br />
                                                                e.g.  No.7/61 or Building No. 12 or 2nd Floor etc.">
                                                            Address Line 2
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                type="text"
                                                                name="addr2line2"
                                                                id="addr2line2"
                                                                class="form-control"
                                                                value="{% if expert.0.addr2 is defined %}{{ expert.0.addr2 }}{% endif %}"
                                                                title=""
                                                                placeholder="e.g.  No.7/61 or Building No. 12 or 2nd Floor etc." />
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-4">
                                                            <label
                                                                    for="postcode2"
                                                                    class="tipso"
                                                                    title="Enter the Postal Area code for Your Locality<br />e.g. 8400">
                                                                Postal/ Zip Code
                                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                            </label>
                                                            <input
                                                                    type="text"
                                                                    name="postcode2"
                                                                    id="postcode2"
                                                                    class="form-control"
                                                                    value="{% if expert.0.addr2 is defined %}{{ expert.0.addr2 }}{% endif %}"
                                                                    title=""
                                                                    placeholder="e.g. 8400" />
                                                        </div>
                                                        <div class="form-group col-md-8">
                                                            <label
                                                                    for="city2"
                                                                    class="tipso"
                                                                    title="Enter the Name of Your City<br />e.g. Oostende">
                                                                City<span class="req">*</span>
                                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                            </label>
                                                            <input
                                                                    type="text"
                                                                    name="city2"
                                                                    id="city2"
                                                                    class="form-control"
                                                                    value="{% if expert.0.city is defined %}{{ expert.0.city }}{% endif %}"
                                                                    title=""
                                                                    placeholder="e.g. Oostende" />
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label
                                                                for="state2"
                                                                class="tipso"
                                                                title="Enter Your State/Province/Region<br />e.g. West Vlaanderen">
                                                            State/Province/Region
                                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                                        </label>
                                                        <input
                                                                type="text"
                                                                name="state2"
                                                                id="state2"
                                                                class="form-control"
                                                                value="{% if expert.0.state is defined %}{{ expert.0.state }}{% endif %}"
                                                                title=""
                                                                placeholder="e.g. West Vlaanderen" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group pull-right bold" id="submit-one">
                                                <a href="{{ path('admin_dashboard') }}" type="button"
                                                   class="btn btn-danger cancel bold">
                                                    <i class="fa fa-times-circle fa-space-right"
                                                       aria-hidden="true"></i>Cancel</a>
                                                <button type="button" class="btn btn-success step2 bold"
                                                        id="step-to-two">Add Personal Details<i
                                                            class="fa fa-arrow-circle-right fa-space-left"
                                                            aria-hidden="true"></i></button>
                                            </div>
                                        </div><!-- /.row -->
                                    </div><!-- /.box-body -->
                                    <em>fields marked <span class="req-note"><strong>*</strong></span> are
                                        mandatory fields.</em>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="personal-details">
                                <h4 class="panel-title">
                                    <a id="tab2" class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
                                       aria-controls="collapseTwo">
                                        Personal Details
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="personal-details">
                                <div class="panel-body">
                                    <em>fields marked <span class="req-note"><strong>*</strong></span> are
                                        mandatory fields.</em>
                                    <div class="box-body">
                                        <div class="row padded">
                                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                <div id="step2-error"></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            {#<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">#}
                                            <div class="col-xs-12 col-md-8">
                                                <div class="form-group">
                                                    <label for="title" class="tipso"
                                                           title="Select Your Honorific/Title from the List<br />e.g. Ms.">Title
                                                        <i class="fa fa-question-circle"
                                                           aria-hidden="true"></i></label>
                                                    <input type="text" name="title" class="form-control" id="title"
                                                           placeholder="e.g. Ms."
                                                           value="{% if expert.0.title is defined %}{{ expert.0.title }}{% endif %}">
                                                    {# <select class="form-control select2" style="width: 100%;" name="title" id="title" name="title">
                                                        <option disabled="" selected="">e.g. Ms.</option>
                                                        <option value="Mr.">Mr.</option>
                                                        <option value="Mrs.">Mrs.</option>
                                                        <option value="Ms.">Ms.</option>
                                                        <option value="Dr.">Dr.</option>
                                                        <option value="Prof.">Prof.</option>
                                                    </select> #}
                                                </div><!-- /.form-group -->

                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-4 col-lg-4">
                                                            <label for="firstname" class="tipso"
                                                                   title="Enter your First or Given name<br />e.g. Jane">First
                                                                Name<span class="req">*</span> <i
                                                                        class="fa fa-question-circle"
                                                                        aria-hidden="true"></i></label>
                                                            <input type="text" name="firstname" class="form-control"
                                                                   id="firstname" placeholder="e.g. Jane"
                                                                    {% if data.user.fname is defined %}
                                                                        value="{{ data.user.fname }}"
                                                                    {% else %}
                                                                        value=""
                                                                    {% endif %}
                                                            >
                                                        </div>
                                                        <div class="col-md-4 col-lg-4">
                                                            <label for="middlename" class="tipso"
                                                                   title="Enter your Middle Name<br />e.g. Jessica">Middle
                                                                Name <i class="fa fa-question-circle"
                                                                        aria-hidden="true"></i></label>
                                                            <input type="text" name="middlename"
                                                                   class="form-control" id="middlename"
                                                                   placeholder="e.g. Jessica"
                                                                   value="{% if expert.0.mname is defined %}{{ expert.0.mname }}{% endif %}">
                                                        </div>
                                                        <div class="col-md-4 col-lg-4">
                                                            <label for="lastname" class="tipso"
                                                                   title="Enter your Last/Family Name">Last
                                                                Name<span class="req">*</span> <i
                                                                        class="fa fa-question-circle"
                                                                        aria-hidden="true"></i></label>
                                                            <input type="text" name="lastname" class="form-control"
                                                                   id="lastname" placeholder="e.g. Doe"
                                                                    {% if data.user.sname is defined %}
                                                                        value="{{ data.user.sname }}"
                                                                    {% else %}
                                                                        value=""
                                                                    {% endif %}
                                                            >
                                                        </div>
                                                    </div>
                                                </div><!-- /.form-group -->


                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="col-md-3 control-label tipso" for="radios"
                                                               title='Please Specify your gender. Select "Not Specified" if you do not wish to mention your gender'>Gender:
                                                            <span class="req">*</span> <i
                                                                    class="fa fa-question-circle"
                                                                    aria-hidden="true"></i></label>
                                                        <div class="col-md-12">
                                                            <label class="radio-inline" for="gender-0">
                                                                <input type="radio" name="gender" id="gender-0"
                                                                       value="male"
                                                                       {% if data.user.gender | lower == "male" %}checked{% endif %}
                                                                > Male
                                                            </label>

                                                            <label class="radio-inline" for="gender-1">
                                                                <input type="radio" name="gender" id="gender-1"
                                                                       value="female"
                                                                       {% if data.user.gender | lower == "female" %}checked{% endif %}
                                                                > Female
                                                            </label>

                                                            <label class="radio-inline" for="gender-2">
                                                                <input type="radio" name="gender" id="gender-2"
                                                                       value="na"
                                                                       {% if data.user.gender | lower == "na" %}checked{% endif %}
                                                                > Not Specified
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="userEmail" class="tipso"
                                                           title="Email<br />e.g. janedoe@example.org">Email Address
                                                        <span class="req">*</span> <i class="fa fa-question-circle"
                                                                                      aria-hidden="true"></i></label>
                                                    <input type="text" name="userEmail" class="form-control"
                                                           id="userEmail" placeholder="e.g. janedoe@example.org"
                                                           value="{{ data.user.email }}">
                                                </div><!-- /.form-group -->
                                            </div>

                                        </div>
                                        <div class="row-inline pull-right">
                                            <div class="form-group" id="submit-two">
                                                <a href="{{ path('admin_dashboard') }}" type="button"
                                                   class="btn btn-danger cancel bold">
                                                    <i class="fa fa-times-circle fa-space-right"
                                                       aria-hidden="true"></i>Cancel</a>
                                                <button type="button" class="btn btn-warning step3 bold"
                                                        id="back-to-one"><i
                                                            class="fa fa-arrow-circle-left fa-space-right"
                                                            aria-hidden="true"></i>Back to Institution Details
                                                </button>
                                                <button type="button" class="btn btn-success step3 bold"
                                                        id="next-to-three">Finalise User Profile<i
                                                            class="fa fa-arrow-circle-right fa-space-left"
                                                            aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div><!-- /.box-body -->
                                    <em>fields marked <span class="req-note"><strong>*</strong></span> are
                                        mandatory fields.</em>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="finalise">
                                <h4 class="panel-title">
                                    <a id="tab4"
                                       class="collapsed {% if app.user.username is defined %}finalise{% endif %}"
                                       role="button" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                        Finalise{% if app.user.username is defined %} & Save {% endif %}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="finalise">
                                <div class="panel-body">
                                    <div class="box-body">
                                        <div class="row">
                                            <div class=" col-md-9 col-lg-9 ">
                                                <table class="table table-user-information">
                                                    <tbody>
                                                    <tr>
                                                        <td colspan="2" class="no-border"><strong>Personal
                                                                Data</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Full Name</td>
                                                        <td class="dd" id="data-name"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Email Address</td>
                                                        <td class="dd" id="data-userEmail"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Registration Type</td>
                                                        <td class="dd" id="data-reg-type"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Gender</td>
                                                        <td class="dd" id="data-gender"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Institution</td>
                                                        <td class="dd" id="data-institution"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Department</td>
                                                        <td class="dd" id="data-department"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="dl">Country</td>
                                                        <td class="dd" id="data-country"></td>
                                                    </tr>
                                                    <tr>
                                                    <tr>
                                                        <td class="dl">Address</td>
                                                        <td class="dd" id="data-address"></td>
                                                    </tr>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        {% if expert is defined %}
                                            {% if expert.2.instName is defined %}
                                                <input
                                                        type="hidden"
                                                        name="userInst"
                                                        id="userInst"
                                                        value="{{ expert.2.idInst }}" />
                                            {% endif %}
                                            {% if expert.0.useInstAddr is defined %}
                                                <input
                                                        type="hidden"
                                                        name="useinstaddress"
                                                        id="useinstaddress"
                                                        value="{{ expert.0.useInstAddr }}" />
                                            {% endif %}

                                            {% if expert.0.idInd is not defined and app.user.id is defined %}
                                                <input
                                                        type="hidden"
                                                        name="userId"
                                                        id="userId"
                                                        value="{{ app.user.id }}" />
                                            {% elseif app.user.id != expert.0.idInd %}
                                                <input
                                                        type="hidden"
                                                        name="userId"
                                                        id="userId"
                                                        value="{{ expert.0.idInd }}" />
                                            {% endif %}
                                        {% endif %}
                                        <input type="hidden" name="nationality[]" value="{{ data.user.nationality }}">
                                        <input type="hidden" name="tel" value="{{ data.user.phone }}">
                                        <input type="hidden" name="submitAndNew" value="">
                                        <input type="hidden" name="addParticipants" value="1">

                                        <div class="row-inline pull-right">
                                            <div class="form-group" id="submit-two">
                                                <a href="{{ path('admin_dashboard') }}" type="button"
                                                   class="btn btn-danger cancel bold">
                                                    <i class="fa fa-times-circle fa-space-right"
                                                       aria-hidden="true"></i>Cancel</a>
                                                <button
                                                        type="button"
                                                        class="btn btn-warning step4 bold"
                                                        id="back-to-three">
                                                    <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                                                    Back to Professional Details
                                                </button>
                                                <button
                                                        type="submit"
                                                        class="btn btn-success step4 bold"
                                                        id="submit">
                                                    Save Expert data
                                                    <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div><!-- /.box-body -->
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endblock %}
    </div>
    <div class="modal fade  modal-wide" id="modal-inst">
        <div class="modal-dialog modal-lg col-md-6 col-lg-6 ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add Institution</h4>
                </div>
                <div class="modal-body">
                    <span class="inst-error"></span>
                    <form action="#" method="POST" role="form"
                          id="addInst">
                        <div class="form-group">
                            <label for="icountry" class="tipso"
                                   title="This field cannot be changed. This is selected on the selection made by you previously while creating your profile">Select
                                Institution Country<span
                                        class="req">*</span> <i
                                        class="fa fa-question-circle"
                                        aria-hidden="true"></i></label>
                            <input type="text" name="icountry"
                                   id="icountry"
                                   class="form-control" value=""
                                   readonly="">
                        </div><!-- /.form-group -->

                        <div class="form-group">
                            <label
                                    for="instName"
                                    class="tipso"
                                    title="Enter the complete official name of the Institution in an official language of the institution.
                                    Use English if English is the main working language of the institution. <br />
                                    e.g. Vlaams Instituut Voor De Zee">
                                Name<span class="req">*</span>
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="instName"
                                    id="instName"
                                    class="form-control"
                                    {% if data.user.institution is defined %}
                                        value="{{ data.user.institution }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                   placeholder="e.g. Vlaams Instituut Voor De Zee" />
                        </div>
                        <div class="form-group">
                            <label
                                    for="instNameEng"
                                    class="tipso"
                                    title="Enter the complete name of the Institution in English.
                                    You can skip this if you have already entered the institution name in English above.<br />
                                    e.g. Flanders Marine Institute">
                                Name in English
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="instNameEng"
                                    id="instNameEng"
                                    class="form-control"
                                    {% if data.user.institution is defined %}
                                        value="{{ data.user.institution }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                   placeholder="e.g. Flanders Marine Institute" />
                        </div>
                        <div class="form-group">
                            <label
                                    for="iacronym"
                                    class="tipso"
                                    title="Enter the official Acronym of the institute in upper case.<br />e.g. VLIZ">
                                Acronym<i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="iacronym"
                                    id="iacronym"
                                    class="form-control capitalize"
                                    value=""
                                    placeholder="Institution acronym" />
                        </div>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label for="instLogo" class="tipso"
                                       title="Add the institute logo">Institute Logo</label>
                                <input type="file"  accept="image/*" name="instLogo" id="instLogo" class="form-control" value="" title="" placeholder="Upload Logo" >
                            </div>
                            <div class="form-group col-md-3">
                                <img id="logo-preview" src="#" style="display: none;" alt="uploaded image" class="img-thumbnail"/>
                                <div class="col-md-12 text-center">
                                    <button class="btn btn-danger btn-sm" id="remove" type="button" style="display: none;">Remove</button>
                                </div>

                            </div>
                        </div>
                        <!-- TODO PARENT INSTITUTE HERE -->
                        <div class="form-group">
                            <label
                                    for="instType"
                                    class="tipso"
                                    title="Select the type of your institution from the given list.<br />e.g. Government">
                                Type<span class="req">*</span>
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    id="instType"
                                    name="instType">
                                <option
                                        disabled=""
                                        selected="">
                                </option>
                                <option
                                        label="Academic"
                                        value="1">
                                    Academic
                                </option>
                                <option
                                        label="Government"
                                        value="3">
                                    Government
                                </option>
                                <option
                                        label="International / Intergovernmental"
                                        value="7">
                                    International / Intergovernmental
                                </option>
                                <option
                                        label="NGO"
                                        value="4">
                                    NGO
                                </option>
                                <option
                                        label="Private commercial"
                                        value="6">
                                    Private commercial
                                </option>
                                <option
                                        label="Private non-profit"
                                        value="5">
                                    Private non-profit
                                </option>
                                <option
                                        label="Research"
                                        value="2">
                                    Research
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="iaddress" class="tipso"
                                   title="Enter  Street Name + No., P.O. Box, Company Name, C/O <br />e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">
                                Address Line 1<span class="req">*</span>
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="iaddress"
                                    id="iaddress"
                                    class="form-control"
                                    {% if data.user.instAddrLine1 is defined %}
                                        value="{{ data.user.instAddrLine1 }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                   placeholder="Street address, P.O. box, company name, c/o" />
                        </div>
                        <div class="form-group">
                            <label
                                    for="iaddressline2"
                                    class="tipso"
                                    title="Enter  Building,  Floor or Office number<br />e.g.  No.7/61 or Building No. 12 or 2nd Floor etc.">
                                Address Line 2 <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="iaddressline2"
                                    id="iaddressline2"
                                    class="form-control"
                                    {% if data.user.instAddrLine2 is defined %}
                                        value="{{ data.user.instAddrLine2 }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                    placeholder="Apartment, suite, unit, building, floor, etc" />
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label
                                        for="ipostcode"
                                        class="tipso"
                                        title="Enter the Postal Area code for the Locality<br />e.g. 8400">
                                    Postal/ Zip Code
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <input
                                        type="text"
                                        name="ipostcode"
                                        id="ipostcode"
                                        class="form-control"
                                        {% if data.user.zipCode is defined %}
                                            value="{{ data.user.zipCode }}"
                                        {% else %}
                                            value=""
                                        {% endif %}
                                        placeholder="ZIP/Postal Code" />
                            </div>
                            <div class="form-group col-md-8">
                                <label
                                        for="icity"
                                        class="tipso"
                                        title="Enter Name of Your City<br />e.g. Oostende">
                                    City<span class="req">*</span>
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <input type="text" name="icity"
                                       id="icity"
                                       class="form-control"
                                        {% if data.user.instCity is defined %}
                                            value="{{ data.user.instCity }}"
                                        {% else %}
                                            value=""
                                        {% endif %}
                                       placeholder="City">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="istate" class="tipso"
                                   title="Enter State/Province/Region<br />e.g. West Vlaanderen">State/Province/Region
                                <i class="fa fa-question-circle"
                                   aria-hidden="true"></i></label>
                            <input type="text" name="istate"
                                   id="istate" class="form-control"
                                    {% if data.user.instState is defined %}
                                        value="{{ data.user.instState }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                   placeholder="State/Province/Region">
                        </div>
                        <div class="form-group">
                            <label for="icontact" class="tipso"
                                   title="Enter official phone number of your institution. Start with your country code and/or area code<br/>e.g. +32 4563481122">Phone
                                Telephone <i
                                        class="fa fa-question-circle"
                                        aria-hidden="true"></i></label>
                            <input type="text" name="icontact"
                                   id="icontact"
                                   class="form-control" value=""
                                   placeholder="Contact Telephone">
                        </div>
                        <div class="form-group">
                            <label for="ifax" class="tipso"
                                   title="Enter official fax number of your institution. Start with your country code and/or area code">Fax</label>
                            <input type="text" name="ifax" id="ifax"
                                   class="form-control" value=""
                                   placeholder="Institution Fax">
                        </div>
                        <div class="form-group">
                            <label for="iemail" class="tipso"
                                   title="Enter the official contact email for your institution.<br />e.g. info@yourinstitution.org">Email
                                <i class="fa fa-question-circle"
                                   aria-hidden="true"></i></label>
                            <input type="text" name="iemail"
                                   id="iemail" class="form-control"
                                    {% if data.user.instEmail is defined %}
                                        value="{{ data.user.instEmail }}"
                                    {% else %}
                                        value=""
                                    {% endif %}
                                   placeholder="Institution Email">
                        </div>
                        <div class="form-group">
                            <label
                                    for="iwebsite"
                                    class="tipso"
                                    title="Enter the URL of the official web portal of your website.<br />e.g. http://www.iode.org">
                                Website
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="iwebsite"
                                    id="iwebsite"
                                    class="form-control"
                                    value=""
                                    placeholder="Institution Website eg. http://www.example.com">
                        </div>
                        <div class="form-group">
                            <label
                                    for="iedmo"
                                    class="tipso"
                                    title="Enter (if present )the SeaDataNet EDMO code for your institution.">
                                EDMO Code
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <small
                                    class="pull-right">
                                <a
                                        href="javascript:void(0);"
                                        title="European Directory of Marine Organizations (<a href='http://www.seadatanet.org/' target='_blank'>EDMO</a>) is a database of information about major European institutions involved in oceanic and marine research or related activities">
                                    What's This
                                </a>
                            </small>
                            <input
                                    type="text"
                                    name="iedmo"
                                    id="iedmo"
                                    class="form-control"
                                    value=""
                                    placeholder="EDMO Record ID"
                                    pattern="\d*">
                        </div>
                        <div class="form-group">
                            <label
                                    for="studyregion"
                                    class="tipso"
                                    title="Select one or more Global Sea Regions to describe the regions of your institution study.<br />e.g. Pacific Small Islands">
                                Sea regions of study
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>

                            <select
                                    class="form-control select2 noSearch"
                                    style="width: 100%;"
                                    id="studyregion"
                                    name="studyregion[]"
                                    data-placeholder="e.g. Pacific Small Islands"
                                    multiple="multiple">
                                {% for seaRegion in data.availableSeaRegions %}
                                    <option
                                            label="{{seaRegion.id}}"
                                            value="{{seaRegion.id}}" >
                                        {{seaRegion.name}}
                                    </option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="iactivity" class="tipso"
                                   title="Briefly enter major activities performed at your institution">
                                Activities
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <textarea
                                    name="iactivity"
                                    id="iactivity"
                                    class="form-control textarea"
                                    rows="3"
                                    placeholder="Activities">
                            </textarea>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button
                            type="button"
                            class="btn btn-danger bold"
                            data-dismiss="modal">
                        <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                        Close
                    </button>
                    <button
                            type="button"
                            class="btn btn-success bold"
                            id="addInstitution">
                        Add Institution
                        <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    </div>

    {% include "footer.html.twig" %}
    <script src="{{ asset('js/app.min.js') }}"></script>
    <script type="text/javascript">
        var userEmail = $("#inputUserEmail").val();
    </script>
    <script src="{{asset('js/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/validator.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.inputmask.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-colorpicker.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-typeahead.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery-ui.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/login.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>
    <!-- no idea what this is doing here Arno 10/09/24 -->
    <!-- script src="{{ asset('js/admin-add-expert.js') }}" type="text/javascript"></script -->
    <script src="{{ asset('js/jquery.noty.packaged.min.js') }}" type="text/javascript"></script>

    <script>
        $("#tab1, #tab2, #tab4").css('pointer-events', 'all');
        $active = $(".addexpert");
        $active.addClass('active');
        $active.parents(".treeview-menu").addClass("menu-open").css('display','block');
        $active.parents(".treeview").addClass("active");



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


        $(function () {
            $("#instType").select2({
                placeholder: "Select Institute type",
                allowClear: false
            });
            $("#country").select2({
                placeholder: "e.g. Belgium",
                allowClear: false
            });


            var submitted = "";
            $('#submit').click(function (e) {
                if (validateAllFields()) {
                    submitted = "form submitted."
                } else {
                    return false;
                }
            });

            /*     window.onbeforeunload = function() {
             if(submitted == ''){
             return "Unsaved changes may be lost if you navigate away from this page.";
             }
             }
             */
        });

        $('#modal-inst').on('hidden.bs.modal', function () {
            $("#institute").select2("val", "");
            $(".wait").css("display","none");
        })

        let $eventSelect = $("#institute");
        if ($eventSelect.val() == null) {
            $("#useinstaddress").iCheck('disable');
        }

        $eventSelect.on("change", function (e) {
            if ($("#institute option:selected").val() == 'create_new') {
                $('#modal-inst').modal('show');
                $("#icountry").val($("#country option:selected").text());
            }
            if ($eventSelect.val() != null) {
                let useInstAddr = $("#useinstaddress");
                if (useInstAddr.val() == "1") {
                    useInstAddr.iCheck('uncheck');
                    useInstAddr.iCheck('check');
                }
                useInstAddr.iCheck('enable');
            }
        });

        function validateAllFields() {
            let $step1Error = $("#step1-error");
            let $step2Error = $("#step2-error");
            let $step3Error = $("#step3-error");
            let $formGroup = $(".form-group");

            //clean the errors
            $step1Error.html();

            var error = false;
            $formGroup.removeClass('has-error');
            $("#select2-country-container").parent().css('border-color', '#d2d6de');
            if ($('input[name=reg-type]:checked').val() == "2") {
                if ($("#address2").val() == "") {
                    $("#address2").closest('.form-group').addClass('has-error');
                    error = true;
                }
                if ($("#city2").val() == "") {
                    $("#city2").closest('.form-group').addClass('has-error');
                    error = true;
                }


                if ($("#country2").val() == null) {
                    $("#country2").closest('.form-group').addClass('has-error');
                    $("#select2-country2-container").parent().css('border-color', 'red');
                    error = true;
                }
            } else {
                if ($("#country").val() == null) {
                    $("#country").closest(".form-group").addClass('has-error');
                    $("#select2-country-container").parent().css('border-color', 'red');
                    error = true;
                }
                if ($("#institute").val() == null) {
                    $("#institute").closest(".form-group").addClass('has-error');
                    $("#select2-institute-container").parent().css('border-color', 'red');
                    error = true;
                }

                if ($("#route").val() == "") {
                    $("#route").closest(".form-group").addClass('has-error');
                    error = true;
                }
                if ($("#locality").val() == "") {
                    $("#locality").closest(".form-group").addClass('has-error');
                    error = true;
                }
            }

            if (error == false) {
               $step1Error.html("");
            } else {
               $step1Error.html("<span class='error'><i class='fa fa-exclamation-triangle fa-lg fa-fw' aria-hidden='true'></i>Please fill up mandatory fields marked in red.</span>");
                $("#tab1").click();
                goUp("#tab1");
                return false;
            }

            $step2Error.html();
            var error = false;
            $formGroup.removeClass('has-error');
            $("#select2-title-container").parent().css('border-color', '#d2d6de');
            $("#select2-nationality-container").parent().css('border-color', '#d2d6de');
            $("#select2-degree-container").parent().css('border-color', '#d2d6de');
            $("#select2-jobtype-container").parent().css('border-color', '#d2d6de');
            $("#select2-languages-container").parent().css('border-color', '#d2d6de');


            if ($("#firstname").val() == "") {
                $("#firstname").closest('.form-group').addClass('has-error');
                $("#firstname").focus();
                error = true;
            }
            if ($("#lastname").val() == "") {
                $("#lastname").closest('.form-group').addClass('has-error');
                $("#lastname").focus();
                error = true;
            }
            if ($('input[name="gender"]:checked').length == 0) {
                $('input[name="gender"]').closest('.form-group').addClass('has-error');
                $('input[name="gender"]').focus();
                // return false;
                error = true;
            }

            let $userMail = $("#userEmail");
            if ($userMail.val() == "") {
                $userMail.closest(".form-group").addClass('has-error');
                error = true;
            }
            if (!isValidEmailAddress($userMail.val())) {
                $userMail.closest(".form-group").addClass('has-error');
                error = true;
            }
            $userMail.blur();

            if (error == false) {
                $step2Error.html();
            } else {
                $step2Error.html("<span class='error'><i class='fa fa-exclamation-triangle fa-lg fa-fw' aria-hidden='true'></i>Please fill up mandatory fields marked in red.</span>");
                $("#tab2").click();
                goUp("#tab2");
                return false;
            }

            $step3Error.html();
            var error = false;
            $formGroup.removeClass('has-error');

            if (error == false) {
                $step3Error.html();
            } else {
                $step3Error.html("<span class='error'><i class='fa fa-exclamation-triangle fa-lg fa-fw' aria-hidden='true'></i>Please fill up mandatory fields marked in red.</span>");
                $("#tab3").click();
                goUp("#tab3");
                return false;
            }

            if (error == false) {
                return 1;
            }

        }

        $("#userEmail").blur(function () {
            $this = $(this);
            $this.siblings('.error').remove();
            $("#userEmail").closest(".form-group").removeClass('has-error');
            $.ajax({
                url: "{{ path('fos_email_check') }}",
                type: 'GET',
                data: {email: $this.val()},
            }).done(function (response) {
                if (response.status == 0) {
                    $this.closest(".form-group").addClass('has-error');
                    $this.parent().append("<span class='error small'>" + response.message + "</span>");
                    $this.val("");
                    error = true;
                }
            });
        });


        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#logo-preview').attr('src', e.target.result);
                };
                reader.readAsDataURL(input.files[0]);
                $("#remove").css('display','block');
            }
        }


        $('#instLogo').change(function () {
            readURL(this);
            $('#logo-preview').show();
        });
        $('#remove').click(function(e)
        {
            $("#remove").css('display','none');
            $('#instLogo').val("");
            $('#textLogo').val("");
            $('#logo-preview').attr("src","{{ asset('assets/images/no-logo.jpg')}}");
        })


        function goUp(id) {
            $("html, body").animate({
                scrollTop: $(id).offset().top
            }, 600);
        }
        function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
            return pattern.test(emailAddress);
        }

        $("#submitNew").click(function () {
            if(validateAllFields() == 1) {
                $("#submitAndNew").val("1");
                $("#submit").click();
            }
        });

        var unsaved = false;
        $(":input").change(function () { //trigers change in all input fields including text type
            unsaved = true;
        });
        $("#submit").click(function () {
            unsaved = false;
        });
        function unloadPage() {
            if (unsaved) {
                return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
            }
        }

        window.onbeforeunload = unloadPage;

        $( document ).ready(function() {
            setTimeout(function(){
                $("#country").change();
            }, 500);

            {% if data.userInstitute is  not empty and data.userInstitute|length == 1  %}
            setTimeout(function(){
                $("#institute").val({{ data.userInstitute.0.id_inst }}).trigger("change");
            }, 2000);

            {% endif %}
            setTimeout(function () {
                $("#route").val("{{ data.user.addressLine1 }}");
                $("#addrline2").val("{{ data.user.addressLine2 }}");
                $("#locality").val("{{ data.user.city }}");
                $("#administrative_area_level_1").val("{{ data.user.state }}");
                $("#postal_code").val("{{ data.user.zipCode }}");
            },2500);

            $(".selectInstitute").click(function () {
                var instId = $(this).data("id");
                console.log(instId);
                $("#institute").val(instId).trigger("change");
            });
        });
    </script>

{% endblock %}