{% block stylesheets %}
    <style>
        /* by Jamal Hassouni*/
        @import url('https://fonts.googleapis.com/css?family=Roboto:300');

        /*section{
            width: 100%;
            height: 100vh;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 140px 0;
        }*/

        .card {
            position: relative;
            max-width: 300px;
            height: auto;
            background: linear-gradient(-45deg, #fe0847, #feae3f);
            border-radius: 15px;
            margin: 0 auto;
            padding: 40px 20px;
            -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
            box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
            -webkit-transition: .5s;
            transition: .5s;
        }

        .card:hover {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .col-sm-4:nth-child(1) .card,
        .col-sm-4:nth-child(1) .card .title .fa {
            background: linear-gradient(-45deg, #f403d1, #64b5f6);

        }

        .col-sm-4:nth-child(2) .card,
        .col-sm-4:nth-child(2) .card .title .fa {
            background: linear-gradient(-45deg, #ffec61, #f321d7);

        }

        .col-sm-4:nth-child(3) .card,
        .col-sm-4:nth-child(3) .card .title .fa {
            background: linear-gradient(-45deg, #24ff72, #9a4eff);

        }

        .card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: rgba(255, 255, 255, .1);
            z-index: 1;
            -webkit-transform: skewY(-5deg) scale(1.5);
            transform: skewY(-5deg) scale(1.5);
        }

        .title .fa {
            color: #fff;
            font-size: 60px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
            box-shadow: 0 10px 10px rgba(0, 0, 0, .1);

        }

        .title h2 {
            position: relative;
            margin: 20px 0 0;
            padding: 0;
            color: #fff;
            font-size: 28px;
            z-index: 2;
        }

        .price, .option {
            position: relative;
            z-index: 2;
        }

        .price h4 {
            margin: 0;
            padding: 20px 0;
            color: #fff;
            font-size: 60px;
        }

        .option ul {
            margin: 0;
            padding: 0;

        }

        .option ul li {
            margin: 0 0 10px;
            padding: 0;
            list-style: none;
            color: #fff;
            font-size: 16px;
        }

        .card a {
            position: relative;
            z-index: 2;
            background: #fff;
            color: black;
            width: 150px;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            display: block;
            text-align: center;
            margin: 10px auto 0;
            font-size: 16px;
            cursor: pointer;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
            box-shadow: 0 5px 10px rgba(0, 0, 0, .1);

        }

        .card a:hover {
            text-decoration: #0f74a8;

        }


    </style>

{% endblock %}

<div class="modal fade" id="modal-default" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-center text-danger">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4>
                    <bold>{{ msgcambioplan }}</bold>
                </h4>

            </div>
            <div class="modal-body">
                {{ form_start(formcambioplan, {'attr': {'class': 'form-stacked' } }) }}

                <section>
                    <div class="container-fluid">
                        <div class="container">
                            <div class="row">
                                {% set aux = planes|length %}
                                {% set colsv=4 %}
                                {% if aux == 3 %}
                                    {% set colsv=3 %}
                                {% endif %}

                                {% for key, plan in planes %}
                                    <!-- END Col one -->
                                    <div class="col-sm-{{ colsv }}">
                                        <div class="card text-center">
                                            <div class="title">
                                                {% if key == 1 %}
                                                    <i class="fa fa-plane" aria-hidden="true"></i>
                                                {% else %}
                                                    <i class="fa fa-rocket" aria-hidden="true"></i>
                                                {% endif %}
                                                <h2>{{ plan.name }}</h2>
                                            </div>
                                            <div class="price">
                                                <h4><sup>$</sup>{{ plan.precioMes }}</h4>
                                            </div>
                                            <div class="option">
                                                <ul>
                                                    {% if plan.ilimitado == true %}
                                                        <li><i class="fa fa-check" aria-hidden="true"></i> Número de
                                                            comprobantes por mes: ILIMITADO
                                                        </li>
                                                        <li><i class="fa fa-check" aria-hidden="true"></i> Valor máximo
                                                            de facturación por mes: ILIMITADO
                                                        </li>
                                                    {% else %}
                                                        <li><i class="fa fa-check" aria-hidden="true"></i> Número de
                                                            comprobantes por mes:&nbsp;{{ plan.numfacmes }}</li>
                                                        <li><i class="fa fa-check" aria-hidden="true"></i> Valor máximo
                                                            de facturación por mes:&nbsp;${{ plan.valmaxfac }}</li>
                                                    {% endif %}
                                                </ul>
                                            </div>
                                            <div class="pull-right">
                                                <a href="{{ path('app_register_plan_update', {'empid':entity.empresa.id, 'planid':plan.id}) }}"
                                                   class="btn">ELEGIR PLAN</a>
                                            </div>

                                        </div>
                                    </div>

                                {% endfor %}

                            </div>
                        </div>
                    </div>
                </section>
                {{ form_rest(formcambioplan) }}
            </div>
            <div class="modal-footer bg-info">
                <button type="button" class="btn btn-success pull-right" data-dismiss="modal">&nbsp;Cancelar
                </button>

            </div>

            {{ form_end(formcambioplan) }}
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $body = $("body");

        $('#modal-default').modal('show');
        $('#formcambioplansv').submit(function (e) {
            e.preventDefault();
            $('#modal-default').modal('hide');


        });
    });
</script>