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

{% block pagewrapper %}
{{ form_start(form) }}
    <h1 class="page-title">
    {% if mode=="update" %}
    Modification Item = {{item.title}}
    {% elseif mode=="submit" %}
    Création Item
    {% endif %}
    </h1>

    <p>
        {{ form_widget(form.submit) }}
        <a class="btn btn-secondary" href={{ path('app_portal_config_item') }}>Annuler</a>

        {% if mode=="update" %}
        <a href={{ path('app_portal_config_item_delete',{'id':item.id}) }}
            class="btn btn-danger float-end"
            data-method="delete" data-csrf="_token:{{ 'csrf' }}"
            data-confirm="Êtes-vous sûr de vouloir supprimer cet item ?">
            Supprimer
        </a>
        {% endif %}
    </p>
    

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}


    <div class="row clearfix">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header"><i class="fa fa-pencil-alt fa-fw"></i>Informations</div>
                <div class="card-body">            
                    {{ form_row(form.title) }}
                    {{ form_row(form.subtitle) }}
                    {{ form_row(form.essential) }}
                    {{ form_row(form.content) }}
                    {{ form_row(form.badgeurl) }}
                    {{ form_row(form.protected) }}            
                </div>
            </div>
        </div>


        <div class="col-md-4">
            <div class="card">
                <div class="card-header"><i class="fa fa-pencil-alt fa-fw"></i>Détails</div>
                <div class="card-body">            
                    {{ form_row(form.url) }}
                    <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top: -10px;'>
                        Le mot clé #login# sera remplacé par le login de l'utilisateur
                    </div>

                    {{ form_row(form.target) }} 
                    <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top: -10px;'>
                        Attention certains sites n'acceptent pas d'être encapsulés dans une frame. Si vous ne voyez pas votre site apparaître, veuillez changer de cible.
                    </div>   

                    {{ form_row(form.itemcategory) }}
                    {{ form_row(form.roles) }}
                    {{ form_row(form.niveau01s) }}
                    {{ form_row(form.groups) }}
                    {% if form.ssoitem is defined %}
                        {{ form_row(form.ssoitem) }}
                    {% endif %}

                    {% if form.clicksondeservice is defined %}
                        {{ form_label(form.clicksondeservice) }}
                        <a id="dnmainfo" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#dnma" style="float:right"><i class="fa fa-info"></i></a>                
                        {{ form_widget(form.clicksondeservice) }}<br>
                    {% endif %}

                    {{ form_row(form.color) }}

                    <div id="diviconsel" class="col-md-12 text-left" style="height:140px; padding:20px; text-align:center; background-color: {{ item.color ? "#"~item.color : '#'~color['main'] }};">
                        {% if item.icon %}
                            <img src="{{ asset(item.icon.label) }}" height="100" />
                        {% endif %}
                    </div>

                    <div class="col-md-12" style="text-align:center;padding:0px">
                        {{ form_row(form.idicon) }}
                        <a class="btn btn-success" onClick="selectIcon()" title='Ajouter' style="width:100%">Selectionner une Icône</a>
                        <a class="btn btn-danger" onClick="delIcon()" title='Détacher' style="width:100%">Détacher l'Icône</a>
                    </div>  
                </div>
            </div>
        </div>
    </div>   
{{ form_end(form) }}

<div id="dnma" class="modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Services sonde</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ include('Item/dnma.html.twig') }}
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block localjavascript %}
    $('document').ready(function(){
        showhide();
    });

    $( "#item_target" ).change(function() {
        showhide();
    });

    $('#item_clicksonde').change(function() {
        showhide();
    });

    function selIcon(idicon,label) {
        $("#item_idicon").val(idicon);
        $("#diviconsel img").remove();

        url="{{ asset('xxxxxx') }}";
        url=url.replace('xxxxxx',label);

        $("#diviconsel").append("<img src='"+url+"'>");
        $("#diviconsel img").attr("height","100px");
        $("#mymodal").modal("hide");
    }

    function selectIcon() {
        $("#mymodal").find(".modal-title").html("SELECTIONNER UNE ICONE");
        var url="{{ path('app_portal_config_icon_select') }}";
        $("#mymodal").find("#framemodal").attr("src",url);
        $("#mymodal").modal("show");
    }


    function delIcon() {
        $("#diviconsel img").remove();
        $("#item_idicon").val(null);
    }

    function showhide() {
        $("#divhelp").hide();
        if($("#item_target").val()=="frame") {
            $("#divhelp").show();
        }
    }
{% endblock %}
