amberstudent / Funnel View

// ==UserScript==
// @name         Funnel View
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://amberstudent.freshsales.io/*
// @grant        GM_xmlhttpRequest
// @license      MIT
// ==/UserScript==

window.allData = [];

const InternationalPhoneCodes = [
  {value: "+44", name: "United Kingdom(+44)"},
  {value: "+1", name: "United States(+1)"},
  {value: "+91", name: "India(+91)"},
  {value: "+65", name: "Singapore(+65)"},
  {value: "+60", name: "Malaysia(+60)"},
  {value: "+61", name: "Australia(+61)"},
  {value: "+33", name: "France(+33)"},
  {value: "+7840", name: "Abkhazia(+7 840)"},
  {value: "+93", name: "Afghanistan(+93)"},
  {value: "+355", name: "Albania(+355)"},
  {value: "+213", name: "Algeria(+213)"},
  {value: "+1684", name: "American Samoa(+1 684)"},
  {value: "+376", name: "Andorra(+376)"},
  {value: "+244", name: "Angola(+244)"},
  {value: "+1264", name: "Anguilla(+1 264)"},
  {value: "+1268", name: "Antigua and Barbuda(+1 268)"},
  {value: "+54", name: "Argentina(+54)"},
  {value: "+374", name: "Armenia(+374)"},
  {value: "+297", name: "Aruba(+297)"},
  {value: "+247", name: "Ascension(+247)"},
  {value: "+61", name: "Australia(+61)"},
  {value: "+672", name: "Australian External Territories(+672)"},
  {value: "+43", name: "Austria(+43)"},
  {value: "+994", name: "Azerbaijan(+994)"},
  {value: "+1242", name: "Bahamas(+1 242)"},
  {value: "+973", name: "Bahrain(+973)"},
  {value: "+880", name: "Bangladesh(+880)"},
  {value: "+1246", name: "Barbados(+1 246)"},
  {value: "+1268", name: "Barbuda(+1 268)"},
  {value: "+375", name: "Belarus(+375)"},
  {value: "+32", name: "Belgium(+32)"},
  {value: "+501", name: "Belize(+501)"},
  {value: "+229", name: "Benin(+229)"},
  {value: "+1441", name: "Bermuda(+1 441)"},
  {value: "+975", name: "Bhutan(+975)"},
  {value: "+591", name: "Bolivia(+591)"},
  {value: "+387", name: "Bosnia and Herzegovina(+387)"},
  {value: "+267", name: "Botswana(+267)"},
  {value: "+55", name: "Brazil(+55)"},
  {value: "+246", name: "British Indian Ocean Territory(+246)"},
  {value: "+1284", name: "British Virgin Islands(+1 284)"},
  {value: "+673", name: "Brunei(+673)"},
  {value: "+359", name: "Bulgaria(+359)"},
  {value: "+226", name: "Burkina Faso(+226)"},
  {value: "+257", name: "Burundi(+257)"},
  {value: "+855", name: "Cambodia(+855)"},
  {value: "+237", name: "Cameroon(+237)"},
  {value: "+1", name: "Canada(+1)"},
  {value: "+238", name: "Cape Verde(+238)"},
  {value: "+345", name: "Cayman Islands(+ 345)"},
  {value: "+236", name: "Central African Republic(+236)"},
  {value: "+235", name: "Chad(+235)"},
  {value: "+56", name: "Chile(+56)"},
  {value: "+86", name: "China(+86)"},
  {value: "+61", name: "Christmas Island(+61)"},
  {value: "+61", name: "Cocos-Keeling Islands(+61)"},
  {value: "+57", name: "Colombia(+57)"},
  {value: "+269", name: "Comoros(+269)"},
  {value: "+242", name: "Congo(+242)"},
  {value: "+243", name: "Congo, Dem. Rep. of (Zaire)(+243)"},
  {value: "+682", name: "Cook Islands(+682)"},
  {value: "+506", name: "Costa Rica(+506)"},
  {value: "+385", name: "Croatia(+385)"},
  {value: "+53", name: "Cuba(+53)"},
  {value: "+599", name: "Curacao(+599)"},
  {value: "+357", name: "Cyprus(+357)"},
  {value: "+420", name: "Czech Republic(+420)"},
  {value: "+45", name: "Denmark(+45)"},
  {value: "+246", name: "Diego Garcia(+246)"},
  {value: "+253", name: "Djibouti(+253)"},
  {value: "+1767", name: "Dominica(+1 767)"},
  {value: "+1809", name: "Dominican Republic(+1 809)"},
  {value: "+670", name: "East Timor(+670)"},
  {value: "+56", name: "Easter Island(+56)"},
  {value: "+593", name: "Ecuador(+593)"},
  {value: "+20", name: "Egypt(+20)"},
  {value: "+503", name: "El Salvador(+503)"},
  {value: "+240", name: "Equatorial Guinea(+240)"},
  {value: "+291", name: "Eritrea(+291)"},
  {value: "+372", name: "Estonia(+372)"},
  {value: "+251", name: "Ethiopia(+251)"},
  {value: "+500", name: "Falkland Islands(+500)"},
  {value: "+298", name: "Faroe Islands(+298)"},
  {value: "+679", name: "Fiji(+679)"},
  {value: "+358", name: "Finland(+358)"},
  {value: "+33", name: "France(+33)"},
  {value: "+596", name: "French Antilles(+596)"},
  {value: "+594", name: "French Guiana(+594)"},
  {value: "+689", name: "French Polynesia(+689)"},
  {value: "+241", name: "Gabon(+241)"},
  {value: "+220", name: "Gambia(+220)"},
  {value: "+995", name: "Georgia(+995)"},
  {value: "+49", name: "Germany(+49)"},
  {value: "+233", name: "Ghana(+233)"},
  {value: "+350", name: "Gibraltar(+350)"},
  {value: "+30", name: "Greece(+30)"},
  {value: "+299", name: "Greenland(+299)"},
  {value: "+1473", name: "Grenada(+1 473)"},
  {value: "+590", name: "Guadeloupe(+590)"},
  {value: "+1671", name: "Guam(+1 671)"},
  {value: "+502", name: "Guatemala(+502)"},
  {value: "+224", name: "Guinea(+224)"},
  {value: "+245", name: "Guinea-Bissau(+245)"},
  {value: "+595", name: "Guyana(+595)"},
  {value: "+509", name: "Haiti(+509)"},
  {value: "+504", name: "Honduras(+504)"},
  {value: "+852", name: "Hong Kong SAR China(+852)"},
  {value: "+36", name: "Hungary(+36)"},
  {value: "+354", name: "Iceland(+354)"},
  {value: "+91", name: "India(+91)"},
  {value: "+62", name: "Indonesia(+62)"},
  {value: "+98", name: "Iran(+98)"},
  {value: "+964", name: "Iraq(+964)"},
  {value: "+353", name: "Ireland(+353)"},
  {value: "+972", name: "Israel(+972)"},
  {value: "+39", name: "Italy(+39)"},
  {value: "+225", name: "Ivory Coast(+225)"},
  {value: "+1876", name: "Jamaica(+1 876)"},
  {value: "+81", name: "Japan(+81)"},
  {value: "+962", name: "Jordan(+962)"},
  {value: "+77", name: "Kazakhstan(+7 7)"},
  {value: "+254", name: "Kenya(+254)"},
  {value: "+686", name: "Kiribati(+686)"},
  {value: "+965", name: "Kuwait(+965)"},
  {value: "+996", name: "Kyrgyzstan(+996)"},
  {value: "+856", name: "Laos(+856)"},
  {value: "+371", name: "Latvia(+371)"},
  {value: "+961", name: "Lebanon(+961)"},
  {value: "+266", name: "Lesotho(+266)"},
  {value: "+231", name: "Liberia(+231)"},
  {value: "+218", name: "Libya(+218)"},
  {value: "+423", name: "Liechtenstein(+423)"},
  {value: "+370", name: "Lithuania(+370)"},
  {value: "+352", name: "Luxembourg(+352)"},
  {value: "+853", name: "Macau SAR China(+853)"},
  {value: "+389", name: "Macedonia(+389)"},
  {value: "+261", name: "Madagascar(+261)"},
  {value: "+265", name: "Malawi(+265)"},
  {value: "+60", name: "Malaysia(+60)"},
  {value: "+960", name: "Maldives(+960)"},
  {value: "+223", name: "Mali(+223)"},
  {value: "+356", name: "Malta(+356)"},
  {value: "+692", name: "Marshall Islands(+692)"},
  {value: "+596", name: "Martinique(+596)"},
  {value: "+222", name: "Mauritania(+222)"},
  {value: "+230", name: "Mauritius(+230)"},
  {value: "+262", name: "Mayotte(+262)"},
  {value: "+52", name: "Mexico(+52)"},
  {value: "+691", name: "Micronesia(+691)"},
  {value: "+1808", name: "Midway Island(+1 808)"},
  {value: "+373", name: "Moldova(+373)"},
  {value: "+377", name: "Monaco(+377)"},
  {value: "+976", name: "Mongolia(+976)"},
  {value: "+382", name: "Montenegro(+382)"},
  {value: "+1664", name: "Montserrat(+1664)"},
  {value: "+212", name: "Morocco(+212)"},
  {value: "+95", name: "Myanmar(+95)"},
  {value: "+264", name: "Namibia(+264)"},
  {value: "+674", name: "Nauru(+674)"},
  {value: "+977", name: "Nepal(+977)"},
  {value: "+31", name: "Netherlands(+31)"},
  {value: "+599", name: "Netherlands Antilles(+599)"},
  {value: "+1869", name: "Nevis(+1 869)"},
  {value: "+687", name: "New Caledonia(+687)"},
  {value: "+64", name: "New Zealand(+64)"},
  {value: "+505", name: "Nicaragua(+505)"},
  {value: "+227", name: "Niger(+227)"},
  {value: "+234", name: "Nigeria(+234)"},
  {value: "+683", name: "Niue(+683)"},
  {value: "+672", name: "Norfolk Island(+672)"},
  {value: "+850", name: "North Korea(+850)"},
  {value: "+1670", name: "Northern Mariana Islands(+1 670)"},
  {value: "+47", name: "Norway(+47)"},
  {value: "+968", name: "Oman(+968)"},
  {value: "+92", name: "Pakistan(+92)"},
  {value: "+680", name: "Palau(+680)"},
  {value: "+970", name: "Palestinian Territory(+970)"},
  {value: "+507", name: "Panama(+507)"},
  {value: "+675", name: "Papua New Guinea(+675)"},
  {value: "+595", name: "Paraguay(+595)"},
  {value: "+51", name: "Peru(+51)"},
  {value: "+63", name: "Philippines(+63)"},
  {value: "+48", name: "Poland(+48)"},
  {value: "+351", name: "Portugal(+351)"},
  {value: "+1787", name: "Puerto Rico(+1 787)"},
  {value: "+974", name: "Qatar(+974)"},
  {value: "+262", name: "Reunion(+262)"},
  {value: "+40", name: "Romania(+40)"},
  {value: "+7", name: "Russia(+7)"},
  {value: "+250", name: "Rwanda(+250)"},
  {value: "+685", name: "Samoa(+685)"},
  {value: "+378", name: "San Marino(+378)"},
  {value: "+966", name: "Saudi Arabia(+966)"},
  {value: "+221", name: "Senegal(+221)"},
  {value: "+381", name: "Serbia(+381)"},
  {value: "+248", name: "Seychelles(+248)"},
  {value: "+232", name: "Sierra Leone(+232)"},
  {value: "+65", name: "Singapore(+65)"},
  {value: "+421", name: "Slovakia(+421)"},
  {value: "+386", name: "Slovenia(+386)"},
  {value: "+677", name: "Solomon Islands(+677)"},
  {value: "+27", name: "South Africa(+27)"},
  {value: "+500", name: "South Georgia and the South Sandwich Islands(+500)"},
  {value: "+82", name: "South Korea(+82)"},
  {value: "+34", name: "Spain(+34)"},
  {value: "+94", name: "Sri Lanka(+94)"},
  {value: "+249", name: "Sudan(+249)"},
  {value: "+597", name: "Suriname(+597)"},
  {value: "+268", name: "Swaziland(+268)"},
  {value: "+46", name: "Sweden(+46)"},
  {value: "+41", name: "Switzerland(+41)"},
  {value: "+963", name: "Syria(+963)"},
  {value: "+886", name: "Taiwan(+886)"},
  {value: "+992", name: "Tajikistan(+992)"},
  {value: "+255", name: "Tanzania(+255)"},
  {value: "+66", name: "Thailand(+66)"},
  {value: "+670", name: "Timor Leste(+670)"},
  {value: "+228", name: "Togo(+228)"},
  {value: "+690", name: "Tokelau(+690)"},
  {value: "+676", name: "Tonga(+676)"},
  {value: "+1868", name: "Trinidad and Tobago(+1 868)"},
  {value: "+216", name: "Tunisia(+216)"},
  {value: "+90", name: "Turkey(+90)"},
  {value: "+993", name: "Turkmenistan(+993)"},
  {value: "+1649", name: "Turks and Caicos Islands(+1 649)"},
  {value: "+688", name: "Tuvalu(+688)"},
  {value: "+1340", name: "U.S. Virgin Islands(+1 340)"},
  {value: "+256", name: "Uganda(+256)"},
  {value: "+380", name: "Ukraine(+380)"},
  {value: "+971", name: "United Arab Emirates(+971)"},
  {value: "+44", name: "United Kingdom(+44)"},
  {value: "+1", name: "United States(+1)"},
  {value: "+598", name: "Uruguay(+598)"},
  {value: "+998", name: "Uzbekistan(+998)"},
  {value: "+678", name: "Vanuatu(+678)"},
  {value: "+58", name: "Venezuela(+58)"},
  {value: "+84", name: "Vietnam(+84)"},
  {value: "+1808", name: "Wake Island(+1 808)"},
  {value: "+681", name: "Wallis and Futuna(+681)"},
  {value: "+967", name: "Yemen(+967)"},
  {value: "+260", name: "Zambia(+260)"},
  {value: "+255", name: "Zanzibar(+255)"},
  {value: "+263", name: "Zimbabwe(+263)"}
];


