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

{% block title %}{{companyName}} | {% trans %}Announce{% endtrans %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('css/home.func.css') }}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


    <style>

        #messageBody::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */
        #messageBody::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px grey;
            border-radius: 5px;
        }

        /* Handle */
        #messageBody::-webkit-scrollbar-thumb {
            background: rgba(3, 128, 13, 0.27);
            border-radius: 5px;
        }

        /* Handle on hover */
        #messageBody ::-webkit-scrollbar-thumb:hover {
            background: rgba(3, 128, 13, 0.97);
        }
            .modal { width:75% !important ; height: 75% !important ; }
        .truncate-overflow {
            display: -webkit-box;

            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 14px;
        }
        .truncate-overflow:hover {

            cursor: pointer;

        }
        div.ex3 {
            background-color: #ffffff;
            height: 250px;
            width: 100%;
            overflow-y: auto;
        }
        div.ex4 {
            background-color: #ffffff;
            height: 300px;
            border-radius: 30px;
            width: 100%;
            overflow-y: auto;
        }
    </style>
    <style>
        .container-caroussel {
            position: relative;
            width: 50%;
        }

        .image-caroussel {
            display: block;
            width: 100%;
            height: auto;
        }

        .btn-a-body {

            --b: 3px;     /* the border thickness*/
            --g: 5px;    /* the gap */
            --c: rgba(3, 128, 13, 0.97); /* the color */
            background: -webkit-linear-gradient(45deg, rgba(3, 128, 13, 0.97), #16945b);

            padding: 10px; border-radius: 20px;

            width: max-content;

            aspect-ratio: 0.5;

            color:white;
            cursor: pointer;
            transition: .3s;
        }
        .btn-a-body:hover {
            outline: var(--b) solid var(--c);
            outline-offset: var(--g);
            background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.85));

            color: rgba(3, 128, 13, 0.96);
        }
        .overlay-caroussel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 100%;
            height: 0;
            transition: .5s ease;
        }

        .container-caroussel:hover .overlay {
            height: 100%;
        }

        .text-caroussel {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}


