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

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

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

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

    <div class="container-fluid">
        <!-- Content Wrapper. Contains page content -->
        <div class="">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h4>Region info</h4>
            </section>
            <section class="content">
                <div class="row">
                    <div class="col-md-3">
                        <div class="box box-primary">
                            <div class="box-body box-profile">
                                <p class="lead text-center">
                                    {{ region.name }}
                                </p>
                            </div>
                        </div>
                        <div class="box box-primary">
                            <div class="box-body">
                                <strong>
                                    <i class="fa icon-profile fa-map-marker margin-r-5" aria-hidden="true"></i>
                                    Description
                                </strong>
                                <div class="data">
                                    {{ region.description |raw }}
                                    <br />
                                    <br />
                                </div>
                                {% if (app.user is not null
                                    and is_granted('ROLE_GLOBAL_EDITOR'))
                                %}
                                    <div class="text-center">
                                        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                                            {% if region.status is defined and region.status  == 0 %}
                                                <span class="statusBtn">
                                                    <button class="btn btn-success activate">
                                                        <i class="fa fa-check" aria-hidden="true"></i>
                                                        Activate
                                                    </button>
                                                </span>
                                            {% elseif region.status is defined and region.status == 1 %}
                                                <span class="statusBtn">
                                                    <button class="btn btn-danger deactivate">
                                                        <i class="fa fa-ban" aria-hidden="true"></i>
                                                        Deactivate
                                                    </button>
                                                </span>
                                            {% endif %}
                                        {% endif %}
                                        <a
                                                href="{{ path('edit_region',{'idRegion': region.idRegion}) }}"
                                                class="btn btn-primary">
                                            <i class="fa fa-flag" aria-hidden="true"></i> Edit Region
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-9">
                        <!-- /.box -->
                            <div class="box box-primary">
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div>
                                        <strong><i class="fa icon-profile fa-flag margin-r-5" aria-hidden="true"></i>
                                            Countries in this region</strong>
                                    </div>
                                    <div class="row">
                                        <!--
                                        <span class="col-md-3 search-display">
                                            Displaying {{ countries.getPaginationData.firstItemNumber }} – {{ countries.getPaginationData.lastItemNumber }}
                                            results of {{ countries.getTotalItemCount }}.
                                        </span>
                                            -->
                                        <span class="col-md-3 search-display">
                                        <!--
                                            Show <select
                                                    name="mlimit"
                                                    id="mlimit"
                                                    data-id="mlimit"
                                                    class="maxresults">
                                                {% for key,option in limits.countrylimit.options %}
                                                    {% if limits.countrylimit.selected == key %}
                                                        <option id="{{ key }}" selected>{{ option }}</option>
                                                    {% else %}
                                                        <option id="{{ key }}">{{ option }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                          -->
                                            <span class=" pagination-sm">
                                                {{ knp_pagination_render(countries) }}
                                            </span>
                                        </span>
                                    </div>
                                    {% if countries.getTotalItemCount > 0 %}
                                    <div class="row list-region">
                                        <div class="col-md-8">
                                            <ul>
                                            {% for item in countries %}
                                                <li>
                                                        {{ item.country | raw }}
                                                </li>
                                            {% endfor %}
                                            </ul>
                                        </div>
                                        <hr class="caption blue"/>
                                        <div class="col-md-12 pagination-sm pull-right">
                                            {{ knp_pagination_render(countries) }}
                                        </div>
                                    </div>
                                    {% else %}
                                        <div class="alert alert-warning alert-dismissible">
                                            <strong>Info!</strong> No countries are available in this region.
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                    </div>
                    <!-- /.col -->
                </div>
            </section>
        </div>
    </div>
    {% include('footer.html.twig') %}
    <script type="text/javascript">
        {% if is_granted('ROLE_GLOBAL_EDITOR') %}

        //what to do when the 'activate' button is clicked
        $(".activate").click(function () {
            $(this).html('<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Activate')
            $.ajax({
                url: "{{ path('activate_region',{'idRegion': region.idRegion}) }}",
                type: 'POST',
            })
                .done(function(response) {
                    if (response.status === true) {
                        $(".statusBtn").html('<button class="btn btn-danger ban" id="ban"><i class="fa fa-ban" aria-hidden="true"></i> Deactivate</button>');
                    } else {
                        $(".statusBtn").html('<button class="btn btn-success activate" id="activate"><i class="fa fa-check" aria-hidden="true"></i> Activate</button>');
                    }
                    window.location.reload();
                });
        });

        //what to do when the 'deactivate' button is clicked
        $(".deactivate").click(function () {
            $(this).html('<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Deactivate')
            $.ajax({
                url: "{{ path('deactivate_region',{'idRegion': region.idRegion}) }}",
                type: 'POST',
            })
                .done(function(response) {
                    if (response.status === true) {
                        $(".statusBtn").html('<button class="btn btn-success activate" id="activate"><i class="fa fa-check" aria-hidden="true"></i> Activate</button>');
                    } else {
                        $(".statusBtn").html('<button class="btn btn-success deactivate" id="deactivate"><i class="fa fa-ban" aria-hidden="true"></i> Deactivate</button>');
                    }
                    window.location.reload();
                });
        });
        {% endif %}
    </script>
{% endblock %}