templates/frontend/services/coin.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% set isAuthenticated = isAuth() %}
  3. {% block title %}
  4.     {{ attraction.name | title }}
  5. {% endblock %}
  6. {% block stylesheet %}
  7.     <link rel="stylesheet" href="{{ asset('assets/css/coins/coin.css') }}">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
  9.     <style>
  10.         .etoiles > .fa-star {
  11.             cursor: pointer;
  12.         }
  13.     </style>
  14. {% endblock %}
  15. {% block body %}
  16.     <main>
  17.         <div class="container">
  18.             <div>
  19.                 <h4 class="mt-3 mb-3" style="font-weight: 700">{{ attraction.name | title }}
  20.                     {% if attraction.isCertify == true %}
  21.                         &nbsp;&nbsp;<span style="font-size: 25px; color: #3982f8;"><i
  22.                                 class="fas fa-badge-check"></i></span>
  23.                     {% endif %}</h4>
  24.                 <p>
  25.                     <i class="fas fa-star"></i>&nbsp;{{ attraction.rate | length > 0 ? attraction.rate |number_format(1) | raw : 5 }}
  26.                     .
  27.                     &nbsp;&nbsp;
  28.                     Catégories: <strong>
  29.                         <u>
  30.                             {% for category in attraction.categories %}
  31.                                 <a class="text-dark"
  32.                                    href="{{ path('app_coin_by_category', {'category': category.id, 'name': category.slug }) }}">
  33.                                     {{ category.name }},
  34.                                 </a>
  35.                             {% endfor %}
  36.                         </u>
  37.                     </strong>
  38.                     {% if attraction.address | length > 0 %}
  39.                         <br/>
  40.                         {% if attraction.address.address | length > 0 %}
  41.                             <i class="fas fa-map-marker"></i>&nbsp;Adresse:
  42.                             <strong><u>{{ attraction.address.address }}</u></strong>
  43.                             <br/>
  44.                         {% endif %}
  45.                         <i class="fas fa-city"></i>&nbsp;Ville:
  46.                         <strong>
  47.                             <u>{{ attraction.address.neighborhood }}, {{ attraction.address.city }}
  48.                                 , {{ attraction.address.country }}</u>.
  49.                         </strong>
  50.                     {% endif %}
  51.                 </p>
  52.                 <div class="d-none d-md-block">
  53.                     {% include '_partials/coins/gallery-section.html.twig' with {
  54.                         'attraction': attraction
  55.                     } %}
  56.                 </div>
  57.                 <div class="d-block d-md-none">
  58.                     <div class="tz-gallery">
  59.                         {% include '_partials/coins/gallery-mobile-section.html.twig' with {
  60.                             'attraction': attraction
  61.                         } %}
  62.                     </div>
  63.                 </div>
  64.                 <!--section d'affichage des sous-titres-->
  65.                 <div class="row mb-3">
  66.                     <div class="col-md-12 d-flex">
  67.                         <section class="m__cart w-100 justify-content-between"
  68.                                  style="overflow: hidden; position: relative;">
  69.                             <ul class="m__navbar-scroll" style="">
  70.                                 <li><a href="#apercu">Apercu</a></li>
  71.                                 {#                                            <li><a href="#services">Services</a></li> #}
  72.                                 {#                                            <li><a href="#avis">Avis</a></li> #}
  73.                                 {#                                            <li><a href="#emplacement">Emplacement</a></li> #}
  74.                                 {#                                            <li><a href="#condition">Conditions</a></li> #}
  75.                             </ul>
  76.                             <span class="text-center"
  77.                                   style="position: absolute; top: 5px; right: 5px; font-size: 30px; z-index: 10;  color: #ff0000; background-color: white; height: 45px; width: 45px; border-radius: 5px 10px; border: 1px solid black; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">
  78.                                 {% set isFavorite = false %}
  79.                                 {% set favorite_id = 0 %}
  80.                                 {% if isAuthenticated %}
  81.                                     {% for favorite in attraction.favorites %}
  82.                                         {% if favorite.user is defined and favorite.user.id is defined and user is defined and user.id is defined %}
  83.                                             {% if favorite.user.id == user.id %}
  84.                                                 {% set isFavorite = true %}
  85.                                                 {% set favorite_id = favorite.id %}
  86.                                             {% endif %}
  87.                                         {% endif %}
  88.                                     {% endfor %}
  89.                                 {% endif %}
  90.                                 {% set favoritePath = isFavorite ? path('services_delete_favory', {'id': favorite_id }) : path('app_add_favorite', {'id': attraction.id }) %}
  91.                                   <a href="{{ favoritePath }}">
  92.                                       {% if isFavorite %}
  93.                                           <i class="fas fa-heart"></i>
  94.                                       {% else %}
  95.                                           <i class="far fa-heart"></i>
  96.                                       {% endif %}
  97.                                   </a>
  98.                             </span>
  99.                         </section>
  100.                     </div>
  101.                 </div>
  102.                 <!--fin section d'affichage des sous-titres-->
  103.                 <div class="row">
  104.                     <div class="col-md-8 mb-4">
  105.                         <div class="m__cart">
  106.                             <section class="d-flex p-2 flex-column">
  107.                                 <h5 class="title1" id="apercu">{{ attraction.name | title }}</h5>
  108.                                 {% if attraction.rating | length > 0 %}
  109.                                     <span>
  110.                                         <i class="fas fa-star"></i>
  111.                                         <i class="fas fa-star"></i>
  112.                                         <i class="fas fa-star"></i>
  113.                                         <i class="fas fa-star"></i>
  114.                                         <i class="fas fa-star"></i>
  115.                                      </span>
  116.                                     <span>
  117.                                         {{ attraction.rating | length > 0 ? attraction.rating |number_format(1) : 0 }}/5 <strong>Bon</strong>
  118.                                     </span>
  119.                                 {% endif %}
  120.                                 <hr class="m__hr"
  121.                                     style="border: none !important; height: 1px !important; background-color: #000 !important; margin: 10px 0 !important;">
  122.                                 {{ attraction.description | length > 0 ? attraction.description | raw : '' }}
  123.                             </section>
  124.                         </div>
  125.                     </div>
  126.                     <div class="col-md-4">
  127.                         <div class="m__cart mb-2">
  128.                             <div class="d-flex flex-column">
  129.                                 <div>
  130.                                     {% if attraction.price | length > 0 %}
  131.                                         <strong>A partir de &nbsp;<span
  132.                                                     style="color: red; font-size: 20px;">{{ attraction.price | number_format(0, '.') }} {{ attraction.currency }}</span></strong>
  133.                                     {% endif %}
  134.                                 </div>
  135.                                 <hr class=""
  136.                                     style="border: none !important; height: 1px !important; background-color: #f5f5f5 !important; margin: 10px 0 !important; width: 100% !important;">
  137.                                 <div class="">
  138.                                     <h5 class="mb-3">Découvrir la région</h5>
  139.                                     {% if attraction.address | length > 0 %}
  140.                                         <p class="mb-1" style="font-size: 15px; padding-bottom: 0px;">
  141.                                             {% if attraction.address.address | length > 0 %}
  142.                                                 <i class="fas fa-map-marker"></i>&nbsp;Adresse:
  143.                                                 <strong><u>{{ attraction.address.address }}</u></strong>
  144.                                                 <br/>
  145.                                             {% endif %}
  146.                                             <i class="fas fa-city"></i>&nbsp;Ville:
  147.                                             <strong>
  148.                                                 <u>{{ attraction.address.neighborhood }}, {{ attraction.address.city }}
  149.                                                     , {{ attraction.address.state }}
  150.                                                     , {{ attraction.address.country }}</u>.
  151.                                             </strong>
  152.                                         </p>
  153.                                     {% endif %}
  154.                                     <p class="mb-1" style="font-size: 15px;">
  155.                                         <i class="fas fa-folder"></i>
  156.                                         {% for category in attraction.categories %}
  157.                                             <a class="text-dark"
  158.                                                href="{{ path('app_coin_by_category', {'category': category.id, 'name': category.slug }) }}">
  159.                                                 {{ category.name }},
  160.                                             </a>
  161.                                         {% endfor %}
  162.                                     </p>
  163.                                 </div>
  164.                             </div>
  165.                         </div>
  166.                         <div class="card">
  167.                             <div class="card-body">
  168.                                 <h5 class="text-dark" style="font-weight: 7000;">Horaires</h5>
  169.                                 {% if attraction.availableAnytime == true %}
  170.                                 <span class="text-dark" style="font-weight: 700;">Disponible 24h/7</span>
  171.                                 {% else %}
  172.                                 {% if attraction.openedDays | length > 0 %}
  173.                                     <table class="table table-striped">
  174.                                         <thead>
  175.                                         <tr>
  176.                                             <th>Jours</th>
  177.                                             <th>Ouverture</th>
  178.                                             <th>Fermeture</th>
  179.                                         </tr>
  180.                                         </thead>
  181.                                         <tbody>
  182.                                         {% for hour in attraction.openedDays %}
  183.                                             <tr>
  184.                                                 <td>{{ hour.day }}</td>
  185.                                                 <td>{{ hour.start | date( 'H:i') }}</td>
  186.                                                 <td>{{ hour.close | date( 'H:i') }}</td>
  187.                                             </tr>
  188.                                         {% endfor %}
  189.                                         </tbody>
  190.                                     </table>
  191.                                 {% else %}
  192.                                     <span class="text-dark" style="font-weight: 700;"><i class="fal fa-folder-open"></i>&nbsp;Aucune disponibilité n'a été définie</span>
  193.                                 {% endif %}
  194.                             </div>
  195.                         </div>
  196.                         {% endif %}
  197.                         <div class="card">
  198.                             <div class="card-body">
  199.                                 <h6><i class="ti-mobile"></i> <a href="#"
  200.                                                                  class="text-dark">&nbsp;&nbsp;{{ attraction.phone1 | length > 0 ? attraction.phone1 : '' }}</a>
  201.                                 </h6>
  202.                                 <h6><i class="fas fa-envelope"></i> <a href="#"
  203.                                                                        class="text-dark">&nbsp;&nbsp;{{ attraction.email | length > 0 ? attraction.email }}</a>
  204.                                 </h6>
  205.                             </div>
  206.                         </div>
  207.                         {#                                        {% include '_partials/coins/location.html.twig' %} #}
  208.                     </div>
  209.                 </div>
  210.             </div>
  211.             <div class="row">
  212. {#                {% include '_partials/coins/attraction-items.html.twig' %}#}
  213. {#                {% include '_partials/coins/attraction-reviews.html.twig' %}#}
  214.                 {#                        <div class="row mb-3"> #}
  215.                 {#                            <h2 class="" id="emplacement">Emplacement</h2> #}
  216.                 {#                            <div class="col-md-12"> #}
  217.                 {#                                {% include '_partials/coins/location.html.twig' %} #}
  218.                 {#                            </div> #}
  219.                 {#                        </div> #}
  220.                 {#                        <div class="row mb-3"> #}
  221.                 {#                            <h2 class="mb-3" id="condition"> Conditions</h2> #}
  222.                 {#                            <div class="row"> #}
  223.                 {#                                <div class="col-12 col-md-12"> #}
  224.                 {#                                    <div class="card" style="width: 100%;"> #}
  225.                 {#                                        <div class="card-body"> #}
  226.                 {#                                            {{ coin.conditions | raw }} #}
  227.                 {#                                        </div> #}
  228.                 {#                                    </div> #}
  229.                 {#                                </div> #}
  230.                 {#                            </div> #}
  231.                 {#                        </div> #}
  232.                 <div class="row mb-5 mt-5">
  233.                     {% if isAuthenticated == true %}
  234.                         {% include '_partials/coins/review-form.html.twig' %}
  235.                     {% else %}
  236.                         <p>
  237.                             Vous devez être connecté pour publier un avis. <a href="{{ path('app_login') }}"><i
  238.                                         class="fas fa-sign-in-alt"></i>&nbsp;Connectez-vous</a>
  239.                         </p>
  240.                     {% endif %}
  241.                 </div>
  242.             </div>
  243.         </div>
  244.     </main>
  245.     <div class="m__modal">
  246.         <div class="m__modal-content">
  247.             {% if attraction.attractionMedia | length > 0 %}
  248.                 <div class="container">
  249.                     <h3 style="font-weight: 700">Toutes les Photos</h3>
  250.                     <div class="tz-gallery">
  251.                         <div class="row">
  252.                             {% for image in attraction.attractionMedia %}
  253.                                 <div class="col-md-6 mb-3">
  254.                                     <div class="thumbnail" style="height: 200px; overflow: hidden; border-radius: 5px;">
  255.                                         <a class="lightbox" href="{{ asset(image.url) }}">
  256.                                             <img class="w-100" src="{{ asset(image.url) }}" alt="Park">
  257.                                         </a>
  258.                                     </div>
  259.                                 </div>
  260.                             {% endfor %}
  261.                         </div>
  262.                     </div>
  263.                 </div>
  264.             {% else %}
  265.                 <p>Pas d'images disponibles</p>
  266.             {% endif %}
  267.             <a class="m__close"><i class="fas fa-times"></i></a>
  268.         </div>
  269.     </div>
  270. {% endblock %}
  271. {% block myscript %}
  272.     <script src="{{ asset('assets/js/review.js') }}"></script>
  273.     <script>
  274.         function openModal(id, rate, comment, attractionId) {
  275.             $('#editReviewModal').modal('show');
  276.             var actionUrl = `{{ path('app_coin_update', {'id': 'ID_PLACEHOLDER','attraction_id':'ID_ATTRACTION'}) }}`.replace('ID_PLACEHOLDER', id).replace('ID_ATTRACTION', attractionId);
  277.             $('#editReviewForm').attr('action', actionUrl);
  278.             $('#monInput').val(rate);
  279.             $('#ratingValue').text(`(${rate})`);
  280.             $('#comment').val(comment);
  281.             // Update the stars based on the rating
  282.             const etoiles = document.querySelectorAll('.etoiles i');
  283.             etoiles.forEach(etoile => {
  284.                 const sRating = parseInt(etoile.getAttribute('data-rating'));
  285.                 etoile.style.color = sRating <= rate ? '#eda407' : 'gray';
  286.             });
  287.         }
  288.     </script>
  289.     <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
  290.     <script>
  291.         baguetteBox.run('.tz-gallery');
  292.     </script>
  293. {% endblock %}