@php
use App\Helpers\Helper;
@endphp
@extends('layouts.master')
@section('title','Emails')

@section('css')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/katex.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/editor.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/app-email.css')}}" />
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="p-15-20">
      <div class="card-body p-0">
        <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
          <ol class="breadcrumb mb-0 me-1">
            <li class="breadcrumb-item">
              <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">
              Emails
            </li>

          </ol>
          @if(LaravelGmail::check())
          <a href="{{ url('admin/oauth/gmail/logout') }}" class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 addticket-btn"><i class="ti ti-logout me-2 ti-sm"></i>Log Out</a>
          @else
          <!-- <a href="{{ url('admin/oauth/gmail') }}" class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 addticket-btn"><i class="tf-icons ti ti-brand-google ti-xs me-1 "></i> Sign In With Gmail</a> -->
          @endif

        </nav>
      </div>

    </div>
  </div>
  @if(LaravelGmail::check())
  <div class="card mt-4">
    <div class="card-body text-center">
      @include('admin.errors.error')
      <!--      Please sign in with gmail-->
      Under Development
    </div>
  </div>
  @else
  <div class="card mt-4">
    <div class="card-body text-center">
      @include('admin.errors.error')
      <!--      Please sign in with gmail-->
      Under Development
    </div>
  </div>
  @endif

</div>
</div>
@include('admin.confirmalert')
@endsection

