{% extends 'dashboard/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 body %}
    {% 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="card">
        <div class="card-header">FORMULAIRE D'INSCRIPTION</div>
        <div class="card-body">
            <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 />
                            - 02 pauses café<br />
                            - Les documents relatifs au congrès (Le programme, les résumés, sac du congrès)<br />
                        </li>
                        <li>
                            Pour tout renseignement, veuillez contacter Mlle Najla Ben Salem au 00216 21 65 62 82
                        </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. Fax : 00216 73 46 38 28 – 00216 73 46 11 50
                        </li>
                        <li>Les places pour les ateliers sont limitées.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            {{ form_start(form)}}
            <fieldset>
                <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 text-start">
                                <div class="float-end text-info"><p><b>Gratuit</b></p></div>
                                <p>Hospitalo-universitaires</p>
                            </div>
                            <div class="py-1 text-start">
                                <div class="float-end text-info"><p><b>150 DT</b></p></div>
                                <p>Praticien</p>
                            </div>

                            <div class="py-1 text-start">
                                <div class="float-end text-info"><p class=""><b>50 DT</b></p></div>
                                <p>Résident / Interne / Technicien</p>
                            </div>
                            <div class="py-1 text-start">
                                <div class="float-end 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-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>
                                            {% if not wsInfo[workshop.vars.value].hasPlace %}
                                                <span class="badge bg-danger text-white">fermé</span>
                                            {% endif %}
                                        </div>
                                        <div class="col-2">
                                            <div class="bg-info text-white p-2 text-center" style="border-radius: 2px">
                                                {{ wsInfo[workshop.vars.value].num }}
                                            </div>
                                        </div>
                                        {% if wsInfo[workshop.vars.value].date %}
                                            <div class="col-9 bg-info text-white" style="border-radius: 2px;">
                                                {{ wsInfo[workshop.vars.value].displayDate }}
                                            </div>
                                            <div class="col-1"></div>
                                            <div class="col-2">
                                                <div class="bg-info text-center text-white"  style="border-radius: 2px">
                                                    {{ wsInfo[workshop.vars.value].date |date('H:i') }}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </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>

                <div class="btn-group float-end pt-5 pb-3">
                    <button type="submit" class="btn btn-primary">enregistrer</button>
                    {% if not demand.valid %}
                        <button type="submit" name="accept" value="1" class="btn btn-success">enregistrer et accepter</button>
                    {% endif %}
                </div>
            </fieldset>
            {{ form_end(form) }}
        </div>
    </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 %}