@extends('modules.head') @section('contenido')

<h2 class="sendSMS_title">Send SMS</h2>

<div class="box boxes">
  <h3 class="sendSMS_subtitle">Send Custom Text Messages:</h3>
  <label>[company] = converts to Company Name</label><br>
  <label>[Emp] = converts to Employee Name</label>
</div>

<form class="box boxes">
  <h4 class="sendSMS_subtitle" for="messageAreaFormControlTextarea1">Custom Text Message:</h4>
  <div class="form-group">
    <div class="form-group">
      <textarea class="form-control" id="messageAreaFormControlTextarea1" rows="3" placeholder="I'm about ready to be sent..."></textarea>
    </div>

    <h4 class="sendSMS_subtitle" for="basic-url">Image URL:</h4>
    <div class="input-group mb-3">
      <input type="text" class="form-control" id="basic-url-pic" aria-describedby="basic-addon3" placeholder="https://site.com/img.jpg">
    </div><br>

    <h4 class="sendSMS_subtitle" for="campaign-url">Campaign URL:</h4>
    <div class="input-group mb-3">
      <input type="text" class="form-control" id="campaign-url" aria-describedby="basic-addon3" type="url" placeholder="https://wwww.mycampaign.com">
    </div><br>

    <div class="form-group">
      <h4 class="sendSMS_subtitle" for="clientGroupFormControlSelect1">Select Group</h4>
      <select class="form-control" id="clientGroupFormControlSelect1">
        <option value="0">Choose...</option>
        @foreach($priceLists as $priceList)
        <option value="{{$priceList->id}}">{{ $priceList->list_name }}</option>
        @endforeach
        <option value="employee">IGT Employees</option>
        <option value="open">Open</option>
        <option value="lead">Leads</option>
      </select>
    </div>

    <br>
    <div id="div_type_customer_name" style="display:none;">
      <input name='input-custom-dropdown' placeholder='type customer name' value='' style="display:none">
    </div>

    <br>
    <div class="form-group clients_container" style="display:none">
    </div>

    <p class="lead">
      <button class="btn pull-left btn-Aux" id="btn_sendText" role="button" disabled>Send Message</button>
    </p>

    <h1></h1>


</form>