const styleString = `<style>

.values-container{

}

.values-container.big .item {
 padding: 5px 10px;
 color: #9012FE;
 border: 1px solid #9012FE;
 font-size: 10px;
 border-radius: 40px;
 display: inline-block;
 margin: 10px;
}
.values-container.small {
  padding: 10px 0;
}
.values-container.small .item{
    padding: 2px 2px;
    color: black;
    border-right: 1px solid #F05677;
    font-size: 10px;
    display: inline-block;
    font-weight: bold;
}

.values-container.small .process {
   color: #F05677;
}

.tags-container{
}

.tags-container .options{
z-index: 10;
background-color: white;
 padding: 10px;
 color: #9012FE;
 cursor: pointer;
}

.tags-container .trigger {
 background-color: black;
 width: 30px;
 height: 30px;
 border: 30px;
 cursor: pointer;
}

.tags-container .tag{
 display: none;
 border: 1px solid #888;
 padding: 4px 8px;
 border-radius: 40px;
}

.tags-container .tag:hover{
 background-color: #f0f0f0;
}

.dark-tag{
    color: red;
    border: 1px solid red;
    display: inline-block;
    padding: 4px;
    font-weight: bold;
    float: right;
}

.tags-container .tag-1{
 color: green;
}

.tags-container .tag-2{
 color: red;
}

.tags-container .tag.show {
 display: inline-block;
}

.tags-container:hover .tag{
   display: inline-block;
}

.email-link-button-container .button{
     padding: 10px 20px;
    color: white;
    position: fixed;
    z-index: 100000;
    top: 10px;
    right: 350px;
    background-color: black;
    cursor: pointer;
}

.whatsapp-link-button-container .button {

    padding: 10px 20px;
    color: white;
    position: fixed;
    z-index: 100000;
    top: 10px;
    right: 480px;
    background-color: #11af22;
    cursor: pointer;
}


.add-tag-container{
   position: relative;
   z-index: 1;
}
.add-tag-container .add{
  color: white;
  background-color: green;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
  font-size: 25px;
  cursor: pointer;
}

.add-tag-container .tags-option{
  display: none;
  flex-direction: column;
  position: absolute;
  top: 50px;
}
.add-tag-container.show-options .tags-option{
  display: flex;
}

.add-tag-container .tag-option{
  background-color: white;
  padding: 10px;
  border: 1px solid lightgray;
  cursor: pointer;
  max-width: 200px;
}

.add-tag-container .tag-option:hover{
  background-color: blue;
  color: white;
}

.show-tag-container{
     display: inline-block;
    background-color: #9012FE;
    color: white;
    border-radius: 20px;
}

.show-tag-delete{
  background-color: #f05577;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
}

.show-tag-text {
    padding: 9px;
    display: inline-block
}

.outer-tags-container {
  display: inline-block;
  width: 120px;
  margin-top: 10px;
}

.show-tags {
  display: inline-block;
}

.funnel-tag {
  display: inline-block;
  padding: 0 4px;
  border:1px solid #9012FE;
  color: #9012FE;
   font-weight: bold;
  border-radius: 2px;
}

.timeZone-container{
  line-height: 40px;
}

.timeZone {
    margin: 10px;
    padding: 8px;
    background-color: #EFF7FF;
    border-radius: 8px;
    border: 1px solid #415E9B;
}

.timeZone-name{'
    color: black;
    font-weight: bold;
    margin-right: 10px;
}

.timeZone-time{
    color: purple;
    font-weight: bold;
}

.time-tag{
    color: blue;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 4px 4px 10px;
}

.green-tag{
  padding: 10px;
  display: inline-block;
  background-color: green;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.country-name{
    color: #a94b5f;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 4px 4px 10px;
}
</style>`;




