{% 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 body %}
    <div class="bg-white form-content border">
        <img class="img-fluid image-header w-100 border-bottom" src="{{ absolute_url(asset('file/header-image.png')) }}" alt=""/>
        <div class="p-5">
            {{ form_start(form)}}
            <h1 class="text-center mb-5">FORMULAIRE D'INSCRIPTION</h1>
            <fieldset class="mb-4">
                <legend class="mb-0">INFORMATIONS GÉNÉRALES</legend>
                <hr class="mt-0 mb-3" />
                {% 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="form-group px-2">
                    {{ form_label(form.civility) }}
                    {% for civility in form.civility %}
                        <div class="custom-control custom-radio">
                            {{ form_widget(civility) }}
                            {{ form_label(civility, null, {
                                'label_attr': {'class': 'custom-control-label'}
                            }) }}
                        </div>
                    {% endfor %}
                </div>

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

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

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

                <div class="row">
                    <div class="col-md-9">
                        <div class="form-group px-2">
                            {{ form_label(form.address) }}
                            {{ form_widget(form.address) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group px-2" style="margin-top: 31px;">
                            {{ form_widget(form.pays) }}
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="mb-4">
                <legend class="mb-0">INSCRIPTION CONGRÈS</legend>
                <hr class="mt-0 mb-3" />

                <div class="card mb-2 alert alert-primary">
                    <div class="card-body">
                        <ul>
                            <li>Tunisien:
                                <ul>
                                    <li>Orthodontiste:
                                        <ul>
                                            <li>Avant 15 mai 2025
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                                600 DT</li>
                                            <li>Avant 1 juin 2025
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                                700 DT</li>
                                            <li>Sur place
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                                900 DT</li>
                                        </ul>
                                    </li>
                                    <li>Résident
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                        300 DT</li>
                                </ul>
                            </li>
                            <li>Etranger:
                                <ul>
                                    <li>Orthodontiste
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                        200 €
                                    </li>
                                    <li>Résident
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px;"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
                                        100 €
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="form-group px-2">
                    {{ form_label(form.function) }}
                    <div class="row">
                        {% for function in form.function %}
                            <div class="col-md-6">
                                <div class="custom-control custom-radio custom-inscription-radio position-relative mb-2">
                                    {{ form_widget(function) }}
                                    <div class="text-center border p-2 custom-inscription-radio-label">
                                        {{ form_label(function, null) }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>


            </fieldset>
            <fieldset class="mb-4">
                <legend class="mb-0">EXTRAS</legend>
                <hr class="mt-0 mb-3" />

                <div class="px-2">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                {{ form_label(form.lunchDayOne) }}
                                <div class="small">
                                    <span class="d-block">Date : Samedi le 21 juin 2025</span>
                                    <span class="d-block" v-if="demand.pays === 'TN'">Prix : 170 DT</span>
                                    <span class="d-block" v-else>Prix : 50 €</span>
                                </div>
                                <div>
                                    {% for option in form.lunchDayOne %}
                                        <div class="form-check d-inline pr-3">
                                            {{ form_widget(option) }} {{ form_label(option) }}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group" v-if="demand.lunchDayOne == 1">
                                {{ form_label(form.lunchDayOneCount) }}
                                {{ form_widget(form.lunchDayOneCount) }}
                            </div>
                        </div>
                    </div>
                </div>

            </fieldset>
            <fieldset class="mb-4">
                <legend class="mb-0">HÉBERGEMENT</legend>
                <hr class="mt-0 mb-3" />

                <img class="img-fluid image-header w-50 border" src="{{ absolute_url(asset('file/hebergement.jpg')) }}" alt=""/>
            </fieldset>
            <fieldset class="mb-4">
                <legend class="mb-0">MÉTHODE DE PAIEMENT</legend>
                <hr class="mt-0 mb-3" />

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

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

                <div class="alert alert-primary" v-if="demand.paymentType == 2" role="alert">
                    Transfert bancaire au : <br />
                    RIB : 08 908010 0410002439 45 <br />
                    IBAN : TN59 0890 8010 0410 0024 3945 <br />
                    STE PURE TRAVEL <br />
                    BIAT – Agence Hammamet Mrezga
                </div>

                <div class="form-group px-2" v-if="demand.paymentType == 2">
                    {{ form_label(form.selectFile) }}
                    {{ form_widget(form.selectFile) }}
                </div>

                <button type="submit" class="btn btn-primary ml-auto float-right">Envoyer</button>
            </fieldset>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ absolute_url(asset('js/vue.js')) }}"></script>
    <script>
        $(function () {
            var insForm = new Vue({
                el: 'form[name=inscription]',
                data: {
                    demand: {{demand | raw}},
                    price: '0 DT'
                },
                watch: {
                    'demand.pays': function () {
                        this.updatePrice()
                    },
                    'demand.function': function () {
                        this.updatePrice()
                    },
                    'demand.lunchDayOne': function () {
                        this.updatePrice()
                    },
                    'demand.lunchDayOneCount': function () {
                        this.updatePrice()
                    },
                    'demand.paymentType': function () {
                        this.updatePrice()
                    },
                },
                methods:{
                    updatePrice() {
                        let my = this
                        $.ajax({
                            url: '{{ url('api_demand_price') }}',
                            method: 'POST',
                            data: {
                                inscription: my.demand
                            },
                            dataType: "json",
                            success: function (r) {
                                my.price = r.price
                            }
                        });
                    },
                    removeUpload: function () {
                        this.defaultFile = false
                        this.demand.justificative = null
                        let $input = $(this.$el).find('#inscription_selectFile')
                        $input.attr("type", "text")
                        $input.attr("type", "file")
                    },
                    readURL: function (evt) {
                        let my = this;
                        let input = evt.target;
                        if (input.files && input.files[0]) {

                            var reader = new FileReader();
                            reader.onload = function(e) {
                                my.demand.justificative = e.target.result
                            };

                            reader.readAsDataURL(input.files[0]);

                        } else {
                            this.removeUpload();
                        }
                    }
                },
            })
        });
    </script>

{% endblock %}