@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') }}"> <img src="{{asset('images/btn_google_signin_dark_normal_web.png')}}" alt=""> </a>
                    @endif

                </nav>
            </div>

        </div>
    </div>
    @if(LaravelGmail::check())
    <div class="app-email card mt-4">
        <div class="row g-0">
            <!-- Email Sidebar -->


            <div class="col app-email-sidebar border-end flex-grow-0" id="app-email-sidebar">
                <div class="btn-compost-wrapper d-grid">
                    <button class="btn btn-primary btn-compose" data-bs-toggle="modal" data-bs-target="#emailComposeSidebar">
                        Compose
                    </button>
                </div>
                <!-- Email Filters -->
                <div class="email-filters py-2">
                    <!-- Email Filters: Folder -->
                    <ul class="email-filter-folders list-unstyled mb-4">
                        <li class="active d-flex justify-content-between" data-target="inbox" id="inbox_button">
                            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
                                <i class="ti ti-mail"></i>
                                <span class="align-middle ms-2">Inbox</span>
                            </a>
                            <!-- <div class="badge bg-label-primary rounded-pill badge-center">4</div> -->
                        </li>
                        <li class="d-flex" data-target="sent" id="sent_box_button">
                            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
                                <i class="ti ti-send ti-xs"></i>
                                <span class="align-middle ms-2">Sent</span>
                            </a>
                        </li>

                    </ul>

                </div>
            </div>
            <!--/ Email Sidebar -->

            <!-- Emails List -->
            <div class="col app-emails-list">
                <div class="shadow-none border-0">
                    <div class="emails-list-header p-3 py-lg-3 py-2">
                        <!-- Email List: Search -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <i class="ti ti-menu-2 ti-sm cursor-pointer d-block d-lg-none me-3" data-bs-toggle="sidebar" data-target="#app-email-sidebar" data-overlay></i>
                                <div class="mb-0 mb-lg-2 w-100">
                                    <div class="input-group input-group-merge shadow-none">
                                        <span class="input-group-text border-0 ps-0" id="email-search">
                                            <i class="ti ti-search"></i>
                                        </span>
                                        <input type="text" id="search_email" class="form-control email-search-input border-0" placeholder="Search mail" aria-label="Search mail" aria-describedby="email-search" />
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-0 mb-md-2">
                                <i class="ti ti-rotate-clockwise rotate-180 scaleX-n1-rtl cursor-pointer email-refresh me-2 mt-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"></i>
                            </div>
                        </div>
                        <hr class="mx-n3 emails-list-header-hr" />
                        <!-- Email List: Actions -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="form-check mb-0 me-2">
                                    <input class="form-check-input" type="checkbox" id="email-select-all" />
                                    <label class="form-check-label" for="email-select-all"></label>
                                </div>
                                <div id="bulk_modify_actions" class="d-none">
                                    <i id="delete_all" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="ti ti-trash email-list-delete cursor-pointer me-2"></i>
                                    <i id="mark_read_all" data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as read" class="ti ti-mail-opened email-list-read cursor-pointer me-2"></i>
                                    <i id="mark_unread_all" data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as unread" class="ti ti-mail email-list-unread cursor-pointer me-2"></i>
                                </div>
                            </div>
                            <div data-type="inbox" id="email_pagination" class="email-pagination d-sm-flex d-none align-items-center flex-wrap justify-content-between justify-sm-content-end">
                                <span class="d-sm-block d-none mx-3 text-muted" id="pagination_text"></span>
                                <i class="email-prev ti ti-chevron-left scaleX-n1-rtl cursor-pointer text-muted me-2" id="previous_page" data-bs-toggle="tooltip" data-bs-placement="top" title="Previous page">
                                </i>
                                <i class="email-next ti ti-chevron-right scaleX-n1-rtl cursor-pointer" id="next_page" data-bs-toggle="tooltip" data-bs-placement="top" title="Next page">
                                </i>

                            </div>
                        </div>
                    </div>
                    <hr class="container-m-nx m-0 w-100" />
                    <!-- Email List: Items -->
                    <div class="email-list pt-0">
                        <ul class="list-unstyled m-0" id="email_list_ul">

                        </ul>
                    </div>
                </div>
                <div class="app-overlay"></div>
            </div>
            <!-- /Emails List -->

            <!-- Email View -->
            <div class="col app-email-view flex-grow-0 bg-body" id="app-email-view">
                <div class="card shadow-none border-0 rounded-0 app-email-view-header p-3 py-md-3 py-2">
                    <!-- Email View : Title  bar-->
                    <div class="d-flex justify-content-between align-items-center py-2">
                        <div class="d-flex align-items-center overflow-hidden">
                            <i class="ti ti-chevron-left ti-sm cursor-pointer me-2" data-bs-toggle="sidebar" data-target="#app-email-view"></i>
                            <h6 class="text-truncate mb-0 me-2" id="detail_view_subject"></h6>
                        </div>
                        <!-- Email View : Action  bar-->
                        <div class="d-flex">
                            <div class="dropdown ms-3">
                                <i class="ti ti-dots-vertical cursor-pointer" id="dropdownMoreOptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </i>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMoreOptions">
                                    <a id="detail_view_mark_as_unread" class="dropdown-item" href="javascript:void(0)">
                                        <i data-bs-toggle="tooltip" data-bs-placement="top" title="Mark as unread" class="ti ti-mail ti-xs me-1"></i>
                                        <span class="align-middle">Mark as unread</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="app-email-view-hr mx-n3 mb-2" />
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <i class="ti ti-trash cursor-pointer me-3" id="delete_from_detail_view" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" data-bs-toggle="sidebar" data-target="#app-email-view"></i>
                        </div>
                    </div>
                </div>
                <hr class="m-0" />
                <!-- Email View : Content-->
                <a href="" id="attachment_to_download"></a>
                <div class="app-email-view-content py-4">
                    <p class="email-earlier-msgs text-center text-muted cursor-pointer mb-5" id="detail_view_previous_emails">1 Earlier Message</p>
                    <!-- Email View : Previous mails-->
                    <div class="card email-card-prev mx-sm-4 mx-3">

                    </div>
                    <!-- Email View : Last mail-->
                    <div class="card email-card-last mx-sm-4 mx-3 mt-4" id="detail_view_last_card">
                        <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">
                                <!-- <img src="../../assets/img/avatars/1.png" alt="user-avatar" class="flex-shrink-0 rounded-circle me-3" height="40" width="40" /> -->
                                <div class="flex-grow-1 ms-1 position-relative">
                                    <h6 class="m-0" id="detail_view_from_name"></h6>
                                    <small class="text-muted" id="detail_view_from_email"></small>
                                    <span id="detail_view_popover_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>
                                    <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" id="detail_view_date"></p>
                                <i class="ti ti-paperclip cursor-pointer me-2 d-none" id="detail_view_attachment_icon" title="Attachment"></i>
                                <!-- <i class="email-list-item-bookmark ti ti-star ti-xs cursor-pointer me-2"></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" href="javascript:void(0)" id="reply_email_toggalbar_last">
                                            <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_last">
                                            <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_last_toggalbar" 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" id="detail_view_last_body">

                        </div>

                    </div>
                    <!-- Email View : Reply mail-->
                    <div class="email-reply card mt-4 mx-sm-4 mx-3">

                    </div>
                </div>
            </div>
            <!-- Email View -->
        </div>

        <!-- Compose Email -->
        @include('admin.email.composemodal')
        <!-- /Compose Email -->

        <!-- Reply Email -->
        @include('admin.email.replymodal')
        <!-- /Reply Email -->

        <!-- Forward Email -->
        @include('admin.email.forwardmodal')
        <!-- /Forward Email -->

        <!-- Forward Email -->
        @include('admin.email.replyallmodal')
        <!-- /Forward Email -->


    </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 src="{{asset('assets/js/email.js')}}"></script> -->