<div class="row" id="content">

    {% if current_announce!="all" and current_announce is not null%}
    <div class="col s12" style="margin-top: 100px">


            <div class="col s12   " style="">
                <h6 style="margin-top: -1px; font-size: 18px; padding-right: 15px" class="right right-align">{{ announces|length }} dernières annonces</h6>
                <div class="col s12 right right-align" style="margin-top: 2%; margin-bottom: 30px">

                    <a href="#!" class="card  btn-a-body  "  style="margin-bottom: 30px; margin-top: -20px ;width: 100%     ">
                        Déposez une announce
                        <i style="font-size: 15px; margin-left: 15px; margin-right:  5px" class="   fas fa-bell"></i>
                    </a>
                </div>

                {% if current_announce!="all"  %}

                    <div class="col s10 offset-s1" >
                   {% if local == "fr" %}
                       <h4 style="margin-top: -25px"> {{ current_announce.titleFr }}</h4>
                     {% else %}

                         <h4 style="margin-top: -25px"> {{ current_announce.titleEn }}</h4>

                     {% endif %}

                     <ul class="autoplayPack">


                         {% if   current_announce.cover is not null  %}
                             <li>
                                 <img class="     responsive-img "   src="{{ onlinePath }}/media/{{ current_announce.cover }}"  style="height: 300px"  alt="">
                             </li>
                         {% endif %}

                         {% if  current_announce.picture is not null %}
                             <li>
                                 <img class="    responsive-img "  src="{{ onlinePath }}/media/{{ current_announce.picture }}"  style="height: 300px" alt="">
                             </li>
                         {% endif %}


                     </ul>
                 </div>
                    <div class="col s12 m10 offset-m1  " style="padding: 20px">

                        <a href="#!" id="btnChat" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
                            Echanger Avec le Proprio
                            <i class="fas fa-pen" style="margin-left: 15px; margin-right:  5px"></i>
                        </a>
                        <a href="#!" id="btnContact" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
                            Contacter

                            {% if current_announce.createdBy.company is  null %}
                                {{ current_announce.createdBy }}
                            {% else %}
                            {{ current_announce.createdBy.company.companyName }}
                            {% endif %}

                            <i class="fas fa-phone" style="margin-left: 15px; margin-right:  5px"></i>

                        </a>

                        <a href="#!" id="btnShare" class=" hide-on-small-and-down hide-on-small-only    card btn-a-body" style="">
                            Partager
                            <i class="fas fa-share-alt" style="margin-left: 15px; margin-right:  5px"></i>
                        </a>

                    </div>
                    <div class="col s12 m10 offset-m1 card">

                       <p class="" style="text-align: justify; padding: 20px">
                           {{ current_announce.description }}
                       </p>


                          <ul style="font-size: 20px">

                            <li>  <i class="fas fa-location-arrow" style="margin-right: 10px"></i> <b><u>Ville:</u></b> {{ current_announce.address.town }}</li>
                            <li>  <i class="fas fa-search-location" style="margin-right: 10px"></i>  <b><u>Quartier:</u></b> {{ current_announce.address.location }}</li>
                            <li> <i class="fas fa-map" style="margin-right: 10px"></i> <b><u>Superficie</u></b>: {{ current_announce.area }}m²</li>
                            <li>   <i class="fas fa-cookie" style="margin-right: 10px"></i> <b><u>Pièces: </u></b>{{ current_announce.numberOfPiece }}</li>
                        </ul>

                        <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
                            {{ current_announce.amount|number_format(2, '.', ',')  }}


                            <i class="fas fa-cart-plus"></i>
                        </h5>
                       <div class="col s12 right right-align" style="padding-bottom: 20px; margin-right: -10px; padding-top: 10px">

                           <a href="#!" id="btnBook" onclick="makeAnOffre({{ current_announce.amount }})" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
                               Faire une Proposition
                               <i class="fas fa-cart-arrow-down" style="margin-left: 15px; margin-right:  5px"></i>

                               <img id="btnBookLoading" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                           </a>

                       </div>


                    </div>
              {% else %}

                  <div class="col s12">

                      {% for announce in announces %}
                              <div class="col s12  m10 offset-m1 " style="padding: 5px">
                                  <div class="col s12 card">
                                      <div class="col s7 ">
                                          <h5>
                                              {{ announce.titleEn }}
                                          </h5>
                                          <p class="truncate-overflow">{{ announce.description }}</p>
                                      </div>
                                      <div class="col s5">
                                          <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="">
                                      </div>

                                      <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
                                          <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="">
                                              En Savoir plus..
                                              <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
                                          </a>

                                          <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
                                              {{ announce.amount|number_format(2, '.', ',')  }}


                                              <i class="fas fa-cart-plus"></i>
                                          </h5>

                                      </div>
                                  </div>



                              </div>

                      {%endfor %}
                  </div>
                {% endif %}
            </div>
        <div class="col s12  ">


            <div class="col s12 m10 offset-m1 card "  style="overflow:scroll; height:100px;" id="messageBody"  >



            </div>

            <div class="col s12 m10 offset-m1 card " style="border-radius: 30px" >



                <div class="col s12 m8 l9">
                    <div class="input-field col s12">
                        <textarea id="messageToSend" class="materialize-textarea"></textarea>
                        <label for="messageToSend">Votre Message</label>
                    </div>
                </div>
                <div class="col s12 m4 l3" style="margin-top: 30px">
                    <a onclick="postMessage() " href="#!" id="btnSendMessage" class="btn-a-body card" style="margin-top: 20px ">Envoyer
                        <i class="fas fa-paper-plane  "  style="margin-left: 15px; margin-right:  5px"></i></a>
                </div>


            </div>

            {% if announces|length >1 %}
            <div class="col s12" style="margin-top: 90px">
                <h5>Autres Offres</h5>
                <h6>Promotions, deals and special offers for you</h6>
            </div>

                <div class="col s12 autoplayBestProd">
                    {% for announce in announces %}

                        {% if current_announce != announce %}
                            <div class="col s12  " style="margin: 20px">
                                <div class="col s12 card">
                                    <div class="col s7 ">
                                        <h5>
                                            {{ announce.titleEn }}
                                        </h5>
                                        <p class="truncate-overflow">{{ announce.description }}</p>
                                    </div>
                                    <div class="col s5">
                                        <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="">
                                    </div>

                                    <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
                                        <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="">
                                            En Savoir plus..
                                            <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
                                        </a>

                                        <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
                                            {{ announce.amount|number_format(2, '.', ',')  }}


                                            <i class="fas fa-cart-plus"></i>
                                        </h5>

                                    </div>
                                </div>



                            </div>

                        {%endif %}

                    {%endfor %}

                </div>
            {%endif %}

        </div>
    </div>


    {% elseif current_announce =="all" %}
        <div class="row"  style="margin-top: 150px" >



            <div class="col s12">
                <div class="col s12 m3   l3 card z-depth-1" style="border-radius: 40px; margin-top: 30px ">


                    <div class="col s12" style="margin-top: 20px">
                        <i class="fas fa-link" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>
                        <select name="locationType" id="locationType">
                            <option value="location">Location</option>
                            <option value="vente">Vente</option>
                        </select>
                    </div>

                    <div class="col s12">
                        <i class="fas fa-building" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>
                        <select name="buildType" id="buildType">
                            {% for building in buildingTypes %}
                                <option value="{{ building.id }}">{{ building.type }}</option>
                            {%endfor %}

                        </select>
                    </div>
                    <div class="col s12" style="margin-bottom: 20px" >

                        <i class="fas fa-location-arrow" style=" font-size: 15px; position: absolute; margin-left: -20px;margin-top: 15px; float: right; z-index: 100 "></i>

                        <select class="js-example-basic-single" name="destinationTown" id="destinationTown" style="width: 100%;   ">
                            {% for town in towns %}
                                <option value="{{ town.id }}">{{ town.townName }}</option>
                            {%endfor %}

                        </select>
                    </div>




                    <div class="col s12  " style="margin-top: 20px; margin-bottom: 30px">

                        <a href="#!" class="card  btn-a-body " style="margin-bottom: 30px ;  ">
                            Appliquer le Filtre <i style="font-size: 15px; margin-left: 15px; margin-right:  5px" class="   fas fa-search"></i></a>

                    </div>

                </div>

                <div class="col s12 l9 m9  " style="overflow:scroll; height:700px;">

                    <div class="col s10 offset-s1  ">
                        <h5>Dernières annonces</h5>
                        <h6>Promotions, deals and special offers for you</h6>
                        {% for announce in announces %}

                            {% if current_announce != announce %}
                                <div class="col s12  " style="margin: 20px">
                                    <div class="col s12 card">
                                        <div class="col s7 ">
                                            <h5>
                                                {{ announce.titleEn }}
                                            </h5>
                                            <p class="truncate-overflow">{{ announce.description }}</p>
                                        </div>
                                        <div class="col s5">
                                            <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="">
                                        </div>

                                        <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
                                            <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="">
                                                En Savoir plus..
                                                <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
                                            </a>

                                            <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
                                                {{ announce.amount|number_format(2, '.', ',')  }}


                                                <i class="fas fa-cart-plus"></i>
                                            </h5>

                                        </div>
                                    </div>



                                </div>

                            {%endif %}

                        {%endfor %}
                    </div>

                </div>
            </div>

        </div>

    {% else %}
    {% endif %}


