{% extends 'base.html.twig' %}
{% block title %}
    OceanExpert | Confirm Participation
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <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/ionicons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/eventConfirm.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datepicker.min.css') }}">
{% endblock %}

{% block body %}
{% include('navbarlogin.html.twig') %}
<div class="container-fluid top-buffer70">
    <div class="container justify content">

        {% if data.response.status == 0 %}
            <div class="text-center">
                <span class="alert alert-danger">
                    <i class="fa fa-exclamation-triangle fa-fw fa-2x vmiddle" aria-hidden="true"></i>
                    {{ data.response.message }}
                </span>
                <div class="top-buffer30">
                    {% if data.event is defined
                        and data.event.idEvent is defined
                        and data.event.idEvent > 0
                    %}
                    <a
                            href="{{ path('view_event',{event: data.event.idEvent}) }}"
                            class="btn-warning btn url-white message">
                        Event Page
                    </a>
                    {% else %}
                        <a
                                href="{{ path('frontend_homepage') }}"
                                class="btn-warning btn url-white message">
                            Home Page
                        </a>
                    {% endif %}
                </div>
            </div>
        {% elseif data.response.status == 1 %}
            <legend>Event Invitation</legend>
            <p class="spacing">
                {% if data.expert is defined and data.expert.fname is defined %}
                    {{ data.expert.fname }}
                {% endif %}
                , you have been invited to attend the following event:
            </p>
            <div class="panel panel-primary">
                {% if data.event is defined and data.event.title is defined %}
                    <div class="panel-body">
                        <p>
                            <legend>
                                <a
                                        href="{{ path('view_event',{event: data.event.idEvent}) }}"
                                        target="_blank">
                                    {{ data.event.title }}
                                </a>
                            </legend>
                        </p>
                        {% if data.event.startOn|date("m") != data.event.endOn|date("m") %}
                            {% if data.event.startOn|date("Y") != data.event.endOn|date("Y") %}
                                {{ data.event.startOn|date("d F Y") ~ ' - ' ~ data.event.endOn|date("d F Y") }}
                            {% else %}
                                {{ data.event.startOn|date("d F") ~ ' - ' ~ data.event.endOn|date("d F Y") }}
                            {% endif %}
                        {% elseif data.event.startOn == data.event.endOn %}
                            {{ data.event.startOn | date("d F Y") }}
                        {% else %}
                            {{ data.event.startOn | date("d") ~ ' - ' ~ data.event.endOn | date("d F Y") }}
                        {% endif %}
                        <br/>
                        {{ data.event.city }}, {{ data.eventCountry }}
                    </div>
                    <div class="panel-footer">
                        <a
                                href="{{ path('view_event',{event: data.event.idEvent}) }}"
                                target="_blank">
                            More details...
                        </a>
                    </div>
                {% endif %}
            </div>
            <p
                    class="spacing">
                You may accept or decline to participate in this event using the form below.
                If you decline, you may wish to provide a reason.
            </p>
            <div class="panel panel-primary">
                <div class="panel-body">
                    <form
                            action=""
                            method="POST"
                            role="form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="funkyradio">
                                    <div class="funkyradio-success">
                                        <input
                                                value="1"
                                                type="radio"
                                                class="decision"
                                                name="decision"
                                                id="accept-invite"
                                                required
                                                checked />
                                        <label for="accept-invite">
                                            Yes, I confirm that I will attend this event
                                        </label>
                                    </div>
                                    <div class="funkyradio-danger">
                                        <input
                                                value="0"
                                                type="radio"
                                                class="decision"
                                                name="decision"
                                                id="reject-invite"
                                                required />
                                        <label for="reject-invite">
                                            No, I am unable to attend this event.
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <hr />
                            <div class="col-md-6 details">
                                <div class="form-group">
                                    <label
                                            for="birthday"
                                            class="col-md-2 control-label">
                                        Arrive On
                                    </label>
                                    <div class="col-md-4">
                                        <input
                                                type="text"
                                                class="form-control"
                                                id="arriveOn"
                                                name="arriveOn"
                                                placeholder="dd/mm/yyyy" />
                                    </div>
                                    <label
                                            for="birthday"
                                            class="col-md-2 control-label">
                                        Leave On
                                    </label>
                                    <div class="col-md-4">
                                        <input
                                                type="text"
                                                class="form-control"
                                                id="leaveOn"
                                                name="leaveOn"
                                                placeholder="dd/mm/yyyy" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label
                                            for="name"
                                            class="col-md-2 control-label">
                                        Contact Tel.
                                    </label>
                                    <div class="col-md-10">
                                        <input
                                                type="text"
                                                class="form-control col-md-10"
                                                name="contact"
                                                placeholder="+32 1234567890" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 vspacing">
                                <button
                                        type="submit"
                                        class="btn btn-success">
                                    <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                                    Submit Response
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        {% elseif data.response.status == 2 %}
            <div class="text-center">
                <span class="alert alert-success">
                    <i class="fa fa-thumbs-up fa-fw fa-2x vmiddle" aria-hidden="true"></i>
                    {{ data.response.message }}
                </span>
                <div class="top-buffer30">
                    {% if data.event is defined
                        and data.event.idEvent is defined
                        and data.event.idEvent > 0
                    %}
                        <a
                                href="{{ path('view_event',{event: data.event.idEvent}) }}"
                                class="btn-warning btn url-white message">
                            Event Page
                        </a>
                    {% else %}
                        <a
                                href="{{ path('frontend_homepage') }}"
                                class="btn-warning btn url-white message">
                            Home Page
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% include "footer.html.twig" %}
<script src="{{ asset('js/bootstrap-datepicker.js') }}"></script>
<script type="text/javascript">
    $(function() {
        $('#arriveOn').datepicker({
            dateFormat: "dd/mm/yyyy",
            autoclose:true,
            minDate: 0,
        });

        $("#leaveOn").datepicker({
            dateFormat: "dd/mm/yyyy",
            minDate:  0,
            autoclose:true,
            onSelect: function(date){
                var date1 = $('#arriveOn').datepicker('getDate');
                var date = new Date( Date.parse( date1 ) );
                date.setDate( date.getDate() + 1 );
                var newDate = date.toDateString();
                newDate = new Date( Date.parse( newDate ) );
                $('#leaveOn').datepicker("option","minDate",newDate);
            }
        });
    });

    $("body").on("click", ".decision", function () {
        var $this = $(this);
        var html = "<div class='form-group reason'>" +
            "<hr />" +
            "<span class='col-sm-5 strong'>If no, reason: </span>" +
            "<div class='col-sm-10'>" +
            "<textarea name='reason' id='reason' class='form-control' ></textarea>" +
            "</div>" +
            "</div>";

        if ($this.val() == 0) {
            $this.parents('.funkyradio').find(".funkyradio-danger").append(html);
            $(".details").css("display","none");
        } else {
            $this.parents('.funkyradio').find(".reason").remove();
            $(".details").css("display","block");
        }
    })
</script>
{% endblock %}