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

{% block title %}Détail du projet: {{ properties.projectTitle }}{% endblock %}

{% block body %}
    <!-- Header Start -->
    <div class="container-fluid header bg-white p-0">
        <div class="row g-0 align-items-center flex-column-reverse flex-md-row">
            <div class="col-md-6 p-5 mt-lg-5">
                <h1 class="display-5 animated fadeIn mb-4">Détail du biens:{{ properties.projectTitle}} </h1>
            </div>
            <div class="col-md-6 animated fadeIn">
                <img class="img-fluid" src="{{ asset('build/images/header.jpg') }}" alt="">
            </div>
        </div>
    </div>
    <!-- Header End -->


    <!-- Search Start -->
    <div class="container-fluid bg-primary mb-5 wow fadeIn" data-wow-delay="0.1s" style="padding: 35px;">
        <div class="container">
            <div class="row g-2">
                <div class="col-md-10">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="text" class="form-control border-0 py-3" placeholder="Ville">
                        </div>
                        <div class="col-md-4">
                            <select class="form-select border-0 py-3">
                                <option selected>Type de bien</option>
                                <option value="1">Villar</option>
                                <option value="2">Duplèxe</option>
                                <option value="3">Appartement</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select class="form-select border-0 py-3">
                                <option selected>À Louer</option>
                                <option value="1">À Vendre</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-dark border-0 w-100 py-3">Recherche</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Search End -->


    <!-- Property List Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-0 gx-5 align-items-end">
                <div class="col-lg-6">
                    <div class="text-start mx-auto mb-5 wow slideInLeft" data-wow-delay="0.1s">
                        <h1 class="mb-3">Détail du bien</h1>
                        <p>Vous trouverez tous les détails sur le bien en navigant avec les onglet à votre droite  </p>
                    </div>
                </div>
                <div class="col-lg-6 text-start text-lg-end wow slideInRight" data-wow-delay="0.1s">
                    <ul class="nav nav-pills d-inline-flex justify-content-end mb-5">
                        <li class="nav-item me-2">
                            <a class="btn btn-outline-primary active" data-bs-toggle="pill" href="#tab-1"><i class="fa fa-circle-info text-primary me-2"></i> Détail </a>
                        </li>
                        <li class="nav-item me-2">
                            <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-2"><i class="fa fa-image text-primary me-2"></i>Gallerie photo</a>
                        </li>
                        <li class="nav-item me-0">
                            <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-3"><i class="fa fa-envelope text-primary me-2"></i>Contactez-nous</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane fade show p-0 active">
                    <div class="row g-4">
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a href=""><img class="img-fluid" src="{{ asset('uploads/' ~ properties.firstIllustration)}}" alt=""></a>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-8 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                            <div class="property-item  mt-4 rounded overflow-hidden table-responsive">
                                <table class="table table-bordered table-striped ">
                                    <tbody>
                                    <tr>
                                        <td> <i class="fa fa-indent text-primary me-2"></i><strong>Type de bien :</strong> </td>
                                        <td><i class="fa fa-building text-primary me-2"></i><strong>Nombre d'étage :</strong></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-bed text-primary me-2"></i><strong>Nombre de Pièces :</strong>  </td>
                                        <td><i class="fa fa-city text-primary me-2"></i><strong>Ville : </strong></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-shower text-primary me-2"></i><strong>Nombre de douche: </strong>  </td>
                                        <td><i class="fa fa-map text-primary me-2"></i><strong>Quartier : </strong></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-ruler-combined text-primary me-2"></i><strong>surface : </strong> </td>
                                        <td><i class="fa fa-money-bill text-primary me-2"></i><strong>Prix : </strong> FCFA</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane fade show p-0">
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a><img class="img-fluid img-miniature" src="{{ asset('uploads/' ~ properties.firstIllustration)}}" alt=""></a>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a><img class="img-fluid img-miniature" src="{{ asset('uploads/' ~ properties.illustration1)}}" alt=""></a>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a><img class="img-fluid img-miniature" src="{{ asset('uploads/' ~ properties.ilustration2)}}" alt=""></a>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a><img class="img-fluid img-miniature" src="{{ asset('uploads/' ~ properties.illustration3)}}" alt=""></a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane fade show p-0">
                    <div class="row g-4">

                        <div class="col-lg-4 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a href=""><img class="img-fluid" src="" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">

                        </div>
                        <div class="col-lg-4 col-md-6">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 text-center">
                <p>
                <h1>Description du biens</h1>
                {{ properties.projectDescription}}
                </p>
            </div>
        </div>
        <!-- Property List End -->


        <!-- Call to Action Start -->
        <div class="container-xxl py-5">
            <div class="container">
                <div class="bg-light rounded p-3">
                    <div class="bg-white rounded p-4" style="border: 1px dashed rgba(0, 185, 142, .3)">
                        <div class="row g-5 align-items-center">
                            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                                <img class="img-fluid rounded w-100" src="{{ asset('build/images/agent1.jpg')}}" alt="">
                            </div>
                            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                                <div class="mb-4">
                                    <h1 class="mb-3">Contactez  notre agent certifié</h1>
                                    <p>Nos agents certifié sont disponible pour vous aidez à obtenir votre maison. Ils sont expérimentés dans le domaines. </p>
                                </div>
                                <a href="" class="btn btn-primary py-3 px-4 me-2"><i class="fa fa-phone-alt me-2"></i>Appel Téléphonique</a>
                                <a href="" class="btn btn-dark py-3 px-4"><i class="fa fa-calendar-alt me-2"></i>Obtenir un rendez-vous</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Call to Action End -->
    </div>
{% endblock %}