{% extends '@EasyAdmin/form/bootstrap_4.html.twig' %}

{% block _provider_plan_entry_widget %}
    {{ _self.macroPlan(form) }}
{% endblock %}

{% block _profileprovider_plan_entry_widget %}
    {{ _self.macroPlan(form) }}
{% endblock %}

{% block _profileproviderplan_plan_entry_widget %}
    {{ _self.macroPlan(form) }}
{% endblock %}


{% macro macroPlan(form) %}
    {% if form.vars.attr.dataplan is defined %}
        {% if not form.vars.attr['data-completeFormPlanEnterprise'] %}
            <div class="card-plan">
                <div class="row file_plan"  >
                    <div class="col-md-12">
                        {{ form_widget(form) }}
                    </div>
                    <div class="col-md-6 {% if form.vars.label == "PRO" %}div-corner-ribbon{% endif %}" >
                        <div class="container-ribbon-pro">
                            {% if  form.vars.label == "PRO" %}
                                <div id ="corner-ribbon_{{form.vars.attr.dataplan.id}}" class="corner-ribbon bottom-left sticky orange">
                                    {% trans %}MOST POPULAR!{% endtrans %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div  data-plan={{form.vars.attr.dataplan.id}} class="plan-title">
                            <div>{{ form.vars.label }}</div>
                        </div>
                           
                        <div class="plan-price" id="plan_box_{{form.vars.attr.dataplan.id}}">
                        </div>
                        <div class="center_content">
                            <button 
                                class="btn btn-danger button_select_plan" 
                                role="btn" 
                                nro-plan="{{form.vars.attr.dataplan.id}}"
                                id = "button_select_plan_{{form.vars.attr.dataplan.id}}"
                                >
                                    <span class="seleccionar-plan">{% trans %}SELECT PLAN{% endtrans %}</span>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="description-plan" id="description-plan-{{form.vars.attr.dataplan.id}}">
                            {{form.vars.attr.dataplan.planDescription|raw}}
                        </div>
                    </div>
                </div>
            </div>
            
        
            <style>
                #button_select_plan_{{form.vars.attr.dataplan.id}}{
                    border: 1px solid #{{form.vars.attr.dataplan.color}} !important;
                    color: black;
                }
                .button_select_select_plan_{{form.vars.attr.dataplan.id}}{
                    background-color: #{{form.vars.attr.dataplan.color}} !important;
                    color: white;
                }
                .button_select_select_plan_{{form.vars.attr.dataplan.id}} span{
                    color: white !important;
                }
                #plan_box_{{form.vars.attr.dataplan.id}}{
                    color: #{{form.vars.attr.dataplan.color}};
                }

                #corner-ribbon_{{form.vars.attr.dataplan.id}}{
                    background: #{{form.vars.attr.dataplan.color}};
                }
                
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
        
                li {
                    padding-left: 1em; 
                    text-indent: -1.5em;
                    margin:0 0 5px 0
                }
        
                #description-plan-{{form.vars.attr.dataplan.id}} li::before {
                    content: "• ";
                    color: #{{form.vars.attr.dataplan.color}};
                    font-size: 1.8em;
                }
                
                {% if  form.vars.label == "PRO" %}
                    {{'#provider_plan_' ~ form.vars.attr.dataplan.id}} {
                        border: 2px solid {{'#' ~ form.vars.attr.dataplan.color}} !important;
                    }
                {% endif %}
                .card-plan .card-header:first-child {
                    border-radius: 10px 10px 0 0;
                }
                
                {{'#provider_plan_' ~ form.vars.attr.dataplan.id}} 
                {
                    cursor:pointer !important;
                }
        
                {{'#profileprovider_plan_' ~ form.vars.attr.dataplan.id}} 
                {
                    cursor:pointer !important;
                }
        
                {{'#profileproviderplan_plan' ~ form.vars.attr.dataplan.id}} 
                {
                    cursor:pointer !important;
                }
        
                .card-header {
                    cursor:pointer !important;
                }
                .description-plan li > h1 {
                    font-size: 14px !important;
                    font-weight: 900 !important;
                    line-height: 1.2 !important;
                    color: var(--text-color-dark)!important;
                    margin: -19px 0 5px 0 !important;
                    padding-left: 1em; 
                    text-indent: -.7em;
                }
                
                .file_plan{
                    height: 233px !important;
                    }

                @media(max-width: 768px) {
                    .file_plan{
                        height: null;
                    }
                }
            </style>
            

        {% endif %}
    
    {% endif %}
{% endmacro %}