const getHTMLForTag = ()=>{
  return (`
  <div class="tags-container">
   <span class="trigger"> Gola</span>
   <span class="current"></span>
   <div class="options">
     <div class="tag tag-1" data-id="1">Important</div>
     <div class="tag tag-2" data-id="2"> Junk</div>
   </div>

  <div>
`);
};

const getAllDetails = (deal)=>{

let d = new Date(deal.created_at);
const string = d.toString();
const array = string.split(" ");
const time = array[4].split(":");
let newTime = "";
const hour = parseInt(time[0]);
let prefix = "";
let hourToDisplay = hour;
if(hour < 12 ){
  prefix = "A.M"
} else if(hour == 12){
  prefix = "Noon"
} else if (hour > 12){
  hourToDisplay = hour - 12;
  prefix = "P.M"
}

const fullTime = array[0]+ "-" + array[2] +"," + array[1] + "--" + hourToDisplay + ":" + time[1] + " " + prefix;
const obj = {
  weekDay: array[0],
  monthName: array[1],
  day: array[2],
  time: fullTime
};

    let countriesMatched = deal.user_details.phone;

    const phone = deal.user_details.phone;
    if(phone && phone.length > 10){
        const firstDigit = "+" +phone.slice(0,1);
        const twoDigits = "+" + phone.slice(0,2);
        const threetDigits = "+" + phone.slice(0,3);
        for(let i = 0; i < InternationalPhoneCodes.length; ++i ){
              const node = InternationalPhoneCodes[i];
              if(node.value ==firstDigit || node.value ==twoDigits || node.value ==threetDigits ){
                  countriesMatched += " | " +node.name;
                  break;
              }
          }
    }

    return {
        utm_campaign: deal.data.source.utm_campaign || "",
        utm_source: deal.data.source.utm_source || "",
        source: deal.data.source,
        message: deal.data.message,
        budget_full: deal.data.budget_full,
        move_in_date: deal.data.move_in_date,
        configuration: deal.data.configuration,
        lease_duration: deal.data.lease_duration,
        no_of_students: deal.data.no_of_students,
        location: deal.location_name,
        email: deal.user_details.email,
        phone: deal.user_details.phone,
        id: deal.connect_details_freshsales_id,
        tags: deal.tags,
        process_details: deal.process_details,
        time: fullTime,
        country: countriesMatched,

    };
};

