{% extends "::list.html.twig" %}
{% block stylesheets %}
<!-- AddEvent script -->
<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
{% endblock %}
{% block customTitle %}<h1 class="text-blue-darker">{{ seminar.seminarName }}</h1>{% endblock %}
{% block mainButtons %}
    {{
        include (':Button:buttons.html.twig', {
            'editRoute': 'katy_seminar.default.edit',
            'editParams': { 'id' : seminar.id },
            'deleteRoute': 'katy_seminar.default.delete',
            'deleteParams': { 'id' : seminar.id },
            'deleteId': seminar.id,
        })
    }}
{% endblock %}
{% block content %}
    <div class="panel panel-default" style="margin-top: 16px;">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-info">
                        <div class="panel-heading ui-sortable-handle">
                            <h4 class="panel-title"><i class="fa fa-info fa-2x"></i>&nbsp;&nbsp;&nbsp;Datos del curso</h4>
                        </div>
                        <div class="container">
                            <br>
                            <p><strong>{% trans %}Idioma:{% endtrans %}</strong> {{ language |capitalize }}</p>
                            <p><strong>{% trans %}Tipo de curso:{% endtrans %}</strong> {{ seminar.seminartype.description }}</p>
                            <p><strong>{% trans %}Plazas:{% endtrans %}</strong> {{ seminar.maxAttendance }} ( {{ numberOfAttendees }} inscritos).</p>
                            <p>
                                <strong>{% trans %}Valoración:{% endtrans %}</strong>
                                {% if seminar.numberOfOpinions %}
                                    <input name="rating" type="number" class="rating rating-loading"  data-readonly="true" data-show-caption="false" value={{ seminar.rating }} data-size="xs" >
                                    <div>
                                        <small> {% trans %}Puntuación:{% endtrans %} {{seminar.rating}}/5 - <a href="#opinions">{{seminar.numberOfOpinions}} {% trans %}Opiniones{% endtrans %}</a></small>
                                    </div>
                                {% else %}
                                    {% trans %}Sin valoraciones{% endtrans %}
                                {% endif %}
                            </p>
                            {% if seminar.seminarDate %}
                                <p><strong>{% trans %}Fecha:{% endtrans %}</strong> {{ seminar.seminarDate |date('d-m-Y') }} </p>
                                {% if seminar.seminarTime %}
                                <p><strong>{% trans %}Hora:{% endtrans %}</strong> {{ seminar.seminarTime|date('H:i') }} </p>
                                {% endif %}
                            {% endif %}
                            {% if registeredAttendanceId  %}
                            <!-- Button code -->
                            <div style="text-align: center; margin: 25px 0;">
                                <div title="Add to Calendar" class="addeventatc">
                                        Añadir al calendario
                                        <span class="start">{{ seminar.seminarDate |date('d-m-Y') }} {{ seminar.seminarTime|date('H:i') }}</span>
                                        <span class="end"></span>
                                        <span class="timezone"></span>
                                        <span class="title">{{ seminar.seminarName }}</span>
                                        <span class="description">{{ seminar.seminartype.description }}</span>
                                        <span class="location"></span>
                                </div>
                            </div>
                            {% else %}
                                    <p><strong>{% trans %}Dirección:{% endtrans %}</strong><br>
                                        {% if seminar.venueAddress %}
                                        {{ seminar.venueAddress }}.<br>
                                        {% endif %}
                                        {% if seminar.venueCity %}
                                        {{ seminar.venueCity }}.<br>
                                        {% endif %}
                                        {% if seminar.venuePostalCode %}
                                        {{ seminar.venuePostalCode }}
                                        {% endif %}{% if seminar.venueProvince %}
                                        {{ seminar.venueProvince }}
                                        {% endif %}
                                    </p>
                            {% endif %}
                            <div style="text-align: center;">
                            {% if registeredAttendanceId  %}
                                <a title="Desinscribirse del curso {{ seminar.seminarName }}" id="checkout" href="{{ path('katy_seminar.default.unregister', {'id': registeredAttendanceId }) }}" class="btn  btn-warning">
                                  <i class="fa fa-times pull-left m-r-10 text-black"></i>
                                  <b>{% trans %}Desinscribirme{% endtrans %}</b>
                                </a>
                            {% elseif registeredAttendanceId == 0 and seminar.maxAttendance<=numberOfAttendees  %}
                                <div  style="margin: 35px;" name="Unregister" class="btn btnColor3">{% trans %}No hay plazas disponibles{% endtrans %}</div>
                            {% else %}
                                <a title="Inscripcion al curso {{ seminar.seminarName }}" id="checkin" href="{{ path('katy_seminar.default.register', {'id': seminar.id}) }}" class="btn btn-success">
                                  <i class="fa fa-check pull-left m-r-10 text-black"></i>
                                  <b>{% trans %}Inscribirme{% endtrans %}</b>
                                </a>
                            {% endif %}
                            {% if not userVotes%}
                                <a title="Valorar curso {{ seminar.seminarName }}" id="rate" href="{{ path('katy_seminar.default.rate', {'id': seminar.id}) }}" class="btn btn-info">
                                  <i class="fa fa-star pull-left m-r-10 text-black"></i>
                                  <b>{% trans %}Valorar{% endtrans %}</b>
                                </a>
                            {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="note note-info m-b-15">
                        <div class="note-icon"><i class="fa fa-university"></i></div>
                        <div class="note-content">
                            <h4><b>{% trans %}Objetivo del curso.{% endtrans %}</b></h4>
                            <p>{{ seminar.seminarGoal }}</p>
                        </div>
                    </div>
                    <div class="note note-primary m-b-15">
                        <div class="note-icon"><i class="far fa-lightbulb"></i></div>
                        <div class="note-content">
                            <h4><b>{% trans %}Te interesa si...{% endtrans %}</b></h4>
                            <p>{{ seminar.seminarTarget }}</p>
                        </div>
                    </div>
                    <div class="note note-purple m-b-15">
                        <div class="note-icon"><i class="far fa-clipboard"></i></div>
                        <div class="note-content">
                            <h4><b>{% trans %}Descripción.{% endtrans %}</b></h4>
                            <p>{{ seminar.seminarDescription }}</p>
                        </div>
                    </div>
                </div>
            </div>
        
        <!-- Productos relacionados -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading ui-sortable-handle">
                        <h4 class="panel-title"><i class="far fa-hand-point-right fa-2x"></i>&nbsp;&nbsp;&nbsp;{% trans %}Productos relacionados con este curso.{% endtrans %}</h4>
                    </div>
                    <div class="row" >
                        {% for p in products%}
                        <div class="col-md-2" style="padding-top: 25px;">
                            <div class="widget widget-stats bg-gradient-aqua">
                                <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
                                <div class="stats-content">
                                    <div class="stats-title"><b>{{p.name |upper }}</b></div>
                                    <div class="stats-progress progress">
                                        <div class="progress-bar" style="width: 0;"></div>
                                    </div>
                                    <div class="stats-desc">{{p.price| utils_price (currency, location)}}
                                        <a href="{{ path('katy_catalog.default.service', {'partnerId': partnerId , 'productLineId': p.idProductline, 'color': '3' }) }}" class="btn btn-inverse btn-xs pull-right">{% trans %}Ver{% endtrans %}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Opiniones -->
        <div class="row ">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading ui-sortable-handle">
                        <h4 class="panel-title"><i class="far fa-comments fa-2x"></i>&nbsp;&nbsp;&nbsp;{% trans %}Opiniones de este curso.{% endtrans %}</h4>
                    </div>
                        <div class="panel-body">
                            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 300px;">
                                <div class="height-sm" data-scrollbar="true" data-init="true" style="overflow: hidden; width: auto; height: 300px;">
                                    <ul class="media-list media-list-with-divider media-messaging">
                                        {% for o in opinions%}
                                        <li class="media media-sm">
                                            <i class="fa fa-user fa-2x pull-left"></i>
                                            <div class="media-body">
                                                <h5 class="media-heading">{{o.user.name}}</h5>
                                                <p>
                                                    {{o.Comment}}<br><strong>{% trans %}Puntuación:{% endtrans %}</strong> {{o.Score}}/5<br>
                                                </p>
                                            </div>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 246.575px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
        <script type="text/javascript">
        $('#checkin').on('click', function () {
            return confirm('Vas a inscribirte al curso. ¿Deseas continuar?');
        });
            $('#checkout').on('click', function () {
            return confirm('Vas a desinscribirte del curso. ¿Deseas continuar?');
        });
        </script>
        <script>
        $(document).on('ready', function(){
            $('#rating').rating({displayOnly: true, step: 0.1});
        });
        </script>
{% endblock %}