templates/announce_detail/announce_detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{companyName}} | {% trans %}Announce{% endtrans %}{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  8.     <link href="{{ asset('css/home.func.css') }}" rel="stylesheet" />
  9.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  12.     <style>
  14.         #messageBody::-webkit-scrollbar {
  15.             width: 10px;
  16.         }
  18.         /* Track */
  19.         #messageBody::-webkit-scrollbar-track {
  20.             box-shadow: inset 0 0 5px grey;
  21.             border-radius: 5px;
  22.         }
  24.         /* Handle */
  25.         #messageBody::-webkit-scrollbar-thumb {
  26.             background: rgba(3, 128, 13, 0.27);
  27.             border-radius: 5px;
  28.         }
  30.         /* Handle on hover */
  31.         #messageBody ::-webkit-scrollbar-thumb:hover {
  32.             background: rgba(3, 128, 13, 0.97);
  33.         }
  34.             .modal { width:75% !important ; height: 75% !important ; }
  35.         .truncate-overflow {
  36.             display: -webkit-box;
  38.             -webkit-line-clamp: 4;
  39.             -webkit-box-orient: vertical;
  40.             overflow: hidden;
  41.             font-size: 14px;
  42.         }
  43.         .truncate-overflow:hover {
  45.             cursor: pointer;
  47.         }
  48.         div.ex3 {
  49.             background-color: #ffffff;
  50.             height: 250px;
  51.             width: 100%;
  52.             overflow-y: auto;
  53.         }
  54.         div.ex4 {
  55.             background-color: #ffffff;
  56.             height: 300px;
  57.             border-radius: 30px;
  58.             width: 100%;
  59.             overflow-y: auto;
  60.         }
  61.     </style>
  62.     <style>
  63.         .container-caroussel {
  64.             position: relative;
  65.             width: 50%;
  66.         }
  68.         .image-caroussel {
  69.             display: block;
  70.             width: 100%;
  71.             height: auto;
  72.         }
  74.         .btn-a-body {
  76.             --b: 3px;     /* the border thickness*/
  77.             --g: 5px;    /* the gap */
  78.             --c: rgba(3, 128, 13, 0.97); /* the color */
  79.             background: -webkit-linear-gradient(45deg, rgba(3, 128, 13, 0.97), #16945b);
  81.             padding: 10px; border-radius: 20px;
  83.             width: max-content;
  85.             aspect-ratio: 0.5;
  87.             color:white;
  88.             cursor: pointer;
  89.             transition: .3s;
  90.         }
  91.         .btn-a-body:hover {
  92.             outline: var(--b) solid var(--c);
  93.             outline-offset: var(--g);
  94.             background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.85));
  96.             color: rgba(3, 128, 13, 0.96);
  97.         }
  98.         .overlay-caroussel {
  99.             position: absolute;
  100.             bottom: 0;
  101.             left: 0;
  102.             right: 0;
  103.             background-color: #008CBA;
  104.             overflow: hidden;
  105.             width: 100%;
  106.             height: 0;
  107.             transition: .5s ease;
  108.         }
  110.         .container-caroussel:hover .overlay {
  111.             height: 100%;
  112.         }
  114.         .text-caroussel {
  115.             color: white;
  116.             font-size: 20px;
  117.             position: absolute;
  118.             top: 50%;
  119.             left: 50%;
  120.             -webkit-transform: translate(-50%, -50%);
  121.             -ms-transform: translate(-50%, -50%);
  122.             transform: translate(-50%, -50%);
  123.             text-align: center;
  124.         }
  125.     </style>
  126. {% endblock %}
  128. {% block body %}
  129.     {{ parent() }}
  132. <div class="row" id="content">
  134.     {% if current_announce!="all" and current_announce is not null%}
  135.     <div class="col s12" style="margin-top: 100px">
  138.             <div class="col s12   " style="">
  139.                 <h6 style="margin-top: -1px; font-size: 18px; padding-right: 15px" class="right right-align">{{ announces|length }} dernières annonces</h6>
  140.                 <div class="col s12 right right-align" style="margin-top: 2%; margin-bottom: 30px">
  142.                     <a href="#!" class="card  btn-a-body  "  style="margin-bottom: 30px; margin-top: -20px ;width: 100%     ">
  143.                         Déposez une announce
  144.                         <i style="font-size: 15px; margin-left: 15px; margin-right:  5px" class="   fas fa-bell"></i>
  145.                     </a>
  146.                 </div>
  148.                 {% if current_announce!="all"  %}
  150.                     <div class="col s10 offset-s1" >
  151.                    {% if local == "fr" %}
  152.                        <h4 style="margin-top: -25px"> {{ current_announce.titleFr }}</h4>
  153.                      {% else %}
  155.                          <h4 style="margin-top: -25px"> {{ current_announce.titleEn }}</h4>
  157.                      {% endif %}
  159.                      <ul class="autoplayPack">
  162.                          {% if   current_announce.cover is not null  %}
  163.                              <li>
  164.                                  <img class="     responsive-img "   src="{{ onlinePath }}/media/{{ current_announce.cover }}"  style="height: 300px"  alt="">
  165.                              </li>
  166.                          {% endif %}
  168.                          {% if  current_announce.picture is not null %}
  169.                              <li>
  170.                                  <img class="    responsive-img "  src="{{ onlinePath }}/media/{{ current_announce.picture }}"  style="height: 300px" alt="">
  171.                              </li>
  172.                          {% endif %}
  175.                      </ul>
  176.                  </div>
  177.                     <div class="col s12 m10 offset-m1  " style="padding: 20px">
  179.                         <a href="#!" id="btnChat" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  180.                             Echanger Avec le Proprio
  181.                             <i class="fas fa-pen" style="margin-left: 15px; margin-right:  5px"></i>
  182.                         </a>
  183.                         <a href="#!" id="btnContact" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  184.                             Contacter
  186.                             {% if current_announce.createdBy.company is  null %}
  187.                                 {{ current_announce.createdBy }}
  188.                             {% else %}
  189.                             {{ current_announce.createdBy.company.companyName }}
  190.                             {% endif %}
  192.                             <i class="fas fa-phone" style="margin-left: 15px; margin-right:  5px"></i>
  194.                         </a>
  196.                         <a href="#!" id="btnShare" class=" hide-on-small-and-down hide-on-small-only    card btn-a-body" style="">
  197.                             Partager
  198.                             <i class="fas fa-share-alt" style="margin-left: 15px; margin-right:  5px"></i>
  199.                         </a>
  201.                     </div>
  202.                     <div class="col s12 m10 offset-m1 card">
  204.                        <p class="" style="text-align: justify; padding: 20px">
  205.                            {{ current_announce.description }}
  206.                        </p>
  209.                           <ul style="font-size: 20px">
  211.                             <li>  <i class="fas fa-location-arrow" style="margin-right: 10px"></i> <b><u>Ville:</u></b> {{ current_announce.address.town }}</li>
  212.                             <li>  <i class="fas fa-search-location" style="margin-right: 10px"></i>  <b><u>Quartier:</u></b> {{ current_announce.address.location }}</li>
  213.                             <li> <i class="fas fa-map" style="margin-right: 10px"></i> <b><u>Superficie</u></b>: {{ current_announce.area }}m²</li>
  214.                             <li>   <i class="fas fa-cookie" style="margin-right: 10px"></i> <b><u>Pièces: </u></b>{{ current_announce.numberOfPiece }}</li>
  215.                         </ul>
  217.                         <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
  218.                             {{ current_announce.amount|number_format(2, '.', ',')  }}
  221.                             <i class="fas fa-cart-plus"></i>
  222.                         </h5>
  223.                        <div class="col s12 right right-align" style="padding-bottom: 20px; margin-right: -10px; padding-top: 10px">
  225.                            <a href="#!" id="btnBook" onclick="makeAnOffre({{ current_announce.amount }})" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  226.                                Faire une Proposition
  227.                                <i class="fas fa-cart-arrow-down" style="margin-left: 15px; margin-right:  5px"></i>
  229.                                <img id="btnBookLoading" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">
  232.                            </a>
  234.                        </div>
  237.                     </div>
  238.               {% else %}
  240.                   <div class="col s12">
  242.                       {% for announce in announces %}
  243.                               <div class="col s12  m10 offset-m1 " style="padding: 5px">
  244.                                   <div class="col s12 card">
  245.                                       <div class="col s7 ">
  246.                                           <h5>
  247.                                               {{ announce.titleEn }}
  248.                                           </h5>
  249.                                           <p class="truncate-overflow">{{ announce.description }}</p>
  250.                                       </div>
  251.                                       <div class="col s5">
  252.                                           <img class="  card  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ announce.cover }}" style=" padding-top: 20px; border-radius: 20px; width: 200px; height: 200px" alt="">
  253.                                       </div>
  255.                                       <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
  256.                                           <a href="{{ path('app_announce_detail',{'announce':announce.id}) }}" id="btnLocation" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  257.                                               En Savoir plus..
  258.                                               <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
  259.                                           </a>
  261.                                           <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
  262.                                               {{ announce.amount|number_format(2, '.', ',')  }}
  265.                                               <i class="fas fa-cart-plus"></i>
  266.                                           </h5>
  268.                                       </div>
  269.                                   </div>
  273.                               </div>
  275.                       {%endfor %}
  276.                   </div>
  277.                 {% endif %}
  278.             </div>
  279.         <div class="col s12  ">
  282.             <div class="col s12 m10 offset-m1 card "  style="overflow:scroll; height:100px;" id="messageBody"  >
  286.             </div>
  288.             <div class="col s12 m10 offset-m1 card " style="border-radius: 30px" >
  292.                 <div class="col s12 m8 l9">
  293.                     <div class="input-field col s12">
  294.                         <textarea id="messageToSend" class="materialize-textarea"></textarea>
  295.                         <label for="messageToSend">Votre Message</label>
  296.                     </div>
  297.                 </div>
  298.                 <div class="col s12 m4 l3" style="margin-top: 30px">
  299.                     <a onclick="postMessage() " href="#!" id="btnSendMessage" class="btn-a-body card" style="margin-top: 20px ">Envoyer
  300.                         <i class="fas fa-paper-plane  "  style="margin-left: 15px; margin-right:  5px"></i></a>
  301.                 </div>
  304.             </div>
  306.             {% if announces|length >1 %}
  307.             <div class="col s12" style="margin-top: 90px">
  308.                 <h5>Autres Offres</h5>
  309.                 <h6>Promotions, deals and special offers for you</h6>
  310.             </div>
  312.                 <div class="col s12 autoplayBestProd">
  313.                     {% for announce in announces %}
  315.                         {% if current_announce != announce %}
  316.                             <div class="col s12  " style="margin: 20px">
  317.                                 <div class="col s12 card">
  318.                                     <div class="col s7 ">
  319.                                         <h5>
  320.                                             {{ announce.titleEn }}
  321.                                         </h5>
  322.                                         <p class="truncate-overflow">{{ announce.description }}</p>
  323.                                     </div>
  324.                                     <div class="col s5">
  325.                                         <img class="  card  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ announce.cover }}" style=" padding-top: 20px; border-radius: 20px; width: 200px; height: 200px" alt="">
  326.                                     </div>
  328.                                     <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
  329.                                         <a href="{{ path('app_announce_detail',{'announce':announce.id}) }}" id="btnLocation" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  330.                                             En Savoir plus..
  331.                                             <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
  332.                                         </a>
  334.                                         <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
  335.                                             {{ announce.amount|number_format(2, '.', ',')  }}
  338.                                             <i class="fas fa-cart-plus"></i>
  339.                                         </h5>
  341.                                     </div>
  342.                                 </div>
  346.                             </div>
  348.                         {%endif %}
  350.                     {%endfor %}
  352.                 </div>
  353.             {%endif %}
  355.         </div>
  356.     </div>
  359.     {% elseif current_announce =="all" %}
  360.         <div class="row"  style="margin-top: 150px" >
  364.             <div class="col s12">
  365.                 <div class="col s12 m3   l3 card z-depth-1" style="border-radius: 40px; margin-top: 30px ">
  368.                     <div class="col s12" style="margin-top: 20px">
  369.                         <i class="fas fa-link" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>
  370.                         <select name="locationType" id="locationType">
  371.                             <option value="location">Location</option>
  372.                             <option value="vente">Vente</option>
  373.                         </select>
  374.                     </div>
  376.                     <div class="col s12">
  377.                         <i class="fas fa-building" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>
  378.                         <select name="buildType" id="buildType">
  379.                             {% for building in buildingTypes %}
  380.                                 <option value="{{ building.id }}">{{ building.type }}</option>
  381.                             {%endfor %}
  383.                         </select>
  384.                     </div>
  385.                     <div class="col s12" style="margin-bottom: 20px" >
  387.                         <i class="fas fa-location-arrow" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>
  389.                         <select class="js-example-basic-single" name="destinationTown" id="destinationTown" style="width: 100%;   ">
  390.                             {% for town in towns %}
  391.                                 <option value="{{ town.id }}">{{ town.townName }}</option>
  392.                             {%endfor %}
  394.                         </select>
  395.                     </div>
  400.                     <div class="col s12  " style="margin-top: 20px; margin-bottom: 30px">
  402.                         <a href="#!" class="card  btn-a-body " style="margin-bottom: 30px ;  ">
  403.                             Appliquer le Filtre <i style="font-size: 15px; margin-left: 15px; margin-right:  5px" class="   fas fa-search"></i></a>
  405.                     </div>
  407.                 </div>
  409.                 <div class="col s12 l9 m9  " style="overflow:scroll; height:700px;">
  411.                     <div class="col s10 offset-s1  ">
  412.                         <h5>Dernières annonces</h5>
  413.                         <h6>Promotions, deals and special offers for you</h6>
  414.                         {% for announce in announces %}
  416.                             {% if current_announce != announce %}
  417.                                 <div class="col s12  " style="margin: 20px">
  418.                                     <div class="col s12 card">
  419.                                         <div class="col s7 ">
  420.                                             <h5>
  421.                                                 {{ announce.titleEn }}
  422.                                             </h5>
  423.                                             <p class="truncate-overflow">{{ announce.description }}</p>
  424.                                         </div>
  425.                                         <div class="col s5">
  426.                                             <img class="  card  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ announce.cover }}" style=" padding-top: 20px; border-radius: 20px; width: 200px; height: 200px" alt="">
  427.                                         </div>
  429.                                         <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
  430.                                             <a href="{{ path('app_announce_detail',{'announce':announce.id}) }}" id="btnLocation" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
  431.                                                 En Savoir plus..
  432.                                                 <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
  433.                                             </a>
  435.                                             <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
  436.                                                 {{ announce.amount|number_format(2, '.', ',')  }}
  439.                                                 <i class="fas fa-cart-plus"></i>
  440.                                             </h5>
  442.                                         </div>
  443.                                     </div>
  447.                                 </div>
  449.                             {%endif %}
  451.                         {%endfor %}
  452.                     </div>
  454.                 </div>
  455.             </div>
  457.         </div>
  459.     {% else %}
  460.     {% endif %}
  463. </div>
  464.     <div id="modal1" class="modal ">
  465.         <div class="modal-content">
  467.             <div class="row">
  468.                 <form  data-aos="zoom-out-down"  data-aos-duration="2000"   onsubmit="return false;"
  469.                        class="col m8 offset-m2 l6 offset-l3  s12   " id="login_form_customer" style="margin-top: 2px; border-radius: 20px; margin-bottom: 30px"   >
  471.                     <div class="col s12 center center-block">
  472.                         <img src="{{ asset('img/login.png') }}" style="max-height: 70px; margin-bottom: 20px" alt="" class="center center block">
  473.                     </div>
  475.                     <div class="col   s12   m10 offset-m1    input-field center center-block center-align">
  476.                         <i class="fas fa-user-circle prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
  477.                         <input placeholder="john@gmail.com"  required="required" type="email" id="emailInput" name="email" class="validate"   />
  478.                         <label for="emailInput" data-error="wrong" data-success="ok">Nom d'utilisateur </label>
  479.                         <span id="username_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>
  481.                     </div>
  483.                     <div class="col   s12   m10 offset-m1    input-field center center-block center-align" style="margin-top: 5px">
  484.                         <i class="fas fa-key prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
  485.                         <input   required="required" type="password" id="passwordInput" name="password" class="validate"  />
  487.                         <label for="passwordInput" data-error="wrong" data-success="ok">Mot de Passe </label>
  488.                         <span id="password_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>
  490.                     </div>
  493.                     <div class="col s12" >
  495.                         <p style="margin-top: -1px; margin-bottom: 20px; margin-left: 50px">
  496.                             <input type="checkbox" name="_remember_me" id="_remember_me" />
  497.                             <label for="_remember_me">Remember Me</label>
  498.                         </p>
  499.                     </div>
  501.                     <button
  503.                             id="btnSubmitLog"  class="btn waves-effect indigo-text text-darken-4  waves-light col s10 offset-s1  m8 offset-m2 button" style=" height: 45px ; margin-bottom: 30px" type="submit"  ><span>Connexion</span>
  504.                         <i class="fas fa-power-off right"> </i>
  505.                     </button>
  507.                     <div class="col s12 " style="margin-left:-20px; margin-bottom: 20px; margin-top: -20px">
  510.                         <p class="right-align">Or   <a href="{{ path('app_register',
  512.                                 {'destination': path('app_announce_detail',
  513.                                     {'announce':current_announce }) })
  514.                             }}">Sign Up</a>
  517.                             <a href="{{ path("app_forgot_password_request") }}" class="" style="margin-left: 30px">Reset Password</a>
  518.                         </p>
  521.                     </div>
  526.                 </form>
  528.             </div>
  531.         </div>
  532.         <div class="modal-footer modal-fixed-footer fixed">
  533.             <div class="row">
  534.                 <div class="col s12 divider"></div>
  535.             </div>
  536.             <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  537.         </div>
  538.     </div>
  540. {% endblock %}
  541. {% block javascripts %}
  542.     {{ parent() }}
  543.     <script src="{{ asset('js/home.func.js') }}"></script>
  544.     <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  545.     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  546.     <script type="text/javascript">
  549.         var apiBaseUrl="{{ host }}"
  550.         var loginUrl="{{ path('authentication_token') }}";
  551.         $('#login_form_customer').submit(function(){
  552.             login()
  553.         });
  555.         var Toast = Swal.mixin({
  556.             toast: true,
  557.             position: 'top-end',
  558.             showConfirmButton: false,
  559.             timer: 14000,
  560.             timerProgressBar: true,
  561.             didOpen: (toast) => {
  562.                 toast.addEventListener('mouseenter', Swal.stopTimer)
  563.                 toast.addEventListener('mouseleave', Swal.resumeTimer)
  564.             }
  565.         });
  567.         function login() {
  569.             var passwordInput= $("#passwordInput").val();
  570.             var emailInput= $("#emailInput").val();
  572.             $.ajax({
  573.                 method: "POST",
  574.                 tryCount  : 0,
  575.                 retryLimit  : 4,
  576.                 url: loginUrl,
  577.                 "headers": {
  578.                     "Content-Type": "application/json"
  579.                 },
  580.                 data: JSON.stringify({
  582.                     "email": emailInput,
  583.                     "password": passwordInput
  585.                 }),
  586.                 beforeSend:function () {
  588.                     $("#btnSubmitLog").addClass("disabled").html("login in progress...");
  589.                 },
  590.                 success: function(data){
  592.                     $("#btnSubmitLog").removeClass("disabled").html("Connexion")
  593.                     setCookie("{{ companyName }}_user_token",data.token,1);
  594.                     setCookie("{{ companyName }}_user_userpass",passwordInput,1);
  595.                     setCookie("{{ companyName }}_user_username",emailInput,1);
  597.                     $('#modal1').modal('close');
  599.                     Toast.fire({
  600.                         icon: 'success',
  601.                         title: "Welcome Back"
  602.                     });
  604.                 },
  605.                 error:function (xhr, textStatus, errorThrown) {
  606.                     $("#btnSubmitLog").removeClass("disabled").html("Try Again")
  610.                     Toast.fire({
  611.                         icon: 'warning',
  612.                         title: "Invalid Username or Password"
  613.                     });
  615.                     $("#passwordInput").addClass('invalid');
  616.                     $("#emailInput").addClass('invalid');
  618.                 }
  620.             });
  623.         }
  624.         $(document).ready(function() {
  625.             $('.js-example-basic-single').select2();
  626.             $('#locationType').material_select();
  627.             $('#buildType').material_select();
  630.             $('.datepicker').pickadate({
  631.                 selectMonths: true, // Creates a dropdown to control month
  632.                 selectYears: 15, // Creates a dropdown of 15 years to control year,
  633.                 today: 'Today',
  634.                 clear: 'Clear',
  635.                 close: 'Ok',
  636.                 closeOnSelect: false, // Close upon selecting a date,
  637.                 container: undefined, // ex. 'body' will append picker to body
  638.             });
  641.             $('.modal').modal({
  642.                     dismissible: true, // Modal can be dismissed by clicking outside of the modal
  643.                     opacity: .4, // Opacity of modal background
  644.                     inDuration: 300, // Transition in duration
  645.                     outDuration: 200, // Transition out duration
  646.                     startingTop: '4%', // Starting top style attribute
  647.                     endingTop: '15%', // Ending top style attribute
  648.                     ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
  650.                     },
  651.                     complete: function() {
  654.                     } // Callback for Modal close
  655.                 }
  656.             );
  657.             $('.autoplayTestimony').slick({
  658.                 slidesToShow: 3,
  659.                 slidesToScroll: 1,
  660.                 autoplay: true,
  661.                 autoplaySpeed: 2000,
  662.                 responsive: [
  663.                     {
  664.                         breakpoint: 2024,
  665.                         settings: {
  666.                             slidesToShow: 4,
  667.                             slidesToScroll: 4,
  668.                             infinite: true,
  669.                             dots: true
  670.                         }
  671.                     },
  672.                     {
  673.                         breakpoint: 1424,
  674.                         settings: {
  675.                             slidesToShow: 3,
  676.                             slidesToScroll: 3,
  677.                             infinite: true,
  678.                             dots: true
  679.                         }
  680.                     },
  681.                     {
  682.                         breakpoint: 900,
  683.                         settings: {
  684.                             slidesToShow: 2,
  685.                             slidesToScroll: 2
  686.                         }
  687.                     },
  688.                     {
  689.                         breakpoint: 480,
  690.                         settings: {
  691.                             slidesToShow: 1,
  692.                             slidesToScroll: 1
  693.                         }
  694.                     }
  695.                 ]
  696.             })
  698.             $('.autoplayPack').slick({
  699.                 slidesToShow: 1,
  700.                 slidesToScroll: 1,
  701.                 autoplay: true,
  702.                 autoplaySpeed: 2000,
  703.                 responsive: [
  704.                     {
  705.                         breakpoint: 1024,
  706.                         settings: {
  707.                             slidesToShow: 1,
  708.                             slidesToScroll: 1,
  709.                             infinite: true,
  710.                             dots: true
  711.                         }
  712.                     },
  713.                     {
  714.                         breakpoint: 600,
  715.                         settings: {
  716.                             slidesToShow: 1,
  717.                             slidesToScroll: 1
  718.                         }
  719.                     },
  720.                     {
  721.                         breakpoint: 480,
  722.                         settings: {
  723.                             slidesToShow: 1,
  724.                             slidesToScroll: 1
  725.                         }
  726.                     }
  727.                 ]
  728.             });
  729.             $('.autoplayBestProd').slick({
  730.                 slidesToShow: 2,
  731.                 slidesToScroll: 2,
  732.                 autoplay: true,
  733.                 autoplaySpeed: 22000,
  734.                 responsive: [
  735.                     {
  736.                         breakpoint: 1024,
  737.                         settings: {
  738.                             slidesToShow: 2,
  739.                             slidesToScroll: 2,
  740.                             infinite: true,
  741.                             dots: true
  742.                         }
  743.                     },
  744.                     {
  745.                         breakpoint: 600,
  746.                         settings: {
  747.                             slidesToShow: 1,
  748.                             slidesToScroll: 1
  749.                         }
  750.                     },
  751.                     {
  752.                         breakpoint: 480,
  753.                         settings: {
  754.                             slidesToShow: 1,
  755.                             slidesToScroll: 1
  756.                         }
  757.                     }
  758.                 ]
  759.             });
  760.         });
  762.         {% if current_announce!="all" and current_announce is not null%}
  764.         function makeAnOffre(amount) {
  767.            var tokenUser= getCookie("{{ companyName }}_user_token");
  769.            if(tokenUser===""){
  770.                $('#modal1').modal('open',{
  771.                    dismissible: true, // Modal can be dismissed by clicking outside of the modal
  772.                    opacity: .8, // Opacity of modal background
  773.                    inDuration: 300, // Transition in duration
  774.                    outDuration: 200, // Transition out duration
  775.                    startingTop: '2%', // Starting top style attribute
  776.                    endingTop: '15%', // Ending top style attribute
  777.                    width: '60%',
  778.                    ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
  780.                    },
  781.                    complete: function() {
  783.                    } // Callback for Modal close
  784.                });
  788.            }else{
  789.                Swal.mixin({
  791.                    imageUrl: '{{ asset('img/icon_money.png') }}',
  792.                    imageHeight: 60,
  794.                    imageAlt: 'Faites une proposition.',
  795.                    allowOutsideClick: false,
  796.                    allowEscapeKey: false,
  798.                    reverseButtons: true,
  799.                    confirmButtonText:
  800.                        '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',
  802.                    showCancelButton: true,
  803.                    progressSteps: ['1'],
  804.                    cancelButtonText:
  805.                        '<i class="fa fa-trash"></i> Annuler',
  806.                    cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
  807.                }).
  808.                queue([
  809.                    {
  810.                        title: 'Faites une proposition.',
  813.                        text: '',
  814.                        inputValue: amount,
  816.                        inputPlaceholder: '01',
  817.                        input: 'number',
  818.                        inputValidator: (result) => {
  820.                            if(result===""){
  822.                                return "empty field";
  823.                            }
  824.                            if(parseInt(result)<1){
  825.                                return 'invalid number';
  826.                            }
  828.                        }
  829.                    },
  831.                ]).then((result) => {
  832.                    if (result.value) {
  835.                        $.ajax({
  836.                            method: "POST",
  837.                            tryCount  : 0,
  838.                            retryLimit  : 4,
  839.                            url: "{{ path('app_make_offer') }}",
  840.                            "headers": {
  841.                                "Content-Type": "application/json"
  842.                            },
  843.                            data: JSON.stringify({
  845.                                "announce":"{{ current_announce.id }}",
  846.                                "offer":result.value[0],
  848.                                "_user_token":getCookie("{{ companyName }}_user_token"),
  849.                            }),
  851.                            beforeSend:function () {
  853.                                $("#btnBook").addClass("disabled");
  854.                                $("#btnBookLoading").removeClass("hide");
  856.                            },
  857.                            success: function(data){
  860.                                console.log(data);
  863.                                $("#btnBook").removeClass("disabled");
  864.                                $("#btnBookLoading").addClass("hide");
  866.                                if(data.resultCode===202 || data.resultCode===200){
  869.                                    Swal.fire({
  870.                                        title: data.message,
  871.                                        icon: 'success',
  872.                                        showClass: {
  873.                                            popup: 'animate__animated animate__fadeInDown'
  874.                                        },
  875.                                        hideClass: {
  876.                                            popup: 'animate__animated animate__fadeOutUp'
  877.                                        }
  878.                                    })
  879.                                }else {
  880.                                    Swal.fire({
  881.                                        title: data.message,
  882.                                        icon: 'success',
  883.                                        showClass: {
  884.                                            popup: 'animate__animated animate__fadeInDown'
  885.                                        },
  886.                                        hideClass: {
  887.                                            popup: 'animate__animated animate__fadeOutUp'
  888.                                        }
  889.                                    })
  891.                                }
  893.                            },
  894.                            error:function (xhr, textStatus, errorThrown) {
  896.                                console.log(xhr);
  898.                                var data=JSON.parse(xhr.responseJSON);
  900.                                Swal.fire({
  901.                                    title: data.message,
  902.                                    icon: 'error',
  903.                                    text: "You can be redirected to the previous page",
  904.                                    showClass: {
  905.                                        popup: 'animate__animated animate__fadeInDown'
  906.                                    },
  907.                                    hideClass: {
  908.                                        popup: 'animate__animated animate__fadeOutUp'
  909.                                    }
  910.                                })
  913.                                $("#btnBook").removeClass("disabled");
  914.                                $("#btnBookLoading").addClass("hide");
  916.                            }
  918.                        });
  920.                    }
  921.                });
  924.            }
  926.         }
  928.         var tokenUser= getCookie("{{ companyName }}_user_token");
  932.         if(tokenUser!=""){
  933.             getMessage();
  934.         }
  935.         function getMessage() {
  937.             $.ajax({
  938.                 method: "POST",
  939.                 tryCount  : 0,
  940.                 retryLimit  : 4,
  941.                 url: "{{ path('app_get_announce_message') }}",
  942.                 "headers": {
  943.                     "Content-Type": "application/json"
  944.                 },
  945.                 data: JSON.stringify({
  947.                     "announce":"{{ current_announce.id }}",
  949.                     "_user_token":getCookie("{{ companyName }}_user_token"),
  950.                 }),
  952.                 beforeSend:function () {
  953.                     $("#messageBody").html("").css("height","100px");
  955.                 },
  956.                 success: function(data){
  959.                     console.log(data);
  961.                     var i=0;
  963.                     if(data.result!=null){
  965.                         if(data.result.length>4){
  966.                             $("#messageBody")  .css("height","600px");
  967.                         }else{
  968.                             $("#messageBody").css("height","300px");
  969.                         }
  970.                          for(i=0; i< data.result.length; i++){
  972.                              if (data.result[i].sendBy===data.userId){
  974.                                  if(data.result[i].vue){
  975.                                      $("#messageBody").append(
  976.                                          `<br>  <br>
  977.                                 <div  class="col s12 right-aligned right l7   card z-depth-2" style="right:0;    padding: 20px; background-color: rgba(192,220,126,0); border-bottom-left-radius: 30px;  border-top-right-radius: 30px; ">
  978.                                 <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""> <p  style="margin-top:-10px">`
  979.                                          + data.result[i].message + `</p>
  980.                                          <p class="right-aligned right" style="margin-top:-10px"> ` + data.result[i].createdAt + ` <i class="fas fa-check-double  " style="font-size:10px; color:blue"> </i> </p></div>
  981.                                  `
  982.                                      );
  983.                                  }else{
  984.                                      $("#messageBody").append(
  985.                                          `<br>  <br>
  986.                                 <div  class="col s12 right-aligned l7  right    card z-depth-2" style="right:0;   padding: 20px; background-color: rgba(192,220,126,0); border-bottom-left-radius: 30px;  border-top-right-radius: 30px; ">
  987.                                 <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px">` + data.result[i].message + `</p>
  988.                                     <p class="right-aligned right" style="margin-top:-10px"> ` + data.result[i].createdAt + ` <i class="fas fa-check-double   " style="font-size:10px; color:gray"> </i></p> </div>
  989.                                  `
  990.                                      );
  991.                                  }
  994.                              }else{
  995.                                  if(data.result[i].vue){
  997.                                  $("#messageBody").append(
  998.                                      `
  999.                                 <br>
  1000.                                 <br>
  1001.                                 <div class="col s12 l7 left left 1 card z-depth-2" style=" left: 0;   padding: 20px; background-color: rgba(0,172,193,0.21);  border-top-right-radius: 30px;  border-bottom-left-radius: 30px">
  1002.                                 <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px"> ` + data.result[i].message + `</p>
  1003.                                 <p class="right-aligned " style="margin-top:-10px">` + data.result[i].createdAt + `  <i class="fas fa-check-double  " style="font-size:10px; color:blue"> </i></p> </div>
  1004.                                  `
  1005.                                  );
  1007.                                  }else{
  1008.                                      $("#messageBody").append(
  1009.                                          `
  1010.                                 <br>
  1011.                                 <br>
  1012.                                 <div class="col s12 left l7  card z-depth-2" style=" left: 0;   padding: 20px; background-color: rgba(0,172,193,0.21);  border-top-right-radius: 30px;  border-bottom-left-radius: 30px">
  1013.                                 <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px">` + data.result[i].message + `</p>
  1014.                                     <p class="right-aligned right " style="margin-top:-10px">` + data.result[i].createdAt + `  <i class="fas fa-check-double   " style="font-size:10px; color:gray"> </i></p></div>
  1015.                                  `
  1016.                                      );
  1018.                                  }
  1019.                              }
  1020.                          }
  1021.                     }
  1024.                 },
  1025.                 error:function (xhr, textStatus, errorThrown) {
  1027.                     console.log(xhr);
  1031.                 }
  1033.             });
  1037.         }
  1038.         function postMessage() {
  1039.             var tokenUser= getCookie("{{ companyName }}_user_token");
  1041.             if(tokenUser===""){
  1042.                 $('#modal1').modal('open',{
  1043.                     dismissible: true, // Modal can be dismissed by clicking outside of the modal
  1044.                     opacity: .8, // Opacity of modal background
  1045.                     inDuration: 300, // Transition in duration
  1046.                     outDuration: 200, // Transition out duration
  1047.                     startingTop: '2%', // Starting top style attribute
  1048.                     endingTop: '15%', // Ending top style attribute
  1049.                     width: '60%',
  1050.                     ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
  1052.                     },
  1053.                     complete: function() {
  1055.                     } // Callback for Modal close
  1056.                 });
  1060.             }else {
  1061.                 $.ajax({
  1062.                     method: "POST",
  1063.                     tryCount: 0,
  1064.                     retryLimit: 4,
  1065.                     url: "{{ path('app_post_announce_message') }}",
  1066.                     "headers": {
  1067.                         "Content-Type": "application/json"
  1068.                     },
  1069.                     data: JSON.stringify({
  1070.                         "announce": "{{ current_announce.id }}",
  1071.                         "messageType": "text",
  1072.                         "message": $("#messageToSend").val(),
  1073.                         "_user_token": getCookie("{{ companyName }}_user_token"),
  1074.                     }),
  1076.                     beforeSend: function () {
  1078.                         $("#btnSendMessage").addClass("disabled")
  1080.                     },
  1081.                     success: function (data) {
  1084.                         $("#btnSendMessage").removeClass("disabled");
  1085.                         $("#messageToSend").val("");
  1087.                         console.log(data);
  1089.                         var i = 0;
  1091.                          getMessage();
  1093.                         Toast.fire({
  1094.                             icon: 'success',
  1095.                             title: "Successfully sent"
  1096.                         });
  1098.                     },
  1099.                     error: function (xhr, textStatus, errorThrown) {
  1101.                         $("#btnSendMessage").removeClass("disabled");
  1102.                         console.log(xhr);
  1105.                     }
  1107.                 });
  1109.             }
  1111.         }
  1112.         {% endif %}
  1116.     </script>
  1117. {% endblock %}