const getHTMLForDealPage = (details, className)=>{
    let tagHtml = "";

    if(!details.tags){
        details.tags = [];
    } else  {
       details.tags.forEach((tag)=>{ tagHtml +=`<span class="funnel-tag">${tag}</span>`;});
    }

    let processString = "";
    const pd = details.process_details;
    const issues = pd.issues;

    if(pd  && typeof pd.call_count != "undefined" && typeof pd.note_count != "undefined" && typeof pd.email_count != "undefined"){
         processString = "call-" +pd.call_count + " | notes-" + pd.note_count + " | email-" + pd.email_count + "  ";
    }

    if(issues && issues.length > 0 ){
      const array = issues.map((issue)=>{ return issue.message;});
        let issueHtml = "";
      array.forEach((issue)=>{
        const row = `<div class="dark-tag tag">${issue}</div>`;
          issueHtml += row;
      });
        processString += issueHtml;
    }


 return (`
 <div class="values-container ${className}">
   <div class="country-name">${details.country}</div>
   <div class="time-tag">${details.time}</div>
   <div class="funnel-tags-container">${tagHtml}</div>
   <div class="item"><span>${details.move_in_date || ""}</span></div>
   <div class="item"><span>${details.budget_full || ""}</span></div>
   <div class="item"><span>${details.lease_duration || ""}</span></div>
   <div class="item"><span>${details.no_of_students || ""} students</span></div>
   <div class="item"><span>${details.utm_campaign + " | "} students</span></div>
   <div class="item"><span>${details.utm_source + " | "} students</span></div>
   <div class="item process"><span>${processString}</span></div>
 </div>

`);
};

