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

{% block title %}
    Configuration | {{ parent() }}
{% endblock %}

{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">
                Site
            </li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">
                Réglages généraux
            </li>
        </ol>
    </nav>
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            {{ include('admin/ui/card/_header.html.twig', {withLocal:true, card_header_title:'Configuration du site'}) }}
            <div class="card-body pb-2">
                {{ form_start(form) }}
                <div class="row">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-md-6">{{ form_row(form.title) }}</div>
                            <div class="col-md-6">
                                {{ form_label(form.themeColor) }}
                                <div class="input-group">
                                    <span class="input-group-text js-colorPreview"
                                          style="background-color: {{ form.themeColor.vars.value }}; width: 40px;"></span>
                                    {{ form_widget(form.themeColor, {'attr': {'type': 'color', 'class': 'form-control js-colorInput', 'id': ''}}) }}
                                </div>
                            </div>
                            <div class="col-12">{{ form_row(form.baseline) }}</div>
                            <div class="col-12">
                                {{ form_row(form.metaDescription) }}
                            </div>
                            <div class="col-12">
                                {{ form_row(form.metaKeyword) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.googleTagManagerId) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.googleAnalyticsId) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.email) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.url) }}
                            </div>
                            <div class="col-md-6">
                                <div>
                                    {{ form_label(form.faviconFile) }}
                                    <div class="input-group">
                                        {{ form_widget(form.faviconFile) }}
                                        <span class="input-group-text"
                                              style="width: 40px;padding:5px">
                                            {% if site.favicon is not empty %}
                                                <img src="{{ vich_uploader_asset(site, 'faviconFile') }}" alt=""
                                                     class="img-fluid">
                                            {% else %}
                                                NC
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"></div>
                            <div class="col-md-6">
                                {{ form_row(form.imageFile) }}
                                {% if site.image is not empty %}
                                    <figure class="figure">
                                        <img src="{{ vich_uploader_asset(site, 'imageFile') }}" alt="" class="img-fluid"
                                             style="width:100%">
                                        <figcaption class="figure-caption">Logo du site</figcaption>
                                    </figure>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                {{ form_row(form.logoEmailFile) }}
                                {% if site.logoEmail is not empty %}
                                    <figure class="figure" style="background-color:#191715">
                                        <img src="{{ vich_uploader_asset(site, 'logoEmailFile') }}" alt=""
                                             class="img-fluid" style="width:100%">
                                        <figcaption class="figure-caption">Logo pour email</figcaption>
                                    </figure>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-md-6">{{ form_row(form.phone) }}</div>
                            <div class="col-md-6">{{ form_row(form.cellphone) }}</div>

                            <div class="col-12">{{ form_row(form.address) }}</div>
                            <div class="col-md-4">{{ form_row(form.zipCode) }}</div>
                            <div class="col-md-4">{{ form_row(form.city) }}</div>
                            <div class="col-md-4">{{ form_row(form.country) }}</div>
                            {% if app_modules.map is defined and app_modules.map == true %}
                                {% if form.latitude is defined and form.longitude is defined %}
                                    <div class="col-md-6">{{ form_row(form.latitude) }}</div>
                                    <div class="col-md-6">{{ form_row(form.longitude) }}</div>
                                {% else %}
                                    <div class="col-md-6 mb-3">Latitude
                                        : {{ app_site.latitude??'<i>Calcul automatique</i>' }}</div>
                                    <div class="col-md-6 mb-3">Longitude
                                        : {{ app_site.longitude??'<i>Calcul automatique</i>' }}</div>
                                {% endif %}
                            {% endif %}
                        </div>

                        {{ form_row(form.googleLink) }}

                        {% if app_modules.map is defined and app_modules.map == true %}
                            {% if app_site.latitude and app_site.longitude %}
                                <div class="js-poi-list">
                                    <div class="d-none js-marker" data-id="site"
                                         data-lat="{{ app_site.latitude }}"
                                         data-lon="{{ app_site.longitude }}" data-name="{{ app_site.title }}"
                                         data-icon="{{ asset('assets/poi.png') }}"
                                         data-shadow="{{ asset('assets/poi_shadow.png') }}"
                                         data-address="{{ app_site.fullAddress }}">{{ app_site.title }}
                                    </div>
                                    <div class="js-map" data-target=".js-poi-list" id="map" style="height:55vh"></div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="col-md-6 ml-auto">
                        {{ include('admin/ui/form/_submit.html.twig', {submit_class:'success', submit_label:'Sauvegarder'}) }}
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
    {% endblock %}

    {% block stylesheets %}
        {{ encore_entry_link_tags('poi-map') }}
    {% endblock %}

    {% block javascripts %}
    {{ encore_entry_script_tags('poi-map') }}
{% endblock %}