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

{% block title %}OceanExpert - A Directory of Marine and Freshwater Professionals{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/social-buttons.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/advancedSearch.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/search.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/google-fonts.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/institution.css') }}">
{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}

    <!-- JSON-LD will be used for SEO and OIH -->
    <script type="application/ld+json">
        {{ OIHData | raw }}
    </script>
    <div class="container-fluid">
        <!-- Content Wrapper. Contains page content -->
        <div class="">
            <!-- Content Header (Page header) -->
            <section class="content-header">
            </section>
            <section class="content">
                <div class="row">
                    <div class="col-md-3">

                        <!-- Profile Image -->
                        <div class="box box-primary">
                            <div class="box-body box-profile">
                                {% if institute.idInst is defined and institute.idInst | trim != "" %}
                                    <h4 class="text-center">OceanExpert ID : <strong>{{ institute.idInst }}</strong></h4>
                                {% endif %}
                                <div class="inst-logo">
                                    {% if institute.instLogo != "" %}
                                        {% if institute.instUrl != "" %}
                                            <a
                                                    href="{% if institute.instUrl starts with "http" %}{{ institute.instUrl }}{% else %}{{ 'http://' ~ institute.instUrl }}{% endif %}"
                                                    target="_blank">
                                                <img
                                                        src="{{ asset('uploads/institutes/'~institute.idInst~'/'~institute.instLogo)}}"
                                                        class="img-thumbnail inst-image"
                                                        alt="Institution Logo" />
                                            </a>
                                        {% else %}
                                            <img
                                                    src="{{ asset('uploads/institutes/'~institute.idInst~'/'~institute.instLogo)}}"
                                                    class="img-thumbnail inst-image"
                                                    alt="Institution Logo" />
                                        {% endif %}

                                    {% else %}
                                        <i class="fa fa-university fa-5x" aria-hidden="true"></i>
                                    {% endif %}
                                </div>
                                <p class="lead text-center">{{ institute.instName }}<br/>
                                    <small><strong>
                                            {% if institute.acronym is defined and institute.acronym != "" %}
                                                {{ institute.acronym }}
                                            {% endif %}
                                        </strong></small>
                                </p>

                                {% if institute.instNameEng is defined and institute.instNameEng != "" %}
                                    <p class="text-center">({{ institute.instNameEng }})</p>
                                {% endif %}
                                {% if (app.user is not null and ((institute.createdId is defined and institute.createdId == app.user.id) or (institute.lastEditId is defined and institute.lastEditId == app.user.id)) ) or is_granted('ROLE_GLOBAL_EDITOR') %}
                                    <div class="text-center">
                                        {% if is_granted('ROLE_GLOBAL_EDITOR') %}

                                            {% if institute.activated is defined and institute.activated  == 0 %}
                                                <span class="statusBtn"><button class="btn btn-success activate"><i
                                                                class="fa fa-check"
                                                                aria-hidden="true"></i> Activate</button></span>
                                            {% elseif institute.activated is defined and institute.activated == 1 %}
                                                <span class="statusBtn"><button class="btn btn-danger ban"><i
                                                                class="fa fa-ban"
                                                                aria-hidden="true"></i> Deactivate</button></span>
                                            {% elseif institute.activated is defined and institute.activated == 2 %}
                                                <span class="statusBtn"><button class="btn btn-warning activate"><i
                                                                class="fa fa-check"
                                                                aria-hidden="true"></i> Un-delete</button></span>
                                            {% endif %}
                                        {% endif %}

                                        <a
                                                href="{{ path('edit_institute',{'instId': institute.idInst}) }}"
                                                class="btn btn-primary">
                                            <i class="fa fa-user" aria-hidden="true"></i> Edit Institute
                                        </a>
                                    </div>

                                {% endif %}
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                        <div class="box box-primary">
                            <div class="box-body">
                                <strong><i class="fa icon-profile fa-map-marker margin-r-5" aria-hidden="true"></i>
                                    Address</strong>

                                <div class="data">
                                    {{ institute.address |raw }}
                                </div>
                                {% if institute.insttypeName is defined and institute.insttypeName != "" %}

                                    <hr class="details">
                                    <strong><i class="fa icon-profile fa-flag margin-r-5" aria-hidden="true"></i>
                                        Type</strong>
                                    <p class="data tex-center">{{ institute.insttypeName }}</p>
                                {% endif %}


                                {% if institute.instEmail is defined and institute.instEmail != "" %}
                                    <hr class="details">
                                    <strong><i class="fa icon-profile fa-envelope margin-r-5"></i> Email</strong>
                                    {% if app.user.email is defined %}
                                        <p class="data tex-center"><a
                                                    href="mailto:{{ institute.instEmail }}">{{ institute.instEmail }}</a>
                                        </p>
                                    {% else %}
                                        <p class="data tex-center">Please login to view email.</p>
                                    {% endif %}
                                {% endif %}

                                {% if institute.instTel is defined and institute.instTel != "" %}

                                    <hr class="details">
                                    <strong><i class="fa icon-profile fa-phone-square margin-r-5"></i>
                                        Telephone</strong>
                                    <p class="data tex-center">{{ institute.instTel }}</p>
                                {% endif %}

                                {% if institute.instFax is defined and institute.instFax != "" %}
                                    <hr class="details">
                                    <strong><i class="fa icon-profile fa-fax margin-r-5"></i> Fax</strong>

                                    <p class="data tex-center">{{ institute.instFax }}</p>

                                {% endif %}
                            </div>
                        </div>
                        {% if institute.parentIdInst is defined and institute.parentIdInst != "" and institute.parentIdInst != 0 %}
                            <div class="box box-primary">
                                <div class="box-body">
                                    <strong><i class="fa icon-profile fa-university margin-r-5" aria-hidden="true"></i>
                                        Parent institute</strong>
                                    {% if institute.parentInstLogo is defined and institute.parentInstLogo != "" %}
                                        {% set instUrl = asset('uploads/institutes/'~institute.parentIdInst~'/'~institute.parentInstLogo) %}
                                    {% else %}
                                        {% set instUrl = asset('assets/uploads/institute.png') %}
                                    {% endif %}
                                    <div class="text-center">
                                        <a
                                                href="{{ path('view_institution', {'instId': institute.parentIdInst}) }}"
                                                class="profile-url">
                                            <img
                                                    class="group list-group-image lazy img-thumbnail img-responsive"
                                                    data-original="{{ instUrl }}"
                                                    alt="Institution Logo" />
                                        </a>
                                        <div class="caption">
                                            <p class="text-center">
                                                <strong>
                                                    <a
                                                            href="{{ path('view_institution', {'instId': institute.parentIdInst}) }}"
                                                            class="profile-url">
                                                        {{ institute.parentInstName }}
                                                    </a>
                                                </strong>
                                                <br/><strong>{{ institute.parentAcronym }}</strong>
                                                <br/>({{ institute.parentInstNameEng }})
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                    </div>
                    <!-- /.col -->
                    <div class="col-md-9">
                        {% if (institute.instUrl is defined and institute.instUrl != "") or (institute.edmoCode is defined and institute.edmoCode != "") or (institute.seaRegions is defined and institute.seaRegions | length > 0) or (institute.activities is defined and institute.activities != "") %}
                            <!-- About Me Box -->
                            <div class="box box-primary">

                                <!-- /.box-header -->
                                <div class="box-body">


                                    {% if institute.instUrl is defined and institute.instUrl != "" %}
                                        <strong><i class="fa icon-profile fa-internet-explorer margin-r-5"
                                                   aria-hidden="true"></i> Website</strong>

                                        <p class="data tex-center"><a href="{% if institute.instUrl starts with "http" %}{{ institute.instUrl }}{% else %}{{ 'http://' ~ institute.instUrl }}{% endif %}" target="_blank">{{ institute.instUrl }}</a></p>

                                    {% endif %}

                                    {% if institute.edmoCode is defined and institute.edmoCode != "" %}
                                        <hr>
                                        <strong><i class="fa icon-profile fa-barcode margin-r-5" aria-hidden="true"></i>
                                            EDMO code</strong>

                                        <p class="data tex-center"><a href="http://seadatanet.maris2.nl/v_edmo/print.asp?n_code={{institute.edmoCode}}" target="_blank">{{ institute.edmoCode }}</a></p>

                                    {% endif %}


                                    {% if institute.seaRegions is defined and institute.seaRegions | length > 0 %}
                                        <hr>
                                        <strong><i class="fa icon-profile fa-globe margin-r-5" aria-hidden="true"></i>
                                            Sea Region of study</strong>

                                        <p class="data tex-center">
                                            {% for seaRegion in institute.seaRegions %}
                                                {{ seaRegion.name }}<br/>
                                            {% endfor %}
                                        </p>

                                    {% endif %}

                                    {% if institute.activities is defined and institute.activities != "" %}
                                        <hr>
                                        <strong><i class="fa icon-profile fa-compass margin-r-5" aria-hidden="true"></i>
                                            Activities</strong>

                                        <p class="data tex-center">{{ institute.activities|raw }}</p>

                                    {% endif %}
                                </div>
                                <!-- /.box-body -->
                            </div>
                        {% endif %}
                        <!-- /.box -->
                        {% if members.getTotalItemCount > 0 %}

                            <div class="box box-primary">

                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div>
                                        <strong><i class="fa icon-profile fa-users margin-r-5" aria-hidden="true"></i>
                                            Associated Experts</strong>
                                    </div>
                                    <span class="col-md-3 search-display">
                                    Displaying {{ members.getPaginationData.firstItemNumber }}
                                        – {{ members.getPaginationData.lastItemNumber }}
                                        results of {{ members.getTotalItemCount }}.
                                    </span>
                                    <div class="row">
                                        <div class="col-md-12 tblhdrs">
                                            <div class=" selectContainer">
                                                Show <select
                                                        name="mlimit"
                                                        id="mlimit"
                                                        data-id="mlimit"
                                                        class="maxresults">
                                                    {% for key,option in limits.memberlimit.options %}
                                                        {% if limits.memberlimit.selected == key %}
                                                            <option id="{{ key }}" selected>{{ option }}</option>
                                                        {% else %}
                                                            <option id="{{ key }}">{{ option }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select> Records
                                            </div>
                                            <span class=" pagination-sm">
                                            {{ knp_pagination_render(members) }}
                                        </span>
                                        </div>
                                    </div>
                                    <div class="row list-group">
                                        <div class="col-md-12">
                                            {% for item in members %}
                                                <div class="item  col-xs-4 col-lg-4 list-group-item">
                                                    <div class="thumbnail-institution">
                                                        <a
                                                                href="{{ path('view_profile', {'user': item.idInd}) }}"
                                                                class="profile-url">
                                                            <img
                                                                    class="group list-group-image lazy img-thumbnail img-responsive"
                                                                    data-original="{% if file_exists(web_path~asset('uploads/profile/profile_'~item.idInd~'.png')) %}{{ asset('uploads/profile/profile_'~item.idInd~'.png') }}{% endif %}"
                                                                    src="{{ asset('assets/uploads/default.png') }}"
                                                                    alt="User profile picture"
                                                                    onError="this.src='{{ asset('assets/uploads/default.png') }}';" />
                                                            </a>
                                                        <div class="caption">
                                                            <p class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_profile', {'user': item.idInd}) }}"
                                                                            class="profile-url">
                                                                        {{ item.fname | raw | title }} {{ item.sname | raw | upper }}
                                                                    </a>
                                                                </strong>
                                                                {% if item.qualityChecked == 1 %}
                                                                    <i
                                                                            class="green fa fa-check-circle tipso"
                                                                            title="User has been verified.">
                                                                    </i>
                                                                {% endif %}
                                                                {% if item.retired == 1 %}
                                                                    <span
                                                                            class="label label-success">
                                                                        Retired
                                                                    </span>
                                                                {% endif %}
                                                                {% if item.deceased == 1 %}
                                                                    <span
                                                                            class="label label-danger">
                                                                        Deceased
                                                                    </span>
                                                                {% endif %}
                                                                <br/>
                                                                {% if item.jobtitle != "" %}
                                                                    {{ item.jobtitle }}
                                                                {% endif %}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <hr class="caption blue"/>
                                        <div class="col-md-12 pagination-sm pull-right">
                                            {{ knp_pagination_render(members) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        <!-- child institutes -->
                        {% if childinstitutes.getTotalItemCount > 0 %}
                        <div class="box box-primary">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div>
                                    <strong>
                                        <i class="fa icon-profile fa-university margin-r-5" aria-hidden="true"></i>
                                        Child Institutes
                                    </strong>
                                </div>
                                <span class="col-md-3 search-display">
                                Displaying {{ childinstitutes.getPaginationData.firstItemNumber }}
                                    – {{ childinstitutes.getPaginationData.lastItemNumber }}
                                    results of {{ childinstitutes.getTotalItemCount }}.
                                </span>

                                <div class="row">
                                    <div class="col-md-12 tblhdrs">
                                        <div class=" selectContainer">
                                            Show <select name="cilimit" id="cilimit" data-id="cilimit" class="maxresults">
                                                {% for key,option in limits.childinstitutelimit.options %}
                                                    {% if limits.childinstitutelimit.selected == key %}
                                                        <option id="{{ key }}" selected>{{ option }}</option>
                                                    {% else %}
                                                        <option id="{{ key }}">{{ option }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select> Records
                                        </div>
                                        <span class=" pagination-sm">
                                            {{ knp_pagination_render(childinstitutes) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="row list-group">
                                    <div class="col-md-12">
                                        {% for item in childinstitutes %}
                                            {% if item.instLogo is defined and item.instLogo != "" %}
                                                {% set instUrl = asset('uploads/institutes/'~item.idInst~'/'~item.instLogo) %}
                                            {% else %}
                                                {% set instUrl = asset('assets/uploads/institute.png') %}
                                            {% endif %}
                                            <div class="item col-xs-4 col-lg-4 list-group-item">
                                                <div class="thumbnail-institution">
                                                    <a
                                                            href="{{ path('view_institution', {'instId': item.idInst}) }}"
                                                            class="profile-url">
                                                        <img
                                                                class="group list-group-image lazy img-thumbnail img-responsive"
                                                                data-original="{{ instUrl }}"
                                                                alt="Institution Logo" />
                                                    </a>
                                                    <div class="caption">
                                                        <p class="group inner list-group-item-text">
                                                            <strong>
                                                                <a
                                                                        href="{{ path('view_institution', {'instId': item.idInst}) }}"
                                                                        class="profile-url">
                                                                    {{ item.instName }}
                                                                </a>
                                                            </strong>
                                                            <br/><strong>{{ item.acronym }}</strong>
                                                            <br/>({{ item.instNameEng }})
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <hr class="caption blue"/>
                                <div class="col-md-12 pagination-sm pull-right">
                                    {{ knp_pagination_render(childinstitutes) }}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        <!-- experts from child institutes -->
                        {% if childmembers.getTotalItemCount > 0 %}
                            <div class="box box-primary">
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div>
                                        <strong>
                                            <i class="fa icon-profile fa-users margin-r-5" aria-hidden="true"></i>
                                            Associated Experts from Child Institutes
                                        </strong>
                                    </div>
                                    <span class="col-md-3 search-display">
                                        Displaying {{ childmembers.getPaginationData.firstItemNumber }}
                                        – {{ childmembers.getPaginationData.lastItemNumber }}
                                        results of {{ childmembers.getTotalItemCount }}.
                                    </span>

                                    <div class="row">
                                        <div class="col-md-12 tblhdrs">
                                            <div class=" selectContainer">
                                                Show <select
                                                        name="cmlimit"
                                                        id="cmlimit"
                                                        data-id="cmlimit"
                                                        class="maxresults">
                                                    {% for key,option in limits.childmemberlimit.options %}
                                                        {% if limits.childmemberlimit.selected == key %}
                                                            <option id="{{ key }}" selected>{{ option }}</option>
                                                        {% else %}
                                                            <option id="{{ key }}">{{ option }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select> Records
                                            </div>
                                            <span class=" pagination-sm">
                                                {{ knp_pagination_render(childmembers) }}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="row list-group">
                                        <div class="col-md-12">
                                            {% for item in childmembers %}
                                                <div class="item  col-xs-4 col-lg-4 list-group-item">
                                                    <div class="thumbnail-institution">
                                                        <a
                                                                href="{{ path('view_profile', {'user': item.idInd}) }}"
                                                                class="profile-url">
                                                            <img
                                                                    class="group list-group-image lazy img-thumbnail img-responsive"
                                                                    data-original="{% if file_exists(web_path~asset('uploads/profile/profile_'~item.idInd~'.png')) %}{{ asset('uploads/profile/profile_'~item.idInd~'.png') }}{% endif %}"
                                                                    alt="Institution Logo"
                                                                    src="{{ asset('assets/uploads/default.png') }}"
                                                                    onError="this.src='{{ asset('assets/uploads/default.png') }}';">
                                                        </a>
                                                        <div class="caption">
                                                            <p class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_profile', {'user': item.idInd}) }}"
                                                                            class="profile-url">
                                                                        {{ item.fname | raw | title }} {{ item.sname | raw | upper }}
                                                                    </a>
                                                                </strong>
                                                                {% if item.qualityChecked == 1 %}
                                                                    <i
                                                                            class="green fa fa-check-circle tipso"
                                                                            title="User has been verified.">

                                                                    </i>
                                                                {% endif %}
                                                                {% if item.retired == 1 %}
                                                                    <span
                                                                            class="label label-success">
                                                                        Retired
                                                                    </span>
                                                                {% endif %}
                                                                {% if item.deceased == 1 %} <span
                                                                        class="label label-danger">Deceased</span>{% endif %}
                                                                <br/>{% if item.jobtitle != "" %}{{ item.jobtitle }}<br/>{% endif %}
                                                                {{ item.instName }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <hr class="caption blue"/>
                                    <div class="col-md-12 pagination-sm pull-right">
                                        {{ knp_pagination_render(childmembers) }}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <!-- /.col -->
                </div>
            </section>
        </div>
        <em id='edited-by'
            class="pull-right italics">
            {% if institute.fDateEntered is defined and institute.fDateEntered != "" %}
                Created: {{ institute.fDateEntered|date('Y-m-d') }}
                {% if institute.createdBy is defined and  institute.createdBy != "" %}
                    by {{ institute.createdBy }}
                {% endif %}
                |
            {% endif %}
            {% if institute.lDateUpdated is defined and institute.lDateUpdated != "" %}
                Last Updated: {{ institute.lDateUpdated|date('Y-m-d') }}
            {% endif %}
            {% if institute.lastEditBy is defined and  institute.lastEditBy != "" %}
                by {{ institute.lastEditBy }}
            {% endif %}
        </em>
    </div>
    {% include('footer.html.twig') %}

    <script
            src="{{ asset('js/jquery.noty.packaged.min.js') }}"
            type="text/javascript">
    </script>
    <script
            src="{{ asset('js/tipped.js') }}"
            type="text/javascript">
    </script>
    <script type="text/javascript">
        $(function () {
            Tipped.create('.tipso', {maxWidth: 250});
            function notify(type, text) {
                var n = noty({
                    text: text,
                    layout: 'top',
                    theme: 'relax', // or 'relax'
                    type: type,
                    timeout: 5000,
                });
            }
            {% for flashMessage in app.session.flashbag.get('record_updated') %}

            notify('success', '{{ flashMessage }}');

            {% endfor %}

            {% if is_granted('ROLE_GLOBAL_EDITOR') %}
            $(document).delegate(".activate", "click", function () {
                $(this).html('<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Activate')
                $.ajax({
                    url: "{{ path('activate_institute',{'instituteId': institute.idInst}) }}",
                    type: 'POST',
                })
                        .done(function (response) {
                            if (response.status === true) {
                                $(".statusBtn").html('<button class="btn btn-danger ban" id="ban"><i class="fa fa-ban" aria-hidden="true"></i> Deactivate</button>');
                            } else {
                                $(".statusBtn").html('<button class="btn btn-success activate" id="activate"><i class="fa fa-check" aria-hidden="true"></i> Activate</button>');
                            }
                        });
            });
            $(document).delegate(".ban", "click", function () {
                $(this).html('<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Deactivate')
                $.ajax({
                    url: "{{ path('deactivate_institute',{'instituteId': institute.idInst}) }}",
                    type: 'POST',
                })
                        .done(function (response) {
                            if (response.status === true) {
                                $(".statusBtn").html('<button class="btn btn-success activate" id="activate"><i class="fa fa-check" aria-hidden="true"></i> Activate</button>');
                            } else {
                                $(".statusBtn").html('<button class="btn btn-danger ban" id="ban"><i class="fa fa-ban" aria-hidden="true"></i> Deactivate</button>');
                            }
                        });
            });
            {% endif %}

                //on select change, you navigate to indexAction and send the parameter maxItemPerPage
                $('.maxresults').change(function(){
                    $this = $(this);
                    var key = $this.data("id");
                    //var url = '{{ path('view_institution',{'instId':institute.idInst}) }}';
                    var item = $this.find(":selected").text();

                    window.location.href = updateURL(key,item);
                    // window.location.href = updateQueryStringParameter(url,key,item);
                })
        });

        function updateURL(key,val){
            var url = window.location.href;
            var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*");

            if(reExp.test(url)) {
                // update
                reExp = new RegExp("[\?&]" + key + "=([^&#]*)");
                var delimiter = reExp.exec(url)[0].charAt(0);
                url = url.replace(reExp, delimiter + key + "=" + val);
            } else {
                // add
                var newParam = key + "=" + val;
                if(url.indexOf('?') === -1){url += '?';}

                if(url.indexOf('#') > -1){
                    var urlparts = url.split('#');
                    url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');
                } else {
                    url += "&" + newParam;
                }
            }
            url = url.replace('?&', '?');
            return url;
        }
    </script>
{% endblock %}