const insertHTMLInCards = (deals)=>{
    const dealsIds = deals.map((deal)=>{ return "" + deal.connect_details_freshsales_id;});
  $('.funl-card-wrap .js-deal-pipeline').each((index, card)=>{
   const $card = $(card);
   const cardId = $card.attr('data-value');
      if(dealsIds.indexOf(cardId) > -1 ){

          const deal = deals.filter((deal)=>{ return deal.connect_details_freshsales_id == cardId;})[0];
          const details = getAllDetails(deal);

          if(details){
            $card.find('.funl-card').append(getHTMLForDealPage(details,"small"));
            $card.addClass('data-fetched');
          }

      }
  });

};

const getHTMLForEmailLink = (details)=>{


    let href= `https://mail.google.com/mail/u/0/?view=cm&fs=1&to=${details.user_details.email}&su=Accommodation+near+your+university+|+Amberstudent&tf=1`;
//    let href= `mailto:${details.user_details.email}`;
    return (`
        <div class="email-link-button-container">
            <a href="${href}" target="_blank" class="button"> open Vocus</a>
         <div>
      `);


};

const getHTMLForWhatsapp = (details)=>{


    let href= `https://api.whatsapp.com/send?phone=${details.user_details.phone}`;
    return (`
        <div class="whatsapp-link-button-container">
            <a href="${href}" target="_blank" class="button"> Text on Whatsapp</a>
         <div>
      `);


};

