{% extends 'base.html.twig' %}
{% block title %}
    {{ project.title }}
{% endblock %}
{% block body %}

    <div class="container py-5 " style="margin-top:80px">
        <div class="row">
            <div class="col-lg-8">
                <div id="carouselImages" class="carousel slide mb-4" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        {% if project.thumbnailUrl is not null %}
                        <div class="carousel-item active">
                            <img src="{{ vich_uploader_asset(project) | imagine_filter("show") }}" class="d-block w-100" alt="Villa">
                        </div>
                        {% else %}
                            <div class="carousel-item active">
                                <img src="{{ asset('img/default-project-image.jpg') | imagine_filter("show") }}" class="d-block w-100" alt="Villa">
                            </div>
                        {% endif %}
                        {%  for image in project.images %}
                        <div class="carousel-item">
                            <img src="{{ vich_uploader_asset(image) | imagine_filter("show") }}" class="d-block w-100" alt="Intérieur">
                        </div>
                        {%  endfor %}
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>

                <h1 class="section-title">{{ project.title }}</h1>
                <p><strong>Emplacement :</strong> {{ project.district.commune.city.name }}  {{ project.district.commune.name }}  {{ project.district.name }}</p>
                <p><strong>Rendement estimé :</strong>  {{ project.annualYield }} / an</p>
                <p><strong>Durée du projet :</strong> {{ project.investmentDurationMonths }} mois</p>
                <p><strong>Objectif de financement :</strong>  {{ project.targetAmount | format_currency(project.currency) }}</p>
                <p><strong>Montant collecté :</strong></p>
                <p>
                    <ul>
                    {%  for collected in project.allCollectedAmountByCurrency %}
                        <li>{{ collected.totalAmount | format_currency(collected.currency) }}</li>
                    {% endfor %}

                    </ul>
                </p>

                <div class="progress mb-4" style="height: 20px;">
                    <div class="progress-bar bg-warning text-dark fw-bold" style="width: {{ project.getPercentageCollected() > 100 ? 100 : project.getPercentageCollected() }}%">{{ project.getPercentageCollected() }} % financé</div>
                </div>
                <p>{{ project.description | nl2br }}</p>


                {% if project.videoUrl is not null %}
                <div class="video-section my-5">
                    <iframe width="100%" height="400" src="{{ project.videoUrl }}" title="Présentation du projet" frameborder="0" allowfullscreen></iframe>
                </div>

                {%  endif %}

                {{ component('ShowLastInvestissorComponent', {
                    'project': project,
                    'count': 3
                }) }}

                <h4 class="section-title mt-5">Documents à consulter</h4>
                <a href="#" class="document-link"><i class="bi bi-file-earmark-pdf-fill me-2 text-danger"></i>Dossier de présentation</a>
                <a href="#" class="document-link"><i class="bi bi-file-earmark-text-fill me-2 text-primary"></i>Contrat d'investissement</a>
                <a href="#" class="document-link"><i class="bi bi-check-circle-fill me-2 text-success"></i>Évaluation indépendante</a>
                <a href="#" class="document-link"><i class="bi bi-bar-chart-fill me-2 text-warning"></i>Étude de marché</a>

                <div class="text-center mt-5">
                    <a href="#investir" class="btn btn-orange btn-lg px-5 py-2">Investir maintenant</a>
                </div>

{#                <h4 class="section-title mt-5">Avis des investisseurs</h4>
                <div class="testimonial d-flex align-items-start">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                    <div>
                        <p class="mb-1"><strong>Alex M.</strong> <i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-half text-warning"></i></p>
                        <p class="mb-0">Très bon projet, communication claire et suivi régulier. Rendement conforme aux attentes.</p>
                    </div>
                </div>
                <div class="testimonial d-flex align-items-start">
                    <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
                    <div>
                        <p class="mb-1"><strong>Sophie D.</strong> <i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i></p>
                        <p class="mb-0">Excellent investissement ! Plateforme intuitive et sécurisée.</p>
                    </div>
                </div>#}
            </div>

            <div class="col-lg-4">
                <div class="card border-warning mb-4">
                    <div class="card-body">
                        <h5 class="card-title text-warning">Résumé du projet</h5>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Type : {{ project.type.name }}</li>
                            <li class="list-group-item">Début Projet : {{ project.projectStartDate | date("l j F Y")  }} </li>
                            <li class="list-group-item">Fin Projet : {{ project.projectEndDate | date("l j F Y")  }} </li>
                            <hr>
                            <li class="list-group-item">Début Collecte : {{ project.fundingStartDate | date("l j F Y")  }} </li>
                            <li class="list-group-item">Fin Collecte : {{ project.fundingStartDate | date("l j F Y")  }} </li>


                            {% if not project.partner.empty %}
                            <li class="list-group-item">Partenaire :</li>
                            <p>
                                <ul>
                                    {%  for partner in project.partner %}
                                    <li>{{ partner.name }}</li>
                                {% endfor %}

                                </ul>
                            </p>
                            {% endif %}

                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Contact Projet</h5>
                        <p>Pour plus d'informations, contactez notre équipe :</p>
                        <p>Email : <a href="mailto:{{ siteEmail}}">{{ siteEmail}}</a></p>
                        <p>Téléphone : {{ siteTel}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}




{% block stylesheets %}
    <style>
        .investor-card {
            background: #fff;
            border-left: 5px solid #fd7e14;
            border-radius: 1rem;
            padding: 1rem 1.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 1rem;
            animation: fadeIn 0.8s ease;
        }
        .document-link {
            display: flex;
            align-items: center;
            padding: 1rem;
            background-color: #fff;
            border-radius: 0.75rem;
            margin-bottom: 0.75rem;
            box-shadow: 0 1px 6px rgba(0,0,0,0.08);
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
        }
        .document-link:hover {
            background-color: #fff0e5;
            transform: scale(1.03);
        }
        .carousel-inner img {
            height: 400px;
            object-fit: cover;
            border-radius: 1rem;
        }
        .btn-orange {
            background-color: #fd7e14;
            color: white;
            border-radius: 1.5rem;
            font-weight: bold;
            transition: background-color 0.3s, transform 0.3s;
        }
        .btn-orange:hover {
            background-color: #e76c00;
            transform: scale(1.05);
        }
        .section-title {
            color: #fd7e14;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .testimonial {
            background-color: #fff;
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
            animation: fadeInUp 0.6s ease;
        }
        .testimonial img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
        }
        .video-section {
            margin-top: 3rem;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        @keyframes fadeInUp {
            from {opacity: 0; transform: translateY(20px);}
            to {opacity: 1; transform: translateY(0);}
        }
        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }
    </style>

{%  endblock %}