{% 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/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/ionicons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/projectSearch.css') }}">


    <style type="text/css" media="screen">
        .operation{margin: 0 0 10px 15px;}
        .pagination{margin: inherit;}
    </style>
{% endblock %}

{% block body %}


    {% include 'navbarlogin.html.twig' %}

    <div class="container-fluid">
    <div class="content top-buffer50 ">

            {% if( action !='browse') %}
                {% if(action =='advSearch') %}
                    <a href="{{ path('lme_project_search') }}" class="btn btn-default">Back to Advance Search</a>
                {% endif %}
            <h3 class="heading">Project Search<br/>
                <small class="text12"><i class="fa fa-info-circle fa-fw" aria-hidden="true"></i> You can use various filters
                    based on categories using "<strong>FILTERS</strong>". You can nest queries using "<i
                            class="fa fa-plus fa-fw" aria-hidden="true"></i>" for more refined results
                </small>
            </h3>

            <form action="" method="GET" class="advSearch">
                <div class="row" id="searchBox">

                    {% if app.request.get('action')|length > 0 %}
                        {% set increment = 0 %}
                        {% for key,field in searchConditions %}
                            <div class="formContent">
                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                            <label for="filter[{{ key }}]" class="col-sm-12">FILTERS:</label>
                                            <select name="filter[{{ key }}]" id="filter[{{ key }}]"
                                                    class="form-control filters">
    
                                                {% for filter in pagedata.filters %}
                                                    {% if field.filter == filter.id %}
                                                        <option value="{{ filter.id }}" selected>{{ filter.searchfield }}</option>
    
                                                    {% else %}
                                                        <option value="{{ filter.id }}">{{ filter.searchfield }}</option>
                                                        {#{% if  filter.id == 28 %}#}
                                                            {#<option value="{{ filter.id }}" selected>{{ filter.searchfield }}</option>#}
                                                        {#{% else %}#}
                                                            {#<option value="{{ filter.id }}">{{ filter.searchfield }}</option>#}
                                                        {#{% endif %}#}
                                                    {% endif %}
    
    
                                                {% endfor %}
    
                                            </select>
                                        </div>
                                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                            <label for="keywords[{{ key }}]" class="col-sm-12">KEYWORDS:</label>
                                            <div class="input-group">
                                                <input type="text" name="keywords[{{ key }}]" id="keywords[{{ key }}]"
                                                       class="form-control"
                                                       value="{{ field.keywords|convert_encoding('UTF-8', 'iso-2022-jp') }}"
                                                       required="required" title="keywords"
                                                       placeholder="Enter your search keyword(s)">
                                                {% if loop.last %}
                                                    <span class="input-group-addon btn btn-primary btn-remove"><span
                                                                class="glyphicon glyphicon-minus"></span></span><span
                                                        class="input-group-addon btn btn-primary btn-add"><span
                                                            class="glyphicon glyphicon-plus"></span></span>
                                                {% else %}
                                                    <span class="input-group-addon btn btn-primary btn-remove"><span
                                                                class="glyphicon glyphicon-minus"></span></span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 operation" {% if loop.last %} style="display:none;"{% endif %}>
                                        <div class="no-checkedselector spacer">
                                            <div class="toggle-container">
                                                <input id="toggle-OR[{{ key }}]" class="toggle toggle-left"
                                                       name="toggle[{{ key }}]" value="OR" type="radio"
                                                       {% if field.toggle=="OR" %}checked=""{% endif %}>
                                                <label for="toggle-OR[{{ key }}]" class="btn btn-default">OR</label>
                                                <input id="toggle-AND[{{ key }}]" class="toggle toggle-right"
                                                       name="toggle[{{ key }}]" value="AND" type="radio"
                                                       {% if field.toggle=="AND" %}checked=""{% endif %}>
                                                <label for="toggle-AND[{{ key }}]" class="btn btn-default">AND</label>
                                                {#   <input id="toggle-NOT[{{key}}]" class="toggle toggle-right" name="toggle[{{key}}]" value="NOT" type="radio">
                                                  <label for="toggle-NOT[{{key}}]" class="btn btn-default">NOT</label> #}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% set increment = key %}
                        {% endfor %}
                        <div class="incremeter">{{ increment + 1 }}</div>
                    {% else %}
                        <div class="incremeter">1</div>
                        <div class="formContent">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                        <label for="filter[0]" class="col-sm-12">FILTERS:</label>
                                        <select name="filter[0]" id="filter[0]" class="form-control  filters">

                                            {% for filter in pagedata.filters %}
                                                {% if  filter.id == 28 %}
                                                    <option value="{{ filter.id }}" selected>{{ filter.searchfield }}</option>
                                                {% else %}
                                                    <option value="{{ filter.id }}">{{ filter.searchfield }}</option>
                                                {% endif %}

                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                        <label for="keywords[0]" class="col-sm-12">KEYWORDS:</label>
                                        <div class="input-group">
                                            <input type="text" name="keywords[0]" id="keywords[0]" class="form-control"
                                                   value="" required="required" title="keywords"
                                                   placeholder="Enter your search keyword(s)"><span
                                                    class="input-group-addon btn btn-primary btn-add"><span
                                                        class="glyphicon glyphicon-plus"></span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 operation" style="display:none;">
                                    <div class="no-checkedselector spacer">
                                        <div class="toggle-container">
                                            <input id="toggle-OR[0]" class="toggle toggle-left" name="toggle[0]"
                                                   value="OR" type="radio">
                                            <label for="toggle-OR[0]" class="btn btn-default">OR</label>
                                            <input id="toggle-AND[0]" class="toggle toggle-right" name="toggle[0]"
                                                   value="AND" type="radio">
                                            <label for="toggle-AND[0]" class="btn btn-default">AND</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <input type="hidden" name="action" value="advSearch">
                        <button type="submit" class="btn btn-primary btn-search spacer ">Search <span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
            </form>

            <div class="heading"></div>
            {% endif %}
            {% if(action !='advSearch') %}

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 browseProjects top-buffer20">
                    {% if(action =='browse') %}
                    <a href="{{ path('lme_project_search') }}" class="btn btn-default">Back to Advance Search</a>
                    {% endif %}
                    <h4 class="heading">Projects By:</h4>
                <div class="panel-group" id="accordion_reg_inst" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="inst-name">
                            <a role="button" data-toggle="collapse" data-parent="#accordion_reg_inst" href="#collapseInstName_reg" aria-expanded="true" aria-controls="collapseInstName_reg">
                                <h4 class="panel-title"><i class="fa fa-minus pull-right"></i>
                                    Project Title
                                </h4>
                            </a>
                        </div>
                        <div id="collapseInstName_reg" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="inst-name">
                            <div class="panel-body">
                                <p>Starts with:</p>
                                <div class="btn-group btn-group-sm">
                                    {% for letter in 'A'..'Z' %}
                                        {% if letter in browseOptions.title %}
                                            <a href="{{path('lme_project_search',{'action':'browse','title':letter})}}" class="btn btn-default"><strong>{{letter}}</strong></a>
                                        {% else %}
                                            <button class="btn btn-default" disabled=""><strong>{{letter}}</strong></button>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="inst-country">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_reg_inst" href="#collapselmeregion_reg" aria-expanded="false" aria-controls="collapseInstCountry_reg">
                                <h4 class="panel-title"><i class="fa fa-plus pull-right"></i>
                                    LME Region
                                </h4>
                            </a>
                        </div>
                        <div id="collapselmeregion_reg" class="panel-collapse collapse" role="tabpanel" aria-labelledby="inst-country">
                            <div class="panel-body">
                                <p>Name:</p>
                                <ul class="list-group boxed">
                                    {% for lmeregions in browseOptions.lmeRegions %}
                                        <li class="list-group-item strong"><a href="{{path('lme_project_search',{'action':'browse','region': lmeregions.id})}}" title="">{{lmeregions.regions}}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                    {#{% if searchOptions.instSeas|length > 0 %}#}
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="inst-subject">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_reg_inst" href="#collapseInstSubject_reg" aria-expanded="false" aria-controls="collapseInstSubject_reg">
                                    <h4 class="panel-title"><i class="fa fa-plus pull-right"></i>
                                        Implementing Agency
                                    </h4>
                                </a>
                            </div>

                            <div id="collapseInstSubject_reg" class="panel-collapse collapse" role="tabpanel" aria-labelledby="inst-subject">
                                <div class="panel-body">
                                    <p>Name:</p>
                                    <ul class="list-group boxed">
                                        {% for agency in browseOptions.agency %}
                                            <li class="list-group-item strong"><a href="{{path('lme_project_search',{'action':'browse','agency':agency})}}" title="">{{agency}}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {#{% endif %}#}
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="inst-type">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_reg_inst" href="#collapseInstType_reg" aria-expanded="false" aria-controls="collapseInstType_reg">
                                <h4 class="panel-title"><i class="fa fa-plus pull-right"></i>
                                    Project Status
                                </h4>
                            </a>
                        </div>
                        <div id="collapseInstType_reg" class="panel-collapse collapse" role="tabpanel" aria-labelledby="inst-type">
                            <div class="panel-body">
                                <p>Status:</p>
                                <ul class="list-group boxed">
                                    {% for status in browseOptions.projectStatus %}
                                        <li class="list-group-item strong"><a href="{{path('lme_project_search',{'action':'browse','status':status})}}" title="">{{status}}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

           

            {% endif %}

        {% if app.request.get('action')|length > 0 %}
            <div class="row">
                <div class="col-md-2 col-lg-2 top-buffer20">
                    <div class="heading top-buffer10"><strong>Countries</strong>
                        <small class="hide-content hide-categories">hide</small>
                    </div>
                    <div class="checkbox categories">

                    </div>


                    <div class="heading top-buffer10"><strong>Agency</strong>
                        <small class="hide-content hide-countries">hide</small>
                    </div>
                    <ul class="searchCat Agency">

                    </ul>

                </div>
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10  top-buffer20">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h3 class="heading">{{ searchResultType }}</h3>
                    </div>
                    {% if searchResultText is defined %}
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="">{{ searchResultText | raw }}</div>
                    </div>
                    {% endif %}
                    {% if data.getTotalItemCount is defined and data.getTotalItemCount > 0 %}
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <div class="col-md-3 search-display">
                            Displaying {{ data.getPaginationData.firstItemNumber }}
                            – {{ data.getPaginationData.lastItemNumber }} results of {{ data.getTotalItemCount }}.
                        </div>
                        <div class="form-inline col-md-3">
                            {% if data.getTotalItemCount >10 %}
                                <select name="resultCnt" class="form-control  resultCnt">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select> Results per page.
                            {% endif %}
                        </div>

                        <div class="col-md-6">
                            <div class="navigation pagination-sm pull-right">
                                {{ knp_pagination_render(data) }}
                            </div>
                        </div>
                    </div>
                    <div class="row list-group">
                        <div class="col-md-12">
                            {% for item in data %}
                                <div class="item  col-xs-4 col-lg-4 list-group-itemp">
                                    <div class="thumbnailp">
                                        <a href="{{ path('lme_view_project',{idProject:item.id_project}) }}" class="profile-url">
                                            <img class="group list-group-imagep lazy img-thumbnail img-responsive" data-original="" 
                                                 {% if item.logo is defined and item.logo != "" %}
                                                     src="{{ asset('uploads/project/'~item.id_project~'/'~item.logo) }}"
                                                 {% else %}
                                                     src="{{ asset('/assets/images/no-logo.jpg' ) }}"
                                                 {% endif %}
                                                 onerror="this.src='{{ asset('/assets/images/no-logo.jpg' ) }}';"></a>
                                                    {% set label = "" %}  
                                                {% if item.status == 0 %}
                                                    {% set label = "text-warning" %} 
                                                {% elseif item.status == 1 %}
                                                    {%  set label = "text-default" %}
                                                {% elseif item.status == 2 %}
                                                    {% set label = "text-warning" %}
                                                {% elseif item.status == 3 %}
                                                    {% set label = "text-danger" %}
                                                {% endif %}
                                        <div class="caption">
                                            <p class="group inner list-group-itemp-text">
                                                <strong>
                                                    <a href="{{ path('lme_view_project',{idProject:item.id_project}) }}">
                                                        <span class="{{ label }}">{{ item.title }}</span>
                                                    </a>
                                                </strong>
                                                <br>
                                            <div class=" label label-primary">{{ item.project_status }}</div></p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    {#<div class="row">#}
                         <div class="col-md-12 heading"> 
                        <div class="col-md-3 search-display">
                            Displaying {{ data.getPaginationData.firstItemNumber }}
                            – {{ data.getPaginationData.lastItemNumber }} results
                            of {{ data.getTotalItemCount }}.
                        </div>
                        <div class="form-inline col-md-3">
                            {% if data.getTotalItemCount >10 %}
                                <select name="resultCnt" class="form-control  resultCnt">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select> Results per page.
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="navigation pagination-sm pull-right">
                                {{ knp_pagination_render(data) }}
                            </div>
                        </div>

                        {# </div> #}
                    </div>
                        
                    {% endif %}
                    
                </div>
                
            </div>
        {% endif %}
        


        </div>
    </div>


    {% include 'footer.html.twig' %}
    <script src="{{ asset('js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dropzone.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/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        var removeEmailAttachments = '{{ path('remove_email_attachments') }}';
        $(function () {

            Tipped.create('.tipso', {maxWidth: 250});
            $.ajax({
                url: "{{ path('get_countries') }}",
            })
                .done(function (response) {
                    window.countries = JSON.parse(response);
                });


            $(".projects").addClass('navactive');
            var i = $(".incremeter").text();
            $(document).on('click', '.btn-add', function (e) {
                e.preventDefault();
                var existingDate = false;
                var controlForm = $('#searchBox:first'),
                    currentEntry = $(this).closest('.formContent');
                newEntry = $(currentEntry.clone(true)).appendTo(controlForm);

                newEntry.find('[id]').each(function () {
                    var getid = this.id.split('[')[0];
                    this.id = getid + '[' + i + ']';
                });

                newEntry.find('[name]').each(function () {
                    var getid = this.name.split('[')[0];
                    this.name = getid + '[' + i + ']';
                });
                newEntry.find('[for]').each(function () {
                    var label = $(this).attr('for').split('[')[0];
                    $(this).attr('for', label + '[' + i + ']');

                });
                $("#type\\[" + i + "\\]").val('all');
                $("#type\\[" + i + "\\]").change();
                $("#filter\\[" + i + "\\]").change();
                newEntry.find('.revert').replaceWith('<input id="keywords[' + i + ']" name="keywords[' + i + ']" class="form-control "required="required" >');
                $(newEntry).find('.incremeter').html(++i);

                newEntry.find('input:not(:radio)').val('');
                currentEntry.find('.operation').css('display', 'block');
                currentEntry.find('.btn-remove').remove();
                newEntry.find('.btn-remove').remove();

                controlForm.find('.formContent:not(:last) .btn-add')
                    .removeClass('btn-add').addClass('btn-remove')
                    .removeClass('btn-success').addClass('btn-danger')
                    .html('<span class="glyphicon glyphicon-minus"></span>');


                controlForm.find('.formContent:last .btn-add')
                    .replaceWith('<span class="input-group-addon btn btn-primary btn-remove btn-danger"><span class="glyphicon glyphicon-minus"></span></span><span class="input-group-addon btn btn-primary btn-add btn-success"><span class="glyphicon glyphicon-plus"></span></span>');
            }).on('click', '.btn-remove', function (e) {
                if ($('.formContent').length == 1) {
                    $('.formContent:first').find(".btn-remove").remove();
                    return false;
                }
                e.preventDefault();
                $(this).parent().nextAll('.formContent').each(function () {
                    $(this).find('.incremeter').html($(this).find('.incremeter').html() - 1);
                });


                if ($(this).siblings('.btn-add').length) {
                    var myParent = $(this).parents(".formContent");
                    myParent.siblings(".formContent:last").find(".btn-remove")
                        .replaceWith('<span class="input-group-addon btn btn-primary btn-remove btn-danger"><span class="glyphicon glyphicon-minus"></span></span><span class="input-group-addon btn btn-primary btn-add btn-success"><span class="glyphicon glyphicon-plus"></span></span>');
                }


                $(this).parents('.formContent').remove();


                return false;
            });
            $('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
                if (this.checked) {
                    $('input[name="' + this.name + '"].checked').removeClass('checked');
                    $(this).addClass('checked');
                    $('.toggle-container').addClass('force-update').removeClass('force-update');
                }
            });
            $('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

            $(".resultCnt").change(function (e) {
                e.preventDefault();
                var url = " {{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'limit': null,'page':1})) }}";
                url = url + '&limit=' + $(this).val();
                window.location.href = url.replace(/&amp;/g, '&');
            });
            {% if data.getPaginationData.numItemsPerPage is defined %}
            $('.resultCnt').val("{{ data.getPaginationData.numItemsPerPage }}");
            {% endif %}

            $("#sortby").change(function (e) {
                e.preventDefault();
                var uri = $(location).attr('href');
                var re = new RegExp("([?&])sortby=.*?(&|$)", "i");
                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
                if (uri.match(re)) {
                    window.location.href = uri.replace(re, '$1' + "sortby=" + $(this).val() + '$2');
                }
                else {
                    window.location.href = uri + separator + "sortby=" + $(this).val();
                }
            });
            {% if data.getParams.sortby is defined %}
            $('#sortby').val("{{ data.getParams.sortby }}");
            {% endif %}
            


            var filterData = {
                '3': "{{ path('get_countries') }}",
                '24': "{{ path('get_countries') }}",
                '31': "{{ path('get_lme_status') }}",
            };

            $(".filters").change(function (event) {
                console.log($(this).val());
                var id = $(this).attr('id').match(/\[(.*?)\]/)[1];
                var oldOption = $("#revert\\[" + id + "\\]");
                if (oldOption.length == 1) {
                    oldOption.replaceWith('<input id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control " required="required" placeholder="Enter your search keyword(s)">');
                    options = $("#keywords\\[" + id + "\\]");
                }

                var options = $("#keywords\\[" + id + "\\]");

                if (($(this).val() in filterData)) {
                    options.replaceWith('<select id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control  revert" required="required"></select>');
                    var newOption = $("#keywords\\[" + id + "\\]");
                    if (($(this).val() == "Country is") && (typeof countries !== 'undefined')) {
                        $.each(countries, function (index, val) {
                            newOption.append($("<option/>", {
                                value: val.id,
                                text: val.name
                            }));
                        });
                    } else if (($(this).val() == "Sea regions of study is") && (typeof seaRegions !== 'undefined')) {
                        $.each(seaRegions, function (index, val) {
                            newOption.append($("<option/>", {
                                value: val.id,
                                text: val.name
                            }));
                        });
                    } else {
                        $.ajax({
                            url: filterData[$(this).val()],
                        })
                            .done(function (response) {

                                var data = JSON.parse(response);
                                $.each(data, function (index, val) {
                                    newOption.append($("<option/>", {
                                        value: val.id,
                                        text: val.name
                                    }));
                                });
                            });
                    }
                } else if ($(this).find("option:selected").text().match(/date/i)) {
                    var oldOption = $("#revert\\[" + id + "\\]");
                    if (oldOption.length == 1) {
                        oldOption.replaceWith('<input id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control " required="required">');
                        options = $("#keywords\\[" + id + "\\]");
                    }
                    options.replaceWith(
                        '<span id="revert[' + id + ']">' +
                        '<span class="col-xs-6">' +
                        '<input type="text" name="startDate[' + id + ']" id="keywords[' + id + ']" class="form-control datepicker" value="" required="required" title="keywords" placeholder="From date">' +
                        '</span>' +
                        '<span class="col-xs-6">' +
                        '<input type="text" name="endDate[' + id + ']" id="keywords2[' + id + ']" class="form-control datepicker" value="" required="required" title="keywords" placeholder="To date">' +
                        '<input type="hidden" id="" name="keywords[' + id + ']" class="form-control " value="">' +
                        '</span>' +
                        '</span>'
                    );


                    $('.datepicker').datepicker({
                        format: "dd/mm/yyyy",
                        autoclose: true,
                        todayHighlight: true,
                        maxDate: '0'
                    });
                } else {
                    options.replaceWith('<input id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control " required="required" placeholder="Enter your search keyword(s)">');
                }
            });

            $('.icheck').change(function () {
                if ($(this).is(":checked")) {
                    if ($(this).val() == 'experts') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'experts,' ~ app.request.get('filterType')})) }}";
                    }
                    if ($(this).val() == 'institutions') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'institutions,' ~ app.request.get('filterType')})) }}";
                    }
                    if ($(this).val() == 'events') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'events,' ~ app.request.get('filterType')})) }}";
                    }
                } else {
                    if ($(this).val() == 'experts') {
                        // console.log("{{ app.request.get('filterType')|replace({'%expert%': 'foo', '%institution%': 'bar'}) }}");
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('experts'): '' }) })) }}";
                    }
                    if ($(this).val() == 'institutions') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('institutions'): '' }) })) }}";
                    }
                    if ($(this).val() == 'events') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('events'): '' }) })) }}";
                    }
                }
                url = url.replace(/%2C\s*$/, "");
                window.location.href = url.replace(/&amp;/g, '&');

            });

            $(".hide-categories").click(function (event) {
                event.preventDefault();
                $(".categories").toggle("slow");

            });
            $(".hide-countries").click(function (event) {
                event.preventDefault();
                $(".countries").toggle("slow");

            });

            $(".filter-label").click(function (e) {
                e.preventDefault();
                var data = $(this).data();
                var url = " {{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'filterCountry': null,'page':1})) }}";
                window.location.href = url.replace(/&amp;/g, '&');
            });



            {% for key,field in searchConditions %}
            if (($("#filter\\[{{ key }}\\]").val() in filterData)) {
                $("#type\\[{{ key }}\\]").change();
                $("#filter\\[{{ key }}\\]").val("{{ field.filter }}");
                $("#filter\\[{{ key }}\\]").change();
                $(document).ajaxComplete(function () {
                    $("#keywords\\[{{ key }}\\]").val(decodeHtml("{{ field.keywords }}"));
                });
            } else {
                $("#type\\[{{ key }}\\]").change();
                $("#filter\\[{{ key }}\\]").val("{{ field.filter }}");
                $("#filter\\[{{ key }}\\]").change();
                $("#keywords\\[{{ key }}\\]").val(decodeHtml("{{ field.keywords }}"));
            }
            var options = $("#keywords\\[{{ key }}\\]");


            {#if (($("#filter\\[{{ key }}\\]").val() in dateFilter)) {#}

                {#var oldOption = $("#revert\\[{{ key }}\\]");#}
                {#if (oldOption.length == 1) {#}
                    {#oldOption.replaceWith('<input id="keywords[{{ key }}]" name="keywords[{{ key }}]" class="form-control ">');#}
                    {#options = $("#keywords\\[{{ key }}\\]");#}
                {#}#}
                {#options.replaceWith(#}
                    {#'<span id="revert[{{ key }}]">' +#}
                    {#'<span class="col-xs-6">' +#}
                    {#'<input type="text" name="startDate[{{ key }}]" id="keywords[{{ key }}]" class="form-control datepicker" value="{{ field.startDate }}" required="required" title="keywords" placeholder="From date">' +#}
                    {#'</span>' +#}
                    {#'<span class="col-xs-6">' +#}
                    {#'<input type="text" name="endDate[{{ key }}]" id="keywords2[{{ key }}]" class="form-control datepicker" value="{{ field.endDate }}" required="required" title="keywords" placeholder="To date">' +#}
                    {#'<input type="hidden" id="" name="keywords[{{ key }}]" class="form-control " value="">' +#}
                    {#'</span>' +#}
                    {#'</span>'#}
                {#);#}
                {#$('.datepicker').datepicker({#}
                    {#format: "dd/mm/yyyy",#}
                    {#autoclose: true,#}
                    {#todayHighlight: true,#}
                    {#maxDate: '0'#}
                {#});#}
            {#}#}
            {% endfor %}

        });

        $('.countries li:lt(5)').show();
        $('.showLess').hide();

        function loadMorefilters(className) {
            var size_li = $("." + className + " li").size();
            var x = 5;
            var remaining = size_li - 5;
            x = (x + remaining <= size_li) ? x + remaining : size_li;
            $('.' + className + ' li:lt(' + x + ')').show('slow');
            $('.' + className).find('.loadMore').hide();
            $('.' + className).find('.showLess').show();
        }
        function showLessfilters(className) {
            $('.' + className + ' li').not(':lt(5)').hide('slow');
            $('.' + className).find('.showLess').hide();
            $('.' + className).find('.loadMore').show();
        }

        jQuery.fn.extend({
            toggleText: function (a, b) {
                var isClicked = false;
                var that = this;
                this.click(function () {
                    if (isClicked) {
                        that.text(a);
                        isClicked = false;
                    }
                    else {
                        that.text(b);
                        isClicked = true;
                    }
                });
                return this;
            }
        });
        $(".hide-categories").toggleText("hide", "show");
        $(".hide-countries").toggleText("hide", "show");

        $(".browseProjects").find(".panel-heading>a").click(function (e) {
            e.preventDefault();
            $(this).find('.fa').removeClass('fa-minus').addClass('fa-plus');
            if ($(this).hasClass('collapsed')) {
                $(this).find('.fa').removeClass('fa-plus').addClass('fa-minus');
            } else {
                $(this).find('.fa').removeClass('fa-minus').addClass('fa-plus');
            }

        });
        function decodeHtml(html) {
            var txt = document.createElement("textarea");
            txt.innerHTML = html;
            return txt.value;
        }


    </script>
{% endblock %}