{% 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">
                                                Indiquez vos informations de facturation
                                            </blockquote>
                                        </div>
                                    </div>

                                    {{ form_start(form, {'attr':{'class':'form-horizontal mt20'}}) }}
                                    <div class="row">
                                        <div class="col-sm-12 form-group">
                                            {{ form_label(form.societyName, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                            {{ form_widget(form.societyName, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6 form-group pull-left">
                                            {{ form_label(form.address1, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                            {{ form_widget(form.address1, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                        </div>
                                        <div class="col-sm-6 form-group pull-right">
                                            {{ form_label(form.address2, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                            {{ form_widget(form.address2, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-4 form-group pull-left">
                                            {{ form_label(form.postalCode, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                            {{ form_widget(form.postalCode, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                        </div>
                                        <div class="col-sm-8 form-group pull-right">
                                            {{ form_label(form.city, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                            {{ form_widget(form.city, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 form-group text-right mt50">
                                            <button type="submit" class="btn btn-blue btn-lg">Suivant</button>
                                        </div>
                                    </div>
                                    {{ form_end(form) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/plugins/unitegallery/js/unitegallery.js') }}"></script>
    <script src="{{ asset('assets/plugins/unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#codePromoBtn').on('click', function (e) {
                if ($('#order_codePromo').val() !== '') {
                    $('#order_hasCodePromo').val(1);
                } else {
                    e.preventDefault();
                }
            });
        });
        $(document).on('nifty.ready', function () {
            $("#demo-gallery-2").unitegallery({
                grid_num_rows: 2,
                tile_enable_border: false,
                tile_enable_shadow: false,
                theme_navigation_type: "arrows",
                tile_enable_textpanel: true,
                tile_textpanel_title_text_align: "center",
                tile_textpanel_always_on: true,
                tile_textpanel_bg_color: "#FFF",
                tile_textpanel_bg_opacity: 1,
                tile_textpanel_title_color: "grey",
                tile_textpanel_title_bold: "normal",
                tile_textpanel_position: "bottom",
                tile_textpanel_css_title: {
                    "font-size": "12px",
                },
                tile_as_link: true,
                tile_overlay_opacity: .4

            });

            $(".ug-thumb-wrapper.ug-tile").on('click', function (e) {
                e.preventDefault();
                $(".ug-thumb-wrapper.ug-tile").removeClass('selected');
                $(this).addClass('selected');
                $('#order_template').val($(this).attr('href').substr(1, $(this).attr('href').length));
            });

            $(".ug-thumb-wrapper.ug-tile .ug-tile-icon.ug-icon-link").on('click', function (e) {
                e.preventDefault();
            });

        });
    </script>
{% endblock %}