const getAllCardIds = ()=>{
    let ids = [];
  $('.funl-card-wrap .js-deal-pipeline').each((index, card)=>{
   const $card = $(card);
   const cardId = $card.attr('data-value');
      ids.push(cardId);
  });

  return ids.slice(0,50);
};

const makeAPICall = (ids, callback)=>{
  const idString = ids.join(",");
  const jqxhr = $.ajax( "https://base.amberstudent.com/leads?api_key=4f2032f4059f0a24196578ff035ad102cb80c27a&only=data,tags,created_at,id,user_details,process_details&methods=process_details,connect_details_freshsales_id,location_name&connect_details_freshsales_ids=" + idString )
  .done(function(res) {
    console.log(res.data.result);
      window.allData = window.allData.concat(res.data.result);
      if(callback){
        callback(res.data.result);
      } else {
        insertHTMLInCards(res.data.result);
      }

  })
  .fail(function(err) {
    console.log(err);
  });

};


const updateTags = (id, tags, callback)=>{
   $.ajax({
            url: "https://base.amberstudent.com/leads/" + id,
            type: 'PUT',
            success:function(res) {
                console.log(res);
                callback();

            },

            fail:function(err){
                console.log(err);
            },
            contentType: 'application/json',
            data: JSON.stringify({
                "api_key": "4f2032f4059f0a24196578ff035ad102cb80c27a",
                "lead": {
                    "tags": tags,
                    "send_event": false,
                }
            }),
        });
};