@section('scripts')
<script src="{{asset('assets/vendor/libs/quill/katex.js')}}"></script>
<script src="{{asset('assets/vendor/libs/quill/quill.js')}}"></script>
<script src="{{asset('assets/vendor/libs/block-ui/block-ui.js')}}"></script>
<script src="{{asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js')}}"></script>
<script src="{{asset('assets/js/app-email.js')}}"></script>
<script src="{{asset('assets/js/ui-popover.js')}}"></script>
<script>
  $(document).ready(function() {
    const isLoginWithGmail = "{{LaravelGmail::check()}}"
    if (isLoginWithGmail) {



      /* Theme code and logic start */
      const emailFilterByFolders = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
        appEmailSidebar = document.querySelector('.app-email-sidebar'),
        appOverlay = document.querySelector('.app-overlay')

      emailFilterByFolders.forEach(emailFilterByFolder => {
        emailFilterByFolder.addEventListener('click', e => {
          let currentTarget = e.currentTarget,
            currentTargetData = currentTarget.getAttribute('data-target');

          appEmailSidebar.classList.remove('show');
          appOverlay.classList.remove('show');

          // Remove active class from each folder filters
          Helpers._removeClass('active', emailFilterByFolders);
          // Add active class to selected folder filters
          currentTarget.classList.add('active');
        });
      });
      /* Theme js code and logic end */

      var page = 1;
      var item_per_page = 10;


      $('#sent_box_button').on('click', function() {
        $('#search_email').val('');
        $('#email_pagination').data('type', 'sentbox')
        page = 1;
        fetchSentBoxData(page, true)
      })

      $('#inbox_button').on('click', function() {
        $('#search_email').val('');
        $('#email_pagination').data('type', 'inbox')
        page = 1
        fetchData(page, true);

      })

      $('#next_page').on('click', function() {
        $('#next_page').attr('disabled', true);
        page = page + 1
        if ($(this).parent().data('type') == 'inbox') {
          fetchData(page, true);
        } else if ($(this).parent().data('type') == 'sentbox') {
          fetchSentBoxData(page, true);
        }
      })

      $('#previous_page').on('click', function() {
        $('#previous_page').attr('disabled', true);
        page = page == 1 ? 1 : page - 1;
        fetchData(page, true);
      })


      fetchData(page, true)

      $(document).on('click', '.email-list-item', function() {
        var id = $(this).data('id');
        $(this).addClass('email-marked-read');
        let liElement = $(this).find('#email_read_unread');
        liElement.removeClass('email-unread');
        liElement.addClass('email-read');
        liElement.find('i').addClass('ti-mail')
        liElement.find('i').removeClass('ti-mail-opened')
        getEmailDetail(id)

      })

      // sent box email request

      function base64ToArrayBuffer(base64) {
        var binaryString = window.atob(base64);
        var binaryLen = binaryString.length;
        var bytes = new Uint8Array(binaryLen);
        for (var i = 0; i < binaryLen; i++) {
          var ascii = binaryString.charCodeAt(i);
          bytes[i] = ascii;
        }
        return bytes;
      }


      function removeCharFromStartAndEnd(str, char) {
        if (str.startsWith(char)) {
          str = str.slice(1);
        }
        if (str.endsWith(char)) {
          str = str.slice(0, -1);
        }
        return str;
      }

      function getFromAndToEmailNamesCombined(headers) {

        const fromEmail = getHeader(headers, 'To');
        const ccEmail = getHeader(headers, 'Cc');
        let fromEmailArray = fromEmail.split(',')
        let ccEmailArray = ccEmail.split(',')
        let filterFromEmail = [];
        fromEmailArray.forEach(function(email, index) {
          if (email.includes("<")) {
            filterFromEmail[index] = getTextBeforeCharacter(' ', email);
          } else {
            filterFromEmail[index] = getTextBeforeCharacter('@', email);
          }
        })

        filterFromEmail = [...new Set(filterFromEmail)];

        let filterCcEmail = [];
        ccEmailArray.forEach(function(email, index) {
          if (email.includes("<")) {
            filterCcEmail[index] = getTextBeforeCharacter(' ', email);
          }
          filterCcEmail[index] = getTextBeforeCharacter('@', email);
        })

        filterCcEmail = [...new Set(filterCcEmail)];


        const combinedArray = [...filterFromEmail, ...filterCcEmail];
        let value = combinedArray.join(',')
        if (value.endsWith(",")) {
          value = value.slice(0, -1); // Removes the last character (comma)
        }
        value = value.length > 100 ? value.substr(0, 97) + '...' : value;
        return value;
      }

      function getTextBeforeCharacter(findCharacter, str) {
        var atIndex = str.indexOf(findCharacter);
        if (atIndex !== -1) {
          return str.substring(0, atIndex);
        }
        return "";
      }



      function getEmailDetail(id) {
        let type = $('#email_pagination').data('type')
        addLoader()
        var url = "{{route('admin.email.detail')}}"
        $.ajax({
          url: url,
          method: 'get',
          data: {
            id: id,
            type
          },
          dataType: 'json',
          success: function(response) {
            $('.email-card-prev').remove();
            $('#detail_view_last_body').html('');
            let attachmenthtml = ''
            let htmlbody = ''
            let lastHtml = ''
            let messages = response.data.email.messages;
            if (response.data.email.messages.length > 1) {
              $('.email-earlier-msgs').parents().find('.email-card-last')
              $('#detail_view_last_card').removeClass('hide-pseudo');
              $('.email-earlier-msgs').text(`${response.data.email.messages.length - 1} Earlier Message`)
            } else {
              $('#detail_view_last_card').addClass('hide-pseudo');
              $('.email-earlier-msgs').text('');
            }

            for (let i = 0; i < response.data.email.messages.length; i++) {

              const element = response.data.email.messages[i];

              let attachmentNames = '';

              if (element.payload.mimeType == "multipart/mixed") {
                attachmentNames += '<hr> <p class="email-attachment-title mb-2">Attachments</p>';
                for (let index1 = 0; index1 < element.payload.parts.length; index1++) {
                  const part = element.payload.parts[index1];
                  if (part.filename) {
                    const fileName = part.filename;
                    attachmentNames += `<div  class="cursor-pointer mb-2" data-mimeType=${part.mimeType} data-messageid=${element.id} data-attachmentid=${part.body.attachmentId} id="download_attachment"><i class="ti ti-file"></i><span class="align-middle ms-1"> <a href="javascripvt:void(0)">${fileName}</a> </span></div>`;
                  }
                }

              }

              $('#detail_view_attachment_icon').addClass('d-none');


              let FromAndToEmailNamesCombined = getFromAndToEmailNamesCombined(element.payload.headers);
              let mailFromName = getHeader(element.payload.headers, 'From');
              let mailfromEmail = getHeader(element.payload.headers, 'Return-Path');

              let mailToNew = getHeader(element.payload.headers, 'To');
              let mailTo = mailToNew.split(',').join('<br/>');

              let date = getHeader(element.payload.headers, 'Date');

              const convertedDate = moment.unix(element.internalDate / 1000).tz(tz).format('ddd, DD MMM YYYY hh:mm A')

              let subject = getHeader(element.payload.headers, 'Subject');

              const newCc = getHeadersfromphpresponse(element.payload.headers, 'Cc');
              let cc = newCc.split(',').join('<br/>');

              let otherhtml = `
              <div class="card email-card-prev mx-sm-4 mx-3 mt-4" >
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                    <div class="d-flex align-items-center mb-sm-0 mb-3">
                      <div class="flex-grow-1 ms-1 position-relative">
                        <h6 class="m-0">${mailFromName}</h6>
                        <small class="text-muted">${FromAndToEmailNamesCombined}</small>
                        <span>
                          <i class="fa fa-light fa-caret-down cursor-pointer" id="popover-btn"></i>
                        </span>
                        <div id="popverbox" class="d-none popover-box">
                        <div class="d-flex text-break mb-1">
                            <span class="fw-bold flex-shrink-0 title-text">From:</span> 
                            <span>${mailFromName} ${mailfromEmail}</span>
                            </div>
                            <div class="d-flex text-break mb-1">
                            <span class="fw-bold flex-shrink-0  title-text">To:</span> 
                            <div>
                            <span>${mailTo}</span>
                            </div>
                            </div>
                            <div class="d-flex text-break mb-1">
                            ${cc ? '<span class="fw-bold flex-shrink-0  title-text">cc:</span>' + cc : ''}
                            </div>
                            <div class="d-flex text-break mb-1">
                            <span class="fw-bold flex-shrink-0  title-text">Date:</span> 
                            <span>${convertedDate} </span>
                            </div>
                            <div class="d-flex text-break mb-1">
                            <span class="fw-bold flex-shrink-0  title-text">Subject:</span>
                            <span>${subject}</span>
                            </div>
                        </div>
                        
                        <div class="popover-overlay position-fixed start-0 end-0 top-0 bottom-0"></div>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <p class="mb-0 me-3 text-muted">${moment.tz(moment(+element.internalDate),tz).format("DD/MM/YYYY h:mm A")}</p>
                      ${element.payload.mimeType == "multipart/mixed" ? '<i class="ti ti-paperclip cursor-pointer me-2" title="Attachment"></i>' : ''}
                      <div class="dropdown me-3">
                        <i class="ti ti-dots-vertical cursor-pointer" id="dropdownEmail" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        </i>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEmail">
                          <a class="dropdown-item scroll-to-reply" data-messageid=${element.id} id="reply_email_toggalbar" href="javascript:void(0)">
                            <i class="ti ti-corner-up-left me-1"></i>
                            <span class="align-middle"><span class="spinner-border me-1 loader-btn d-none" role="status" aria-hidden="true"></span> Reply</span>
                          </a>

                          <a class="dropdown-item scroll-to-reply" href="javascript:void(0)" id="reply_all_email_toggalbar" data-id=${element.id} data-messageid=${element.id}>
                            <i class="ti ti-corner-up-left me-1"></i>
                            <span class="align-middle"><span class="spinner-border me-1 loader-btn d-none" role="status" aria-hidden="true"></span> Reply all</span>
                          </a>

                          <a class="dropdown-item" id="forawrd_email_toggalbar" data-messageid=${element.id} href="javascript:void(0)">
                            <i class="ti ti-corner-up-right me-1"></i>
                            <span class="align-middle">Forward</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-body" >${getBody(element.payload)} <div id="attachment_section">${attachmentNames}</div> </div>
              </div>
            `;

              /* forward email code */


              if (response.data.email.messages.length - 1 == i) {
                $('#reply_email_toggalbar_last').data('id', element.id);
                $('#reply_email_toggalbar_last').data('messageid', element.id);

                $('#reply_all_email_toggalbar_last').data('id', element.id);
                $('#reply_all_email_toggalbar_last').data('messageid', element.id);

                $('#forawrd_email_last_toggalbar').data('id', element.id);
                $('#forawrd_email_last_toggalbar').data('messageid', element.id);

                lastHtml = getBody(element.payload) + `<div id="attachment_section">${attachmentNames}</div>`;
                continue;
              }
              htmlbody += otherhtml;
            }
            // console.log('htmlbody',htmlbody);
            // loop ends here

            $('#detail_view_last_body').html(lastHtml);
            $('#detail_view_previous_emails').after(htmlbody);
            let inlineImages = $('.app-email-view-content').find('img');
            let attachments = response.data.attachment
            // console.log('inlineImg', inlineImages);
            if (inlineImages.length) {
              for (let i = 0; i < inlineImages.length; i++) {
                let cid = inlineImages[i].getAttribute('src');
                inlineImages[i].dataset.cid = cid;
                // console.log('cid', cid);
                for (let j = 0; j < attachments.length; j++) {
                  const originalString = attachments[j].headerDetails['Content-ID'];
                  let trimmedLetter = '';
                  if (originalString) {
                    trimmedLetter = removeCharFromStartAndEnd(originalString, '<');
                    trimmedLetter = removeCharFromStartAndEnd(trimmedLetter, '>');
                  }
                  if (cid == 'cid:' + attachments[j].headerDetails['X-Attachment-Id']) {
                    // console.log('heree');
                    inlineImages[i].src = "data:" + "image/jpeg" + ";" + "base64" + "," + response.data.attachmentdata[j].replace(/-/g, `+`).replace(/_/g, `/`);
                  } else if (cid == 'cid:' + trimmedLetter) {
                    inlineImages[i].src = "data:" + "image/jpeg" + ";" + "base64" + "," + response.data.attachmentdata[j].replace(/-/g, `+`).replace(/_/g, `/`);
                  }
                }
              }
            }


            const emailDetailCombineEmailNames = response.data.to_emails_combined.length > 100 ? response.data.to_emails_combined.substr(0, 97) + '...' : response.data.to_emails_combined;
            //value.length > 100 ? value.substr(0,97) + '...' : value;
            const type = $('#email_pagination').data('type');
            $('#detail_view_from_name').text(response.data.from_name)
            $('#detail_view_from_email').text(emailDetailCombineEmailNames)
            $('#detail_view_date').text(response.data.date)
            $('#detail_view_subject').text(response.data.subject)
            // var html = $.parseHTML(response.data.body)
            // $('#detail_view_last_body').html(response.data.body);
            $('#app-email-view').addClass('show');
            let replytxt = `Reply To ${response.data.reply_to}`
            // $('#detail_view_reply_to_text').text(replytxt);
            $('#app-email-view').data('id', response.data.id);
            $('#app-email-view').data('threadid', response.data.thread_id);
            $('#send_email_reply').data('id', response.data.reply_to_id);
            $('#send_email_replyall').data('id', response.data.reply_to_id);
            const detailViewpopoverIcon = $('#detail_view_popover_span').find('i')
            if (response.data.has_attachment) {
              $('#detail_view_attachment_icon').removeClass('d-none');
            }
            // detailViewpopoverIcon.attr('id', 'popover-btn');
            // detailViewpopoverIcon.attr('data-html', true);
            // detailViewpopoverIcon.attr('data-bs-toggle', 'popover');
            // detailViewpopoverIcon.attr('data-bs-placement', 'right');
            // detailViewpopoverIcon.attr('data-container', 'body');
            // detailViewpopoverIcon.attr('style', 'width:500px;');
            // style=""
            const mailTo = response.data.to_email.join('<br/>');

            const date = getHeadersfromphpresponse1(response.data.headers, 'Date');
            const originalDate = moment(date, "ddd, DD MMM YYYY hh:mm A");
            const timeZone = '+' + date.substring(date.indexOf('+') + 1)
            //const convertedDate = originalDate.tz(timeZone).format('ddd, DD MMM YYYY hh:mm A');
            const convertedDate = $('#detail_view_date').text();
            const newCc = getHeadersfromphpresponse1(response.data.headers, 'Cc');
            let cc = newCc.split(',').join('<br/>');
            const popoverContent = `
            <div class="d-flex text-break mb-1">
            <span class="fw-bold flex-shrink-0 title-text">From:</span> 
            <span>${response.data.from_name} ${response.data.from_email}</span>
            </div>
            <div class="d-flex text-break mb-1">
            <span class="fw-bold flex-shrink-0  title-text">To:</span> 
            <div>
            <span>${mailTo}</span>
            </div>
            </div>
            
            <div class="d-flex text-break mb-1">
            ${cc ? '<span class="fw-bold flex-shrink-0  title-text">cc:</span> <span>' + cc : '</span>'}
            </div>
            <div class="d-flex text-break mb-1">
            <span class="fw-bold flex-shrink-0  title-text">Date:</span> 
            <span>${convertedDate} </span>
            </div>
            <div class="d-flex text-break mb-1">
            <span class="fw-bold flex-shrink-0  title-text">Subject:</span>
            <span>${response.data.subject} </span>
            </div>
            `

            /* make all a tags target_blank */
            const anchorTags = $('#detail_view_last_body').find('a')
            anchorTags.each(function() {
              const targetAttribute = $(this).attr('target')
              if (typeof attr == 'undefined') {
                $(this).attr('target', '_blank');
              }
            })
            const popoverParent = $('#detail_view_popover_span').parent('div').find('#popverbox');
            popoverParent.addClass('d-none');
            // console.log('popoverContent1',$('#detail_view_popover_span').find('#popverbox'));
            popoverParent.html(popoverContent);
            // detailViewpopoverIcon.attr('data-bs-content', popoverContent);

            // scroll to the top of the div
            $('.app-email-view-content').animate({
              scrollTop: 0
            }, 0);

            let count = response.data.unread_thread_count;
            if (count) {
              count = `(${count})`
            }
            $('#unread_email_count').text(count)
            $('.email-refresh').click();

          },

          error: function(data) {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
          complete: function() {
            removeLoader();
          }

        })
      }

      $(document).on('click', '#send_forward_button', function(e) {
        $('.loader-btn').removeClass('d-none')
        const to = $('#forward_email_to').val();
        const cc = $('#forward_email_cc').val();
        const bcc = $('#forward_email_bcc').val();
        $('#forward_email_previous_mail_content').find('#attachment_section').remove();
        const inlineImages = $('#forward_email_previous_mail_content').find('img');
        inlineImages.each(function() {
          const cid = $(this).data('cid');
          $(this).attr('src', cid);
        })
        // console.log('object')
        const oldHtml = $('#forward_email_previous_mail_content').html();
        const html = $('.email-forward-editor .ql-editor').html();
        const finalHtml = `${html}<div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">${oldHtml}</blockquote></div>`
        const attachments = ''
        var formData = new FormData();

        var totalToEmails = to.split(',');
        for (var index = 0; index < totalToEmails.length; index++) {
          formData.append('to[]', totalToEmails[index]);
        }

        let ccEmailValue = cc;
        if (ccEmailValue) {
          let totalCcEmails = ccEmailValue.split(',');
          for (let index = 0; index < totalCcEmails.length; index++) {
            formData.append('cc[]', totalCcEmails[index]);
          }
        }

        let bccEmailValue = bcc;
        if (bccEmailValue) {
          let totalBccEmails = bccEmailValue.split(',');
          for (let index = 0; index < totalBccEmails.length; index++) {
            formData.append('bcc[]', totalBccEmails[index]);
          }
        }

        formData.append('html', finalHtml);
        const messageId = $('#forward_email_id').val();
        formData.append('message_id', messageId);

        var totalfiles = document.getElementById('attach-file-3').files.length
        for (var index = 0; index < totalfiles; index++) {
          formData.append("attachments[]", document.getElementById('attach-file-3').files[index])
        }

        $.ajax({
          url: "{{route('admin.email.forward')}}",
          method: 'POST',
          dataType: 'json',
          contentType: false,
          processData: false,
          data: formData,
          success: function(response) {
            $('.loader-btn').addClass('d-none');
            toastr.success(response.msg, "@lang('admin.success')");
            $('#emailForwardSidebar').modal('hide');
          },
          error: function(e) {
            $('.loader-btn').addClass('d-none');
            if (e.responseJSON.msg) {
              toastr.error(e.responseJSON.msg, "@lang('admin.error')");
            } else {
              toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
          },
        })

      })

      function forwardEmail(formData) {
        $.ajax({
          url: "{{route('admin.email.forward')}}",
          method: 'POST',
          dataType: 'json',
          contentType: false,
          processData: false,
          data: formData,
          success: function(response) {
            $('#emailForwardSidebar').modal('hide');
            toastr.success(response.msg, "@lang('admin.success')");
            $('.loader-btn').addClass('d-none');
          },
          error: function() {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
        })
      }


      $(document).on('click', '#popover-btn', function() {
        $('.card').each(function() {
          $(this).find('#popverbox').addClass('d-none');
        })
        $(this).parentsUntil('.card').find('#popverbox').removeClass('d-none');
        let emailListInstance = new PerfectScrollbar('.popover-box', {
          wheelPropagation: false,
          suppressScrollX: true,
          useBothWheelAxes: true
        });
        // $(this).popover('show');
      })

      $(document).on('click', '#forawrd_email_toggalbar', function() {
        $('#forward_email_previous_mail_content').html('');
        const previousEmailContent = $(this).parents('.email-card-prev').find('.card-body').html();

        console.log('previousEmailContent', previousEmailContent)
        $('#forward_email_previous_mail_content').append(previousEmailContent)
        const id = $(this).data('messageid');
        $('#forward_email_id').val(id);
        $('#emailForwardSidebar').modal('show');
      })

      $(document).on('click', '#forawrd_email_last_toggalbar', function() {
        const id = $(this).data('messageid');
        const previousEmailContent = $(this).parents('.email-card-last').find('.card-body').html();

        $('#forward_email_previous_mail_content').append(previousEmailContent)

        $('#forward_email_id').val(id);
        $('#emailForwardSidebar').modal('show');
        // getMessageDetail(formData)
      })

      /* replyall click events start */


      /* replyall click events emds */
      $(document).on('click', '#reply_all_email_toggalbar_last', function() {
        $('#reply_all_previous_email_content').html('');
        const messageId = $(this).data('messageid');
        const previousEmailContent = $(this).parents('.email-card-last').find('.card-body').html();

        $('#email_replyall_message_id').val(messageId);
        $('#reply_all_previous_email_content').html(previousEmailContent);


        const formData = new FormData();
        formData.append('message_id', messageId);
        formData.append('type', 'replyall');
        getMessageDetail(formData)
        $('#emailReplyAllSidebar').modal('show');
      })

      $(document).on('click', '#reply_email_toggalbar', function() {
        $('#previous_email_content').html('');
        const previousEmailContent = $(this).parents('.email-card-prev').find('.card-body').html();
        $('#previous_email_content').append(previousEmailContent)
        const id = $(this).data('messageid');
        $('#email_reply_message_id').val(id);
        const formData = new FormData();
        let message_id = $('#email_reply_message_id').val();
        formData.append('message_id', message_id);
        formData.append('type', 'reply');
        getMessageDetail(formData);
        $('#emailReplySideBar').modal('show');
      });

      $(document).on('click', '#reply_email_toggalbar_last', function() {
        $('#previous_email_content').html('');
        const previousEmailContent = $(this).parents('.email-card-last').find('.card-body').html();
        $('#previous_email_content').append(previousEmailContent)
        const id = $(this).data('messageid');
        $('#email_reply_message_id').val(id);
        const formData = new FormData();
        let message_id = $('#email_reply_message_id').val();
        formData.append('message_id', message_id);
        formData.append('type', 'reply');
        getMessageDetail(formData);
        $('#emailReplySideBar').modal('show');
      })

      $(document).on('click', '#send_email_replyall', function() {
        send_email_replyall();
      })

      $(document).on('click', '#reply_all_email_toggalbar', function() {
        $('#reply_all_previous_email_content').html('');
        const messageId = $(this).data('messageid');
        const previousEmailContent = $(this).parents('.email-card-prev').find('.card-body').html();
        console.log('previousEmailContent', previousEmailContent);
        $('#email_replyall_message_id').val(messageId);
        $('#reply_all_previous_email_content').html(previousEmailContent);
        const formData = new FormData();
        formData.append('message_id', messageId);
        formData.append('type', 'replyall');
        getMessageDetail(formData)
        $('#emailReplyAllSidebar').modal('show');
      })

      function send_email_replyall() {

        let id = $('#send_email_replyall').data('id');
        const html = $('.email-replyall-editor .ql-editor').html();
        const formData = new FormData();
        $('#reply_all_previous_email_content').find('#attachment_section').remove();
        let oldHtml = $('#reply_all_previous_email_content').html();

        formData.append('html', `${html}<div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">${oldHtml}</blockquote></div>`);

        var totalfiles = document.getElementById('attach-file-2').files.length

        for (var index = 0; index < totalfiles; index++) {
          formData.append("attachments[]", document.getElementById('attach-file-2').files[index])
        }
        let message_id = $('#email_replyall_message_id').val();
        formData.append('id', id);
        formData.append('message_id', message_id)

        var totalToEmails = $('#replyall_to_email').val().split(',');
        for (var index = 0; index < totalToEmails.length; index++) {
          formData.append('to[]', totalToEmails[index]);
        }

        let ccEmailValue = $('#replyall_cc_email').val();
        if (ccEmailValue) {
          let totalCcEmails = ccEmailValue.split(',');
          for (let index = 0; index < totalCcEmails.length; index++) {
            formData.append('cc[]', totalCcEmails[index]);
          }
        }

        let bccEmailValue = $('#replyall_bcc_email').val()
        if (bccEmailValue) {
          let totalBccEmails = bccEmailValue.split(',');
          for (let index = 0; index < totalBccEmails.length; index++) {
            formData.append('bcc[]', totalBccEmails[index]);
          }
        }
        const replyFromType = $('#email_pagination').data('type');
        formData.append('reply_from_type', replyFromType);
        // getMessageDetail(formData);
        replyAll(formData);

      }


      function replyAll(formData) {
        $('.loader-btn').removeClass('d-none');
        $.ajax({
          url: "{{route('admin.email.replyAll')}}",
          method: 'POST',
          dataType: 'json',
          contentType: false,
          processData: false,
          data: formData,
          success: function(response) {
            $('#emailReplyAllSidebar').modal('hide');
            $('.loader-btn').addClass('d-none');
            toastr.success(response.msg, "@lang('admin.success')");
          },
          error: function(e) {
            if (e.responseJSON.msg) {
              toastr.error(e.responseJSON.msg, "@lang('admin.error')");
            } else {
              toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
            $('.loader-btn').addClass('d-none');
          },
          complete: function() {


          }
        })
      }


      function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || ''
        sliceSize = sliceSize || 512

        var byteCharacters = atob(b64Data)
        var byteArrays = []

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          var slice = byteCharacters.slice(offset, offset + sliceSize)

          var byteNumbers = new Array(slice.length)
          for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i)
          }

          var byteArray = new Uint8Array(byteNumbers)

          byteArrays.push(byteArray)
        }

        var blob = new Blob(byteArrays, {
          type: contentType
        })
        let urlBlob = URL.createObjectURL(blob)
        return urlBlob
      }


      function getHeader(part, headerName) {
        let value = ''
        for (let i = 0; i < part.length; i++) {
          // console.log('name',part[i].name);
          // console.log('value',part[i].value);
          if (part[i].name == headerName) {
            value = part[i].value;
            break;
          }

        }
        return value;
      }

      function getHeadersfromphpresponse(part, headerName) {
        let value = ''
        for (let i = 0; i < part.length; i++) {
          if (part[i].name == headerName) {
            value = part[i].value;
            break;
          }

        }
        return value;
      }

      function getHeadersfromphpresponse1(part, headerName) {
        let value = ''
        for (let i = 0; i < part.length; i++) {
          if (part[i].key == headerName) {
            value = part[i].value;
            break;
          }

        }
        return value;
      }

      //get message body

      function getBody(message) {
        // debugger;
        var encodedBody = '';
        if (typeof message.parts === 'undefined') {
          encodedBody = message.body.data;
        } else {
          encodedBody = getHTMLPart(message.parts);
        }
        if (encodedBody) {
          encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
          return decodeURIComponent(escape(window.atob(encodedBody)));
        } else {
          return decodeURIComponent(escape(encodedBody));
        }
      }

      function getHTMLPart(arr) {
        for (var x = 0; x <= arr.length; x++) {
          if (typeof arr[x].parts === 'undefined') {
            if (arr[x].mimeType === 'text/html') {
              return arr[x].body.data;
            }
          } else {
            return getHTMLPart(arr[x].parts);
          }
        }
        return '';
      }

      // ends here ~ get message body

      function fetchSentBoxData(page, displayLoader) {
        if (displayLoader) {
          addLoader()
        }
        // $('#email_list_ul').html('')
        var searchVal = $('.email-search-input').val();
        const url = "{{route('admin.allSentEmails')}}" + '?page=' + page + '&' + 'search=' + searchVal
        $.ajax({
          url: url,
          method: 'get',
          dataType: 'json',
          success: function(response) {
            let html = '';
            const emails = response.data.emails
            if (emails) {
              for (let i = 0; i < emails.length; i++) {
                const element = emails[i];
                html += `
                <li class="email-list-item ${!element.is_unread ? 'email-marked-read' : ''}" data-id=${element.id} data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
                  <div class="d-flex align-items-center">
                    <div class="form-check mb-0">
                      <input class="email-list-item-input form-check-input" type="checkbox" id="email-1" />
                      <label class="form-check-label" for="email-1"></label>
                    </div>
                    <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                      <span class="me-2 d-block">To: ${element.from_name.length > 20 ? element.from_name.substr(0,19) + '...'  : element.from_name} ${element.message_count <= 1 ? '' : element.message_count}</span>
                      <span class="email-list-item-subject d-xl-inline-block d-block">
                     <span class="${element.is_unread ? 'fw-bold' : ''}">${!element.subject?'(no subject)':element.subject}</span> ${!element.snippet? '': ' - '+element.snippet}</span>
                    </div>
                    <div class="email-list-item-meta ms-auto d-flex align-items-center">
                    ${element.has_attachment ? '<span class="email-list-item-attachment ti ti-paperclip ti-xs cursor-pointer me-2 float-end float-sm-none" title="Attachment"></span>' : ''}
                      <small class="email-list-item-time text-muted">${element.display_date}</small>
                      <ul class="list-inline email-list-item-actions text-nowrap">
                        <li id="email_read_unread" class="list-inline-item ${element.is_unread ? 'email-unread' : 'email-read'}"><i class="ti ${element.is_unread ? 'ti-mail-opened' : 'ti-mail'}" ${element.is_unread ? 'data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as read"' : 'data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as unread"'}></i></li>
                        <li class="list-inline-item email-delete"><i class="ti ti-trash" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"></i></li>
                      </ul>
                    </div>
                  </div>
                </li>
          `
              }
            }
            $('#email_list_ul').html(html);

            var firstNumer = page == 1 ? 1 : ((page - 1) * item_per_page + 1)
            var secondNumber = page * item_per_page
            $('#pagination_text').text(firstNumer + '-' + secondNumber)

            $('#next_page').removeAttr('disabled', false)
            $('#previous_page').removeAttr('disabled', false)

            if (!response.data.has_next_page) {
              $('#next_page').attr('disabled', true);
            }

          },
          error: function(data) {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
          complete: function() {
            removeLoader();
          }

        })

      }

      $('#search_email').keyup(debounce(function() {
        const type = $('#email_pagination').data('type')
        if (type == 'inbox') {
          fetchData(page, true);
        } else if (type == 'sentbox') {
          fetchSentBoxData(page, true);
        }
      }, 500))

      function debounce(cb, interval, immediate) {
        var timeout;

        return function() {
          var context = this,
            args = arguments;
          var later = function() {
            timeout = null;
            if (!immediate) cb.apply(context, args);
          };

          var callNow = immediate && !timeout;

          clearTimeout(timeout);
          timeout = setTimeout(later, interval);

          if (callNow) cb.apply(context, args);
        };
      };

      // send request for email
      function fetchData(page, displayloader) {
        // $('#email_list_ul').html('')
        if (displayloader) {
          addLoader()
        }
        var searchVal = $('.email-search-input').val();
        var url = "{{route('admin.allEmails')}}" + '?page=' + page + '&' + 'search=' + searchVal
        $.ajax({
          url: url,
          method: 'get',
          dataType: 'json',
          success: function(response) {
            // $('#email_list_ul').html()
            const emails = response.data.emails

            let html = '';
            if (emails) {
              for (let i = 0; i < emails.length; i++) {
                const element = emails[i];
                html += `
          <li class="email-list-item ${!element.is_unread ? 'email-marked-read' : ''}" data-starred="true" data-id=${element.id} data-bs-toggle="sidebar" data-target="#app-email-view">
                  <div class="d-flex align-items-center">
                    <div class="form-check mb-0">
                      <input class="email-list-item-input form-check-input" type="checkbox" id="email-1" />
                      <label class="form-check-label" for="email-1"></label>
                    </div>
                    <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                      <span class="me-2 d-block"> <span class="${element.is_unread ? 'fw-bold' : ''}"> ${element.from_name.length > 20 ?  String(element.from_name.substr(0,19)) + '.' :  String(element.from_name)}</span> <span>${element.message_count <= 1 ? '' : element.message_count}</span></span>
                      <span class="email-list-item-subject d-xl-inline-block d-block">
                     <span class="${element.is_unread ? 'fw-bold' : ''}">${!element.subject?'(no subject)':element.subject}</span> ${!element.snippet? '': ' - '+element.snippet}</span>
                    </div>
                    <div class="email-list-item-meta ms-auto d-flex align-items-center">
                    ${element.has_attachment ? '<span class="email-list-item-attachment ti ti-paperclip ti-xs cursor-pointer me-2 float-end float-sm-none"></span>' : ''}
                      <small class="email-list-item-time text-muted">${element.display_date}</small>
                      <ul class="list-inline email-list-item-actions text-nowrap">
                        <li id="email_read_unread" class="list-inline-item ${element.is_unread ? 'email-unread' : 'email-read'}"><i class="ti ${element.is_unread ? 'ti-mail-opened' : 'ti-mail'}" ${element.is_unread ? 'data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as read"' : 'data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as unread"'} "></i></li>
                        <li class="list-inline-item email-delete"><i class="ti ti-trash" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"></i></li>
                      </ul>
                    </div>
                  </div>
                </li>
          `
              }

            }

            $('#email_list_ul').html(html);

            var firstNumer = page == 1 ? 1 : ((page - 1) * item_per_page + 1)
            var secondNumber = page * item_per_page
            $('#pagination_text').text(firstNumer + '-' + secondNumber)

            $('#next_page').removeAttr('disabled', false)
            $('#previous_page').removeAttr('disabled', false)

            if (!response.data.has_next_page) {
              $('#next_page').attr('disabled', true);
            }

          },
          error: function(data) {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
          complete: function() {
            removeLoader()
          }
        })
      }



      function addLoader(element) {
        const emailList = document.querySelector('.app-emails-list')
        let emailListJq = $('.app-emails-list'),
          emailListInstance = new PerfectScrollbar(emailList, {
            wheelPropagation: false,
            suppressScrollX: true
          });
        emailListJq.block({
          message: '<div class="spinner-border text-primary" role="status"></div>',
          css: {
            backgroundColor: 'transparent',
            border: '0'
          },
          overlayCSS: {
            backgroundColor: '#000',
            opacity: 0.1
          },
          onBlock: function() {
            emailListInstance.settings.suppressScrollY = true;
          },
          onUnblock: function() {
            emailListInstance.settings.suppressScrollY = false;
          }
        });
      }

      function removeLoader() {
        $('.app-emails-list').unblock();
      }

      // ends here

      $(document).on('click', '#email_read_unread', function(e) {

        e.stopPropagation();
        if ($(this).hasClass('email-read')) {
          // do unread from here
          $(this).removeClass('email-read');
          $(this).addClass('email-unread');
          $(this).closest('li.email-list-item').removeClass('email-marked-read');
          $(this).find('i').removeClass('ti-mail')
          $(this).find('i').addClass('ti-mail-opened')
          let id = $(this).closest('li.email-list-item').data('id');
          markEmailAsReadUnread(id, 'unread');
        } else {
          // do as read from here
          $(this).addClass('email-read');
          $(this).removeClass('email-unread');
          $(this).closest('li.email-list-item').addClass('email-marked-read');
          $(this).find('i').addClass('ti-mail')
          $(this).find('i').removeClass('ti-mail-opened')
          let id = $(this).closest('li.email-list-item').data('id');
          markEmailAsReadUnread(id, 'read');
        }

      })


      function markEmailAsReadUnread(id, type) {
        addLoader()
        $.ajax({
          url: "{{route('admin.email.mark.read.unread')}}",
          method: 'get',
          dataType: 'json',
          data: {
            id,
            type
          },
          success: function(response) {
            let count = response.data.unread_email_count;
            if (count) {
              count = `(${count})`
            }
            $('#unread_email_count').text(count)
            toastr.success(response.msg, "@lang('admin.success')");
          },
          error: function(data) {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
          complete: function() {
            console.log('hereee');
            $('#email-select-all').prop('checked', false);
            $('#bulk_modify_actions').addClass('d-none');
            $('.email-refresh').click();
          }
        })
      }

      function deleteEmail(id) {
        addLoader()
        $.ajax({
          url: "{{route('admin.email.mark.trash')}}",
          method: 'get',
          dataType: 'json',
          data: {
            id
          },
          success: function(response) {
            toastr.success(response.msg, "@lang('admin.success')");
          },
          error: function(data) {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
          complete: function() {
            $('.email-refresh').click();
          }
        })
      }

      $('#mark_read_all').on('click', function() {
        let ids = [];
        $('.email-list-item-input').each(function() {
          if ($(this).is(':checked')) {
            ids.push($(this).closest('li.email-list-item').data('id'));
            $(this).addClass('email-read');
            $(this).removeClass('email-unread');
            $(this).closest('li.email-list-item').addClass('email-marked-read');
            $(this).find('i').addClass('ti-mail')
            $(this).find('i').removeClass('ti-mail-opened')
          }
        })

        if (ids.length) {
          markEmailAsReadUnread(ids, 'read');
        }


      })

      $('#mark_unread_all').on('click', function() {
        let ids = [];
        $('.email-list-item-input').each(function() {
          if ($(this).is(':checked')) {
            ids.push($(this).closest('li.email-list-item').data('id'));
            // $(this).addClass('email-read');
            // $(this).removeClass('email-unread');
            // $(this).closest('li.email-list-item').addClass('email-marked-read');
            // $(this).find('i').addClass('ti-mail')
            // $(this).find('i').removeClass('ti-mail-opened')
          }
        })

        if (ids.length) {
          markEmailAsReadUnread(ids, 'unread');
        }


      })

      $('#delete_from_detail_view').on('click', function() {
        let id = $('#app-email-view').data('id');
        let threadId = $('#app-email-view').data('threadid');
        $('#id').val(threadId);
        $('#email_delete_modal').modal('show');
        // deleteEmail(threadId);
        // $("#email_list_ul").find(`[data-id='${id}']`).remove();
      })

      $('#delete_all').on('click', function() {
        $('#email_delete_all_email').modal('show');

      })

      $('#delete-selected-all').on('click', function() {
        $('#email_delete_all_email').modal('hide');
        let ids = [];
        $('.email-list-item-input').each(function() {
          if ($(this).is(':checked')) {
            ids.push($(this).closest('li.email-list-item').data('id'));
          }
        })

        if (ids.length) {
          deleteEmail(ids);
        }
      })

      $(document).on('click', '.email-delete', function(e) {
        e.stopPropagation();
        let id = $(this).closest('li.email-list-item').data('id')
        $('#id').val(id);
        $('#email_delete_modal').modal('show');

      })

      $('#delete-email').on('click', function() {
        $('#email_delete_modal').modal('hide');
        id = $('#id').val();
        deleteEmail(id);
      })




      // $('.email-refresh', function() {
      //   fetchData(page);
      // })

      $('.email-refresh').on('click', function(e) {
        let type = $('#email_pagination').data('type')
        if (type == 'sentbox') {
          fetchSentBoxData(page, true)
        } else if (type == 'inbox') {
          fetchData(page, true);
        }
      })

      $('#email-select-all').on('click', function(e) {
        e.stopPropagation();
        $(this).attr('checked', true);
        if ($(this).is(':checked')) {
          $('#bulk_modify_actions').removeClass('d-none');
          $('.email-list-item-input').each(function() {
            $(this).prop('checked', true);
          })
        } else {
          $('#bulk_modify_actions').addClass('d-none');
          $('.email-list-item-input').each(function() {
            $(this).prop('checked', false);
          })
        };

      })

      // $('#compose_email_form').validate({
      //   rules: {
      //     to: {
      //       required: true,
      //       maxlength: 100
      //     },
      //   },
      //   submitHandler: function(form) {
      //     alert('here');
      //     if ($("#compose_email_form").validate().checkForm()) {
      //       $('.submitbutton').attr('disabled', true);
      //       $('.loader-btn').removeClass("d-none");
      //       // form.submit();
      //     }
      //   },
      // })

      $('#send_email_button').on('click', function() {

        $('.loader-btn').removeClass('d-none')
        const to = $('#email_contact').val();
        const cc = $('#email-cc').val();
        const bcc = $('#email-bcc').val();
        const html = $('.email-editor .ql-editor').html();
        const subject = $('#email-subject').val();
        const attachments = ''
        var formData = new FormData();

        var totalToEmails = $('#email_contact').val().split(',');
        for (var index = 0; index < totalToEmails.length; index++) {
          formData.append('to[]', totalToEmails[index]);
        }

        let ccEmailValue = $('#email-cc').val();
        if (ccEmailValue) {
          let totalCcEmails = ccEmailValue.split(',');
          for (let index = 0; index < totalCcEmails.length; index++) {
            formData.append('cc[]', totalCcEmails[index]);
          }
        }

        let bccEmailValue = $('#email-bcc').val()
        if (bccEmailValue) {
          let totalBccEmails = bccEmailValue.split(',');
          for (let index = 0; index < totalBccEmails.length; index++) {
            formData.append('bcc[]', totalBccEmails[index]);
          }
        }

        formData.append('html', html);
        formData.append('subject', subject);

        var totalfiles = document.getElementById('attach-file').files.length
        for (var index = 0; index < totalfiles; index++) {
          formData.append("attachments[]", document.getElementById('attach-file').files[index])
        }

        $.ajax({
          url: "{{route('admin.email.send')}}",
          method: 'POST',
          dataType: 'json',
          contentType: false,
          processData: false,
          data: formData,
          success: function(response) {
            $('.loader-btn').addClass('d-none');
            toastr.success(response.msg, "@lang('admin.success')");
            $('#emailComposeSidebar').modal('hide');
          },
          error: function(e) {
            $('.loader-btn').addClass('d-none');
            if (e.responseJSON.msg) {
              toastr.error(e.responseJSON.msg, "@lang('admin.error')");
            } else {
              toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
          },
        })
      })

      $('#send_email_reply').on('click', function() {

        let id = $('#send_email_reply').data('id');
        const html = $('.email-reply-editor .ql-editor').html();
        const formData = new FormData();
        $('#previous_email_content').find('#attachment_section').remove()
        let oldHtml = $('#previous_email_content').html();
        // oldHtml = $(oldHtml).remove('#attachment_section').html();

        // console.log('oldHtml',oldHtml);

        formData.append('html', `${html}<div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">${oldHtml}</blockquote></div>`);

        var totalfiles = document.getElementById('attach-file-1').files.length

        for (var index = 0; index < totalfiles; index++) {
          formData.append("attachments[]", document.getElementById('attach-file-1').files[index])
        }
        let message_id = $('#email_reply_message_id').val();
        formData.append('id', id);
        formData.append('message_id', message_id)

        var totalToEmails = $('#reply_to_email').val().split(',');
        for (var index = 0; index < totalToEmails.length; index++) {
          formData.append('to[]', totalToEmails[index]);
        }

        let ccEmailValue = $('#reply_cc_email').val();
        if (ccEmailValue) {
          let totalCcEmails = ccEmailValue.split(',');
          for (let index = 0; index < totalCcEmails.length; index++) {
            formData.append('cc[]', totalCcEmails[index]);
          }
        }

        let bccEmailValue = $('#reply_bcc_email').val()
        if (bccEmailValue) {
          let totalBccEmails = bccEmailValue.split(',');
          for (let index = 0; index < totalBccEmails.length; index++) {
            formData.append('bcc[]', totalBccEmails[index]);
          }
        }
        // getMessageDetail(formData);
        reply(formData);

      })

      function getMessageDetail(formData) {
        $.ajax({
          async: false,
          url: "{{route('admin.email.message')}}",
          dataType: 'json',
          contentType: false,
          processData: false,
          method: 'POST',
          data: formData,
          success: function(response) {
            $('.reply-to-email-input').each(function() {
              $(this).val('');
            })

            $('.cc-to-email-input').each(function() {
              $(this).val('');
            })
            const element = response.data
            $('#reply_to_email').val(element.email_to);

            if (element.email_to) {
              $('.reply-to-email-input').each(function() {
                $(this).val(element.email_to)
              })
            }

            if (element.cc_to) {
              $('.cc-to-email-input').each(function() {
                $(this).val(element.cc_to);
              })
            }

          },
          error: function() {
            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
          },
        })

        return true;
      }

      function reply(formData) {

        $('.loader-btn').removeClass('d-none');
        $.ajax({
          url: "{{route('admin.email.reply')}}",
          method: 'POST',
          dataType: 'json',
          contentType: false,
          processData: false,
          data: formData,
          success: function(response) {
            toastr.success(response.msg, "@lang('admin.success')");
            $('#emailReplySideBar').modal('hide');
            $('.loader-btn').addClass('d-none');
          },
          error: function(e) {
            if (e.responseJSON.msg) {
              toastr.error(e.responseJSON.msg, "@lang('admin.error')");
            } else {
              toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
            $('.loader-btn').addClass('d-none');

          },

        })
      }

      $(document).on('click', '#download_attachment', function(e) {
        e.preventDefault();
        const messageId = $(this).data('messageid');
        const that = $(this);
        const attachmentId = $(this).data('attachmentid');
        downloadAttachment(messageId, attachmentId).then(function(response) {

          // let dataBase64Rep = response.data.data.replace(/-/g, '+').replace(/_/g, '/');

          const filename = that.find('a').text();
          const element = $('#attachment_to_download');
          const mimeType = that.data('mimetype');
          let dataBase64Rep = response.data.data.replace(/-/g, '+').replace(/_/g, '/')
          let urlBlob = b64toBlob(dataBase64Rep, mimeType, response.data.size)
          element.attr('href', urlBlob);
          element.attr('download', filename);
          // element.trigger('click');
          document.getElementById('attachment_to_download').click();
          URL.revokeObjectURL(urlBlob)

          //   element.attr('href',response.data.data);
          //  element.attr('download',element.text());
          //  element.click();

        });


      })

      function downloadAttachment(messageId, attachmentId) {

        const response = $.ajax({
          url: "{{route('admin.email.attachment.download')}}",
          method: 'POST',
          dataType: 'json',
          data: {
            messageId,
            attachmentId
          },
          success: function(response) {
            return response;
          }
        })

        return response;
      }

      // $('#detail_view_mark_as_read').on('click',function () {
      //   let id = $('#app-email-view').data('id');
      //   markEmailAsReadUnread(id,'read')
      // })

      $('#detail_view_mark_as_unread').on('click', function() {
        let id = $('#app-email-view').data('id');
        markEmailAsReadUnread(id, 'unread')
      })

      /* close popover if opened when click out side of it */
      // $(document).on('click',function(e) {

      //   console.log(object) 
      // })

      $(document).on('click', '.popover-overlay', function(e) {

        $('.popover-box').each(function() {
          // if(!$(this).hasClass('d-none')){

          $(this).addClass('d-none');
          // }
        })


        // if(!$(this).hasClass('popover-box')) {
        //   console.log('hasClass popover-box')
        //   $('.popover-box').each(function() {
        //     if(!$(this).hasClass){
        //       $(this).addClass('d-none');
        //     }
        //   })
        // }
        // $('[data-bs-toggle=popover]').each(function() {
        //   // hide any open popovers when the anywhere else in the body is clicked
        //   if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        //     $(this).popover('hide');
        //   }
        // });
      });


      $(document).on('click', '.email-list-item-input', function(e) {
        e.stopPropagation();

        let emailListItemInputCount = 0;
        $('.email-list-item-input').each(function() {
          if ($(this).is(':checked')) {
            emailListItemInputCount++;
          }
        })
        if (emailListItemInputCount) {
          $('#bulk_modify_actions').removeClass('d-none');
        } else {
          $('#bulk_modify_actions').addClass('d-none');
        }
        if (emailListItemInputCount < $('.email-list-item-input').length) {
          if (emailListItemInputCount == 0) {
            $('#email-select-all').prop('indeterminate', false);
          } else {
            $('#email-select-all').prop('indeterminate', true);
          }
        } else {
          if (emailListItemInputCount == emailListItemInputs.length) {
            $('#email-select-all').prop('indeterminate', false);
            $('#email-select-all').prop('checked', true);

          } else {
            $('#email-select-all').prop('indeterminate', false);
          }
        }

      })

      function setUnreadEmailCount() {
        url = "{{route('admin.email.unread.count')}}"
        $.ajax({
          url: url,
          method: 'get',
          dataType: 'json',
          success: function(response) {
            let count = response.data.email_count;
            if (count) {
              count = `(${count})`
            }
            $('#unread_email_count').text(count)
          }
        })
      }

      setInterval(function() {
        const type = $('#email_pagination').data('type');
        setUnreadEmailCount();
        if (type == 'inbox') {
          fetchData(page, false);
        } else if (type == 'sentbox') {
          fetchSentBoxData(page, false);
        }
      }, 20000);
    }

  });
</script>
@endsection