{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | {% if data.event is not null %} Edit Event{% else %}Add a New Event{% endif %}
{% 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/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" type="text/css" href="{{ asset('css/jquery-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/checkbox.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/nestable.modified.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/events.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-dialog.min.css') }}">

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">
        <div class="wait">
            <div id="cssload-wrapper">
                <div id="cssload-border">
                    <div id="cssload-whitespace">
                        <div id="cssload-line">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% block sidebar %}
            {% include('Admin/adminSidebar.html.twig') %}
        {% endblock %}
        <div class="content-wrapper">
            {#{{ dump(data.eventContacts) }}#}
            <!-- 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-calendar-o"></i>
                        {% if data.event is not null %}
                            Edit Event
                        {% else %}
                            Add a New Event
                        {% endif %}
                    </li>
                </ol>
            </section>
            {% block content %}
                <div class="content">
                    <legend>
                        {% if data.event is not null %}
                            Edit Event: {{ data.event.title }}
                        {% else %}
                            Add a New Event
                        {% endif %}
                    </legend>
                    <div class="nav-tabs-custom">
                        <span class="event-share pull-right">
                            {% if data.event.idEvent is defined %}
                                <a
                                        class="btn btn-danger"
                                        href="{{ path('view_event',{ 'event': data.event.idEvent}) }}">
                                    <i class="fa fa-fw fa-times"></i>
                                    Turn off Editing
                                </a>
                            {% endif %}
                            <a
                                    class="btn btn-success btn-save"
                                    id="saveAndFinish">
                                <i class="fa fa-floppy-o fa-fw"></i>
                                Save & Finish
                            </a>
                        </span>

                        {#{% endif %}#}
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a
                                        href="#overview"
                                        data-toggle="tab"
                                        aria-expanded="true">
                                    Overview
                                </a>
                            </li>
                            {% if data.event is not null %}
                                <li class="">
                                    <a
                                            href="#peopleoptions"
                                            data-toggle="tab"
                                            aria-expanded="false">
                                        Options
                                    </a>
                                </li>
                                <li class="">
                                    <a
                                            href="#people"
                                            data-toggle="tab"
                                            aria-expanded="false">
                                        Participants
                                    </a>
                                </li>
                                <li class="">
                                    <a
                                            href="#agenda"
                                            data-toggle="tab"
                                            aria-expanded="false">
                                        Agenda & Docs
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="overview">
                                {% include('Event/overview.html.twig') %}
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="peopleoptions">
                                {% include('Event/peopleoption.html.twig') %}
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="people">
                                {% include('Event/people.html.twig') %}
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="agenda">
                                {% include('Event/agenda.html.twig') %}

                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div>
                </div>

               <!-- Modal to create new -->
                <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 Institute</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 Institute 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=""
                                                title="Institute country"
                                                readonly="" />
                                    </div><!-- /.form-group -->

                                    <div class="form-group">
                                        <label for="state" class="tipso"
                                               title="Enter the complete official name of the Institute in an official language of the institute.
                                               Use English if English is the main working language of the institute.<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"
                                                value=""
                                                title=""
                                                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 Institute in English.
                                                You can skip this if you have already entered the institute 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"
                                                value=""
                                                title=""
                                                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=""
                                                title=""
                                                placeholder="Institute acronym">
                                    </div>
                                    <!-- TODO PARENT INSTITUTE HERE -->
                                    <div class="form-group">
                                        <label
                                                for="institute"
                                                class="tipso"
                                                title="Select the type of your institute 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"
                                                data-toggle="tooltip"
                                                title="">
                                            <option
                                                    disabled=""
                                                    selected="">
                                                Type
                                            </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"
                                                value=""
                                                title=""
                                                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" value=""
                                                title=""
                                                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<span class="req">*</span>
                                                <i
                                                        class="fa fa-question-circle"
                                                        aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    type="text"
                                                    name="ipostcode"
                                                    id="ipostcode"
                                                    class="form-control"
                                                    value=""
                                                    title=""
                                                    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"
                                                    value=""
                                                    title=""
                                                    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"
                                                value=""
                                                title=""
                                                placeholder="State/Province/Region">
                                    </div>
                                    <div class="form-group">
                                        <label
                                                for="icontact"
                                                class="tipso"
                                                title="Enter official phone number of your institute.
                                                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=""
                                                title=""
                                                placeholder="Contact Telephone">
                                    </div>
                                    <div class="form-group">
                                        <label
                                                for="ifax"
                                                class="tipso"
                                                title="Enter official fax number of your institute. Start with your country code and/or area code">
                                            Fax
                                        </label>
                                        <input type="text"
                                               name="ifax"
                                               id="ifax"
                                               class="form-control" value=""
                                               title=""
                                               placeholder="Institute Fax">
                                    </div>
                                    <div class="form-group">
                                        <label
                                                for="iemail"
                                                class="tipso"
                                                title="Enter the official contact email for your institute.<br />e.g. info@yourinstitute.org">
                                            Email<i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <input
                                                type="text"
                                                name="iemail"
                                                id="iemail"
                                                class="form-control"
                                                value=""
                                                title=""
                                                placeholder="Institute 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">
                                            Institute Website <i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <input
                                                type="text"
                                                name="iwebsite"
                                                id="iwebsite"
                                                class="form-control"
                                                value=""
                                                title=""
                                                placeholder="Institute 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 institute.">
                                            EDMO Code <i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <small class="pull-right">
                                            <a
                                                    href="javascript:void(0);"
                                                    class="tooltips"
                                                    title="European Directory of Marine Organizations
                                                    (<a href='http://www.seadatanet.org/' target='_blank'>EDMO</a>) is a database
                                                    of information about major European institutes
                                                    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=""
                                                title=""
                                                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 institute 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 institute">
                                            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="addInstitute">
                                    Add Institute<i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end add institute modal -->

                <div class="hidden-label">
                    <div class="form-group label-control">
                        <div class="row">
                            <div class="col-sm-4">
                                <select
                                        class="form-control eventlabel"
                                        name="labelGroup[]">
                                    <option
                                            value=""
                                            selected=""
                                            disabled="">
                                        Select Label
                                    </option>
                                    {% for group in data.availableCalenderGroups %}
                                        <option
                                                value="{{ group.idGroup }}">
                                            {{ group.groupname }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select
                                        class="form-control eventtype"
                                        name="label[]">
                                    <option
                                            value=""
                                            selected=""
                                            disabled="">
                                        Select Type
                                    </option>
                                    {% for eventLabelType in data.availableEventLabels %}
                                        <option
                                                value="{{ eventLabelType.id }}">
                                            {{ eventLabelType.type }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            {#<div class="col-sm-2">#}
                            <button
                                    type="button"
                                    class="btn btn-danger removeLabel">
                                Remove
                            </button>
                            {#</div>#}
                        </div>
                    </div>
                </div>
            {% endblock %}

            <!-- modal add document -->
            <div
                    class="modal fade"
                    id="modal-edit"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                    aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">
                                Document Details
                            </h4>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button
                                    type="button"
                                    class="btn btn-danger"
                                    data-dismiss="modal">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end modal add document -->
        </div>
    </div>

    <!-- MODAL to add participants -->
    <div
            class="modal fade"
            id="addMember"
            tabindex="-1"
            role="dialog"
            aria-labelledby="addMemberLabel"
            aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div
                        class="modal-header btn-success">
                    <h4
                            id="groupEditLabel">
                        Add Member(s) to Event <span id="addExpertType"></span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <div class="input-group">
                                <div class="input-group-btn search-panel">
                                    <button
                                            type="button"
                                            class="btn btn-default dropdown-toggle"
                                            data-toggle="dropdown">
                                        <span
                                                id="search_concept">
                                            Filter by
                                        </span><span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <a href="#name">
                                                Name
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#email">
                                                Email
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#group">
                                                Groups
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <input
                                        type="hidden"
                                        name="search_param"
                                        value="all"
                                        id="search_param" />
                                <input
                                        type="hidden"
                                        name="action"
                                        value="browse"
                                        id="search_action">
                                <input
                                        type="text"
                                        class="form-control"
                                        name="searchString"
                                        id="search_term"
                                        placeholder="Search Members..." />
                                <span class="input-group-btn">
                                    <button
                                            class="btn btn-default searchMembers"
                                            type="button">
                                        <i class="fa fa-search fa-fw"></i> Search
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="result">
                            <table class="table table-striped resultSet">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Institute/Group</th>
                                    <th>Country</th>
                                    <th>Action</th>
                                    <th style="display: none">Relevance</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>Name</th>
                                    <th>Institute/Group</th>
                                    <th>Country</th>
                                    <th>Action</th>
                                    <th style="display: none">Relevance</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <input
                                type="hidden"
                                value=""
                                id="member-type" />
                        <button
                                type="button"
                                class="btn btn-success add-all" >
                            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
                            Add all the above to event
                        </button>
                        <button
                                type="button"
                                class="btn btn-danger"
                                data-dismiss="modal">
                            <i class="fa fa-times-circle fa-fw" aria-hidden="true"></i>
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end MODAL to add participants -->

    {% include "footer.html.twig" %}
    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/plugins/purify.js') }}"></script>
    <script src="{{ asset('js/plugins/canvas-to-blob.min.js') }}"></script>
    <script src="{{ asset('js/plugins/sortable.min.js') }}"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.noty.packaged.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-tooltip.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-confirmation.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.select.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.validate.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery-ui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tinymce.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('js/event.js') }}"></script>
    <script src="{{ asset('js/documents.js') }}"></script>
    <script src="{{ asset('js/jquery.nestable.js') }}"></script>
    <script src="{{ asset('js/handlebars.min.js') }}"></script>
    <script type="text/javascript">

        var addInstitutionUrl = "{{ path('add_institution') }}";
        var getInstitutionUrl = "{{ path('get_institution_by_country') }}";
        var getInstitutionAddress = "{{ path('get_institution_address') }}";
        var getAllGroupsJson = "{{ path('get_all_groups_json') }}";
        var getGroup = "{{ path('view_group', {'groupId': 'groupId'}) }}";
        var getMembers = "{{ path('get_members') }}";
        var getProfile = "{{ path('view_profile', {'user': 'idInd'}) }}";
        var addEventMember = "{{ path('add_event_member') }}";
        var addBulkEventMember = "{{ path('add_bulk_event_member') }}";
        var deleteEventMember = "{{ path('delete_event_member') }}";
        var deleteDocument = "{{ path('delete_event_document') }}";
        var updateEventMember = "{{ path('edit_event_member') }}";
        var updateEventContacts = "{{ path('edit_event_contacts') }}";
        var searchDocuments = "{{ path('search_documents') }}";
        var getDocumentById = "{{ path('get_document_by_id') }}";
        var addEventDocument = "{{ path('add_event_document') }}";
        var saveAgendaOrder = "{{ path('save_agenda_order') }}";
        var uploadEventDocument = "{{ path('upload_event_document') }}";
        var updateAgenda = "{{ path('update_agenda_item') }}";
        var clearContactUrl = "{{ path('event_clear_contact') }}";
        var updatePresentationAgenda = "{{ path('update_presentation_agenda') }}";
        var sendInvitesEventParticipants = "{{ path('send_invites_event_participants') }}";
        var nologo = "{{ asset('assets/images/no-logo.jpg')}}";
        var addNewUser = "{{ path('add_expert') }}";
        {% if data.event.idEvent is defined %}
            var eventPage = "{{ path('view_event',{'event':data.event.idEvent}) }}"
            var eventConfirmationPage = "{{ path('confirm_event_creation',{'eventId':data.event.idEvent}) }}"
        {% endif %}

        var participantsRole = "";
        {% for role in data.participantRoles %}
           participantsRole += "<option value='{{ role.idRole }}'>{{ role.role }}</option>";
        {% endfor %}

        {% if data.event != null %}
            var idEvent = "{{ data.event.idEvent }}";
        {% endif %}

        $("#people-roles").sortable({
            handle : '.handle',
            update : function () {
                var order = $('#people-roles').sortable('serialize');
                $("#info").load("process-sortable.php?"+order);
            }
        });

        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#' + url.split('#')[1]+ '"]').tab('show');
        }

        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            window.location.hash = e.target.hash;
        })

        $('.nav-tabs').click(function () {
            $("html, body").animate({scrollTop: 0}, 10);
        });

        var instituteId = "";
        {% if data.event is not null %}
            instituteId = "{{ data.event.idInst }}";

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

            {% if data.agendaItems != "" %}
                var agendaItems = JSON.parse('{{ data.agendaItems|raw|escape("js") }}');
                //console.log(agendaItems);

                $(".event").addClass('navactive');
                Tipped.create('.tipso', {maxWidth: 250});

                function buildItem(items) {
                    var html = "<ol class='dd-list'>";
                    $.each(items, function (index, item) {
                        var notetext = "Add Notes";
                        html += "<li class='dd-item' data-id='" + item.id + "' id='" + item.id + "'>";
                        html += "<div class='dd-handle'>";
                        html += "<span class='group-name dd-nodrag'>";
                        html += "<span class='agenda-no'>"+item.idAgendaitem + "</span> - <span class='agenda-name'>" + " " + item.title + "</span>";
                        html += "<div class='dd-nodrag notes'>";
                        if (item.notes !== "") {
                            notetext = "Edit Notes";
                            html += item.notes;
                        }
                        if(item.requiredActions !== ""){
                            html += " <u>"+item.requiredActions+"</u>";
                        }
                        html += "</div>";

                        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                            html += "<div href='#' class='pull-right dd-nodrag actions'>";
                            html += "<span class='tipso' title='Edit " + item.title + " agenda'><i class='fa fa-pencil fa-fw editAgenda'></i></span> ";
                            html += "<span class='tipso' title='Add agenda below " + item.title + " agenda'><i class='fa fa-plus fa-fw addAgenda'></i></span> ";
                            html += "<span class='tipso' title='Delete " + item.title + " agenda'><i class='fa fa-minus text-red fa-fw removeAgenda'></i></span>";
                            html += "</i></div>";
                        {% endif %}

                        if (item.documents.length>0) {
                            $.each(item.documents,function (key, documentfile) {
                                html += "<div class='agenda-docs'><i class='fa fa-file' aria-hidden='true'></i> <a href='javascript:void(0)' class='view-document' data-docid='"+documentfile.idDoc+"'>"+documentfile.docCode+" "+documentfile.doctitle+"</a>";
                                    html += "<a data-iddoc='"+documentfile.idDoc+"' data-idagenda='"+item.id+"' data-idEvent='"+idEvent+"' href='javascript:void(0)' onclick='removeAgendaDocs("+idEvent+","+documentfile.idDoc+","+item.id+")' class='left-space no-drag removeAgendaDocs'>[ Remove doc ]</a></div>";
                            })
                        }
                        html += "<span class='agenda-links small'><a href='javascript:void(0)' class='editAgenda no-drag'> "+notetext+"</a> | <a href='javascript:void(0);' class='add-agenda-documents no-drag'>Add documents</a> </div>";
                        html += "</span>";
                        html += "</div>";

                        if (item.children) {
                            html += buildItem(item.children);
                        }
                        html += "</li>";
                    });
                    html += "</ol>";
                    return html;
                }

                //check if, for the agendaItems, we got an error message (with status = 0),
                //meaning there are no agenda items to be found for this event
                if (agendaItems["status"] !== 0) {
                    $.each(agendaItems, function (index, item) {
                        $('#nestable ul').append(buildItem(item));
                        Tipped.create('.tipso', {maxWidth: 250});
                    });
                }

                var updateOutput = function (e) {
                    var list = e.length ? e : $(e.target);
                    if (typeof list != 'undefined') {
                        var tree = list.nestable('serialize');
                        var order = {
                            groups: []
                        };
                        var process = function (array, parentid) {
                            for (var i = 0; i < array.length; i++) {
                                var node = array[i];
                                if (node.children) {
                                    process(node.children, node.id);
                                }
                                order.groups.push({
                                    "agendaId": node.id,
                                    "parentId": parentid,
                                    "order": i
                                });
                            }
                        };
                        process(tree, 0);
                        $.ajax({
                            url: saveAgendaOrder,
                            data: {'order': JSON.stringify(order)},
                            method: 'post'
                        }).done(function (response) {
                            if (response.status === 1) {
    //                            BootstrapDialog.alert({type:'TYPE_SUCCESS', message:'Agenda order updated.',title:'<i class="fa fa-thumbs-up" aria-hidden="true"></i> Success!'});
                            } else {
    //                            BootstrapDialog.alert({type:'TYPE_DANGER', message:'Agenda order cannot be updated.',title:'<i class="fa fa-thumbs-down" aria-hidden="true"></i> Error!'});
                            }
                        });
                    }
                }
                $("#nestable").nestable().on('change', updateOutput);

            {% endif %}

            $("body").on("click", ".addAgenda", function (event) {
                console.log("#addAgenda");
                window.position = $(this);
                var parentAgenda = position.parents('.dd-handle').find('.agenda-name').html();
                var parentAgendId = position.closest('.dd-item').data("id");

                let headingHtml = '';
                if (parentAgenda === undefined) {
                    headingHtml = '<span class="modal-heading">Add an agenda item</span>';
                } else {
                    headingHtml = '<span class="modal-heading">Add an agenda item under "' + parentAgenda + '"</span>';
                }

                let contentHtml = '<div class="form-horizontal">';
                contentHtml += '<fieldset>';
                contentHtml += '<div class="form-group">';
                contentHtml += '<label class="col-md-3 control-label" for="agendaNumber">Agenda Item Number</label>';
                contentHtml += '<div class="col-md-8">';
                contentHtml += '<input id="agendaNumber" name="agendaNumber" type="text" placeholder="e.g. 2.5.3" class="form-control input-md" value="">';
                contentHtml += '</div>';
                contentHtml += '</div>';
                contentHtml += '</fieldset>';
                contentHtml += '<fieldset>';
                contentHtml += '<div class="form-group">';
                contentHtml += '<label class="col-md-3 control-label" for="agendaName">Agenda Item Name</label>';
                contentHtml += '<div class="col-md-8">';
                contentHtml += '<input id="agendaName" name="agendaName" type="text" placeholder="e.g. Opening of the meeting" class="form-control input-md" value="">';
                contentHtml += '<input id="parentAgendId" name="parentAgendId" type="hidden" value="' + parentAgendId + '">';
                contentHtml += '</div>';
                contentHtml += '</div>';
                contentHtml += '</fieldset>';
                contentHtml += '</div>';

                let btnHtml = '<button ' +
                        'type="button" ' +
                        'class="btn btn-success" ' +
                        'id="addAgenda" >' +
                    'Add' +
                    '</button>' +
                    '<button ' +
                        'type="button" ' +
                        'class="btn btn-danger" ' +
                        'data-dismiss="modal">' +
                    'Cancel</button>';

                const modalEdit = $("#modal-edit");
                modalEdit.find(".modal-title").html(headingHtml);
                modalEdit.find(".modal-body").html(contentHtml);
                modalEdit.find(".modal-footer").html(btnHtml);
                modalEdit.modal("show");
            });

            $("body").on("click", "#addAgenda", function () {
                console.log("#addAgenda");
                {% if data.event.idEvent %}
                    {% set idEvent = data.event.idEvent %}
                {% else %}
                    {% set idEvent = 0 %}
                {% endif %}

                var $this = $(this);
                var agendaName = $("input#agendaName").last().val();
                var parentId = $("#parentAgendId").val();
                var agendaNumber = $("#agendaNumber").val();
                if ($.trim(agendaName) !== "") {
                    $this.html("Please wait...");
                    $this.attr("disabled",true);
                    $.ajax({
                        url: "{{ path('add_agenda_item',{'idEvent':idEvent }) }}",
                        data: {'agendaName': agendaName, 'parentId': parentId, 'agendaNumber':agendaNumber},
                        method: 'post'
                    }).done(function (response) {
                        var html = "<li class='dd-item' data-id='" + response.childGroup + "' id='" + response.childGroup + "'>";
                        html += "<div class='dd-handle'><span class='group-name dd-nodrag'>" + "<span class='agenda-no'>" + agendaNumber + "</span> - <span class='agenda-name'> " + agendaName + "</span>";
                        html += "<div class='dd-nodrag notes'></div>";
                        html += "<div href='#' class='pull-right dd-nodrag actions' style='display: block;'>";
                        html += "<span class='tipso' title='Edit " + agendaName + " group'><i class='fa fa-pencil fa-fw editAgenda'></i></span> ";
                        html += "<span class='tipso' title='Add subgroup in " + agendaName + " group'><i class='fa fa-plus fa-fw addAgenda'></i></span> ";
                        html += "<span class='tipso' title='Delete " + agendaName + " group'><i class='fa fa-minus text-red fa-fw removeAgenda'></i></span>";
                        html += "</div>";
                        html += "<span class='agenda-links small'><a href='javascript:void(0)' class='editAgenda no-drag'> Add Notes</a> | <a href='javascript:void(0);' class='add-agenda-documents no-drag'>Add documents</a> </span>";
                        html += "</span>";

                        html += "</div></li>";

                        if (response.status === 1) {
                            $("#modal-edit").modal("hide");
                            if (response.parent === 0) {
                                if (position.closest('.dd-handle').siblings('ol').length > 0) {
                                    position.closest('.dd-handle').siblings('ol').append(html);
                                } else {
                                    var btnHtml = '<button data-action="collapse" type="button">Collapse</button>';
                                    btnHtml += '<button data-action="expand" type="button" style="display: none;">Expand</button>'
                                    html = "<ol class='dd-list'>" + html + "</ol>";

                                    if ( position.children("ol").length > 0 ) {
                                        position.closest('.dd-item').prepend(btnHtml);
                                        position.closest('.dd-handle').after(html);
                                    }else{
                                        position.closest('.dd-item').prepend(btnHtml);
                                        position.closest('.dd-handle').after(html);
                                    }
                                }
                            } else if (response.parent === 1) {
                                if ($("#nestable>ul.dd-list").children().length === 0) {
                                    $("#nestable>ul.dd-list").html('<ol class="dd-list">'+html+'</ol>');
                                }else{
                                    $("ol.dd-list:first").append(html);
                                }
                            }
                            Tipped.create('.tipso', {maxWidth: 250});
                        } else {
                            BootstrapDialog.alert(
                                {
                                    type: BootstrapDialog.TYPE_DANGER,
                                    message:'Agenda item cannot be added.<br />' + response.message,
                                    title:'<i class="fa fa-thumbs-down" aria-hidden="true"></i> Error!'
                                }
                            );
                        }
                        $this.html("Add Agenda Item");
                        $this.attr("disabled",false);
                    });
                    Tipped.create('.tipso', {maxWidth: 250});
                } else {
                    return false;
                }
            });

            let modalEdit = $("#modal-edit");
            modalEdit.on('hidden.bs.modal', function () {
                modalEdit.find(".modal-title").html("");
                modalEdit.find(".modal-body").html("");
                modalEdit.find(".modal-footer").html("");
            });

            $("body").on("click", ".removeAgenda", function (event) {
                window.position = $(this);
                var parentAgenda = position.parents('.dd-handle').find('.agenda-name').html();
                //var parentGroupId = position.closest('.dd-item').data("id");

                var headingHtml = '<i class="fa fa-fw fa-exclamation-triangle"></i>' +
                    '<span class="modal-heading"> ' +
                    'Are you sure you want to remove agenda item ?' +
                    '</span>';

                var contentHtml = 'The agenda item ' + parentAgenda + ' and all its sub-items will be deleted.';

                var btnHtml = '<button ' +
                        'type="button" ' +
                        'class="btn btn-success" ' +
                        'id="removeAgenda" >' +
                    'Remove Agenda Item' +
                    '</button>' +
                    '<button ' +
                        'type="button" ' +
                        'class="btn btn-danger" ' +
                        'data-dismiss="modal" >' +
                    'Cancel' +
                    '</button>';

                let modalEdit = $("#modal-edit");
                modalEdit.find(".modal-title").html(headingHtml);
                modalEdit.find(".modal-body").html(contentHtml);
                modalEdit.find(".modal-footer").html(btnHtml);
                modalEdit.modal("show");
            });

            $("body").on("click", "#removeAgenda", function (event) {
                var agendaId = position.closest('.dd-item').data("id");
                var $this = $(this);
                var prehtml = $this.html();
                $this.attr('disabled',true);
                $this.html("<i class='fa fa-fw fa-spin fa-cog'></i> Please wait...");

                $.ajax({
                    url: '{{ path('delete_agenda_item') }}',
                    data: {'agendaId': agendaId, 'eventId': '{{ data.event.idEvent }}'},
                    method: 'post'
                }).done(function (data) {
                    if (position.closest('.dd-list').children().length < 2) {
                        position.closest('.dd-list').siblings('button').remove()
                        position.closest('.dd-list').remove();
                    } else {
                        position.closest('.dd-item').remove();
                    }
                    $this.html(prehtml);
                    $this.attr('disabled',false);
                    $("#modal-edit").modal("hide");
                });

            });

        {% endif %}

        var oldJqTrigger = jQuery.fn.trigger;
        jQuery.fn.trigger = function()
        {
            if ( arguments && arguments.length > 0) {
                if (typeof arguments[0] == "object") {
                    if (typeof arguments[0].type == "string") {
                        if (arguments[0].type === "show.bs.modal") {
                            var ret = oldJqTrigger.apply(this, arguments);
                            if ($('.modal:visible').length) {
                                $('.modal-backdrop.in').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
                                $(this).css('z-index', parseInt($('.modal-backdrop.in').first().css('z-index')) + 10);
                            }
                            return ret;
                        }
                    }
                }
                else if (typeof arguments[0] === "string") {
                    if (arguments[0] === "hidden.bs.modal") {
                        if ($('.modal:visible').length) {
                            $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
                            $('body').addClass('modal-open');
                        }
                    }
                }
            }
            return oldJqTrigger.apply(this, arguments);
        };


        $(function () {
            $("#sortable").sortable({
                sort: function (event, ui) {
                    var $target = $(event.target);
                    if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
                        var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
                        ui.helper.css({'top': top + 'px'});
                    }
                },
            });
            $("#sortable").disableSelection();
        });

        var submitted = "";
        $('.btn-save').click(function (e) {
            submitted = "form submitted."
        });

        $('.document-close').click(function (e) {
            submitted = "form submitted."
        });
        $("body").on("click",".upload-step-1",function () {
            submitted = "form submitted.";
        })

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

    </script>
{% endblock %}