const bindEventForVocus = (details)=>{
 $('.ember-application').on('click','.email-link-button-container .button',(e)=>{
        e.preventDefault();
        e.stopPropagation();
        let subject = $('.email-compose-group > input[name=subject]').val();
        if(!subject || subject.length < 5 ) {
            subject = "Accommodation near your university | Amberstudent";
        }
        subject = subject.trim().split(" ").join("+");
        /*let body=$($('iframe')[0]).contents().find('body[contenteditable=true]').html();
        if(!body || body.length < 2){
          body="";
        }
        debugger;
        body = body.split(" ").join("+");*/


        const newHref= `https://mail.google.com/mail/u/0/?view=cm&fs=1&to=${details.user_details.email}&su=${subject}&tf=1`;
        $('.email-link-button-container button').attr('href',newHref);
        const win = window.open(newHref, '_blank');
         win.focus();
    });
};
const appendHTMLInDealView = (details)=>{
    // Add vocus
    $('.card-stage-details').append(getHTMLForEmailLink(details));
    $('.card-stage-details').append(getHTMLForWhatsapp(details));

   // bindEventForVocus(details);

    const tagHTML = `
    <div class="outer-tags-container">
    <div class="add-tag-container">
      <span class="add">
        +
      </span>
      <div class="tags-option">
        <div class="tag-option">Vocus removed</div>
        <div class="tag-option">Ready to book</div>
        <div class="tag-option">High priority</div>
        <div class="tag-option">Payment remaining</div>
        <div class="tag-option">Keep watch</div>
        <div class="tag-option">Parents Involved</div>
        <div class="tag-option">A+ lead</div>
        <div class="tag-option">Very demanding</div>
        <div class="tag-option">Passing time</div>
        <div class="tag-option">Half details</div>
        <div class="tag-option">Unimportant-Not responding</div>
        <div class="tag-option">Didn't pick up call</div>
        <div class="tag-option">Opportunity | 2019</div>
        <div class="tag-option">Opportunity | 2018</div>
        <div class="tag-option">Number not present</div>
        <div class="tag-option">Short term</div>
        <div class="tag-option">Chat on whatsapp</div>
        <div class="tag-option">Viewing Scheduled</div>
      </div>
    </div>
  </div>
`;

    let showTagsHTML = '<div class="show-tags">';

    if(!details.tags){ details.tags = [];}
    details.tags.forEach((tag, index)=>{
      const showTagHTML = `
             <div class="show-tag-container">
                 <span class="show-tag-text"> ${tag}</span>
                 <span data-tag="${tag}" class="show-tag-delete"> X</span>
              </div>
       `;

        showTagsHTML = showTagsHTML + showTagHTML;
    });

    showTagsHTML += '</div>';

    let issues= "";
    let issueHtml = "";
    let utmHtml = `<div class="green-tag">${details.data.source.utm_campaign || "  "}${ " | "  + details.data.source.utm_source}</div>`;
    let message_combined_html = "";
    const message_combined = $(`div[data-test-detail-field=Message\\ Combined]`).text().trim().split("___________");

    if(message_combined && message_combined.length > 0){
        message_combined_html = `<div class="message-combined">`;
        message_combined.forEach((message)=>{
              message_combined_html += `<span class="item-pill"> ${message}</span>`;
        });
        message_combined_html += "</div>";
    }

    if(details.process_details && details.process_details.issues){
        issues = details.process_details.issues;
        if(issues && issues.length > 0 ){
      const array = issues.map((issue)=>{ return issue.message;});
      array.forEach((issue)=>{
        const row = `<div class="dark-tag tag">${issue}</div>`;
          issueHtml += row;
      });
    }

    }



    $('.card-stage-details').append(tagHTML);
    $('.card-stage-details').append(showTagsHTML);
    $('.card-stage-details').append(issueHtml);
    $('.card-stage-details').append(utmHtml);
    $('.add-tag-container .add').on("click",()=>{

        const $node = $(".add-tag-container");

        if($node.hasClass('show-options')){
            $node.removeClass("show-options");

        } else {
            $node.addClass("show-options");

        }
    });

    $(".outer-tags-container").on("click",".tag-option",(e)=>{
        var id = details.id;
        var tagText = $(e.target).text();
        let tags = details.tags;
        if(details.tags.indexOf(tagText) == -1 ){
           tags.push(tagText);
        } else {
           tags = details.tags.filter((tag)=>{ return tag != tagText;});
        }
        console.log(tagText);
        updateTags(id,tags,()=>{
             $(".add-tag-container").removeClass("show-options");
              $(".show-tags").append(
                  `<div class="show-tag-container">
                      <span class="show-tag-text"> ${tagText}</span>
                       <span data-tag="${tagText}" class="show-tag-delete"> X</span>
                  </div>`
              );
        });
    });


    $('.show-tags').on('click', '.show-tag-delete', (e)=>{
        const id = details.id;
        var tagText = $(e.target).attr('data-tag');
        let tags = details.tags;
        if(details.tags.indexOf(tagText) > -1 ){
           tags = details.tags.filter((tag)=>{ return tag != tagText;});
        }
        console.log(tagText);
        updateTags(id,tags,()=>{
          let $element = null;
           $('.show-tag-container').each((index, value)=>{
               const text = $(value).find('.show-tag-text').text();
              if(text.trim() == tagText.trim()){
                $element = $(value);
              }
           });
            if($element){$element.remove();};
        });

    });

    $('.card-stage-details').append(message_combined_html);

};

