{% 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/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.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/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/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
{% endblock %}

{% block body %}
<style>
    #logo-preview{
        height:100px;
    }
    #remove{margin-top: 10px;}
</style>

{% include('navbarlogin.html.twig') %}
<div class="container-fluid">
    <div class="wait">
        <div id="cssload-wrapper">
            <div id="cssload-border">
                <div id="cssload-whitespace">
                    <div id="cssload-line">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="login-logo">
            <a href="#"><br/>
            </a>
        </div>
        <!-- /.login-logo -->

        <div class="">
            <div class="box-body">
                <form
                        id="editInstitute"
                        action=""
                        method="post"
                        enctype="multipart/form-data"
                        accept-charset="utf-8"
                        autocomplete="off">
                    <input
                            type="hidden"
                            name="instId"
                            id="inputInstId"
                            class="form-control"
                            value="{{ institute.idInst }}" />
                    <div class="panel panel-default">
                        <div class="panel-heading active">
                            <h4 class="panel-title ">
                                Edit your Institute
                            </h4>
                        </div>

                        <div class="panel-body">
                            <div class="box-body">
                                <div class="modal-body">
                                    <span class="inst-error"></span>
                                    <form action="#" method="POST" role="form" id="addInst">
                                        <div class="form-group">
                                            <label
                                                    for="country"
                                                    class="tipso"
                                                    title="Select the country where the institute is located e.g. Belgium">
                                                Country
                                                <span class="req">*</span>
                                            </label>
                                            <select
                                                    class="form-control select2"
                                                    style="width: 100%;"
                                                    name="icountryCode"
                                                    id="icountryCode"
                                                    data-toggle="tooltip"
                                                    title="!" >
                                                <option
                                                        disabled="disabled"
                                                        selected="selected">
                                                    e.g. Belgium
                                                </option>
                                                {% for country in countries %}
                                                    <option
                                                            value="{{ country.idCountry }}"
                                                            countryCode="{{ country.countryCode }}"
                                                    {% if country.country ==  institute.country%}
                                                            selected="selected"
                                                    {% endif %} >
                                                        {{ country.country }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <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. Enter it in English if it is the principle working language of the institute.">
                                                Institute<span class="req">*</span>
                                            </label>
                                            <input
                                                    type="text"
                                                    name="instName"
                                                    id="instName"
                                                    class="form-control"
                                                    value="{{ institute.instName }}"
                                                    title=""
                                                    placeholder="e.g. Vlaams Instituut Voor De Zee"
                                                    required="required" />
                                        </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.">
                                                Name in English
                                            </label>
                                            <input
                                                    type="text"
                                                    name="instNameEng"
                                                    id="instNameEng"
                                                    class="form-control"
                                                    value="{{ institute.instNameEng }}"
                                                    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.">
                                                Acronym
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iacronym"
                                                    id="iacronym"
                                                    class="form-control"
                                                    value="{{ institute.acronym }}"
                                                    title="" placeholder="e.g. VLIZ" />
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-3">
                                                <label
                                                        for="instLogo"
                                                        class="tipso"
                                                        title="Add the institute logo">
                                                    Institute Logo
                                                </label>
                                                <input
                                                        type="file"
                                                        accept="image/*"
                                                        name="instLogo"
                                                        id="instLogo"
                                                        class="form-control"
                                                        value="{{ institute.instLogo }}"
                                                        title=""
                                                        placeholder="Upload Logo" >
                                                {% if institute.instLogo != "" %}
                                                    <input
                                                            type="hidden"
                                                            name="textLogo"
                                                            id="textLogo"
                                                            value="{{ institute.instLogo }}" >
                                                {% endif %}
                                            </div>

                                            <div class="form-group col-md-3">
                                                <img id="logo-preview"
                                                     src="{% if institute.instLogo != "" %}
                                                                {{ asset('uploads/institutes/'~institute.idInst~'/'~institute.instLogo)}}
                                                            {% else %}
                                                                #
                                                            {% endif %}"
                                                     {% if institute.instLogo == "" %}
                                                         style="display: none;"
                                                     {% endif %}
                                                     alt="uploaded image"
                                                     class="img-thumbnail"/>
                                                <div class="col-md-12 text-center">
                                                    <button
                                                            class="btn btn-danger btn-sm"
                                                            id="remove"
                                                            type="button"
                                                            {% if institute.instLogo == "" %}
                                                                style="display: none;"
                                                            {% endif %}>
                                                        Remove
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="parentinstitute"
                                                    class="tipso"
                                                    title='Select the parent Organization/Institute/Company.<br />e.g. National Oceanic and Atmospheric Administration'>
                                                Parent Organization/Institute/Company
                                            </label>
                                            <select
                                                    name="parentinstitute"
                                                    class="form-control select2"
                                                    id="parentinstitute">
                                                {% if institute.parentIdInst is defined %}
                                                    <option
                                                            value="{{ institute.parentIdInst }}"
                                                            selected>{{ institute.parentInstName }}
                                                    </option>
                                                {% endif %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="instType"
                                                    class="tipso"
                                                    title="Select the type of your institute from the given list.">
                                                Type <span class="req">*</span>
                                            </label>
                                            <select
                                                    class="form-control select2"
                                                    style="width: 100%;"
                                                    id="instType"
                                                    name="instType"
                                                    data-toggle="tooltip"
                                                    title=""
                                                    required="">
                                                <option
                                                        disabled=""
                                                        selected="">
                                                    e.g. Government
                                                </option>
                                                {% for instType in instituteTypes %}
                                                    <option
                                                            value="{{ instType.id }}"
                                                            {% if instType.id ==  institute.instTypeId%}
                                                                selected="selected"
                                                            {% endif %} >
                                                        {{ instType.name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="iaddress"
                                                    class="tipso"
                                                    title="Enter  Street Name + No., P.O. Box, Company Name, C/O">
                                                Address Line 1<span class="req">*</span>
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iaddress"
                                                    id="iaddress"
                                                    class="form-control"
                                                    value="{{ institute.instAddress }}"
                                                    title=""
                                                    placeholder="e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc."
                                                    required="">
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="iaddressline2"
                                                    class="tipso"
                                                    title="Enter  Building,  Floor or Office number">
                                                Address Line 2
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iaddressline2"
                                                    id="iaddressline2"
                                                    class="form-control"
                                                    value="{{ institute.addr2 }}"
                                                    title=""
                                                    placeholder="e.g.  No.7/61 or Building No. 12 or 2nd Floor etc." />
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-4">
                                                <label
                                                        for="ipostcode"
                                                        class="tipso"
                                                        title="Enter the Postal Area code for the Locality">
                                                    Postal/ Zip Code <span class="req">*</span>
                                                </label>
                                                <input
                                                        type="text"
                                                        name="ipostcode"
                                                        id="ipostcode"
                                                        class="form-control"
                                                        value="{{ institute.postcode }}"
                                                        title=""
                                                        placeholder="e.g. 8400"
                                                        required="required" />
                                            </div>
                                            <div class="form-group col-md-8">
                                                <label
                                                        for="icity"
                                                        class="tipso"
                                                        title="Enter Name of Your City">
                                                    City<span class="req">*</span>
                                                </label>
                                                <input
                                                        type="text"
                                                        name="icity"
                                                        id="icity"
                                                        class="form-control"
                                                        value="{{ institute.city }}"
                                                        title=""
                                                        placeholder="e.g. Oostende"
                                                        required="required" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label
                                                    for="istate"
                                                    class="tipso"
                                                    title="Enter State/Province/Region">
                                                State/Province/Region
                                            </label>
                                            <input
                                                    type="text"
                                                    name="istate"
                                                    id="istate"
                                                    class="form-control"
                                                    value="{{ institute.state }}"
                                                    title=""
                                                    placeholder="e.g. West Vlaanderen">
                                        </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">
                                                Phone
                                            </label>
                                            <input
                                                    type="text"
                                                    name="icontact"
                                                    id="icontact"
                                                    class="form-control"
                                                    value="{{ institute.instTel }}"
                                                    title=""
                                                    placeholder="e.g. +32 4563481122">
                                        </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="{{ institute.instFax }}"
                                                    title=""
                                                    placeholder="e.g. +32 4563481122">
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="iemail"
                                                    class="tipso"
                                                    title="Enter the official contact email for your institute.">
                                                Email
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iemail"
                                                    id="iemail"
                                                    class="form-control"
                                                    value="{{ institute.instEmail }}"
                                                    title=""
                                                    placeholder="e.g. info@yourinstitute.org">
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="iwebsite"
                                                    class="tipso"
                                                    title="Enter the URL of the official web portal of your website.">
                                                Website
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iwebsite"
                                                    id="iwebsite"
                                                    class="form-control"
                                                    value="{{ institute.instUrl }}"
                                                    title=""
                                                    placeholder="e.g. http://www.iode.org" />
                                        </div>
                                        <div class="form-group">
                                            <label
                                                    for="iedmo"
                                                    class="tipso"
                                                    title="Enter (if present )the SeaDataNet EDMO code for your institute.">
                                                EDMO Record ID
                                            </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="{% if institute.edmoCode!=0 %}
                                                        {{ institute.edmoCode }}
                                                    {% endif %}"
                                                    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 institute.availableSeaRegions %}
                                                    {% if seaRegion.id in institute.instRegion|split(',') %}
                                                        <option
                                                                label="{{ seaRegion.id }}"
                                                                value="{{ seaRegion.id }}"
                                                                selected="">
                                                            {{ seaRegion.name }}
                                                        </option>
                                                    {% else %}
                                                        <option
                                                                label="{{ seaRegion.id }}"
                                                                value="{{ seaRegion.id }}">
                                                            {{ seaRegion.name }}
                                                        </option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="iactivity"
                                                    class="tipso"
                                                    title="Briefly enter major activities performed at your institute">
                                                Activities
                                            </label>
                                            <textarea
                                                    name="iactivity"
                                                    id="iactivity"
                                                    class="form-control textarea"
                                                    rows="8"
                                                    placeholder="Activities">{{ institute.activities }}
                                            </textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <a
                                            href="{{ path('view_institute',{'instId': institute.idInst}) }}"
                                            title="">
                                        <button
                                                type="button"
                                                class="btn btn-danger bold">
                                            <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                                            Cancel
                                        </button>
                                    </a>
                                    <button
                                            type="submit"
                                            class="btn btn-success bold"
                                            id="addInstitute">
                                        <i class="fa fa-save fa-space-right" aria-hidden="true"></i>
                                        Save Institute
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% include('footer.html.twig') %}

<script src="{{ asset('js/jquery.validate.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/zebra_tooltips.js') }}" type="text/javascript"></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/tipped.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    var getInstituteUrl = "{{ path('get_institution_by_country') }}";
    var searchInstituteUrl = "{{ path('get_institution_ajax') }}?instId={{ institute.idInst }}";

    /**
     * do after loading the page
     */
    $(function ()
    {
        $("#instType").select2("val", "{{ institute.instTypeId }}");

        Tipped.create('.tipso', {maxWidth: 250});

        new $.Zebra_Tooltips($('.tooltips'), {
            'background_color': '#fcf8e3',
            'color': '#3D4A70',
            'max_width': 300,
            'position': "right",
        });
        $('.textarea').wysihtml5();

        jQuery.validator.setDefaults({
            onkeyup: false /* , other defaults */
        });

        //validate some of the input
        $("#editInstitute").validate({
            rules: {
                instName: {
                    required: {
                        depends:function(){
                            $(this).val($.trim($(this).val()));
                            return true;
                        }
                    }
                },
                iemail: {
                    email: {
                        depends:function(){
                            $(this).val($.trim($(this).val()));
                            return true;
                        }
                    }
                },
                iaddress: {
                    required: {
                        depends:function(){
                            $(this).val($.trim($(this).val()));
                            return true;
                        }
                    }
                },
                instType: {
                    required: true
                },
                iwebsite: {
                    url: {
                        depends:function(){
                            $(this).val($.trim($(this).val()));
                            return true;
                        }
                    }
                },
            },
            messages: {
                instName: "Please enter an institute name",
                email: {
                    email: "Your email address must be in the format of name@domain.com",
                },
                iaddress: {
                    required: "Please enter a valid institute address",
                },
                instType: {
                    required: "Please select institute type",
                },
                iwebsite: {
                    url: "Please enter valid institute URL",
                }
            }
        });

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

        //load parent institute in select2
        /*
        (getInstituteUrl, $("#icountryCode").val()).done(
            $("#parentinstitute").select2( "val", "{{ institute.parentIdInst }}" );
        );
        */

        //load all other possible parent institutes in select2
        $("#parentinstitute").select2({
            placeholder: "Type here to search for an iiiiiiinstitute.",
            minimumInputLength: 3,
            //allowClear: true,
            ajax: {
                url: getInstituteUrl,
                dataType: 'json',
                //delay: 250,
                data: function (params) {
                    var query = {
                        search: params.term,
                        countryCode: $("#icountryCode").val()
                    }

                    // Query parameters will be ?search=[term]&type=public
                    return query;
                },
                processResults: function (response) {
                    var returnValue = [];
                    $.each(response, function (index, value) {
                        returnValue.push({
                            id: value.idInst,
                            value: value.idInst,
                            instName: value.instName,
                            text: value.instName
                        });
                    });
                    return {
                        results: returnValue
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });


        window.onbeforeunload = unloadPage;
    });

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

    $('#instLogo').change(function()
    {
        readURL(this);
        $('#logo-preview').show();
    });

    $('#remove').click(function()
    {
        $("#remove").css('display','none');
        $('#instLogo').val("");
        $('#textLogo').val("");
        $('#logo-preview').attr("src","{{ asset('assets/images/no-logo.jpg')}}");
    });
</script>
<script src="{{ asset('js/institutes.js') }}" type="text/javascript"></script>

{% endblock %}