{% extends 'base.html.twig' %}
{% block title %}Inscription{% endblock %}
{% block stylesheets %}
    <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" href="{{ absolute_url(asset('css/image-upload.css')) }}">
{% endblock %}
{% block header %}
    <div class="container-fluid p-0">
        <img class="img-fluid" src="{{ absolute_url(asset('file/background.png')) }}" alt=""/>
    </div>
{% endblock %}
{% block body %}
    <div class="p-5 bg-white form-content">
        {{ form_start(form)}}
        <fieldset>
            <legend>FORMULAIRE D'INSCRIPTION</legend>
            <div class="row mb-4">
                <div class="col-md-12">
                    <ul class="info-list">
                        <li>
                            L'inscription donne droit à : <br />
                            - La participation aux sessions scientifiques du congrès, conférences et ateliers <br />
                            - L’accès à l’espace d’exposition <br />
                            - Les documents relatifs au congrès (Le programme, les résumés, sac du congrès) <br />
                            - Deux pauses café
                        </li>
                        <li>
                            <b>Pour tout renseignement :  Inscription (51 626 006) / Bon de commande (24 404 232)</b>
                        </li>
                        <li>
                            Le règlement des frais d’inscription en espèces ou par chèque ou par bon de commande se fait auprès de Mlle Najla Ben Salem. Faculté de Médecine Dentaire de Monastir. 4ème étage.
                        </li>
                        <li>Les places pour les ateliers sont limitées.</li>
                    </ul>
                </div>
            </div>
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger">
                    {{ message }}
                </div>
            {% endfor %}

            {% for message in app.flashes('success') %}
                <div class="alert alert-success">
                    {{ message }}
                </div>
            {% endfor %}

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group px-2 pb-2">
                        {{ form_label(form.lastName) }}
                        {{ form_widget(form.lastName) }}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group px-2 pb-2">
                        {{ form_label(form.firstName) }}
                        {{ form_widget(form.firstName) }}
                    </div>
                </div>
            </div>

            <div class="form-group px-2 pb-2">
                {{ form_label(form.email) }}
                {{ form_widget(form.email) }}
            </div>

            <div class="form-group px-2 pb-2">
                <div class="row">
                    {% for activity in form.activity %}
                        <div class="col-md-6">
                            <div class="custom-control custom-radio">
                                {{ form_widget(activity, {
                                    'attr': {
                                        'class': 'custom-control-input activity-input',
                                        'data-price': activitiesInfo[activity.vars.value].price
                                    }
                                } ) }}
                                {{ form_label(activity, null, {
                                    'label_attr': {'class': 'custom-control-label'}
                                }) }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="row">
                <div class="col-md-9">
                    <div class="form-group px-2 pb-2">
                        {{ form_label(form.address) }}
                        {{ form_widget(form.address) }}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group px-2 pb-2" style="margin-top: 31px;">
                        {{ form_widget(form.pays) }}
                    </div>
                </div>
            </div>

            <div class="form-group px-2 pb-2">
                {{ form_label(form.numTel) }}
                {{ form_widget(form.numTel) }}
            </div>

            <div class="form-group px-2 pb-2">
                <label for="registration-fees">Frais d'inscription</label>
                <div style="text-align: -webkit-center;">
                    <div class="registration-fees-tab bg-light p-2 col-md-8">
                        <div class="py-1">
                            <div class="float-right text-info"><p><b>150 DT</b></p></div>
                            <p>Praticien</p>
                        </div>

                        <div class="py-1">
                            <div class="float-right text-info"><p class=""><b>50 DT</b></p></div>
                            <p>Résident / Interne</p>
                        </div>

                        <div class="py-1">
                            <div class="float-right text-info"><p class=""><b>30 DT</b></p></div>
                            <p>Paramédical / Technicien</p>
                        </div>

                        <div class="py-1">
                            <div class="float-right text-info"><p><b>50 DT</b></p></div>
                            <p>Atelier</p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="form-group">
                {{ form_label(form.workshop) }}
                <div>
                    {% for option in form.hasWorkshop %}

                        {{ form_widget(option, {
                            'attr': {'class': 'has-workshop-input'}
                        }) }} {{ form_label(option) }}
                    {% endfor %}
                </div>
                <div class="row workshops" style="padding-right: 15px;padding-left: 15px;">
                    {% for workshop in form.workshop %}
                        <div class="col-md-6  bg-light" style="border: 2px solid #ffffff;">
                            <div class="single-workshop p-2">
                                <div class="row">
                                    <div class="custom-control custom-checkbox col-md-9 col-10">
                                        {{ form_widget(workshop, {
                                            'attr': {'class': 'custom-control-input workshop-input', 'data-group': wsInfo[workshop.vars.value].group }
                                        } ) }}
                                        {{ form_label(workshop, null, {
                                            'label_attr': {'class': 'custom-control-label'}
                                        }) }}
                                        <p class="text-info" style="font-size: 12px">{{ wsInfo[workshop.vars.value].description }}</p>
                                        <div><span class="badge text-white {{ wsInfo[workshop.vars.value].classes }}">{{ wsInfo[workshop.vars.value].date|date('d/m/Y - H:i') }}</span></div>
                                        {% if not wsInfo[workshop.vars.value].hasPlace %}
                                            <span class="badge bg-danger text-white">fermé</span>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-3 col-2">
                                        <div class="bg-info text-white p-2 text-center {{ wsInfo[workshop.vars.value].classes }}" style="border-radius: 2px;min-width: 60px">
                                            {{ wsInfo[workshop.vars.value].num }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="form-group">
                <p>Total Frais D'inscription / Total Registration Fees : <span id="total-free-insc"></span></p>
            </div>

            <div class="form-group px-2 pb-2">
                {{ form_label(form.paymentType) }}
                {% for option in form.paymentType %}
                    <div>
                        {{ form_widget(option, {
                            'attr': {'class': 'input-payment-type'}
                        }) }} {{ form_label(option) }}
                    </div>
                {% endfor %}
            </div>

            <div class="form-group payment-type px-2 pb-2" data-payment-type="1" style="display: none">
                <p>Espèces (auprés de Mlle Najla Ben Salem, Faculté de Médecine Dentaire de Monastir, 4ème étage)</p>
            </div>

            <div class="form-group payment-type px-2 pb-2" data-payment-type="2" style="display: none">
                <p>Chèque au nom de l'Association des Entretiens Odontologiques de Monastir (auprès de Mlle Najla Ben Salem, Faculté de Médecine Dentaire de Monastir, 4ème étage)</p>
            </div>

            <div class="form-group payment-type px-2 pb-2" data-payment-type="3" style="display: none">
                <p></p>
            </div>

            <div class="form-group payment-type px-2 pb-2"  data-payment-type="4" style="display: none">
                <p>Transfert bancaire au :11 105 0024384 008 788 49(UBCI Monastir 1)(veuillez joindre une copie de l'ordre du virement)</p>
            </div>

            <div class="form-group purchase-order p-2" style="display: none">
                {% for option in form.purchaseOrder %}
                    <div>
                        {{ form_widget(option, {
                            'attr': {'class': 'input-purchase-order'}
                        }) }} {{ form_label(option) }}
                    </div>
                {% endfor %}
            </div>

            <div class="form-group hotel-group p-2" style="display: none">
                {{ form_label(form.room) }}
                {{ form_widget(form.room) }}
            </div>

            <div class="form-group hotel-group p-2" style="display: none">
                {{ form_label(form.numberNights) }}
                {{ form_widget(form.numberNights) }}
            </div>

            <div class="form-group p-2 hotel-group" style="display: none">
                <p>Total Frais D'inscription + Hébergement / Total Registration Fees + Accommodation : <span id="total-fee"></span></p>
            </div>

            <div class="form-group" id="group-select-file">
                {{ form_label(form.selectFile) }}
                <div class="image-upload-wrap"{% if demand.file %} data-file="{{ absolute_url(asset(demand.filePath)) }}"{% endif %}>
                    {{ form_widget(form.selectFile) }}
                    <div class="drag-text">
                        <h3>joindre un justificatif (Bon de commande ou transfert bancaire)</h3>
                    </div>
                </div>
                <div class="file-upload-content">
                    <img class="file-upload-image" src="#" alt="your image" />
                    <div class="image-title-wrap">
                        <button type="button" onclick="removeUpload()" class="remove-image">Supprimer <span class="image-title">Uploaded Image</span></button>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary ml-auto float-right">Envoyer</button>
        </fieldset>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ absolute_url(asset('js/image-upload.js')) }}"></script>
    <script>
        $('.input-payment-type').change(function () {

            var my = $("input.input-payment-type:checked");
            if (my.val() == 3) {
                $('.purchase-order').show();
            } else {
                $('.purchase-order').hide();
                $('.input-purchase-order[value=1]').prop('checked', true);
                $('.input-purchase-order').trigger('change');
            }
            if (my.val() == 1 || my.val() == 2) {
                $('#group-select-file').hide();
                removeUpload()
            } else {
                $('#group-select-file').show();
            }
            $('.payment-type').hide();
            $('.payment-type[data-payment-type='+ my.val() +']').show();
        });
        $('.input-purchase-order').change(function () {
            var my = $("input.input-purchase-order:checked");
            if (my.val() == 2) {
                $('.hotel-group').show();
            }else{
                $('.hotel-group').hide();
            }
        });

        $('.input-payment-type').trigger('change');
        $('.input-purchase-order').trigger('change');

        var chamber = [];
        {% for r in room %}
        chamber[{{ r.id }}] = {{ r.price }};
        {% endfor %}

        function callFreeInsc() {
            var price = $('input.activity-input:checked').data('price');
            var total = 0;
            if (price)
                total = total + price;
            total = total + ($('input.workshop-input:checked').length * 50);

            total = total + ' DT';
            $('#total-free-insc').html(total);
        }

        function callFreeTotal() {
            var price = $('input.activity-input:checked').data('price');
            var total = 0;
            if (price)
                total = total + price;
            total = total + ($('input.workshop-input:checked').length * 50);
            total = total + (chamber[$('#inscription_room').val()] * $('#inscription_numberNights').val());

            total = total + ' DT';
            $('#total-fee').html(total);
        }

        $('input.activity-input').change(function () {
            callFreeInsc();
            callFreeTotal();
        });
        $('input.workshop-input').click(function (evt) {
            $('.has-workshop-input[value=1]').prop("checked", true);
            var group = $(this).data('group');
            if($('input.workshop-input[data-group='+ group +']:checked:not(:disabled)').length > 1) {
                evt.preventDefault();
                evt.stopPropagation();
                alert('le participant n\'a pas le droit de s\'inscrire à 2 ateliers qui se déroulent au même temps');
                return false;
            }
        });
        $('.has-workshop-input').change(function () {
            if ($(this).val() == 0) {
                $('input.workshop-input').prop("checked", false);
            }
        })
        $('input.workshop-input').change(function (evt) {
            callFreeInsc();
            callFreeTotal();
        });
        $('#inscription_pays').change(function () {
            callFreeInsc();
            callFreeTotal();
        });
        $('#inscription_room').change(function () {
            callFreeTotal();
        });
        $('#inscription_numberNights').change(function () {
            callFreeTotal();
        });
        $(function () {
            callFreeInsc();
            callFreeTotal();
        });
    </script>

{% endblock %}