{% extends 'App::layout_course.html.twig' %}

{% block title %}Les stages de préparation au brevet des collèges{% endblock %}
{% block og_title %}Les stages de préparation au brevet des collèges{% endblock %}


{% block description %}Découvrez les stages de préparation au brevet des collèges.{% endblock %}
{% block og_description %}Découvrez les stages de préparation au brevet des collèges.{% endblock %}

{% block og_url %}https://www.rueduprof.com{{ path('app_course_show', {'slug': course.slug}) }}{% endblock %}

{% block canonical %}https://www.rueduprof.com{{ path('app_course_show', {'slug': course.slug}) }}{% endblock %}

{% block stylesheets %}
<style>
    .avatar-fix {
   
        border-radius: 25px;
        border: 4px solid #9c88ff;
        width:180px;
        margin-bottom:10px;
    }
    .adcontent ul li {
      
        margin-bottom:-16px;
    }
</style>
{% endblock %} 

{% block fos_user_content %}
    {% spaceless %}

    <div class="img-cover img-cover-dark"  data-parallax="scroll" data-image-src="/images/classroom.png">
        <div class="container p-t-b-50 m-t-60">
          <div class="row text-center">
            <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
              <h1 class="no-m m-b-15 font-thin" style="color: white;font-size: 24px;line-height: 35.88px;">{{ course.title|e }}</h1>
              
              {% if course.place == 'face-to-face' %}
              <p style="color:white;font-weight:800;font-size: 16px;"> {{ course.city }} ({{ course.postalCode }})</p>
            {% else %}
                <p style="color:white;font-weight:800;font-size: 13px;"><i class="fa fa-video-camera" aria-hidden="true"></i> En ligne</p>
            {% endif %}
            </div>
          </div>
        </div>
      </div>   

    <div class="container xs-no-p-i  p-t-b-60 m-t-30">

        {% for flash_message in app.session.flashBag.get('success') %}
            <div class="alert alert-success m-t-60">
                {{ flash_message|raw|nl2br }}
            </div>
        {% endfor %}

        <div class="row xs-no-m-i">
            <div class="col-xs-12 xs-no-p-i">
                
                <div class="row r-sm-table">
                    <div class="col-md-3 col-sm-cell">
                        <a style="margin:10px;" class="btn btn-sm btn-primary btn-call-to-action" href="{{ path('app_course_index', {'slug': 'brevet'}) }}" >Retour sur la liste</a>
                    </div>
                    <div class="col-md-9 col-sm-cell">
  
                                            
                    </div>
                </div>
              
               
              
                    <!-- START: Ticket item -->
                    <div class="panel panel-default" style="margin-left:10px;margin-right:10px;">
                        <div class="panel-body p-30">
                            <div class="row r-sm-table">

                          
                                <div class="col-md-9 col-sm-cell">

                                    <p style="font-size:22px;color:#00a8ff;"><i class="fa fa-calendar" aria-hidden="true"></i> Du <b>{{ course.dateStart|date('d/m/Y') }}</b> au <b>{{ course.dateEnd|date('d/m/Y') }}</b> inclus</p>
                               
                                    <div class="adcontent">{{ course.content | raw  | nl2br  }}</div>

                                    <table class="table table-striped table-bordered text-center">
                                        <thead>
                                          <tr>
                                            <th scope="col" class="text-center">Matière</th>
                                            <th scope="col" class="text-center">Prix</th>
                                            <th scope="col" class="text-center">Heures</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                            {% for  category in course.courseCategories %}
                                                <tr>
                                                    <td>{{ category.category.name }}</td>
                                                    <td>{{ category.pricePerHour }} €</td>
                                                    <td><b>{{ category.duration }}</b> heures</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                      </table>
                                   
                                </div>
                                <div class="col-sm-3 col-sm-cell text-center mt-4">
                                    {% set total = 0 %}
                                    {% set duration = 0 %}
                                    {% for  category in course.courseCategories %}
                                        {% set total = total + category.pricePerHour %}
                                        {% set duration = duration + category.duration %}
                                    {% endfor %}
                                        
                                                                                                           
                                    <p style="font-size:16px;margin-top:10px;"><b>{{ total }}</b> € / {{ duration }} heures</p>
                                    <p><span style="font-size:14px;margin-top:10px;" class="label label-primary b-rad-100 label-line inline-block">{{ course.slotLimit }} élève{% if course.slotLimit  > 1 %}s{% endif %} max</span></p>
                      
                                </div>
                            </div>
                        </div>
                     
                        <div style="padding:25px;">
                            <h3 style="border-bottom: 5px solid #00a8ff;">Formulaire de réservation (sans engagement)</h3>
                            {{ form_start(form_message, {'attr': {'class': ''}}) }} 

                            {{ form_errors(form_message) }}
        
            
                            {{ form_widget(form_message.email) }}

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="inputError3">Email</label>
                                        {{ form_widget(form_message.adresseemail, { 'attr': {'class': 'form-control', 'placeholder': 'Email'} }) }}
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label" for="inputError3">Prénom</label>
                                        {{ form_widget(form_message.firstname, { 'attr': {'class': 'form-control', 'placeholder': 'Prénom'} }) }}
                                    </div>                         
                                    <div class="form-group">
                                        <label class="control-label" for="inputError3">Nom</label>
                                        {{ form_widget(form_message.lastname, { 'attr': {'class': 'form-control', 'placeholder': 'Nom'} }) }}
                                    </div>
                                    <div id="mobileError" class="form-group">
                                        <label class="control-label" for="inputError1">Téléphone</label>
                                        {{ form_widget(form_message.mobile, { 'attr': {'id': 'inputError1','class': 'form-control', 'placeholder': 'Mobile'} }) }}
                                    </div>
                                </div>          
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="inputError3">Code postal</label>
                                        {{ form_widget(form_message.postalcode, { 'attr': {'class': 'form-control', 'placeholder': 'Code postal'} }) }}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="inputError3">Ville</label>
                                        {{ form_widget(form_message.city, { 'attr': {'class': 'form-control', 'placeholder': 'Ville'} }) }}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="inputError2"> Commentaire (facultatif)</label>
                                        {{ form_widget(form_message.message, { 'attr': {'rows': 5,'class': 'form-control', 'placeholder': 'Commentaire'} }) }}
                                    </div>    
                                </div>
                            </div>
        
 
        
                            {{ form_widget(form_message.recaptcha, { 'attr': {
                                'options' : {
                                'theme': 'light',
                                'type': 'image',
                                'size': 'normal'
                            },
                            } }) }}
        
                            <div>
                            <button class="btn btn-sm btn-block btn-primary btn-call-to-action m-t-10" type="submit">Envoyer</button>
                            </div>
                        {{ form_end(form_message) }}
                        </div>
                    </div>
           


            </div>
        </div>
    </div>
    {% endspaceless %}
{% endblock fos_user_content %}

{% block javascripts %}
    {% spaceless %}  
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&signed_in=true&libraries=places&callback=initAutocomplete"
        ></script>  
        <script type="text/javascript">

        </script>
    {% endspaceless %}
{% endblock %}