<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // global vars
    let usersPerGroup = [];
    $('#clientGroupFormControlSelect1').change(function(e) {
      usersPerGroup.length = 0;
      //removing all inside this div
      $(".clients_container").empty();
      //hiding inputs
      $("#div_type_customer_name").hide();
      $('input[name="input-custom-dropdown"]').hide();
      $(".clients_container").hide();
      let selectedVal = e.target.value;
      switch (selectedVal) {
        case "0":
          $("#btn_sendText").prop("disabled", true);
          break;
        case "open":
          whenOpenSelected()
          break;
        case "employee":
          whenEmployeeSelected();
          break;
        case "lead":
          whenPendingAccounts();
          break;
        default:
          whenAnyPriceListSelected(selectedVal)
      }
    })

    function whenOpenSelected() {
      // getting customers and tagifying accordingly
      $.ajax({
        url: "/get-customersList",
        success: function(data) {
          let customersNames = [];
          let customersData = [];
          $("#div_type_customer_name").show();
          $('input[name="input-custom-dropdown"]').show();

          for (let i = 0; i < data.length; i++) {
            let noCommaCustomerName = dontTagTheComma(data[i].first_name);
            customersNames.push({
              value: noCommaCustomerName,
              id: data[i].id
            });
            customersData.push({
              id: data[i].id,
              name: data[i].first_name,
              phone: isItProperNumber(formatNumber(data[i].phone)) ? formatNumber(data[i].phone) : `${data[i].phone} wrong format`,
              contact_person: data[i].bo_contact_person
            });
          }


          // Tagifying Open Select Value
          let input = document.querySelector('input[name="input-custom-dropdown"]'),
            // init Tagify script on the above inputs
            tagify = new Tagify(input, {
              whitelist: customersNames,
              // maxTags: 10,
              dropdown: {
                maxItems: 20,
                classname: "tags-look",
                enabled: 0,
                closeOnSelect: false
              }
            })
          $(".tagify").width(300);
          tagify.on('add', onAddTag).on('remove', onRemoveTag);

          // tag added callback
          function onAddTag(e) {
            let idAdded = e.detail.data.id;
            usersPerGroup.push(getCustomerById(idAdded, customersData));
            if (usersPerGroup.length > 0) {
              $("#btn_sendText").prop("disabled", false);
            }
          }
          // tag removed callback
          function onRemoveTag(e) {
            usersPerGroup.length = 0;
            let remainedValuesAfterDeleted = tagify.value;
            for (let i = 0; i < remainedValuesAfterDeleted.length; i++) {
              let idRemained = remainedValuesAfterDeleted[i].id;
              usersPerGroup.push(getCustomerById(idRemained, customersData));
            }
            if (usersPerGroup.length < 1) {
              $("#btn_sendText").prop("disabled", true);
            }
          }
          tagify.removeAllTags();
        }
      })
    }

    function whenEmployeeSelected() {
      $.ajax({
        url: "/get-employees",
        success: function(data) {
          $(".clients_container").show();
          for (let i = 0; i < data.length; i++) {
            usersPerGroup.push({
              id: data[i].id,
              name: data[i].first_name,
              phone: isItProperNumber(formatNumber(data[i].phone)) ? formatNumber(data[i].phone) : `${data[i].phone} wrong format`,
              contact_person: data[i].bo_contact_person
            });
          }
          renderListNames(usersPerGroup)
        }
      })
    }

    function whenPendingAccounts() {
      $(".clients_container").show();
      $.ajax({
        url: "/get-leads",
        success: function(data) {
          for (let i = 0; i < data.length; i++) {
            usersPerGroup.push({
              id: data[i].id + "/pending-account",
              name: data[i].first_name,
              phone: isItProperNumber(formatNumber(data[i].cell_phone)) ?
                formatNumber(data[i].cell_phone) : `${data[i].cell_phone} wrong format`,
              contact_person: data[i].bo_contact_person,
            });
          }
          renderListNames(usersPerGroup)
        }
      })
    }

    function whenAnyPriceListSelected(priceList_id) {
      $.ajax({
        url: "/get-priceList",
        success: function(data) {
          $(".clients_container").show();
          for (let i = 0; i < data.length; i++) {
            if (data[i].bo_price_list_id != null) {
              if (data[i].bo_price_list_id == priceList_id) {
                usersPerGroup.push({
                  id: data[i].id,
                  name: data[i].first_name,
                  phone: isItProperNumber(formatNumber(data[i].phone)) ? formatNumber(data[i].phone) : `${data[i].phone} wrong format`,
                  contact_person: data[i].bo_contact_person
                });
              }
            }
          }
          renderListNames(usersPerGroup)
        }
      })
    }

    function renderListNames(array) {
      if (array.length > 0) {
        $("#btn_sendText").prop("disabled", false);
      }
      array.sort(compareName);
      //creating divs per Price List and rendering them
      for (let j = 0; j < array.length; j++) {
        $(".clients_container")
          .append(`<div data-id=${array[j].id}>
                      ${array[j].name}
                      <i class="fa fa-times" aria-hidden="true"></i>
                      </div>`);
      }
      //deleting user first name from list and updating the array of objects
      $('.clients_container i').click(function(e) {
        let idRemoved = 0;
        let divToRemove;
        idRemoved = e.target.parentElement.getAttribute('data-id');
        divToRemove = e.target.parentNode;
        divToRemove.remove();

        let usersPerGroupFiltered = array.filter(item => {
          return item.id != idRemoved;
        })
        array = [...usersPerGroupFiltered];

        if (array.length < 1) {
          $("#btn_sendText").prop("disabled", true);
        }
      })
    }
    //getting sms message and call the post to server method;
    $("#btn_sendText").click(function(e) {
      e.preventDefault();
      let area_text = $("#messageAreaFormControlTextarea1").val();
      let url_pic = $("#basic-url-pic").val();

      if (url_pic) {
        if (!isValidImg(url_pic)) {
          let text = "Image extension should be 'jpeg', 'jpg', 'gif' or 'png'";
          swal(text, {
            icon: "info"
          });
          return;
        }
      }

      let baseUrl = $("#campaign-url").val();
      let encodedCampaignUrl = createAndEncodeUrl(baseUrl, "SMSTool", "Textmsg");
      let decodedCampaignUrl = baseUrl ? decodeThisUrl(encodedCampaignUrl) : "";

      if (area_text != "") {
        let arrayOfUniques = removeDuplicates(usersPerGroup);
        replaceIfNeeded(arrayOfUniques, area_text, "[company]", "[Emp]")
        postMessageSender(area_text, url_pic, arrayOfUniques, decodedCampaignUrl);
      } else {
        let alert_text = "You didn't write a message";
        swal(alert_text, {
          icon: "info",
        });
      }

    });

    // sends obj message to server
    function postMessageSender(message, picUrl, targetUsers, url_campaign) {

      let data = {
        "message": message,
        "pic_url": picUrl,
        "recipients": targetUsers,
        "campaign_url": url_campaign
      };

      $.ajax({
        url: 'twilio/send-text',
        type: "POST",
        contentType: "application/json",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
          "Content-Type": "application/json",
        },
        data: JSON.stringify(data),
        beforeSend: function() {
          swal({
            title: "Please wait...",
            text: "We're trying to send your message",
            icon: "info",
            buttons: false,
          })

          $("#btn_sendText").prop("disabled", true);
        },
        success: function(r) {
          let failedNumbersCounter = 0;
          let warningMess = [];
          for (let i = 0; i < r.length; i++) {
            if (!r[i].success) {
              failedNumbersCounter += 1;
              //warningMess.push(r[i].message);
              warningMess.push(r[i].company_name);
            }
          }

          if (failedNumbersCounter) {
            let warningTitle = failedNumbersCounter > 1 ? `${failedNumbersCounter} messages failed` :
              `${failedNumbersCounter} message failed`;
            let companyTitle = "Message could not be sent to:";
            let phoneList = '';


            for (let i = 0; i < warningMess.length; i++)
              // phoneList += getPhoneInErrorMessage(warningMess[i]) + '\n';
              phoneList += warningMess[i] + '\n' + '\n';
            swal(companyTitle, phoneList, {
              icon: "info",
              className: "whole-modal",
            }).then(() => {
              location.reload();
            })

            $(".whole-modal .swal-text").css({
              "fontSize": "14px",
              "padding": "15px 15px",
              "color": "#333"
            });

          } else {
            let successTitle = `Success!`;
            let successMess = `All messages were sent.`;
            swal(successTitle, successMess, {
              icon: "success",
            }).then(() => {
              resetInputValues();
              location.reload();
            })
          }
        },
        complete: function() {

          $("#btn_sendText").prop("disabled", false);
        },
        error: function(e) {
          let errorTitle = "One or more messages failed";
          swal(errorTitle, {
            icon: "warning",
          }).then(() => {
            resetInputValues();
            location.reload();
          })
        },
      });
    }

    function resetInputValues() {
      $("#clientGroupFormControlSelect1").val("0");
      $("#clientGroupFormControlSelect1").change();
      $("#basic-url-pic").val("");
      $("#campaign-url").val("");
    }
    // formatting phone number
    function normalizePhoneNumber(phone) {
      //normalize string and remove all unnecessary characters
      phone = phone.replace(/[^\d]/g, "");
      //check if number length equals to 10
      if (phone.length == 10) {
        //reformat and return phone number
        return phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
      }
      return null;
    }
    // sorting by name
    function compareName(a, b) {
      // converting to uppercase to have case-insensitive comparison
      const name1 = a.name.toUpperCase();
      const name2 = b.name.toUpperCase();
      let comparison = 0;
      if (name1 > name2) {
        comparison = 1;
      } else if (name1 < name2) {
        comparison = -1;
      }
      return comparison;
    }
    //checking id against base customer data array
    function getCustomerById(id, array) {
      function getId(thing) {
        return thing.id == id;
      }
      let safeObj = {
        id: "",
        name: "",
        phone: ""
      }
      let result = array.find(getId) != undefined ? array.find(getId) : safeObj;
      return result;
    }
    //replacing comma in customers names for tags
    function dontTagTheComma(str) {
      let result = str;
      if (str.includes(",")) {
        result = str.replace(/,/g, "");
      }
      return result;
    }

    function removeDuplicates(arr) {
      // Declare a new array
      let newArray = [];
      // Declare an empty object
      let uniqueObject = {};
      // Loop for the array elements
      for (let i in arr) {
        // Extract the id
        objId = arr[i]['id'];
        // Use the id as the index
        uniqueObject[objId] = arr[i];
      }
      // Loop to push unique object into array
      for (i in uniqueObject) {
        newArray.push(uniqueObject[i]);
      }
      return newArray;
    }
    // checks wether string contains some terms and replace them accordingly
    function replaceIfNeeded(someArr, text, str1, str2) {

      if (text.includes(str1) && text.includes(str2)) {
        for (let i = 0; i < someArr.length; i++) {
          someArr[i].customText = text.replace(str1, someArr[i].name).replace(str2, someArr[i].contact_person);
        }

      } else if (text.includes(str1) && !text.includes(str2)) {
        for (let i = 0; i < someArr.length; i++) {
          someArr[i].customText = text.replace(str1, someArr[i].name);
        }

      } else if (!text.includes(str1) && text.includes(str2)) {
        for (let i = 0; i < someArr.length; i++) {
          someArr[i].customText = text.replace(str2, someArr[i].contact_person);
        }

      }
      return someArr;
    }
    //replaces "-" if exists
    function formatNumber(phone) {
      let formattedNumber = phone.replace(/-/g, "");
      return formattedNumber;
    }
    //checks (boolean) wether it has 10 digits and no other characters
    function isItProperNumber(formattedPhone) {
      return /^\d{10}$/.test(formattedPhone);
    }
    // img url validation
    function isValidImg(ctrl) {
      const pattern = new RegExp('[^\\s]+(.*?)\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$');
      if (ctrl.match(pattern)) {
        return true;
      } else {
        return false;
      }
    }
    // extracting important part in the error message
    function getPhoneInErrorMessage(errMess) {
      let initialPos = errMess.indexOf("number") + 6;
      let finalPos = initialPos + 11;
      return errMess.slice(initialPos, finalPos);
    }
    // working with url section
    function createAndEncodeUrl(baseURL, utmMedium, utmCampaign) {
      let encURI = encodeURI(`${baseURL}?utm_medium=${utmMedium}&utm_campaign=${utmCampaign}`);
      return encURI;
    }

    function decodeThisUrl(url) {
      return decodeURI(url);
    }

    function getParamInUrl(someurl, param) {
      let url = new URL(someurl);
      return url.searchParams.get(param);
    }
  });
</script>
@endsection