<!DOCTYPE html>
<html>

<head>
    <meta charset="gb18030">

    <title>Sistema Facturación Electrónica</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content="">
    <!-- Favicons -->
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/>
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,500,600,700,700i|Montserrat:300,400,500,600,700"
          rel="stylesheet">
    <!-- Bootstrap CSS File -->
    <link href="{{ asset("lib/bootstrap/css/bootstrap.min.css") }}" rel="stylesheet">
    <!-- Libraries CSS Files -->
    <link href="{{ asset("lib/font-awesome/css/font-awesome.min.css") }}" rel="stylesheet">
    <link href="{{ asset("lib/animate/animate.min.css") }}" rel="stylesheet">
    <link href="{{ asset("lib/ionicons/css/ionicons.min.css") }}" rel="stylesheet">
    <link href="{{ asset("lib/owlcarousel/assets/owl.carousel.min.css") }}" rel="stylesheet">
    <link href="{{ asset("lib/lightbox/css/lightbox.min.css") }}" rel="stylesheet">
    <!-- Main Stylesheet File -->
    <link href="{{ asset("lib/css/style.css") }}" rel="stylesheet">

</head>

<body>

<main id="main">

    <!--==========================
Pricing Section
============================-->
    <section id="pricing" class="wow  section-bg">
        <div class="container">
            <header class="section-header">
                <h3>Planes</h3>
                <p>Solicita tu plan acorde a tus necesidades. Soporte en linea 5/8</p>
            </header>
            <div class="row flex-items-xs-middle flex-items-xs-center">
                <div class="col-md-12">
                    <div class="card-deck">
                        {% for key, plan in planes %}
                            <div class="card">

                                <div class="card-header">
                                    <h3><span class="currency">$</span>{{ plan.precioMes }}<span
                                                class="period">/Mes</span></h3>
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">{{ plan.name }}</h4>
                                    {# <ul class="list-group">
                                    <li class="list-group-item">Personas Naturales</li>
                                    <li class="list-group-item">Licencia Anual</li>
                                    <li class="list-group-item">Hasta 5 comprobantes anuales.</li>
                                </ul> #}
                                    {{ plan.detalle |raw }}
                                    <ul>
                                        {% if plan.ilimitado == true %}
                                            <li>Número de comprobantes por mes: Ilimitado</li>
                                            <li>Valor máximo de facturación por mes: Ilimitado</li>
                                        {% else %}
                                            <li>Número de comprobantes por mes:&nbsp;{{ plan.numfacmes }}</li>
                                            <li>Valor máximo de facturación por mes:&nbsp;{{ plan.valmaxfac }}</li>
                                        {% endif %}
                                    </ul>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="pull-right">
                                        <a href="{{ path('app_register_plan_add', {'id':plan.id}) }}"
                                           class="btn">elegir
                                            Plan</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- #pricing -->

</main>
<!--==========================
Footer
============================-->
<footer id="footer" class="section-bg">
    <div class="container">
        <div class="copyright">
            {# <div class="pull-right hidden-xs">
                <b>Version</b> 2.5.0
            </div> #}
            <strong>Copyright &copy; 2020-2022 &nbsp;&nbsp;</strong>

        </div>
        <div class="credits">

        </div>
    </div>
</footer>

<!-- Uncomment below i you want to use a preloader -->
<!-- <div id="preloader"></div> -->
<!-- JavaScript Libraries -->
<script src="{{ asset("lib/jquery/jquery.min.js") }}"></script>
<script src="{{ asset("lib/jquery/jquery-migrate.min.js") }}"></script>
<script src="{{ asset("lib/bootstrap/js/bootstrap.bundle.min.js") }}"></script>
<script src="{{ asset("lib/easing/easing.min.js") }}"></script>
<script src="{{ asset("lib/mobile-nav/mobile-nav.js") }}"></script>
<script src="{{ asset("lib/wow/wow.min.js") }}"></script>
<script src="{{ asset("lib/waypoints/waypoints.min.js") }}"></script>
<script src="{{ asset("lib/counterup/counterup.min.js") }}"></script>
<script src="{{ asset("lib/owlcarousel/owl.carousel.min.js") }}"></script>
<script src="{{ asset("lib/isotope/isotope.pkgd.min.js") }}"></script>
<script src="{{ asset("lib/lightbox/js/lightbox.min.js") }}"></script>
<!-- Template Main Javascript File -->
<script src="{{ asset("lib/js/main.js") }}"></script>

</body>

</html>
