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

{% block title %}A propos du Dr. Nader Meziou{% endblock %}

{% block head %}
    <link rel="icon" href="{{ asset('assets/img/favicon.png') }}" type="image/png">
    <!-- Bootstrap CSS for grid and carousel -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fancybox CSS for lightbox functionality -->
    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" rel="stylesheet">
    <!-- FontAwesome for icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
{% endblock %}

{% block body %}
<!-- Carousel Section -->
<section id="carouselSection" class="carousel-section py-5" style="margin-top:0%;padding:0px!important;">
    <div class="container">
        <h3 class="text-center fw-bold mb-4">À propos du Dr Nader Meziou</h3>

     <!--   <div id="actesMedicauxCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
            <div class="carousel-inner">
                {% for acte_medical in actesMedicaux %}
                    {% if acte_medical.image %}
                        {% if loop.index0 % 3 == 0 %}
                        <div class="carousel-item {% if loop.first %}active{% endif %}">
                            <div class="row">
                        {% endif %}
                                <div class="col-lg-4 col-md-6 mb-3">
                                    <a href="{{ asset('upload/images/' ~ acte_medical.image) }}" data-fancybox="gallery" data-caption="{{ acte_medical.nom }}">
                                        <img src="{{ asset('upload/images/' ~ acte_medical.image) }}" class="img-fluid rounded shadow" alt="Image de {{ acte_medical.nom }}">
                                    </a>
                                </div>
                        {% if loop.index0 % 3 == 2 or loop.last %}
                            </div>
                        </div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div> -->

            <!-- Carousel Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#actesMedicauxCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#actesMedicauxCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="about-section py-5">
    <div class="container">
        <div class="row  align-items-center">
            <!-- Image -->
            <div class="col-lg-5 text-center">
                <img src="{{ asset('assets/img/NaderMeziou.jpg') }}" alt="Dr Nader Meziou" class="img-fluid rounded shadow">
		
            </div>
	<div class="col-lg-7">
		<h4 class="text-center mb-4">Les services dentaires</h4>
                <ul class="list-unstyled row">
                    {% for categactesmedical in categactesmedicaux %}
                        <li class="col-md-6 mb-3 d-flex align-items-start">
                            {% set icons = ['fa-tooth', 'fa-teeth-open', 'fa-stethoscope', 'fa-x-ray', 'fa-syringe', 'fa-notes-medical'] %}
                            <i class="fa-solid {{ icons[loop.index0 % icons|length] }} me-2" style="color: #8BA8B5 !important; font-size: 1.5rem;"></i>
                            <div>
                                <h5 class="fw-bold">{{ categactesmedical.categorie }}</h5>
                                <p class="text-justify">{{ categactesmedical.description }}</p>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                
            </div>
       </div>

            <!-- Services -->

    </div>
</section>

<!-- Styling Section -->
<style>
    /* General Styling */
    section {
        padding: 2rem 0;
    }

    .carousel-item img {
        object-fit: cover;
        height: 300px;
        border-radius: 8px;
        transition: transform 0.3s ease;
    }

    .carousel-item img:hover {
        transform: scale(1.05);
    }

    .carousel-inner {
        max-height: 400px;
    }

    /* Mobile-specific adjustments */
    @media (max-width: 768px) {
        .carousel-item .row {
            flex-direction: column;
        }

        .carousel-item .col-lg-4 {
            width: 100%;
        }
    }
</style>

<!-- Include JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        Fancybox.bind('[data-fancybox="gallery"]', {
            infinite: true,
            preload: [1, 1]
        });
    });
</script>
{% endblock %}