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

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

<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 Branch</h4>

      <select class="form-control" id="branch-select">
        <option value="0">Choose...</option>
        @foreach($branches as $branch)
        <option value="{{$branch->id}}">{{ $branch->short_name }}</option>
        @endforeach
      </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() {
    let usersPerGroup = [];
    $("#branch-select").change(function() {
      usersPerGroup.length = 0;
      $(".clients_container").empty();
      $(".clients_container").hide();
      let branch_account_account_owner_id = $(this).val() == 3 ? 2 : $(this).val();
      fetchClientsBasedOnBranch(branch_account_account_owner_id);
    })

    function fetchClientsBasedOnBranch(branch_account_account_owner_id) {
      fetch('/sms/clients-by-branch/' + branch_account_account_owner_id)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          displayClientsByBranch(data);
        })
        .catch(error => {
          console.error('There was a problem with the fetch operation:', error);
        });
    }

    function displayClientsByBranch(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 renderListNames(clients) {
      if (clients.length > 0) {
        $("#btn_sendText").prop("disabled", false);
      }
      clients.sort(compareName);

      for (let j = 0; j < clients.length; j++) {
        $(".clients_container").append(`<div 
                                            data-id=${clients[j].id}
                                            data-name="${clients[j]['name']}"
                                            data-contact="${clients[j]['contact_person']}"
                                            data-phone="${clients[j]['phone']}">
                                            ${clients[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 = clients.filter(item => {
          return item.id != idRemoved;
        })
        clients = [...usersPerGroupFiltered];

        if (clients.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.trim() != "") {
        let customers = getRemainingCustomers();
        postMessageSender(area_text, url_pic, customers, decodedCampaignUrl);
      } else {
        let alert_text = "You didn't write a message";
        swal(alert_text, {
          icon: "info",
        });
      }

    });

    function getRemainingCustomers() {
      let result = [];
      $(".clients_container > div").each(function() {
        let obj = {};
        obj.contact_person = $(this).attr("data-contact");
        obj.id = $(this).attr("data-id");
        obj.name = $(this).attr("data-name");
        obj.phone = $(this).attr("data-phone");
        result.push(obj);
      })
      return result;
    }

    // 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
      };

      swal('', 'Are you sure you want to send all these SMSs?', 'info').then(function(ok) {
        if (ok) {
          $.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