</div>
    <div id="modal1" class="modal ">
        <div class="modal-content">

            <div class="row">
                <form  data-aos="zoom-out-down"  data-aos-duration="2000"   onsubmit="return false;"
                       class="col m8 offset-m2 l6 offset-l3  s12   " id="login_form_customer" style="margin-top: 2px; border-radius: 20px; margin-bottom: 30px"   >

                    <div class="col s12 center center-block">
                        <img src="{{ asset('img/login.png') }}" style="max-height: 70px; margin-bottom: 20px" alt="" class="center center block">
                    </div>

                    <div class="col   s12   m10 offset-m1    input-field center center-block center-align">
                        <i class="fas fa-user-circle prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
                        <input placeholder="john@gmail.com"  required="required" type="email" id="emailInput" name="email" class="validate"   />
                        <label for="emailInput" data-error="wrong" data-success="ok">Nom d'utilisateur </label>
                        <span id="username_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>

                    </div>

                    <div class="col   s12   m10 offset-m1    input-field center center-block center-align" style="margin-top: 5px">
                        <i class="fas fa-key prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
                        <input   required="required" type="password" id="passwordInput" name="password" class="validate"  />

                        <label for="passwordInput" data-error="wrong" data-success="ok">Mot de Passe </label>
                        <span id="password_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>

                    </div>


                    <div class="col s12" >

                        <p style="margin-top: -1px; margin-bottom: 20px; margin-left: 50px">
                            <input type="checkbox" name="_remember_me" id="_remember_me" />
                            <label for="_remember_me">Remember Me</label>
                        </p>
                    </div>

                    <button

                            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>
                        <i class="fas fa-power-off right"> </i>
                    </button>

                    <div class="col s12 " style="margin-left:-20px; margin-bottom: 20px; margin-top: -20px">


                        <p class="right-align">Or   <a href="{{ path('app_register',

                                {'destination': path('app_announce_detail',
                                    {'announce':current_announce }) })
                            }}">Sign Up</a>


                            <a href="{{ path("app_forgot_password_request") }}" class="" style="margin-left: 30px">Reset Password</a>
                        </p>


                    </div>




                </form>

            </div>


        </div>
        <div class="modal-footer modal-fixed-footer fixed">
            <div class="row">
                <div class="col s12 divider"></div>
            </div>
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/home.func.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script type="text/javascript">


        var apiBaseUrl="{{ host }}"
        var loginUrl="{{ path('authentication_token') }}";
        $('#login_form_customer').submit(function(){
            login()
        });

        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 14000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        function login() {

            var passwordInput= $("#passwordInput").val();
            var emailInput= $("#emailInput").val();

            $.ajax({
                method: "POST",
                tryCount  : 0,
                retryLimit  : 4,
                url: loginUrl,
                "headers": {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({

                    "email": emailInput,
                    "password": passwordInput

                }),
                beforeSend:function () {

                    $("#btnSubmitLog").addClass("disabled").html("login in progress...");
                },
                success: function(data){

                    $("#btnSubmitLog").removeClass("disabled").html("Connexion")
                    setCookie("{{ companyName }}_user_token",data.token,1);
                    setCookie("{{ companyName }}_user_userpass",passwordInput,1);
                    setCookie("{{ companyName }}_user_username",emailInput,1);

                    $('#modal1').modal('close');

                    Toast.fire({
                        icon: 'success',
                        title: "Welcome Back"
                    });

                },
                error:function (xhr, textStatus, errorThrown) {
                    $("#btnSubmitLog").removeClass("disabled").html("Try Again")



                    Toast.fire({
                        icon: 'warning',
                        title: "Invalid Username or Password"
                    });

                    $("#passwordInput").addClass('invalid');
                    $("#emailInput").addClass('invalid');

                }

            });


        }
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
            $('#locationType').material_select();
            $('#buildType').material_select();


            $('.datepicker').pickadate({
                selectMonths: true, // Creates a dropdown to control month
                selectYears: 15, // Creates a dropdown of 15 years to control year,
                today: 'Today',
                clear: 'Clear',
                close: 'Ok',
                closeOnSelect: false, // Close upon selecting a date,
                container: undefined, // ex. 'body' will append picker to body
            });


            $('.modal').modal({
                    dismissible: true, // Modal can be dismissed by clicking outside of the modal
                    opacity: .4, // Opacity of modal background
                    inDuration: 300, // Transition in duration
                    outDuration: 200, // Transition out duration
                    startingTop: '4%', // Starting top style attribute
                    endingTop: '15%', // Ending top style attribute
                    ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

                    },
                    complete: function() {


                    } // Callback for Modal close
                }
            );
            $('.autoplayTestimony').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                responsive: [
                    {
                        breakpoint: 2024,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 4,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 1424,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 900,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            })

            $('.autoplayPack').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
            $('.autoplayBestProd').slick({
                slidesToShow: 2,
                slidesToScroll: 2,
                autoplay: true,
                autoplaySpeed: 22000,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });

        {% if current_announce!="all" and current_announce is not null%}

        function makeAnOffre(amount) {


           var tokenUser= getCookie("{{ companyName }}_user_token");

           if(tokenUser===""){
               $('#modal1').modal('open',{
                   dismissible: true, // Modal can be dismissed by clicking outside of the modal
                   opacity: .8, // Opacity of modal background
                   inDuration: 300, // Transition in duration
                   outDuration: 200, // Transition out duration
                   startingTop: '2%', // Starting top style attribute
                   endingTop: '15%', // Ending top style attribute
                   width: '60%',
                   ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

                   },
                   complete: function() {

                   } // Callback for Modal close
               });



           }else{
               Swal.mixin({

                   imageUrl: '{{ asset('img/icon_money.png') }}',
                   imageHeight: 60,

                   imageAlt: 'Faites une proposition.',
                   allowOutsideClick: false,
                   allowEscapeKey: false,

                   reverseButtons: true,
                   confirmButtonText:
                       '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                   showCancelButton: true,
                   progressSteps: ['1'],
                   cancelButtonText:
                       '<i class="fa fa-trash"></i> Annuler',
                   cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
               }).
               queue([
                   {
                       title: 'Faites une proposition.',


                       text: '',
                       inputValue: amount,

                       inputPlaceholder: '01',
                       input: 'number',
                       inputValidator: (result) => {

                           if(result===""){

                               return "empty field";
                           }
                           if(parseInt(result)<1){
                               return 'invalid number';
                           }

                       }
                   },

               ]).then((result) => {
                   if (result.value) {


                       $.ajax({
                           method: "POST",
                           tryCount  : 0,
                           retryLimit  : 4,
                           url: "{{ path('app_make_offer') }}",
                           "headers": {
                               "Content-Type": "application/json"
                           },
                           data: JSON.stringify({

                               "announce":"{{ current_announce.id }}",
                               "offer":result.value[0],

                               "_user_token":getCookie("{{ companyName }}_user_token"),
                           }),

                           beforeSend:function () {

                               $("#btnBook").addClass("disabled");
                               $("#btnBookLoading").removeClass("hide");

                           },
                           success: function(data){


                               console.log(data);


                               $("#btnBook").removeClass("disabled");
                               $("#btnBookLoading").addClass("hide");

                               if(data.resultCode===202 || data.resultCode===200){


                                   Swal.fire({
                                       title: data.message,
                                       icon: 'success',
                                       showClass: {
                                           popup: 'animate__animated animate__fadeInDown'
                                       },
                                       hideClass: {
                                           popup: 'animate__animated animate__fadeOutUp'
                                       }
                                   })
                               }else {
                                   Swal.fire({
                                       title: data.message,
                                       icon: 'success',
                                       showClass: {
                                           popup: 'animate__animated animate__fadeInDown'
                                       },
                                       hideClass: {
                                           popup: 'animate__animated animate__fadeOutUp'
                                       }
                                   })

                               }

                           },
                           error:function (xhr, textStatus, errorThrown) {

                               console.log(xhr);

                               var data=JSON.parse(xhr.responseJSON);

                               Swal.fire({
                                   title: data.message,
                                   icon: 'error',
                                   text: "You can be redirected to the previous page",
                                   showClass: {
                                       popup: 'animate__animated animate__fadeInDown'
                                   },
                                   hideClass: {
                                       popup: 'animate__animated animate__fadeOutUp'
                                   }
                               })


                               $("#btnBook").removeClass("disabled");
                               $("#btnBookLoading").addClass("hide");

                           }

                       });

                   }
               });


           }

        }

        var tokenUser= getCookie("{{ companyName }}_user_token");



        if(tokenUser!=""){
            getMessage();
        }
        function getMessage() {

            $.ajax({
                method: "POST",
                tryCount  : 0,
                retryLimit  : 4,
                url: "{{ path('app_get_announce_message') }}",
                "headers": {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({

                    "announce":"{{ current_announce.id }}",

                    "_user_token":getCookie("{{ companyName }}_user_token"),
                }),

                beforeSend:function () {
                    $("#messageBody").html("").css("height","100px");

                },
                success: function(data){


                    console.log(data);

                    var i=0;

                    if(data.result!=null){

                        if(data.result.length>4){
                            $("#messageBody")  .css("height","600px");
                        }else{
                            $("#messageBody").css("height","300px");
                        }
                         for(i=0; i< data.result.length; i++){

                             if (data.result[i].sendBy===data.userId){

                                 if(data.result[i].vue){
                                     $("#messageBody").append(
                                         `<br>  <br>
                                <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; ">
                                <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""> <p  style="margin-top:-10px">`
                                         + data.result[i].message + `</p>
                                         <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>
                                 `
                                     );
                                 }else{
                                     $("#messageBody").append(
                                         `<br>  <br>
                                <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; ">
                                <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px">` + data.result[i].message + `</p>
                                    <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>
                                 `
                                     );
                                 }


                             }else{
                                 if(data.result[i].vue){

                                 $("#messageBody").append(
                                     `
                                <br>
                                <br>
                                <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">
                                <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px"> ` + data.result[i].message + `</p>
                                <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>
                                 `
                                 );

                                 }else{
                                     $("#messageBody").append(
                                         `
                                <br>
                                <br>
                                <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">
                                <img class="circle" style="width:40px; height:40px" src="{{ asset('img/login.png') }}"  alt=""><p  style="margin-top:-10px">` + data.result[i].message + `</p>
                                    <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>
                                 `
                                     );

                                 }
                             }
                         }
                    }


                },
                error:function (xhr, textStatus, errorThrown) {

                    console.log(xhr);



                }

            });



        }
        function postMessage() {
            var tokenUser= getCookie("{{ companyName }}_user_token");

            if(tokenUser===""){
                $('#modal1').modal('open',{
                    dismissible: true, // Modal can be dismissed by clicking outside of the modal
                    opacity: .8, // Opacity of modal background
                    inDuration: 300, // Transition in duration
                    outDuration: 200, // Transition out duration
                    startingTop: '2%', // Starting top style attribute
                    endingTop: '15%', // Ending top style attribute
                    width: '60%',
                    ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

                    },
                    complete: function() {

                    } // Callback for Modal close
                });



            }else {
                $.ajax({
                    method: "POST",
                    tryCount: 0,
                    retryLimit: 4,
                    url: "{{ path('app_post_announce_message') }}",
                    "headers": {
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify({
                        "announce": "{{ current_announce.id }}",
                        "messageType": "text",
                        "message": $("#messageToSend").val(),
                        "_user_token": getCookie("{{ companyName }}_user_token"),
                    }),

                    beforeSend: function () {

                        $("#btnSendMessage").addClass("disabled")

                    },
                    success: function (data) {


                        $("#btnSendMessage").removeClass("disabled");
                        $("#messageToSend").val("");

                        console.log(data);

                        var i = 0;

                         getMessage();

                        Toast.fire({
                            icon: 'success',
                            title: "Successfully sent"
                        });

                    },
                    error: function (xhr, textStatus, errorThrown) {

                        $("#btnSendMessage").removeClass("disabled");
                        console.log(xhr);


                    }

                });

            }

        }
        {% endif %}



    </script>
{% endblock %}