const getDeatilsOfDeal = (callback)=>{
    const url = window.location.href;
    const idSplittedArray = url.split("/");
    const id = idSplittedArray[idSplittedArray.length - 1];
    const jqxhr = $.ajax( "https://base.amberstudent.com/leads?api_key=4f2032f4059f0a24196578ff035ad102cb80c27a&only=data,tags,id,created_at,user_details,process_details&methods=connect_details_freshsales_id,location_name&connect_details_freshsales_ids=" + id )
    .done(function(res) {
        console.log(res.data.result);
        callback(res.data.result[0]);
    })
    .fail(function(err) {
        console.log(err);
    });


};

const addEventForButtonClick = ()=>{
   $('.ember-application').on('click','.funl-card-wrap button',(e)=>{
          const $node = $(e.target).closest('.funl-card-wrap');
          const id = setInterval(()=>{
              let freshSalesdataFetched = false;
              const oldCards = $node.find('.js-deal-pipeline').filter((index,card)=>{
                  if($(card).hasClass('data-fetched')){
                     return true;
                  } else {
                    return false;
                  }
              });
              freshSalesdataFetched = oldCards.length > 0? false: true;
              if(freshSalesdataFetched){
                  clearInterval(id);

                    let ids = [];
                    $node.find('.js-deal-pipeline').each((index, card)=>{
                      const $card = $(card);
                      const cardId = $card.attr('data-value');
                      ids.push(cardId);
                  });

                  const oldIds = window.allData.map((deal)=>{ return  "" + deal.connect_details_freshsales_id;});
                  let idsToSend = ids.filter((id)=>{

                    if(oldIds.indexOf(id) > -1){
                        return false;
                    } else {
                       return true;
                    }
                  });


                  makeAPICall(idsToSend, (data)=>{
                      $node.find('.js-deal-pipeline').each((index, card)=>{
                          const $card = $(card);
                          const cardId = $card.attr('data-value');

                          const deal = window.allData.filter((deal)=>{ return deal.connect_details_freshsales_id == cardId;})[0];
                          const details = getAllDetails(deal);

                          if(details){
                              if(!$card.hasClass('data-fetched')){
                                 $card.find('.funl-card').append(getHTMLForDealPage(details,"small"));
                                 $card.addClass('data-fetched');
                              }

                          }


                      });
                  });
              }
          },1000);
   });
};

const checkForHTMLLoad = (view)=>{
    let time = 1000;
    /*if(view == "funnelView"){
     time = 5000;
    }*/
  const id = setInterval(()=>{
   if($(".ember-application").html().length > 0){
      clearInterval(id);
       if(view == "dealView" ){
           const details = getDeatilsOfDeal(appendHTMLInDealView);
       }

       if(view == "funnelView" ){

          const ids = getAllCardIds();
          makeAPICall(ids);
          addEventForButtonClick();

       }
    }
    console.log("waiting for html load ....");
  },time);

    //hide new button
    $('.navbar-personal-item button').hide();
    // hide delete option
    $('.btn.btn-default.dropdown-toggle').hide();
};

//https://stackoverflow.com/questions/18259301/how-to-run-a-function-when-any-xmlhttprequest-is-complete

const runBeforePageLoad = ()=>{


    let xhrRequests = 0;
    let oldXHRCount = 0;
    let timeId;

    var oldOpen = XMLHttpRequest.prototype.open;

    function onStateChange(event) {
        xhrRequests++;
        timeId = setInterval(()=>{

             if(xhrRequests > oldXHRCount){
                 oldXHRCount = xhrRequests;

             }

             if(xhrRequests > 0 && (xhrRequests <= oldXHRCount)){
               console.log("Fire Last");
                 clearInterval(timeId);
                 startInsertingHTML();
                 console.log(xhrRequests);
                 oldXHRCount = 0;
                 xhrRequests = 0;
             }
         },3000);
    }

    XMLHttpRequest.prototype.open = function() {
        oldOpen.apply(this, arguments);
        // when an XHR object is opened, add a listener for its readystatechange events
        this.addEventListener("load", onStateChange);
    };
};


let previousUrl = "";

const startInsertingHTML = ()=>{

    const url = window.location.href;
    if(url == previousUrl){
        return;
    }
    previousUrl = url;
    if(url.indexOf("view") == -1 ){
      $('head').append(styleString);
      checkForHTMLLoad("dealView");
    } else if(url.indexOf("deals/view") > -1 && url.indexOf("funnel") > -1){
      $('head').append(styleString);
      checkForHTMLLoad("funnelView");
    }
};


$(document).ready(()=>{

    runBeforePageLoad();

});