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

{% block title %} Nos formules {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/formule.css') }}">
{% endblock %}

{% block body %}
<div class="container mx-auto md:px-4 md:py-8">
    <h1 class="text-7xl lg:text-5xl font-bold my-4 md:my-10 text-center text-vert" id="abonnement_titre">Nos Formules d'Abonnement</h1>
    <div class="ml-5">
        <!-- Abonnement Annuel -->
    <div class="md:mx-auto">
		<div class="text-center">
		<div class="relative inline-flex overflow-hidden rounded-2xl lg:text-base text-2xl">
            <div id="slider" class="slider"></div>
            <button id="button1" class="button bg-vert text-4xl lg:text-base py-6 px-6 lg:py-2 lg:px-4" onclick="showDiv('div1', 'button1')">Annuel</button>
            <button id="button2" class="button bg-vert text-4xl lg:text-base py-6 px-6 lg:py-2 lg:px-4" onclick="showDiv('div2', 'button2')">Mensuel</button>
        </div>
	</div>
        <div id="div1" class="content my-10 lg:mx-28 lg:mx-20 lg:my-12">

            <div class="border border-black bg-white rounded-lg rounded-2xl" id="shadow_vert">
		<div class="text-center pb-2 pt-9 rounded-lg bg-vert" id="en_tete">
	        	<h3 class="text-5xl lg:text-3xl font-bold mb-4 text-neutral-50">Abonnement annuel</h3>
			<br>
			<h3 class="text-5xl lg:text-3xl font-bold mb-4 text-neutral-50">550 &#8364/an</h3>
		</div>

		<div class="justify-center lg:flex lg:justify-evenly">
		<div class="px-10 lg:px-0">
                <h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-14 lg:mt-4" id="abonnement_titre">Logiciel de facturation et communication avec les patients</h4>
		<ul class="list-disc pl-6 mb-4 list-none">
                <li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-regular fa-file mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Gestion des facturations</li>
                <li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-calendar mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Système de prise de rendez-vous fiable et performant</li>
                <li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-desktop mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Possibilité de téléconsultation</li>
                <li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-database mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Accès à une base de données de médicaments et de traitements</li>
                <li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-bookmark mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Système de rappels automatiques pour les patients</li>
        	</ul>
		</div>
	<div class="px-10 lg:px-0">
	       	<h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-4" id="abonnement_titre">Avantages</h4>
		<ul class="list-disc pl-6 mb-4 list-none">
		<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Prise de RDV facile et rapide</li>
		<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Acc&egraves et gestion des informations m&eacutedicales</li>
		<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Communication et suivi personnalis&eacutes</li>
		<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Notifications et rappels automatis&eacutes</li>
		<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Exp&eacuterience utilisateur optimis&eacutee</li>
		</ul>
	       	<h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-4" id="abonnement_titre">Moyens de paiement acceptés</h4>
		<ul class="list-disc pl-6 mb-4 list-none flex items-center mt-0">
		<li class="mx-auto"><img src="{{ asset('images/Logo_CB.png') }}" alt="Image du logo de CB" class="w-24"></li>
		<li class="mx-auto"><img src="{{ asset('images/espece.png') }}" alt="Image du logo esp�ce" class="w-24"></li>
		<li class="mx-auto"><img src="{{ asset('images/cheque.png') }}" alt="Image du logo cheque" class="w-20 pb-4"></li>
		</ul>
	</div>
	</div>
        </div>
	</div>
        </div>
        <div id="div2" class="content hidden my-10 lg:mx-28 lg:mx-20 lg:my-12">
			<div class="border border-black bg-white rounded-lg rounded-2xl" id="shadow_vert">
				<div class="text-center pb-2 pt-9 rounded-lg bg-vert" id="en_tete">
						<h3 class="text-5xl lg:text-3xl font-bold mb-4 text-neutral-50">Abonnement mensuel</h3>
					<br>
					<h3 class="text-5xl lg:text-3xl font-bold mb-4 text-neutral-50">60 &#8364/an</h3>
				</div>
		
				<div class="justify-center lg:flex lg:justify-evenly">
				<div class="px-10 lg:px-0">
						<h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-14 lg:mt-4" id="abonnement_titre">Logiciel de facturation et communication avec les patients</h4>
				<ul class="list-disc pl-6 mb-4 list-none">
						<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-regular fa-file mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Gestion des facturations</li>
						<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-calendar mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Système de prise de rendez-vous fiable et performant</li>
						<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-desktop mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Possibilité de téléconsultation</li>
						<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-database mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Accès à une base de données de médicaments et de traitements</li>
						<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-bookmark mr-4 mb-2 text-3xl lg:text-xl" id="abonnement_titre"></i>Système de rappels automatiques pour les patients</li>
					</ul>
				</div>
			<div class="px-10 lg:px-0">
					   <h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-4" id="abonnement_titre">Avantages</h4>
				<ul class="list-disc pl-6 mb-4 list-none">
				<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Prise de RDV facile et rapide</li>
				<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Acc&egraves et gestion des informations m&eacutedicales</li>
				<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Communication et suivi personnalis&eacutes</li>
				<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Notifications et rappels automatis&eacutes</li>
				<li class="text-3xl lg:text-base mb-4 lg:mb-0"><i class="fa-solid fa-check mr-4 mb-2" id="abonnement_titre"></i>Exp&eacuterience utilisateur optimis&eacutee</li>
				</ul>
					   <h4 class="text-4xl lg:text-2xl font-bold mb-4 ml-4 mt-4" id="abonnement_titre">Moyens de paiement acceptés</h4>
				<ul class="list-disc pl-6 mb-4 list-none flex items-center mt-0">
				<li class="mx-auto"><img src="{{ asset('images/Logo_CB.png') }}" alt="Image du logo de CB" class="w-24"></li>
				<li class="mx-auto"><img src="{{ asset('images/espece.png') }}" alt="Image du logo esp�ce" class="w-24"></li>
				<li class="mx-auto"><img src="{{ asset('images/cheque.png') }}" alt="Image du logo cheque" class="w-20 pb-4"></li>
				</ul>
			</div>
			</div>
				</div>
	</div>

                </div>
    <script>
        function showDiv(divId, buttonId) {
            // Hide all content divs
            document.querySelectorAll('.content').forEach(div => {
                div.classList.add('hidden');
            });

            // Show the selected content div
            document.getElementById(divId).classList.remove('hidden');

            // Get the slider element
            const slider = document.getElementById('slider');

            // Move the slider
            if (buttonId === 'button1') {
                slider.style.transform = 'translateX(0%)';
            } else {
                slider.style.transform = 'translateX(100%)';
            }
        }
    </script>
    </div>

</div>
{% endblock %}