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

{% block title %}Premium{% endblock %}

{% block stylesheets %}

	<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
	<style>

		@font-face {
		font-family: "Kimberley";
		src: url(/assets/webfonts/Signika-VariableFont_wght.ttf) format("truetype");
		}
	</style>
    <link href="{{ asset('/assets/css/pricing.css') }}" rel="stylesheet">
    <link href="{{ asset('/assets/css/jumbotrons.css') }}" rel="stylesheet">
{% endblock %}

{% block fos_user_content %}

<div class="container my-3">
  <div class="p-5 text-center bg-body-tertiary rounded-3">
    <h1 class="text-body-emphasis">Boostez la <b>visibilité de votre profil</b> 🌞</h1>
    <p class="lead">
        <b>📌 Annonce épinglée</b> : Diffusez vos annonces dans <b>les premiers résultats</b> de recherche.
    </p>
  </div>
</div>

<div class="container">
    <main>
        <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
            {% for pr in prices %}
                {% set points = pr.slug|split('-')[0] %}
                <div class="col-md-3">
                    <div class="card mb-4 rounded-3 shadow-sm {% if pr.slug == '12-mois' %}border-primary{% endif %}">
                    <div class="card-header py-3 {% if pr.slug == '12-mois' %}text-bg-primary border-primary{% endif %}">
                        <h4 class="my-0 fw-normal">{{ pr.name }}</h4>
                    </div>
                    <div class="card-body">
                        <h1 class="card-title pricing-card-title">{{ pr.price|number_format(2, ',', ' ') }}<small class="text-body-secondary fw-light">€</small></h1>
                        <ul class="list-unstyled mt-3 mb-4">
                        <li>📈 Boostez pendant <b style="font-size:18px;font-weight:700;">{{ pr.name }}</b><br> <b>sans engagement</b></li>
                        <li>😎 Publiez vos annonces</li>
                        <li>👍 Recevez des demandes de cours</li>
                        <li>⚡ <b class="text-primary">+ {{ 1000 * points }} points</b> de fidélité</li>
                        </ul>
                        {% if app.user %}
                        <a href="{{ path('app_paypal_index', {'formule': pr.id, 'from': 'premium'}) }}" class="w-100 btn btn-lg {% if pr.slug in ['3-mois', '6-mois', '12-mois'] %}btn-primary{% else %}btn-outline-primary{% endif %}">Choisir</a>
                        
                        {% else %}
                        <button data-plan-id="{{ pr.slug }}" data-bs-toggle="modal" data-bs-target="#exampleModalLogin" type="button" class="open-login-modal w-100 btn btn-lg {% if pr.slug in ['3-mois', '6-mois', '12-mois'] %}btn-primary{% else %}btn-outline-primary{% endif %}">Choisir</button>
                        {% endif %}
                    </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <h2 class="display-6 text-center mb-4">Comparez les offres</h2>

        <div class="table-responsive">
        <table class="table text-center">
            <thead>
            <tr>
                <th style="width: 10%;"></th>
                <th style="width: 20%;">Gratuit</th>
                <th style="width: 20%;" class="text-primary fw-bold">1 mois</th>
                <th style="width: 20%;" class="text-primary fw-bold">3 mois</th>
                <th style="width: 20%;" class="text-primary fw-bold">6 mois</th>
                <th style="width: 20%;" class="text-primary fw-bold">12 mois</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row" class="text-start">Publiez vos annonces</th>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
            </tr>
            </tbody>

            <tbody>
            <tr>
                <th scope="row" class="text-start">Recevez des demandes de cours</th>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
            </tr>
            <tr>
                <th scope="row" class="text-start text-primary fw-bold">Annonce épinglée</th>
                <td></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
                <td><img src="{{ asset('/img/icons/check-solid.svg') }}" alt="Ok" width="24" height="24"></td>
            </tr>
            <tr>
                <th scope="row" class="text-start text-primary fw-bold">points de fidélité</th>
                <td></td>
                <td class="text-success fw-bold">+ 1000 points</td>
                <td class="text-success fw-bold">+ 3000 points</td>
                <td class="text-success fw-bold">+ 6000 points</td>
                <td class="text-success fw-bold">+ 12000 points</td>
            </tr>
            <tr>
                <th scope="row" class="text-start text-primary fw-bold">Réduction</th>
                <td></td>
                <td>0%</td>
                <td class="text-success fw-bold">-12%</td>
                <td class="text-success fw-bold">-21%</td>
                <td class="text-success fw-bold">-30%</td>
            </tr>
            </tbody>
        </table>
        </div>

    </main>
</div>
{% endblock fos_user_content %}

{% block javascripts %}
<script>

    document.querySelectorAll('.open-login-modal').forEach(item => {
    item.addEventListener('click', function(event) {
        console.log('click');
        event.preventDefault();
        const planId = this.getAttribute('data-plan-id');
        //sessionStorage.setItem('selectedPlanId', planId);
        console.log('selectedPlanId', planId);
        //new bootstrap.Modal(document.getElementById('loginModal')).show();
    });
    });
</script>
{% endblock %}