<script>
    $(document).ready(function() {
        /* check if user is login with gmail */
        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;

            /* side menu sentbox click event */

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

            /* side menu inbox click event */

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

            })

            /* pagination next page click event */

            $('#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);
                }
            })

            /* pagination previous page click event */

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


            /* call gmail api for fetch inbox data on page load */

            fetchData(page, true)

            /* email detail view open click event */

            $(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)

            })



            /* gmail api base64 to array for display */

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

            /* removeCharFromStartAndEnd */

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

            /* combine from and to email names from headers */

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

            /* helper to get text before character start from */

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


            /* deteilview fetch email data and render it */

            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;
                                let altOfImage = inlineImages[i].getAttribute('alt')
                                
                                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']) {
                                        inlineImages[i].dataset.imagename = attachments[j].filename;
                                        inlineImages[i].src = "data:" + "image/jpeg" + ";" + "base64" + "," + response.data.attachmentdata[j].replace(/-/g, `+`).replace(/_/g, `/`);
                                    } else if (cid == 'cid:' + trimmedLetter) {
                                        inlineImages[i].dataset.imagename = attachments[j].filename;
                                        inlineImages[i].src = "data:" + "image/jpeg" + ";" + "base64" + "," + response.data.attachmentdata[j].replace(/-/g, `+`).replace(/_/g, `/`);
                                    } else if (altOfImage == attachments[j].filename) {
                                        inlineImages[i].dataset.imagename = attachments[j].filename;
                                        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');
                        }

                        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();
                    }

                })
            }

            /* forwardemail prepare request data */

            $(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 imageName = $(this).data('imagename');
                    const cid = `cid:${imageName}`;
                    $(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')");
                        }
                    },
                })

            })

            /* forwardemail ajax call */

            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')");
                    },
                })
            }

            /* detail view open detail view email */

            $(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');
            })

            /* forward click event */

            $(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');
            })

            /* forward click event */

            $(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 event */
            $(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();
            })

            /* replyall prepare request data */

            $(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');
            })

            /* replyall prepare request data */

            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();

                $('#reply_all_previous_email_content').find('#attachment_section').remove();
                const inlineImages = $('#reply_all_previous_email_content').find('img');
                inlineImages.each(function() {
                    const imageName = $(this).data('imagename');
                    const cid = `cid:${imageName}`;
                    $(this).attr('src',cid);
                })

                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);

            }

            /* replyall api call */

            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() {


                    }
                })
            }

            /* gmail api create b64toBlob */


            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
            }


            /* get header from multiple headers by it's name */


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

                }
                return value;
            }

            /* get header from multiple headers by it's name */


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

            /* get header from multiple headers by it's name */

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


            /* gmail api 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));
                }
            }

            /* gmail api html part get */
            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

            /* fetch and render sentbox data  */


            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 input keyup event */

            $('#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))

            /* debouncer to prevent mulitple api calls on searching */

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

            /* email inbox listing api call */

            function fetchData(page, displayloader) {

                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()
                    }
                })
            }



            /* add loader */

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

            /* remove loader */

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

            // ends here

            /* mark email as read unread from listing hover button click event */

            $(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');
                }

            })

            /* mark email as read unread api call */

            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();
                    }
                })
            }

            /* mark email to trash api call */

            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();
                    }
                })
            }

            /* bulk action read all email click event */

            $('#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');
                }


            })

            /* bulk action unread all email click event */
            $('#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');
                }


            })

            /* detail view  delete thread click event */
            $('#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 email action button click event */
            $('#delete_all').on('click', function() {
                $('#email_delete_all_email').modal('show');

            })

            /* bluk delete confirm delete click event */

            $('#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);
                }
            })

            /* email listing hove delete click event */

            $(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 model delete confirm click event */
            $('#delete-email').on('click', function() {
                $('#email_delete_modal').modal('hide');
                id = $('#id').val();
                deleteEmail(id);
            })





            /* email refresh click event */
            $('.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 listing check all checkbox click event */

            $('#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);
                    })
                };

            })



            /* send email click event */

            $('#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')");
                        }
                    },
                })
            })

            /* email reply click event */
            $('#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();

                const inlineImages = $('#previous_email_content').find('img');
                // console.log('inlineImages',inlineImages)
                inlineImages.each(function() {
                    const imageName = $(this).data('imagename');
                    const cid = `cid:${imageName}`;
                    $(this).attr('src',cid);
                })

                $('#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);

            })

            /* get list of to and cc email when doing reply and reply all */

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

            /* reply to email api call */
            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');

                    },

                })
            }

            /* download attachment click event */
            $(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) {
                    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);
                    document.getElementById('attachment_to_download').click();
                    URL.revokeObjectURL(urlBlob)
                });


            })

            /* download attachment api call */
            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;
            }


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



            /* detail view hide all popup when click outside of popup */
            $(document).on('click', '.popover-overlay', function(e) {
                $('.popover-box').each(function() {
                    $(this).addClass('d-none');
                })
            });

            /* inbox sentbox single email checkbox click event */
            $(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);
                    }
                }

            })

            /* fetch and set unread email count in menu */
            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)
                    }
                })
            }

            /* fetch emails every 20 seconds to get email without refersh page */
            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