templates/front/agents/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} - {{ agent.name }}{% endblock %}
  4. {% block meta_description %}{{ agent.bioCleaned|raw }}{% endblock %}
  5. {% block content %}
  7.     {#     
  8.     <section class="container-fluid p-0">
  9.         <div id="agent_estates_map" class="map_container"></div>
  10.     </section> 
  11.     #}
  13.     <section id="agent"  style="padding-top:60px ;background-image: url({{ asset('assets/media/agents/agent_bg.jpg') | imagine_filter('runtime',  {"thumbnail": {"size": [2000 ],  'mode': 'outbound'  }})}}); background-position: center center; background-size: cover;background-repeat: no-repeat;" >
  14.         <div class="container bg-white">
  15.             <div class="row  pt-3">
  16.                 <div class="col-md-4 col-lg-6 pt-1 position-relative mb-3 mb-md-5 ">
  17.                     <div class="portrait border">
  18.                         {% if agent.video != "" %}
  19.                             <video
  20.                                 id="video_agent"
  21.                                 poster="{{ vich_uploader_asset(agent, 'imageFile')|imagine_filter('agent_thumb') }}"
  22.                                 class="video-js vjs-16-9 shadow"
  23.                                 style="width:100%;">
  24.                                 <source src="{{ agent.video }}" type="video/mp4"></source>
  25.                             </video>
  26.                             <div id="video_buttons">
  27.                                 <button id="btn_sound" class="vjs-icon-volume-mute"></button>
  28.                                 <button id="btn_full_screen" class="vjs-icon-fullscreen-enter" data-fancybox href="{{ agent.video }}"></button>
  29.                             </div>
  30.                         {% else %}
  31.                             <img class="img-fluid" src="{{ vich_uploader_asset(agent, 'imageFile')|imagine_filter('agent_thumb') }}" />
  32.                         {% endif %}
  33.                     </div>
  34.                 </div>
  35.                 <div class="col-md-8 col-lg-6 pt-2">
  36.                     <h1 class="h3 font-weight-bold">{{ agent.name }}</h1>
  37.                     <p><i class="icon-location"></i>{{ agent.secteur }}</p>
  38.                     {% if agent.bio != "" %}
  39.                         <div class="bio pb-3_">{{ agent.bio|raw }}</div>
  40.                     {% else %}
  41.                         <div class="bio pb-3_">
  42.                             <p class="pb-3_">Nous vous proposons d'associer l'expérience et la technique pour réussir votre projet immobilier. Des outils performants (photos professionnelles, visite virtuelle, plans, aménagement virtuel, etc...) et une connaissance du marché immobilier local vous garantissent une transaction dans les meilleures conditions.</p>
  43.                             <p>Ne laissez pas le hasard décider de votre avenir !</p>
  44.                         </div>   
  45.                     {% endif %}
  46.                     <div class="d-flex justify-content-between mb-3">
  47.                         <div>
  48.                             <a id="realtor_call" class="btn btn-sm btn-primary mr-3" href="tel:{{ agent.telephone }}"> <i class="icon-phone-left"></i> <span class="d-none d-xl-inline"></span>{{ agent.telephone|phone }}</a>
  49.                              {% if agent.whatsapp != "" %}
  50.                                 <a id="realtor_whatsapp" class="btn btn-sm btn-success" href="https://api.whatsapp.com/send?phone={{ agent.whatsapp }}"> <i class="icon-webcam"></i> WhatsApp</a>
  51.                             {% endif %}
  52.                         </div>
  53.                         <div class="text-lg-right">
  54.                             <button class="btn_social btn_contact_agent btn btn-outline-primary" title="contact" ><i class="icon-mail"></i></button>
  57.                             {% if agent.facebook != "" %}
  58.                                 <a class="btn_social btn_facebook" title="facebook" target="_blank" href="{{ agent.facebook }}"><i class="icon-facebook"></i></a>
  59.                             {% else %}
  60.                                 <a class="btn_social btn_facebook" title="facebook" target="_blank" href="{{ socials.facebook }}"><i class="icon-facebook"></i></a>
  61.                             {% endif %}
  62.                             
  63. {#                             {% if agent.twitter != "" %}
  64.                                 <a class="btn_social btn_twitter" title="twitter" target="_blank" href="{{ agent.twitter }}"><i class="icon-twitter"></i></a>
  65.                             {% else %}
  66.                                 <a class="btn_social btn_twitter" title="twitter" target="_blank" href="{{ socials.twitter }}"><i class="icon-twitter"></i></a>
  67.                             {% endif %} 
  68.                             #}
  70.                             {% if agent.linkedin != "" %}
  71.                                 <a class="btn_social btn_linkedin" title="linkedin" target="_blank" href="{{ agent.linkedin }}"><i class="icon-linkedin"></i></a>
  72.                             {% else %}
  73.                                 <a class="btn_social btn_linkedin" title="linkedin" target="_blank" href="{{ socials.linkedin }}"><i class="icon-linkedin"></i></a>
  74.                             {% endif %} 
  76.                             {# <a class="btn_social btn_linkedin" title="linkedin" target="_blank" href="{{ socials.linkedin }}"><i class="icon-linkedin"></i></a> #}
  78.                             
  79.                             {% if agent.instagram != "" %}
  80.                                 <a class="btn_social btn_instagram" title="instagram" target="_blank" href="{{ agent.instagram }}"><i class="icon-instagram"></i></a>
  81.                             {% else %}
  82.                                 <a class="btn_social btn_instagram" title="instagram" target="_blank" href="{{ socials.instagram }}"><i class="icon-instagram"></i></a>
  83.                             {% endif %}
  84.                         </div>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </section>
  90.     <section id="agent_estimer" class="container pt-5">
  91.         <div class="row">
  92.             <div class="col-md-8">
  93.                 <iframe id="estimation_iframe" src="https://modelo-insight.lovable.app" scrolling="yes" frameborder="no" style="overflow: hidden; height: 470px;"></iframe>
  94.             </div>
  95.             <div class="col-md-4 text-secondary small d-flex flex-column">
  96.                 <div class="card mt-4 mb-4">
  97.                     <div class="card-body">
  98.                         <h6>Pourquoi estimer ?</h6>
  99.                         <ul class="list-unstyled mb-0">
  100.                             <li>Une fourchette de prix en 2 minutes</li>
  101.                             <li>Des données de marché localisées</li>
  102.                             <li>Un conseiller vous recontacte pour affiner</li>
  103.                             <li>Vos données restent confidentielles</li>
  104.                         </ul> 
  105.                     </div>
  106.                 </div>
  107.                 <div class="bg-dark rounded text-white text-center p-4">
  108.                     <h6 class="text-white mb-3">Vous préférez un échange directe ?</h6>
  109.                     <a class="btn btn-sm btn-light" href="tel:{{ agent.telephone }}"> <i class="icon-phone-left"></i> <span class="d-none d-xl-inline"></span>{{ agent.telephone|phone }}</a>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </section>
  114.      <section id="contact_agent" class="container pt-5">
  115.         <div class="card bg-lighter border-primary">
  116.             <div class="card-body ">
  117.                 <div class="clearfix  mx-1">
  118.                     <h4 id="show_contact" class="lora-600 float-lg-left mb-3">Contactez-moi !</h4>
  119.                     <div class="float-lg-right ">
  120.                         <button  type="button"  class="btn btn-primary mb-3" data-toggle="collapse" data-target="#contact_form_rdv" aria-expanded="false" aria-controls="contact_form_rdv"><i class="icon-calendar"></i> Proposer un RDV ?</button>
  121.                     </div>
  122.                 </div>
  123.                 {{ render(controller('App\\Controller\\Front\\MessageController::contactForm', { 'context': 'agent', 'display' : 'agent_page', 'agent_id': agent.id  }))  }}
  124.             </div>
  125.         </div>
  126.     </section> 
  128.     {% if reviews|length > 0 %}
  129.     <section class="container pt-5">
  130.         <div class="row">
  131.             <div class="col-md-4">
  132.                 <div id="os_card" class="card m-1">
  133.                     <div class="card-body text-center d-flex align-items-center justify-content-center" style="min-height:186px">
  134.                         <div>
  135.                             <div class="rating_ratio">{{ agent.rating |number_format(1, ',', ' ') }}<span>/5</span></div>
  136.                             <img class="d-inline-block my-3" src="{{ asset('assets/img/OS-Blanc-1024x413.png')  }}" height="43" width="107" />
  137.                             <p class="mb-0"><a href="https://www.opinionsystem.fr/fr-fr/certificate/c/{{ agent.cosId }}" target="_blank">basé sur {{ reviews|length }} avis clients</a></p>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.             <div class="col-md-8">
  143.                 <div id="testimonies" class="owl-carousel small comments">
  144.                     {% for review in reviews %}
  145.                             <div class="card m-1">
  146.                                 <div class="card-header d-flex bg-white px-2">
  147.                                     <img class="mr-2" width="36px" height="36px" src="{{ asset('assets/media/accueil/OIP.png') }}">
  148.                                     <div><b>{{ review.author }}</b><div class="text-secondary">{{ review.shortSubject }}</div></div>
  149.                                 </div>
  150.                                 <div class="card-body text-secondary p-2" >
  151.                                     <cite class="card-text">{{ review.shortComment }}</cite>
  152.                                     <div class="d-flex justify-content-between align-items-center pt-2">
  153.                                         {{ review.rating|stars }}
  154.                                         <div class="date">{{ review.date|format_date(locale='fr') }}</div>
  155.                                     </div>
  156.                                 </div>
  157.                             </div>
  158.                     {% endfor %}
  159.                 </div>
  160.             </div>
  161.         </div>
  162.     </section>
  163.     {% endif %}
  165.     <section class="container pt-5">
  166.         <h4 class="lora-600">Liste de bien(s)</h4>
  167.         <ul class="nav nav-pills mb-3" id="estates_tab" role="tablist">
  168.           <li class="nav-item" role="presentation">
  169.             <a class="nav-link active" id="on_sale
  170.             _estates-tab" data-toggle="tab" href="#on_sale_estates" role="tab" aria-controls="on_sale_estates" aria-selected="false">Ventes ({{ totaux.Ventes }})</a>
  171.           </li>
  172.           <li class="nav-item" role="presentation">
  173.             <a class="nav-link{% if totaux.Vendus == 0  %} disabled{% endif %}" id="sold_estates-tab" data-toggle="tab" href="#sold_estates" role="tab" aria-controls="sold_estates" aria-selected="false">Vendus ({{ totaux.Vendus }})</a>
  174.           </li>
  175.         </ul>
  177.         <div class="tab-content" id="estates_tabContent">
  178.             <div class="tab-pane fade show active" id="on_sale_estates" role="tabpanel" aria-labelledby="on_sale_estates-tab">
  179.                 <div class="row pt-4 align-items-stretch estates_container">
  180.                     {% for estate in estates %}
  181.                         {% if estate.statut not in ["Sous compromis", "Vendu"] %}
  182.                             {% include 'front/_common/_estate.html.twig'  with {'col': 'col-md-6 col-lg-4', 'with_agent' : false, 'with_modal' : true} %}
  183.                         {% endif %}
  184.                     {% endfor %}
  185.                 </div>
  186.             </div>
  187.             <div class="tab-pane fade" id="sold_estates" role="tabpanel" aria-labelledby="sold_estates-tab">
  188.                 <div class="row pt-4 align-items-stretch estates_container">                   
  189.                     {% for estate in estates %}
  190.                         {% if estate.statut in ["Sous compromis", "Vendu"] %}
  191.                             {% include 'front/_common/_estate.html.twig'  with {'col': 'col-md-6 col-lg-4', 'with_agent' : false, 'with_modal' : false, 'not_hover' : true, 'with_carrousel':false} %}
  192.                         {% endif %}
  193.                     {% endfor %}
  194.                 </div>
  195.           </div>
  196.         </div>
  197.     </section>
  199. <div id="contact_modal_agent" class="modal contact_modal" tabindex="-1" role="dialog">
  200.     <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  201.         <div class="modal-content">
  202.             <div class="modal-body p-0">
  203.             <div class="container-fluid">
  204.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  205.                 <div class="row d-flex">
  206.                     <div class="col-lg-5 col-xl-6 bg-dark px-0">
  208.                         <div class="text-white h-100">
  209.                             
  212.                             <div class="d-flex  flex-column h-100">
  213.                                 <img class="img-fluid " src="{{ vich_uploader_asset(agent, 'imageFile')|imagine_filter('agent_thumb') }}" />   
  215.                                 <div class="py-4 px-4">
  216.                                     <h4 class="lora m-0 text-white">{{ agent.name }}</h4>  
  217.                                     <ul id="contact_modal_agent_" class="list-unstyled">
  218.                                         <li><i class="icon-location"></i>{{ agent.secteur }}</li>
  219.                                         <li><i class="icon-phone-left"></i>{{ agent.telephone|phone }}</li>
  220.                                     </ul>  
  221.                                 </div>
  222. {#                                 <div class="text-center mt-auto">   
  223.                                     <img class="mt-4 mb-4 img-fluid text-center" src="{{ asset('assets/img/logo_blanc.png') | imagine_filter('runtime',  {"thumbnail": {"size": [150,],  'mode': 'outbound'  }}) }}" />
  224.                                 </div> #}
  225.                             </div>
  227.                         </div>
  228.                     </div>
  229.                     <div id="contact_form_container" class="col-lg-7 col-xl-6 px-4 pt-5 pb-3">
  230.                         <div class="d-flex justify-content-end">
  231.                             <button  type="button"  class="btn btn-primary mb-3" data-toggle="collapse" data-target="#contact_form_rdv" aria-expanded="false" aria-controls="contact_form_rdv"><i class="icon-calendar"></i> Proposer un RDV ?</button>
  232.                         </div>
  234.                         {{ render(controller('App\\Controller\\Front\\MessageController::contactForm', { 'context': 'agent' , 'display' : 'contact_modal_agent', 'agent_id': agent.id  }))  }}
  235.                     </div>
  236.                 </div>
  237.             </div>
  238.         </div>
  239.     </div>
  240. </div>
  243. <div id="contactForm_source" style="display: none;">{{ render(controller('App\\Controller\\Front\\MessageController::contactForm', { 'context': 'agent', 'display' : 'agent_modal' }))  }}</div>
  244. {{ source('front/acheter/modal-template.html') }}
  246. {# {{ source('front/acheter/estate-infobox-template.html') }} #}
  247. {# {{ source('front/agents/estate-infobox-template.html') }} #}
  249. {% endblock %}
  251. {% block stylesheets %}
  252.     {{ parent() }}
  253.     <link href="{{ asset('assets/vendor/bootstrap-4-master/build/css/tempusdominus-bootstrap-4.min.css') }}" rel="stylesheet"/>
  254.     <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" />
  255.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  256.     <link href="{{ asset('assets/css/dpe_ges.css') }}" rel="stylesheet"/>
  257.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css') }}" rel="stylesheet" />
  258.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css') }}" rel="stylesheet" />
  259.     <link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
  260.     <style>
  261.     #agent .portrait #video_buttons{
  262.       position: absolute;
  263.       right: 5px;
  264.       bottom: 0px;
  265.     }
  266.     #agent .portrait #video_buttons button{
  267.       position: relative;
  268.       background: none;
  269.       border: none;
  270.       color: #fff;
  271.       font-size: 20px;
  272.       right: initial;
  273.       bottom: initial;
  274.     }
  275.     </style>
  277. {% endblock %}
  279. {% block javascripts %}
  280.     {{ parent() }}
  281.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  282.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  283.     <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
  284.     <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
  285.     <script src="{{ asset('assets/vendor/swag.min.js') }}"></script>
  286.     <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
  287.     <script src="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/owl.carousel.min.js') }}"></script>
  289.     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
  290.     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.min.js" integrity="sha512-RAt2+PIRwJiyjWpzvvhKAG2LEdPpQhTgWfbEkFDCo8wC4rFYh5GQzJBVIFDswwaEDEYX16GEE/4fpeDNr7OIZw==" crossorigin="anonymous"></script>
  291.     <script src="{{ asset('assets/vendor/bootstrap-4-master/build/js/tempusdominus-bootstrap-4.js') }}"></script>
  293.     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  294.     <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
  295.     <script src="{{ asset('assets/js/base_map.js?v1.0') }}"></script>
  296.     <script src="{{ asset('assets/js/estates_map.js?v1.1') }}"></script>
  297.     {# <script src="{{ asset('assets/js/rrose.js') }}"></script> #}
  298.     <script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
  300.     
  301.     <script>
  303.     var current_page = '{{ current_page }}'; 
  305.     var current_route = Routing.generate('show_agent', { slug: '{{agent.slug}}' } );
  306.     var datas  = {{ datas|json_encode()|raw }};
  308.     // var source_infobox;
  309.     // var template_infobox;
  311.     var source_modal;
  312.     var template_modal;
  314.     jQuery(document).ready(function(){ 
  316.         if($('#video_agent').length > 0){
  317.             var video_agent_player = videojs('video_agent', {
  318.                 "autoplay": true,
  319.                 "controls":false,
  320.                 "muted": true,
  321.                 "loop":true,
  322.                 "fluid": true
  323.             },
  324.             function onPlayerReady() {
  325.                 setTimeout(function(){
  326.                     video_agent_player.play();
  328.                     $('#btn_sound').click(function(){
  329.                         // video_agent_player.MuteToggle();
  330.                         toggleVideoMute(video_agent_player);
  331.                     });
  333.                   }, 500);
  334.             });
  335.         }
  336.     //ouverture du formulaire de contact
  337.     $('.btn_contact_agent').click(function(){
  338.         $('#contact_modal_agent').modal('show');
  339.     });
  344.         initHandlebars();
  345.         // source_infobox   = $("#infobox-template").html();
  346.         // template_infobox  = Handlebars.compile(source_infobox);
  348.         $('#btn_bio').popover({ 
  349.             customClass: 'popover_bio',
  350.             html: true, 
  351.             sanitize: false,
  352.             template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
  353.         });
  354.         source_modal   = $("#modal-template").html();
  355.         template_modal  = Handlebars.compile(source_modal);
  357.         //Ouverture par url
  358.         var parts = window.location.pathname.split('/');
  360.         if( parts.length == 4 ) {
  361.             var refannonce = parts[3];
  362.             var estate = datas.estates.find(estate => String(estate.refannonce) === String(refannonce));
  364.             if( estate === undefined){ //ajax
  365.                 getEstate(refannonce);
  366.             }
  367.             else{
  368.                 displayEstate(estate); 
  369.             }
  370.         }
  378.         // setMap('agent_estates_map', 8, 8, 16 );
  379.         // map.touchZoom.disable();
  380.         // map.doubleClickZoom.disable();
  381.         // map.boxZoom.disable();
  382.         // map.keyboard.disable();
  384.         // map.scrollWheelZoom.disable();
  385.         // map.zoomControl.remove();
  386.         // map.dragging.disable();
  388.         // addMarkers(datas.estates, true, true);
  389.         var itemCount = $("#testimonies").children().length;
  390.         $("#testimonies").owlCarousel({
  391.             loop:itemCount > 2,
  392.             autoplay:true,
  393.             autoplayTimeout:owl_speed,
  394.             autoplayHoverPause:true,
  395.             smartSpeed:500,
  396.             margin:0,
  397.             nav:false,
  398.             // items:1,
  400.             responsive:{
  401.                 0:{items:1},
  402.                 // 767:{items:2},
  403.                 992:{items:2}
  404.             }
  405.         });
  407.         initContactForm($('#contact_agent #contact_form'));
  409.         $('.estates_container .estate_carousel').each(function(){
  410.             initEstateCarousel($(this));
  411.         });
  413.         $('#estates_tab a').on('click', function (event) {
  414.           event.preventDefault();
  415.           $(this).tab('show');
  416.         });
  418.         $('.open_modal').on('click', function(e) {
  419.             e.preventDefault();
  420.             e.returnValue = false;
  421.             openEstateModal($(this).data('id'));
  422.             return false; 
  423.         });
  424.     });
  426.     function centerMe(e) {
  427.         return;
  428.         
  429.         var pixelPosition = map.latLngToLayerPoint(e.target.getLatLng());
  430.         var new_y = $('#agent_estates_map').height() /2;
  431.         pixelPosition.y =  pixelPosition.y -  new_y  + 50 ;
  433.         var new_latlng  = map.layerPointToLatLng(pixelPosition);
  434.         map.setView(new_latlng);
  435.     }
  437.     function toggleVideoMute(video_player){
  438.         var is_muted = video_player.muted();
  440.         if (is_muted == true) {
  441.             video_player.muted(false);
  442.             $('#btn_sound').removeClass('vjs-icon-volume-mute').addClass('vjs-icon-volume-high');
  443.         }
  444.         else {
  445.             video_player.muted(true);
  446.             $('#btn_sound').removeClass('vjs-icon-volume-high').addClass('vjs-icon-volume-mute');
  448.         }
  449.     }
  452.     </script>
  453. {% endblock %}