{% extends 'bo/base.html.twig' %}

{% block title %}Création de votre projet{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/plugins/unitegallery/css/unitegallery.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    <section class="g-bg-izibrick-light-v5">
        <div class="container g-py-100">
            <div class="row justify-content-center">
                <div class="col-sm-12 col-lg-10">
                    <div class="u-shadow-v21 g-bg-white rounded g-py-40 g-px-30">
                        {% include 'bo/order/wizard.html.twig' with {'step': step} %}

                        <div id="nav-1-2-default-hor-left-big-icons" class="tab-content">
                            <div class="tab-pane fade show active" id="nav-1-2-default-hor-left-big-icons--1"
                                 role="tabpanel">
                                <div id="wizard-tab1" class="tab-pane">
                                    <div class="media mt20 g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-gray-light-v5 g-rounded-4 g-transition-0_3 g-pa-20">
                                        <div class="media-body">
                                            <blockquote class="lead g-mb-15">
                                                Précisez si vous souhaitez commander un nouveau nom de domaine ou si
                                                nous devons prendre en charge un éventuel transfert d'un domaine
                                                existant.
                                            </blockquote>
                                        </div>
                                    </div>

                                    {{ form_start(form, {'attr':{'class':'form-horizontal mt20'}}) }}
                                    {% if site.product %}
                                        <!--<div class="col-sm-3">
                                        <div class="pull-right bloc-price">A partir de <br/><span
                                                    class="price text-2x">{{ site.product.price }}€</span>/mois
                                        </div>
                                    </div>-->
                                    {% endif %}
                                    {% set option = site_option.getById(1) %}
                                    <div class="col-sm-12 form-group option-block">
                                        <div class="row g-height-125 g-transition-0_2">
                                            <div class="col-sm-1 g-bg-gray-light-v5 g-pa-0">
                                                {{ form_widget(form.domain[0], {'attr':{'class':'form-control input-lg option-radio'}}) }}
                                            </div>
                                            <div class="col-sm-11 g-pa-10">
                                                <label class="control-label text-bold required">{{ option.label }}</label>
                                                <p>{{ option.description }}</p>
                                                <div class="option-domain">
                                                    {{ form_label(form.newDomain, null, {'label_attr':{'class':'control-label text-bold mb-0'}}) }}
                                                    {{ form_widget(form.newDomain, {'attr':{'class':'input-sm', 'placeholder':'www.mon-site.fr'}}) }}
                                                </div>
                                                <div class="option-price">
                                                    <span class="u-label g-bg-bluegray g-rounded-3">{{ option.price.label }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% set option = site_option.getById(2) %}
                                    <div class="col-sm-12 form-group option-block">
                                        <div class="row g-height-125 g-transition-0_2">
                                            <div class="col-sm-1 g-bg-gray-light-v5 g-pa-0">
                                                {{ form_widget(form.domain[1], {'attr':{'class':'form-control input-lg option-radio'}}) }}
                                            </div>
                                            <div class="col-sm-11 g-pa-10">
                                                <label class="control-label text-bold required">{{ option.label }}</label>
                                                <p>{{ option.description }}</p>
                                                <div class="option-domain">
                                                    {{ form_label(form.existingDomain, null, {'label_attr':{'class':'control-label text-bold mb-0'}}) }}
                                                    {{ form_widget(form.existingDomain, {'attr':{'class':'input-sm', 'placeholder':'www.mon-site.fr'}}) }}
                                                </div>
                                                <div class="option-price">
                                                    <span class="u-label g-bg-bluegray g-rounded-3">{{ option.price.label }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% set option = site_option.getById(3) %}
                                    <div class="col-sm-12 form-group option-block">
                                        <div class="row g-height-125 g-transition-0_2">
                                            <div class="col-sm-1 g-bg-gray-light-v5 g-pa-0">
                                                {{ form_widget(form.domain[2], {'attr':{'class':'form-control input-lg option-radio'}}) }}
                                            </div>
                                            <div class="col-sm-11 g-pa-10">
                                                <label class="control-label text-bold required">{{ option.label }}</label>
                                                <p>{{ option.description }}</p>
                                                <div class="option-price">
                                                    <span class="u-label g-bg-bluegray g-rounded-3">{{ option.price.label }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 form-group text-right mt50">
                                        <button type="submit" class="btn btn-blue btn-lg">Suivant</button>
                                    </div>
                                    {{ form_end(form) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.option-block').on('click', function (e) {
                $('.option-block').removeClass('selected');
                $(this).find('input').prop('checked', true);
                $(this).addClass('selected');
            });
        });
    </script>
{% endblock %}