@extends('dashboard/layout.app')
@section('title', 'BettrAi | Emails')
@section('content')

<link href="{{ url('assets/css/reports_styles.css') }}?v={{ rand(1000000,9999999) }}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{ url('assets/emails/css/webix_style.css') }}">
<link rel="stylesheet" href="{{ url('assets/emails/css/materialdesignicons.css') }}">
<link href="{{ url('assets/emails/css/main_app.css') }}" rel="stylesheet">

<style type="text/css">
    .margindiv{
        margin-bottom: 30px;
        margin-left: 0px;
    }
    #divLoading.tabloadershow {
        display: none;
        position: fixed;
        z-index: 100;
        background-image: url("{{ url('assets/images/loading-icon.gif') }}");
        opacity: 0.4;
        left: 0px;
        bottom: 0px;
        right: 0px;
        top: 50px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .email_row .inboxWrapp{
        background:#fff;
        transition: background-color .15s ease;
    }
    .email_row:hover .inboxWrapp{
        background:#dee1ef;
    }
    .email_row.email_selected .inboxWrapp,
    .email_row.mail_active .inboxWrapp{
        background:#dee1ef !important;
    }

    #emails-header-row{
        margin:0;
    }
    #emails-header-row .header-left{
        padding-left:0;
    }
    #emails-header-row .header-right{
        display:flex;
        justify-content:flex-end;
        align-items:center;
    }
    #actions_div{
        display:none;
        margin-right:10px;
    }
    #actions_div i{
        color:#838383;
        cursor:pointer;
    }
    .top-address-book-icon{
        margin-top:10px;
        cursor:pointer;
    }
    .hide-header {
        display: none !important;
    }
    .mailInner {
        margin: 0px !important;
    }
    .action_icon {
        color: #6c757d;
        margin-left: 12px;
        cursor: pointer;
    }
    .action_icon.disabled {
        opacity: 0.3;
        pointer-events: none;
    }
    .action_icon.enabled {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
    }
    .emailsMoveDropdown {
        position: fixed;
        width: 240px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        padding: 0;
        display: none;
        z-index: 1055;
        overflow: hidden;
        font-family: 'Poppins', sans-serif;
    }
    .emailsMoveDropdownHeader {
        padding: 12px 14px;
        font-size: 12px;
        font-weight: 600;
        border-bottom: 1px solid #e9ecef;
        background: #fafafa;
    }
    .emailsMoveDropdown ul {
        list-style: none;
        margin: 0;
        padding: 6px 0;
        max-height: 220px;
        overflow-y: auto;
    }
    .emailsMoveDropdown li {
        padding: 10px 14px;
        cursor: pointer;
        color: #333;
        transition: background 0.15s ease;
    }
    .emailsMoveDropdown li:hover {
        background: #f1f3f4;
    }

    .mail_preview {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }
    .mail_preview::-webkit-scrollbar {
        width: 6px;
    }
    .mail_preview::-webkit-scrollbar-thumb {
        background: #b9b9b9;
        border-radius: 4px;
    }
    .mail_preview * {
        font-family: 'Poppins', sans-serif !important;
    }
    .mail_preview span,
    .mail_preview p,
    .mail_preview div,
    .mail_preview td {
        font-family: 'Poppins', sans-serif !important;
        font-size: 12px !important;
    }
    .inboxItem {
        border-radius: 5px !important;
    }
    .searchEmailDiv {
        width: 450px;
    }
    .emailSearchSuggest {
        z-index:9999;
        display:none;
        max-height:250px;
        overflow-y:auto;
    }
    .no_data {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 25px;
        border-top: 2px solid #ebe3e3;
    }
    .address-book-global {
        position: absolute;
        right: 25px;
        top: 25px;
    }
    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
    }
    .hide-header { 
        display: none !important; 
    }
    .email-screen-icon {
        position: absolute;
        top: 15px;
        right: 20px;
        z-index: 9999;
    }
    .email-screen-icon i {
        font-size: 22px;
        cursor: pointer;
        color: #000;
        font-weight: bold;
    }
    @media (max-width: 992px) {
        .email-screen-icon { right: 15px; }
    }
    @media (max-width: 768px) {
        .email-screen-icon { top: 20px; right: 10px; }
    }
    @media (max-width: 576px) {
        .email-screen-icon { top: 25px; right: 5px; }
    }
    .compose-address-book-icon {
        position: absolute;
        top: 15px;
        right: 30px;
        font-size: 20px;
        cursor: pointer;
        color: #000;
        z-index: 9;
    }
    .compose_content {
        position: relative;
    }
    .addressbook-address-book-icon {
        position: absolute;
        top: 1px;
        right: 12px;
        font-size: 22px;
        cursor: pointer;
        color: #000;
        z-index: 9;
    }
    .address_book_view {
        position: relative;
    }

    @media (max-width: 768px) {
        .address-book-icon,
        .compose-address-book-icon,
        .addressbook-address-book-icon {
            right: 15px;
        }
    }
    .ck-editor__editable_inline {
        min-height: 100px;
        max-height: 100px;
        overflow-y: auto;
    }
    .ck-editor__editable {
        overflow-y: auto !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        max-height: 180px;
    }
    #uploaded_file_list {
        margin-bottom: 8px;
    }

    .uploaded-file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0;
    }
    .uploaded-file-item .file-name {
        margin-right: 12px;
    }

    .uploaded-file-item .remove-file {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .uploaded-file-item .remove-file i {
        color: #e74c3c;
        font-size: 14px;
    }
    .flagUnread {
        color: #000 !important;
    }
    .flagRead {
        color: #475466b3 !important;
    }
    .ck-powered-by {
        display: none;
    }
    .ck-content {
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.5;
        color: #000 !important;
    }

    .ck-content p {
        margin: 0;
        font-size: 12px;
        font-weight: 400;
    }

    .ck-editor__editable {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .ck-content em,
    .ck-content i {
        font-style: italic;
        font-weight: 400;
        color: inherit !important;
        opacity: 1 !important;
    }

    .ck-content strong,
    .ck-content b {
        font-weight: 600;
        color: inherit !important;
    }

    .ck-content strong em,
    .ck-content em strong,
    .ck-content b i,
    .ck-content i b {
        font-weight: 600;
        font-style: italic;
        color: inherit !important;
        opacity: 1 !important;
    }
    .ck-content h1 {
        font-size: 24px !important;
        font-weight: 700;
    }

    .ck-content h2 {
        font-size: 20px !important;
        font-weight: 600;
    }

    .ck-content h3 {
        font-size: 16px !important;
        font-weight: 600;
    }
    .inbox_mails_count, .draft_mails_count {
        position: relative;
        float: right;
        color: #000 !important;
        font-weight: bolder;
    }
    .action_icon.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
</style>

<div class="d-flex flex-column-fluid mt-1">
    <div class="container">

        <div class="webix_view webix_layout_line" style="width:100%; height:auto; background:white; padding: 10px; border-radius: 10px;">
            <div class="row h-100">
                <div class="col-12 col-sm-12 col-md-12 col-xl-12 p-4">
                    <p><strong>Disclaimer</strong>: Email is not a secure method of communication. Please avoid using this feature to send, request, or discuss any personal health information (PHI), medical treatment, or sensitive data. If you wish to communicate with your patient on a secure channel, please utilize the live chat feature which sends messages directly to the patient app.</p>
                    <p>To send an email to your patients, there must be an email address associated with their profile.</p>
                </div>
                <div class="col-2 col-sm-2 col-md-2 col-xl-2">
                    <div class="webix_view webix_scrollview webix_custom_scroll leftSidebar" style="overflow:scroll; height:100%;">
                        <div class="webix_scroll_cont">
                            <div class="webix_view webix_layout_line" style="background:#fff;">

                                <div class="webix_view webix_control webix_el_button webix_primary"
                                     style="margin-top:10px; width:100%; height:38px;">
                                    <div class="webix_el_box">
                                        <button type="button" id="compose_mail" class="btn btn-primary" style="width:100%;">
                                            <i class="fa fa-plus"></i> Compose Email
                                        </button>
                                    </div>
                                </div>

                                <div class="webix_view webix_tree webix_sidebar webix_sidebar_expanded webix_sidebar_left webix_dark sidebarMenu"
                                     style="margin-top:10px; width:100%; height:200px;" role="tree">
                                    <div class="webix_scroll_cont">
                                        <div role="presentation" class="webix_tree_leaves">
                                            @foreach($email_groups as $group)
                                                @if($group->group_parent_id == 0)
                                                <div role="presentation" class="webix_tree_branch_1">
                                                    <div webix_tm_id="{{ $group->id }}" class="webix_tree_item inbox_button" style="cursor:pointer;" data-group-id="{{ $group->id }}" onclick="loadMailsContent({{ $group->id }})">
                                                        @if($group->group_name == 'inbox')
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-inbox"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                            <span class="inbox_mails_count">0</span>
                                                        @elseif($group->group_name == 'sent')
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-envelope"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                        @elseif($group->group_name == 'trash')
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-trash"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                        @elseif($group->group_name == 'draft')
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-pen"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                            <span class="draft_mails_count">0</span>
                                                        @elseif($group->group_name == 'spam')
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-exclamation-triangle"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                        @else
                                                            <span class="webix_icon webix_sidebar_icon">
                                                                <i class="fa fa-folder"></i>
                                                            </span>
                                                            <span>{{ $group->group_description }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                <div class="webix_view webix_tree webix_sidebar webix_sidebar_expanded webix_sidebar_left webix_dark sidebarMenu"
                                    style="margin-top:10px; width:100%; height:250px; overflow-y: auto; overflow-x: hidden;" role="tree">
                                    <div class="webix_scroll_cont">
                                        <div role="presentation" class="webix_tree_leaves" id="tag_list_area">
                                            <div class="webix_tree_item newTag" style="cursor:pointer; padding-left: 15px;" onclick="openTagModal()">
                                                <i class="fa fa-folder-plus"></i> Create Folder
                                            </div>
                                            @foreach($email_groups as $tag)
                                                @if($tag->group_parent_id > 0 && $tag->group_status == 1)
                                                <div webix_tm_id="{{ $tag->id }}" class="webix_tree_item work" data-id="{{ $tag->id }}" data-group-id="{{ $group->id }}" style="cursor:pointer; padding-left: 20px;">
                                                    <div class="row align-items-center">
                                                        <div class="col-10 col-sm-10 col-md-10 col-xl-10">
                                                            <a href="javascript:void(0)" onclick="loadMailsContent({{ $tag->id }})" style="color: #475466" title="{{ $tag->group_description }}">
                                                                @if(strlen($tag->group_description) > 10)
                                                                    <i class="fa fa-folder"></i> {{ substr($tag->group_description, 0, 10).'...' }}
                                                                @else
                                                                    <i class="fa fa-folder"></i> {{ $tag->group_description }}
                                                                @endif
                                                            </a>
                                                        </div>
                                                        <div class="col-2 col-sm-2 col-md-2 col-xl-2 text-end">
                                                            <i class="fa fa-trash fa-sm delete-folder-icon" onclick="deleteEmailFolder({{ $tag->id }})" style=" color: #000;"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-10 col-sm-10 col-md-10 col-xl-10">
                    <div class="col-12 row p-4" id="emails-header-row">
                        <div class="col-4 d-flex align-items-center header-left">
                            <input type="checkbox" id="inbox_select_all" class="inbox_select_all"
                                style="cursor:pointer;" autocomplete="off">
                            <b style="margin-left:5px;">Select All / Unselect All</b>
                        </div>
                        <div class="col-5" style=" padding-left: 5px;">
                            <div class="position-relative searchEmailDiv">
                                <input type="text" id="searchEmail" class="form-control" placeholder="Search Emails">

                                <div id="emailSearchSuggest" class="list-group position-absolute w-100 shadow-sm"
                                    style="z-index:9999; display:none; max-height:250px; overflow-y:auto;">
                                </div>
                            </div>
                        </div>
                        <div class="col-3 header-right">
                            <div id="actions_div" class="d-flex align-items-center">
                                <a href="javascript:void(0)" onclick="markRead()">
                                    <i class="fa fa-envelope-open read_mail action_icon disabled" title="Mark As Read"></i>
                                </a>
                                <a href="javascript:void(0)" onclick="markUnread()">
                                    <i class="fa fa-envelope unread_mail action_icon disabled" title="Mark As Unread"></i>
                                </a>
                                <a href="javascript:void(0)" onclick="deleteEmail()">
                                    <i class="fa fa-trash delete_mail action_icon disabled" title="Delete"></i>
                                </a>
                                <a href="javascript:void(0)" id="btnMoveDropdown" onclick="event.stopPropagation(); toggleMoveDropdown()">
                                    <i class="fa fa-folder-open move_mail action_icon" title="Move"></i>
                                </a>
                                <div id="globalMoveDropdown" class="emailsMoveDropdown">
                                    <div class="emailsMoveDropdownHeader">Move to:</div>
                                    <ul id="moveFolderList">
                                        @foreach($email_groups as $tag)
                                            @if($tag->group_parent_id > 0 && $tag->group_status == 1)
                                                <li class="moveFolderListTree" onclick="event.stopPropagation(); moveEmail({{ $tag->id }})" data-id="{{ $tag->id }}" style="border-bottom: 1px solid #d1c7c7;">
                                                    <i class="fa fa-folder"></i> {{ $tag->group_description }}
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                                <i class="fa fa-address-book address-book-icon pl-2" onclick="addressBookView()" title="Address Book"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4 mail_list_col" style="height:100%;">
                            <div class="inbox_content" style="width:100%; height:100%;">
                                <div class="webix_view webix_list webix_custom_scroll inboxBg"
                                    style="border-width:2px 0 2px 0; overflow-y:scroll; margin-top:0; width:100%; height:450px;">
                                    <div class="webix_scroll_cont inbox_list"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-8 pb-4" id="right_col" style="height:100%;">
                            <div class="mail_preview" style="width:100%; overflow-y: auto; overflow-x: hidden; display:none;">

                                <div class="webix_view webix_layout_clean" style="border-width:1px 1px 1px 1px; white-space:nowrap; width:100%; height:110px;">
                                    <div class="webix_view mailHead" style="display:block; margin:0; width:99%;">
                                        <div class="webix_template">
                                            <div class="inboxWrapp flex wide">
                                                <div class="inboxLeft">
                                                    <div class="inboxImg">
                                                        <img src="{{ url('assets/images/default.jpg') }}">
                                                        <div class="inboxState online"></div>
                                                    </div>
                                                </div>
                                                <div class="flex flexColumn wide">
                                                    <div class="flex spaceBetween alignCenter wide">
                                                        <span class="flex alignCenter">
                                                            <span class="inboxUser boldText mailFrom"></span>
                                                            {{-- <span class="inboxTag mailTag mdi mdi-tag work"></span> --}}
                                                        </span>
                                                        <span class="smTextLight mailDate"></span>
                                                    </div>
                                                    <div class="smTextLight flex alignCenter pointer">
                                                        <span>to: </span>
                                                        <span class="mailTo"></span>
                                                    </div>
                                                    <span class="mailSubject boldText"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="webix_view webix_toolbar webix_layout_toolbar"
                                        style="border-width:1px 0; display:inline-block; vertical-align:top; margin:0; width:24%; height:206px;">
                                        <div class="webix_scroll_cont">
                                            <div class="webix_view webix_layout_line" style="white-space:nowrap; margin:2px; width:100%; height:45px;">
                                                <div class="webix_view webix_control webix_el_icon" style="margin-top:7px; margin-left:10px; width:38px; height:38px;">
                                                    <div class="webix_el_box" style="width:38px; height:38px;">
                                                        <button type="button" style="height:38px; width:38px;" class="webix_icon_button">
                                                            <i class="fa fa-reply"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="webix_view webix_control webix_el_icon" style="margin-top:7px; margin-left:10px; width:38px; height:38px;">
                                                    <div class="webix_el_box" style="width:38px; height:38px;">
                                                        <button type="button" style="height:38px; width:38px;" class="webix_icon_button">
                                                            <i class="fa fa-reply-all"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="webix_view webix_control webix_el_icon" style="margin-top:7px; margin-left:10px; width:38px; height:38px;">
                                                    <div class="webix_el_box" style="width:38px; height:38px;">
                                                        <button type="button" style="height:38px; width:38px;" class="webix_icon_button">
                                                            <i class="fa fa-share"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="webix_view webix_control webix_el_icon" style="margin-top:7px; margin-left:10px; width:38px; height:38px;">
                                                    <div class="webix_el_box" style="width:38px; height:38px;">
                                                        <button type="button" style="height:38px; width:38px;" class="webix_icon_button">
                                                            <span class="webix_icon mdi mdi-trash-can"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="webix_view webix_spacer" style="border-width:0; margin-left:2px; margin-top:4px; width:198px; height:153px;"></div>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="webix_view webix_custom_scroll" style="border-width:1px 1px 1px 1px; overflow:scroll; margin-top:-1px; width:99%;">
                                    <div class="webix_scroll_cont webix_template">
                                        <div class="mailWrapper">
                                            <div class="mailInner mailBody"></div>
                                            <div class="mailAttachments mt-2 mb-3"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="webix_view webix_form webix_layout_form" style="border-width: 1px 1px 1px 1px; margin-left: 0px; margin-top: -1px; width: 99%;" role="form" view_id="$form1">
                                    <div class="webix_scroll_cont">
                                        <div class="webix_view webix_layout_line" view_id="$layout12" style="margin-left: 10px; margin-top: 10px; margin-bottom: 15px; width: 99%;">
                                            {{-- <div class="webix_view" view_id="$template6" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 100%; height: 28px;">
                                                <div class=" webix_template">
                                                    <span class="flex alignCenter replyTo">
                                                    <span class="mdi mdi-share-all mdi-flip-h"></span>
                                                    <span class="mdi mdi-menu-down"></span>
                                                    </span>
                                                </div>
                                            </div> --}}
                                            <div class="webix_view" view_id="$template7" style="border-width: 0px; margin-left: 0px; width: 100%; height: 34px;">
                                                <div class=" webix_template">
                                                    <div class="tableRow paddedRow flex">
                                                        <div class="tableLeft">
                                                            <span class="smTextLight">Reply to:</span>
                                                        </div>
                                                        <div class="tableRight smText">
                                                            <span class="mailItem">
                                                            {{-- <span class="boldText">Elina Rollins</span>
                                                            <span>&lt;rollins@gmail.com&gt;</span> --}}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="webix_view webix_layout_line" style="white-space: nowrap; margin-left: 0px; width: 99%;" view_id="$layout13">
                                                <div class="webix_view" view_id="$template8" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 58px;">
                                                    <div class=" webix_template">
                                                        <div class="inboxImg">
                                                            <img src="{{ url('assets/images/default.jpg') }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="webix_view webix_control webix_el_textarea mailTextArea" view_id="$textarea1" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: -1px; width: 75%;">
                                                    <div class="webix_el_box_text" style="width:100%;">
                                                        {{-- <textarea placeholder="Type here" style="width:100%;" id="replay_text" name="replay_text" class="webix_inp_textarea"></textarea> --}}
                                                        <textarea placeholder="Type here" style="width:100%;" id="replay_text" name="replay_text" class="webix_inp_textarea"></textarea>
                                                        <input type="hidden" name="replay_id" id="replay_id">
                                                        <input type="hidden" name="replay_to" id="replay_to">
                                                        <input type="hidden" name="replay_subject" id="replay_subject">
                                                        <input type="hidden" name="send_grid_id" id="send_grid_id">
                                                        <input type="hidden" name="replay_patient_id" id="replay_patient_id">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="webix_view webix_layout_line" style="white-space: nowrap; margin-left: 50px; width: 90%;" view_id="$layout15">
                                                <div id="attachfile-section" class="small-12" style="float:left; margin-top:10px; margin-bottom:10px;">
                                                    <ul class="attach-file" style="padding-left:12px; list-style:none;">
                                                        <li>
                                                            <div id="attachfile-section-replay">
                                                                <div id="uploaded_file_list_replay"></div>
                                                                <div id="file_browse_wrapper_replay">
                                                                    <input type="file" name="fileAttachReplay[]" id="fileAttachReplay" multiple class="multi maxsize-2048">
                                                                </div>
                                                                <p class="attach pt-1">
                                                                    <span style="color:#ff000075">Note : Upload files less than 2MB Size </span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="webix_view webix_layout_line" style="white-space: nowrap; margin-left: 0px; margin-top: 10px;  height: 38px;" view_id="$layout14">
                                                <div class="webix_view webix_spacer" view_id="$spacer8" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 72%; height: 38px;"></div>
                                                {{-- <div class="webix_view webix_control webix_el_icon" view_id="$icon9" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 10px; width: 38px; height: 38px;">
                                                    <div class="webix_el_box" style="width:38px;height:38px;line-height:0px;margin-top:0px"><button type="button" style="height:38px;width:38px;" class="webix_icon_button"><span class="webix_icon mdi mdi-paperclip"></span></button></div>
                                                </div> --}}
                                                <div class="webix_view webix_control webix_el_button webix_primary" view_id="$button2" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 10px; width: 80px; height: 38px;">
                                                    <div class="webix_el_box" style="width:80px; height:38px">
                                                        <button type="button" class="btn btn-primary" onclick="sendReplay()">Send</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mail_content compose_content" style="display:none; white-space:nowrap; width:100%; height:850px; background:white;">

                                <div id="cat" class="col-12" style="float:left; padding-top:15px; border-top:1px solid #ccc;">

                                    <form action="#" method="post" enctype="multipart/form-data" name="messages_form" id="messages_form">
                                        @csrf

                                        <div class="tab-top-bar small-12">
                                            {{-- <i class="fa fa-address-book compose-address-book-icon" onclick="addressBookView()"></i> --}}
                                            <div class="col-lg-11" style="float:left; margin-bottom:10px; margin-left:5px;">
                                                <div class="col-2 font-weight-bolder" style="float:left;">To:</div>
                                                <div class="small-7" style="float:left; width:81%;">
                                                    <div style="width:80%; min-height:auto; height:auto;">
                                                        <div id="email_input_addTag">
                                                            <input type="email" name="to_email" id="to_email" class="tag-input ui-autocomplete-input form-control" value="" placeholder="Enter email" autocomplete="do-not-autofill">
                                                            <div id="email_suggestion_box" style="position:absolute; background:white; border:1px solid #ccc; width:81%; z-index:99; display:none;"></div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="email_inserted_id" id="email_inserted_id" value="">
                                                    <input type="hidden" name="from_user_email" id="from_user_email" value="{{ $userEmail }}">
                                                    <input type="hidden" name="patient_id" id="patient_id" value="">
                                                    <input type="hidden" name="email_status" id="email_status" value="1">
                                                </div>
                                            </div>

                                            <div class="col-lg-11" style="float:left; margin-bottom:10px; margin-left:5px;">
                                                <div class="col-2 font-weight-bolder" style="float:left;">Subject: </div>
                                                <div class="small-7" style="float:left; width:81%;">
                                                    <input type="text" name="email_subject" id="email_subject" class="editprof form-control" autocomplete="off">
                                                </div>
                                            </div>

                                            <div id="new-msg-area" class="col-12">
                                                <div class="col-lg-12 font-weight-bolder" style="float:left;">
                                                    <span>Message:</span>
                                                    <textarea placeholder="Type here" name="email_content" id="email_content"></textarea>
                                                </div>

                                                <div id="attachfile-section" class="small-12"
                                                    style="float:left; margin-top:10px; margin-bottom:10px;">
                                                    <ul class="attach-file" style="padding-left:12px; list-style:none;">
                                                        <li>
                                                            <div id="attachfile-section">
                                                                <div id="uploaded_file_list"></div>
                                                                <div id="file_browse_wrapper">
                                                                    <input type="file" name="fileAttach[]" id="fileAttach" multiple class="multi maxsize-2048">
                                                                </div>
                                                                <p class="attach pt-1">
                                                                    <span style="color:#ff000075">Note : Upload files less than 2MB Size </span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div id="buttons-panel" class="col-lg-12" style="float:left; margin-top:5px;">
                                                    <div class="small-3" style="float:left; margin-left:15px;"></div>
                                                    <div class="small-1 columns" style="float:left;">
                                                        <input type="button" name="draft" class="btn btn-primary font-weight-bold mr-2" id="save_draft" value="Send" onclick="stopAutoSaveAndSend()">
                                                    </div>
                                                    <div class="small-1 columns" style="float:left;">
                                                        <a href="#?" onclick="newMessage()">
                                                            <input type="button" class="btn btn-light font-weight-bold" style="float:right" value="Discard">
                                                        </a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="address_book_view" style="display:none; white-space:nowrap; width:100%; height:850px; background:white;">

                                <div id="cat" class="col-12" style="padding-top:15px;">
                                    <i class="fa fa-address-book addressbook-address-book-icon" onclick="addressBookView()"></i>
                                    <div class="row">
                                        <div class="col-10 font-weight-bolder" style="float:left;">Address Book:</div>
                                        <div class="col-12" id="address_book_list">
                                            <table id="addressBookTable" class="table" style="width:100%; display:none;">
                                                <thead>
                                                    <tr>
                                                        <th>Patient Name</th>
                                                        <th>Patient Email</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="no_data" style="display:none; white-space:nowrap; width:100%;">
                                
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="tagModal" tabindex="-1">
    <div class="modal-dialog" style="width: 650px;">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Create Folder</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<i aria-hidden="true" class="ki ki-close"></i>
				</button>
            </div>

            <div class="modal-body">
                {{-- <label>Parent Folder</label>
                <select class="form-control" id="group_parent_id">
                    <option value="1">Inbox</option>
                    @foreach($email_groups as $group)
                        @if($group->group_parent_id > 0)
                        <option value="{{ $group->id }}">{{ $group->group_description }}</option>
                        @endif
                    @endforeach
                </select> --}}
                <input type="hidden" class="form-control" id="group_parent_id" name="group_parent_id" value="1">
                <label class="mt-2">Folder Name</label>
                <input type="text" class="form-control" id="tag_name" name="tag_name" placeholder="Please enter a folder name" maxlength="20">
            </div>

            <div class="modal-footer">
                <button type="button" id="saveTagBtn" class="btn btn-primary">Save</button>
            </div>

        </div>
    </div>
</div>
<div id="divLoading" class="tabloadershow"></div>
<input type="hidden" name="selectedGroupId" id="selectedGroupId">
<input type="hidden" name="openedMailId" id="openedMailId">

<script type="text/javascript" src="{{ url('assets/emails/js/webix.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/emails/js/vendor.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="{{ $chat_js_url }}"></script>

<script type="text/javascript">
let emailEditor = null;
let replyEditor   = null;
let currentFolderId = 1;
let allowAutoSave = true;
let dt = new DataTransfer();
let dtReplay = new DataTransfer();
let maxSize = 2 * 1024 * 1024;

var socket2 = io.connect('{{ $chat_url }}', {'transports': ['websocket', 'polling']});
socket2.on('dashboard_notifications', (data) => {
    let type = data.type;
    console.log('sock type',type);
    if(type=='inboundMailCount'){
        let selectedGroupIdTri = $('#selectedGroupId').val();
        if(selectedGroupIdTri == '1') {
            loadMailFolder(1, null, null, 'socket');
            highlightFolder(1);
        }
    }
});

function debounce(fn, delay){
    let t;
    return function(){
        clearTimeout(t);
        t = setTimeout(fn, delay);
    };
}
const debouncedAutoSave = debounce(autoSaveDraft, 1000);

function showCompose() {
    $('.mail_list_col').hide();
    $('#right_col').removeClass('col-8').addClass('col-12');
    $('.inbox_content').hide();
    $('.mail_preview').hide();
    $('#emails-header-row').addClass('hide-header');
    $('#inbox_select_all').prop('checked', false);
    $('#actions_div').hide();
    $('.sidebarMenu .webix_tree_item').removeClass('webix_selected');
    $('.address_book_view').hide();
    $('#to_email').val('');
    $('#email_subject').val('');
    $('#email_inserted_id').val('');
    $('#patient_id').val('');
    if(emailEditor) emailEditor.setData('');
    $('.compose_content').show();
    $('.no_data').hide();
}

function showPreview(){
    resetAttachments();
    $('.mail_list_col').show();
    $('#right_col').removeClass('col-12').addClass('col-8');
    $('.inbox_content').show();
    $('.mail_preview').show();
    $('.compose_content').hide();
    $('#emails-header-row').removeClass('hide-header');
    $('.address_book_view').hide();
    $('#actions_div').show();
    $('.action_icon').show();
}

function showInboxHeader(){
    $('#emails-header-row').removeClass('hide-header');
}

$(document).on('click', '.action_icon', function (e) {
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
});

function disableAllActionIcons(){
    $('#actions_div').show();
    $('.action_icon').removeClass('enabled').addClass('disabled');
}

function enableBasicActionIcons(){
    $('#actions_div').show();
    $('.action_icon').removeClass('disabled').addClass('enabled');
    $('.inbox_select_all').prop("disabled", false);
}

function applyBodyFont(editor) {
    const bodyStyle = window.getComputedStyle(document.body);

    editor.editing.view.change(writer => {
        const root = editor.editing.view.document.getRoot();

        writer.setStyle('font-family', bodyStyle.fontFamily, root);
        writer.setStyle('font-size', bodyStyle.fontSize, root);
        writer.setStyle('font-weight', 'normal', root);
        writer.setStyle('line-height', bodyStyle.lineHeight, root);
    });
}
ClassicEditor
    .create(document.querySelector('#email_content'), {
        toolbar: [
            'undo', 'redo',
            'heading',
            'bold', 'italic',
            'link',
            'insertTable',
            'blockQuote',
            'bulletedList', 'numberedList',
            'alignment'
        ]
    })
    .then(editor => {
        emailEditor = editor;
        editor.setData('');
        applyBodyFont(editor);
        editor.model.document.on('change:data', function () {
            debouncedAutoSave();
        });
    })
    .catch(error => {
        console.error(error);
    });
ClassicEditor
    .create(document.querySelector('#replay_text'), {
        toolbar: [
            'undo', 'redo',
            'heading',
            'bold', 'italic',
            'link',
            'insertTable',
            'blockQuote',
            'bulletedList', 'numberedList',
            'alignment'
        ]
    })
    .then(editor => {
        replyEditor = editor;
        editor.setData('');
        applyBodyFont(editor);
    })
    .catch(error => {
        console.error(error);
    });

$('#compose_mail').on('click', function(){
    if (emailEditor) emailEditor.setData('');
    resetActionIcons();
    showCompose();
});
$(document).ready(function () {

    loadMailFolder(1);
    highlightFolder(1);
    $('#selectedGroupId').val('1');

    $(document).on('change', '.inbox_select_all', function(){
        const checked = this.checked;
        $('.inbox_select:not(:disabled)').prop('checked', checked);

        resetActionIcons();
    });

    $(document).on('change', '.inbox_select', function(){
        const $enabled = $('.inbox_select:not(:disabled)');
        const total = $enabled.length;
        const selected = $enabled.filter(':checked').length;

        $('.inbox_select_all').prop('checked', total > 0 && selected === total);

        resetActionIcons();
    });

    $(document).on('click', '.sidebarMenu .webix_tree_item', function(){
        $('.sidebarMenu .webix_tree_item').removeClass('webix_selected');
        $(this).addClass('webix_selected');
    });

    let searchAjax = null;
    let typingTimer = null;
    let selectingSuggestion = false;
    const debounceDelay = 300;

    $("#to_email").on("keyup", function () {

        if (selectingSuggestion) return;
        let search = $(this).val().trim();

        if (search.length < 1) {
            $("#email_suggestion_box").hide();
            return;
        }

        clearTimeout(typingTimer);
        typingTimer = setTimeout(function () {

            if (searchAjax) {
                searchAjax.abort();
            }

            searchAjax = $.ajax({
                url: "{{ url('/addressBookSearch') }}",
                type: "GET",
                data: { q: search },
                success: function (data) {

                    if (!data || data.length === 0) {
                        $("#email_suggestion_box").hide();
                        return;
                    }

                    let html = "";
                    $.each(data, function (index, item) {
                        html += `
                            <div class="suggest-item"
                                data-email="${item.email}"
                                data-patient_id="${item.patient_id}"
                                style="padding:8px; cursor:pointer;">
                                ${item.email} &lt;${item.lname}, ${item.fname}&gt;
                            </div>`;
                    });
                    $("#email_suggestion_box").html(html).show();
                }
            });

        }, debounceDelay);
    });

    $(document).on("mousedown", ".suggest-item", function (e) {
        e.preventDefault();
        selectingSuggestion = true;
        $("#to_email").val($(this).data("email"));
        $("#patient_id").val($(this).data("patient_id"));
        $("#email_suggestion_box").hide();

        setTimeout(() => {
            selectingSuggestion = false;
        }, 100);
    });

});

function highlightFolder(folder_id){
    $('.sidebarMenu .webix_tree_item').removeClass('webix_selected');
    $('.sidebarMenu .webix_tree_item').each(function(){
        if($(this).data('group-id') == folder_id){
            $(this).addClass('webix_selected');
        }
    });
}

function loadMailsContent(folder_id, flag = null){
    currentFolderId = folder_id;
    highlightFolder(folder_id);
    loadMailFolder(folder_id, null, flag, null);
    $('#selectedGroupId').val(folder_id);
}

function extractPreview(html) {
    html = html.replace(/<style[\s\S]*?<\/style>/gi, "")
               .replace(/<meta[\s\S]*?>/gi, "")
               .replace(/<script[\s\S]*?<\/script>/gi, "");
               
    html = html.replace(/On\s.*wrote:/gi, "");
    html = html.replace(/class="gmail_quote[\s\S]*$/gi, "");
    html = html.replace(/id="divRplyFwdMsg"[\s\S]*$/gi, "");
    
    html = html.replace(/Thanks and Regards[\s\S]*/gi, "");
    html = html.replace(/--\s*<br>[\s\S]*/gi, "");
    
    html = html.replace(/<img[\s\S]*?>/gi, "");
    
    let text = $("<div>").html(html).text();
        
    text = text.replace(/\s+/g, " ").trim();
    
    return text.substring(0, 40) + (text.length > 40 ? "..." : "");
}
function loadMailFolder(folder_id, selectedEmailId = null, flag = null, socketFlag = null){
    $('.address_book_view').hide();
    $('.mail_list_col').show();
    $('.inbox_content').show();
    $('.mail_preview').hide();
    $('.no_data').hide();
    $('.compose_content').hide();

    $('#selectedGroupId').val(folder_id);
    if (folder_id == 4) {
        $('.move_mail').removeClass('enabled').addClass('disabled');
    }
    if(socketFlag != 'socket') {
        $('#divLoading').show();
    }
    $('.inbox_select_all').prop('checked', false);
    resetActionIcons();
    $('#actions_div').hide();
    $('#searchEmail').val('');

    $.post("{{ url('/loadMailFolder') }}",
        { folder_id: folder_id, flag: flag, _token: '{{ csrf_token() }}' },
        function(res){

            let html = "";

            if (res.emails.length > 0) {
                enableBasicActionIcons();
                resetActionIcons(); 

                $('.mail_list_col').removeClass('col-0').addClass('col-4').show();
                $('#right_col').removeClass('col-12').addClass('col-8').show();
                $('#inbox_select_all').closest('.header-left').show();
                $('.action_icon').show();

                $.each(res.emails, function (i, mail) {
                    let created = mail.created_date ? mail.created_date : "";
                    let subject = mail.email_subject ? mail.email_subject : "(No Subject)";
                    let bodyText = extractPreview(mail.email_content || "");

                    html += `<div class="webix_list_item inboxItem email_row ${mail.email_read_flag == 0 ? 'flagUnread' : 'flagRead'}" 
                        data-id="${mail.id}" data-group_id="${mail.email_group_id}" data-read="${mail.email_read_flag}" style="cursor:pointer;">
                        <div class="inboxWrapp flex wide" style="padding: 5px 10px;">
                            <div class="flex flexColumn wide">
                                <div class="flex spaceBetween wide alignCenter">
                                    <div class="flex alignCenter">
                                        <input type="checkbox" class="inbox_select" value="${mail.id}" style="margin-right:12px;">
                                        <span class="inboxSubject"><span style="color: #FF0000;">${mail.email_group_id == 4 ? 'Draft ' : ''}</span><b>${subject}</b></span>
                                    </div>
                                </div>
                                <span class="smTextLight" style="text-align: end;">${created}</span>
                                <div class="flex">
                                    <div style="width:28px;"></div>
                                    <span class="inboxMessage">${bodyText}</span>
                                </div>
                            </div>
                        </div>
                    </div>`;
                });

                $('.inbox_list').html(html);
                $('.inbox_mails_count').html(res.inboxCount);
                $('.draft_mails_count').html(res.draftCount);

                dtReplay = new DataTransfer();
                $('#fileAttachReplay').val('');
                $('#uploaded_file_list_replay').html('');
                if (res.email_group_id == 4 && res.emails.length > 0) {
                    loadDraftById(res.emails[0].id);
                }
                if(socketFlag != 'socket') {
                    if (res.email_group_id != 4) {
                        if (selectedEmailId) {
                            showInbox(selectedEmailId);
                            $("#openedMailId").val(selectedEmailId);
                        } else if (res.email_id) {
                            showInbox(res.email_id);
                            $("#openedMailId").val(res.email_id);
                        } else {
                            showInbox(res.emails[0].id);
                            $("#openedMailId").val(res.emails[0].id);
                        }
                    }
                } else {
                    var openedMailId = $("#openedMailId").val();
                    $(`.email_row[data-id="${openedMailId}"]`).addClass('mail_active');
                    showPreview();
                }

                showInboxHeader();

            } else {
                disableAllActionIcons();
                if(flag == null) {
                    $('.mail_list_col').removeClass('col-4').addClass('col-0').hide();
                    $('#right_col').removeClass('col-8').addClass('col-12').show();
                    $('#emails-header-row').removeClass('hide-header');
                    $('#inbox_select_all').closest('.header-left').hide();
                    $('.action_icon').show();
                    $('.inbox_list').html('');
                    $('.mail_preview').hide();
                    $('.inbox_content').hide();

                    $('.no_data').show().html(`
                        <div class="no-email-message">No emails found in this folder.</div>
                    `);
                } else {
                    $('.mail_list_col').removeClass('col-4').addClass('col-0').hide();
                    $('#right_col').removeClass('col-8').addClass('col-12').show();
                    $('#emails-header-row').removeClass('hide-header');
                    $('#inbox_select_all').closest('.header-left').hide();
                    $('.action_icon').show();
                    $('.inbox_list').html('');
                    $('.mail_preview').hide();
                    $('.inbox_content').hide();

                    $('.no_data').show().html(`
                        <div class="no-email-message">No unread emails found.</div>
                    `);
                }
            }
        }
    ).always(function(){
        $('#divLoading').hide();
    });
}

function showInbox(email_id){
    $('.mail_list_col').show();
    $('#right_col').removeClass('col-12').addClass('col-8');
    $('.inbox_content').show();
    $('.mail_preview').hide();
    $('.compose_content').hide();
    $('#emails-header-row').removeClass('hide-header');
    $('.address_book_view').hide();
    if (replyEditor) replyEditor.setData('');
    
    $('#divLoading').show();
    openedEmailId = email_id;
    $("#openedMailId").val(email_id);
    // $('.email_row').removeClass('mail_active');
    // $(`.email_row[data-id="${email_id}"]`).addClass('mail_active');
    $('.inbox_select').prop('checked', false);

    $.post("{{ url('/loadMailPreview') }}",
        { email_id: email_id, _token: '{{ csrf_token() }}' },
        function (res) {
            let e = res.data || {};
            let attachments = res.data.attachments || [];
            let attachHtml = "";

            $('.inbox_mails_count').html(res.data.inboxCount);
            $('.draft_mails_count').html(res.data.draftCount);

            $.each(attachments, function (i, a) {
                attachHtml += `<a href="${a.attachment_url}" target="_blank">📎 ${a.attachment_name}</a><br>`;
            });
            openedEmailReadFlag = e.email_read_flag;
            if(openedEmailReadFlag == '1') {
                $(`.email_row[data-id="${email_id}"]`).removeClass('flagUnread').addClass('flagRead');
            }
            $(".mailSubject").html(e.email_subject || "(No Subject)");
            $(".mailDate").html(e.created_date || "");
            $(".mailFrom").html(e.from_email || "");
            $(".mailTo").html(e.to_email || "");
            $(".mailBody").html(e.email_content || "");
            $(".mailAttachments").html(attachHtml);
            //$(".mailItem").html(e.from_email || "");
            $("#replay_id").val(e.id || "");
            if(e.email_group_id == 2) {
                $(".mailItem").html(e.to_email || "");
                $("#replay_to").val(e.valid_to_email || "");
            } else {
                $(".mailItem").html(e.from_email || "");
                $("#replay_to").val(e.valid_from_email || "");
            }
            $("#replay_subject").val(e.email_subject || "");
            $("#send_grid_id").val(e.send_grid_id || "");
            $("#replay_patient_id").val(e.patient_id || "");
            $(`.email_row[data-id="${email_id}"]`).addClass('mail_active');

            showPreview();
            showInboxHeader();
            resetActionIcons();
        }
    ).always(function(){
        $('#divLoading').hide();
    });
}

function newMessage() {
    resetAttachments();
    $('#messages_form')[0].reset();
    $('#email_inserted_id').val('');

    if (emailEditor) {
        emailEditor.setData('');
    }
    lastDraft = "";
    allowAutoSave = true;
    showCompose();
}

function stopAutoSaveAndSend() {
    allowAutoSave = false;
    sendMessage();
}
function sendMessage() {
    allowAutoSave = false;
    let to_email = $('#to_email').val();
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    let email_subject = $('#email_subject').val();
	let patient_id = $('#patient_id').val();

    if(to_email == '') {
        swal('Please select an email address');
        return false;
    }
    if (!emailPattern.test(to_email)) {
        swal('Please select a valid email address');
        return false;
    }
    if(patient_id == '') {
        swal('Please select an email address from suggestions');
        return false;
    } 
    if(email_subject == '') {
        swal('Please enter a subject');
        return false;
    } 
    if (emailEditor) {
        let email_content = emailEditor.getData().trim();
        let plainText = email_content.replace(/<[^>]*>/g, '').trim();
        if (plainText === "") {
            swal('Please enter the Message');
            return false;
        }
        $('#email_content').val(email_content);
    }


    let formData = new FormData(document.getElementById("messages_form"));
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('email_group_id', 2);

    $('#divLoading').show();
    $.ajax({
        url: "{{ url('/composeEmail') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            $('#divLoading').hide();

            if (response.status === 'success') {
                swal('Your email has been sent successfully.');
                resetAttachments();
                allowAutoSave = false;
                newMessage();
                loadMailFolder(2);
                highlightFolder(2);
                $('#selectedGroupId').val('2');
            } else {
                swal(response.message || 'Sending failed');
            }
        },
        error: function (xhr) {
            $('#divLoading').hide();
            let msg = 'Something went wrong. Please try again later.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                msg = xhr.responseJSON.message;
            }
            swal(msg);
        }
    });
}

$(document).on("click", ".suggest-item", function () {
    $("#to_email").val($(this).data("email"));
    $("#patient_id").val($(this).data("patient_id"));
    $("#email_suggestion_box").hide();

    autoSaveDraft();
});

$(document).on('input', '#email_subject', function () {
    const val = $(this).val().trim();
    if (val.length < 2) return;
    debouncedAutoSave();
});
$(document).on('blur', '#email_subject', function () {
    autoSaveDraft(); // final save on leaving field
});

setInterval(function(){
    autoSaveDraft();
}, 30000);

let lastDraft = "";
let isDraftSaving = false;
function autoSaveDraft() {
    if (!allowAutoSave) return;
    if (!emailEditor) return;
    if (!$('.compose_content').is(':visible')) return;
    if (isDraftSaving) return;

    let to      = $('#to_email').val().trim();
    let subject = $('#email_subject').val().trim();
    let content = emailEditor.getData().trim();
    let email_inserted_id = $('#email_inserted_id').val();
    let email_status = $('#email_status').val();
    
    if (!to && !subject && !content) return;

    let currentSnapshot = to + '|' + subject + '|' + content;
    if (currentSnapshot === lastDraft) return;
    isDraftSaving = true;
    lastDraft = currentSnapshot;

    $('#email_content').val(content);

    let formData = new FormData(document.getElementById("messages_form"));
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('email_group_id', 4);
    formData.append('email_inserted_id', email_inserted_id);
    formData.append('email_status', email_status);

    $.ajax({
        url: "{{ url('/composeEmail') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
            if (res.id && !email_inserted_id) {
                $('#email_inserted_id').val(res.id);
            }
            console.log("Draft saved");
        },
        complete: function () {
            isDraftSaving = false;
        },
        error: function () {
            console.log("Auto-save failed");
        }
    });
}
function openTagModal() {
    $('#tagModal').modal('show');
}

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

    let tag_name = $('#tag_name').val().trim();
    let group_parent_id = $('#group_parent_id').val();

    if (tag_name === "") {
        swal("Please enter a folder name");
        return;
    }

    $.ajax({
        url: "{{ url('/saveTag') }}",
        type: "POST",
        data: {
            tag_name: tag_name,
            group_parent_id: group_parent_id,
            _token: "{{ csrf_token() }}"
        },
        beforeSend: function () {
            $("#saveTagBtn").prop("disabled", true);
        },
        success: function (res) {
            $("#saveTagBtn").prop("disabled", false);
            if (res.status !== 'success') {
                swal("Something went wrong");
                return;
            }
            $('#tagModal').modal('hide');

            $("#tag_list_area").append(`
                <div class="webix_tree_item work" data-id="${res.id}" style="cursor:pointer; padding-left: 20px;">
                    <div class="row align-items-center">
                        <div class="col-10 col-sm-10 col-md-10 col-xl-10">
                            <a href="javascript:void(0)" onclick="loadMailsContent(${res.id})" style="color: #475466">
                                <i class="fa fa-folder"></i> ${res.tag_name}
                            </a>
                        </div>
                        <div class="col-2 col-sm-2 col-md-2 col-xl-2 text-end">
                            <i class="fa fa-trash fa-sm delete-folder-icon" onclick="deleteEmailFolder(${res.id})" style=" color: #000;"></i>
                        </div>
                    </div>
                </div>`);

            $("#moveFolderList").append(`
                <li class="moveFolderListTree" onclick="event.stopPropagation(); moveEmail(${res.id})" data-id="${res.id}" style="border-bottom: 1px solid #d1c7c7;">
                    <i class="fa fa-folder"></i> ${res.tag_name}
                </li>`);

            $("#tag_name").val('');
            refreshList();
            swal("Folder created successfully");
        },
        error: function () {
            $("#saveTagBtn").prop("disabled", false);
            swal('Server error. Try again');
        }
    });
});

let openedEmailId = null;
let openedEmailReadFlag = null;

function isDraftFolder() {
    return Number($('#selectedGroupId').val()) === 4;
}

function hasCheckedEmails() {
    return $('.inbox_select:checked').length > 0;
}

function resetActionIcons(){
    let checked = $('.inbox_select:checked');
    let hasSelection = checked.length > 0;
    let hasDraftSelected = false;
    let currentFolder = Number($('#selectedGroupId').val());

    checked.each(function(){
        let row = $(this).closest('.email_row');
        if (Number(row.data('group_id')) === 4) {
            hasDraftSelected = true;
        }
    });

    $('#actions_div').show();

    $('.read_mail, .unread_mail, .delete_mail, .move_mail').removeClass('enabled').addClass('disabled');

    if (!hasSelection) return;

    $('.delete_mail').removeClass('disabled').addClass('enabled');

    if (currentFolder !== 4 && !hasDraftSelected) {
        $('.read_mail, .unread_mail').removeClass('disabled').addClass('enabled');
    }

    if (!hasDraftSelected) {
        $('.move_mail').removeClass('disabled').addClass('enabled');
    }
}


function enableActionIcons(){
    resetActionIcons();
}

$(document).on('change', '.inbox_select', function(){
    openedEmailId = null;
    if (hasCheckedEmails()) {
        enableActionIcons();
    } else {
        resetActionIcons();
    }
});

$(document).on('change', '.inbox_select_all', function(){
    if ($(this).is(':checked')) {
        enableActionIcons();
    } else {
        resetActionIcons();
    }
});

$(document).ready(function () {
    resetActionIcons();
});

// $(document).on('click', '.email_row', function(e){
//     if($(e.target).is('.inbox_select')) return;

//     openedEmailId = $(this).data('id');
//     showInbox(openedEmailId);
//     openedEmailReadFlag = $(this).data('read');
    
//     $(this).addClass('mail_active');
//     $('.inbox_select').prop('checked', false).trigger('change');

//     enableActionIcons();
// });
$(document).on('click', '.email_row', function (e) {

    if ($(e.target).is('.inbox_select')) return;

    let emailId  = $(this).data('id');
    let folderId = $(this).data('group_id');

    $('.email_row').removeClass('mail_active');
    $(this).addClass('mail_active');

    if (folderId == 4) {
        loadDraftById(emailId);
        return;
    }

    dtReplay = new DataTransfer();
    $('#fileAttachReplay').val('');
    $('#uploaded_file_list_replay').html('');
    showInbox(emailId);
});

$('#compose_mail').on('click', function(){
    
});
function getSelectedEmails(){
    //if (openedEmailId) return [openedEmailId];      
    let ids = [];
    $('.inbox_select:checked').each(function(){
        ids.push($(this).val());
    });
    return ids;
}

function refreshList(){
    loadMailFolder(currentFolderId);
    highlightFolder(currentFolderId);
    resetActionIcons();
    $('#selectedGroupId').val(currentFolderId);
}

function addressBookView() {

    $('.mail_list_col, .inbox_content, .mail_preview, .compose_content').hide();
    $('#right_col').removeClass('col-8').addClass('col-12');
    $('#emails-header-row').addClass('hide-header');
    $('#inbox_select_all').prop('checked', false);
    $('#actions_div').hide();
    $('.sidebarMenu .webix_tree_item').removeClass('webix_selected');
    $('.address_book_view').show();
    $('#divLoading').show();    
    $.ajax({
        url: "{{ url('/getAddressBook') }}",
        type: "GET",
        success: function(res) {
            $('#divLoading').hide();
            if (res.status === "success") {
                if ($.fn.DataTable.isDataTable('#addressBookTable')) {
                    $('#addressBookTable').DataTable().clear().destroy();
                }

                let rows = "";

                $.each(res.data, function(i, item) {

                    let fname = item.fname ?? item.first_name ?? '';
                    let lname = item.lname ?? item.last_name ?? '';
                    let patient_id = item.patient_id ?? item.patient_id ?? '';
                    let email = item.email ?? '';

                    rows += `<tr class="address-row" data-email="${email}" data-patient="${patient_id}" style="cursor:pointer;">
                        <td>${lname}, ${fname} (UID-${patient_id})</td>
                        <td>${email}</td>
                    </tr>`;
                });

                $("#addressBookTable tbody").html(rows);
                $("#addressBookTable").show();
                $('#addressBookTable').DataTable({
                    pageLength: 10,
                    searching: true,
                    ordering: false,
                    lengthChange: false
                });
            }
        }
    });
}

</script>
<script>
function markRead() {
    let selected_group_id = $('#selectedGroupId').val();
    if (!getSelectedEmails().length) return;
    //loadMailsContent(selected_group_id, '1');
    if (!$('.read_mail').hasClass('enabled')) return;

    $(".tabloadershow").show();
    $.ajax({
        url: "{{ url('/markAsRead') }}",
        type: "POST",
        data: {
            email_ids: getSelectedEmails(),
            status_flag: 1,
            _token: "{{ csrf_token() }}"
        },
        success: function () {
            refreshList();
            $(".tabloadershow").hide();
        }
    });
}

function markUnread() {
    let selected_group_id = $('#selectedGroupId').val();
    if (!getSelectedEmails().length) return;
    //loadMailsContent(selected_group_id, '0');
    if (!$('.read_mail').hasClass('enabled')) return;

    $(".tabloadershow").show();
    $.ajax({
        url: "{{ url('/markAsUnread') }}",
        type: "POST",
        data: {
            email_ids: getSelectedEmails(),
            status_flag: 0,
            _token: "{{ csrf_token() }}"
        },
        success: function () {
            refreshList();
            $(".tabloadershow").hide();
        }
    });

}

function deleteEmail() {
    if ($('.delete_mail').hasClass('disabled')) return;

    let selected_group_id = $('#selectedGroupId').val();
    if (!getSelectedEmails().length) return;
    var post_url = "{{ url('/deleteMail') }}";

    swal({
        title: "Do you want to delete the email(s)?",
        text: "",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#218838',
        cancelButtonColor: '#dc3545',
        cancelButtonText: "No",
        confirmButtonText: 'Yes',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showLoaderOnConfirm: true,
        preConfirm: function() {
            $(".tabloadershow").show();
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "POST",
                    url: post_url,
                    data: {
                        email_ids: getSelectedEmails(),
                        group_id: selected_group_id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(result) {
                        $(".tabloadershow").hide();
                        swal("Deleted successfully");
                        refreshList();
                        resolve();
                    },
                    error: function() {
                        $(".tabloadershow").hide();
                        swal("Delete failed");
                        refreshList();
                        reject();
                    }
                });
            });
        }
    });
}

// function toggleMoveDropdown() {
//     if ($('.move_mail').hasClass('disabled')) return;

//     let $dropdown = $('#globalMoveDropdown');
//     let $btn = $('#btnMoveDropdown');

//     if ($dropdown.is(':visible')) {
//         $dropdown.hide();
//         return;
//     }
//     if ($('#moveFolderList li.moveFolderListTree').length > 0) {
//         $('#moveFolderList .no_folders').remove();
//     }
//     if ($('#moveFolderList li.moveFolderListTree').length === 0) {
//         $('#moveFolderList').append(`
//             <li class="no_folders" style="padding:8px; text-align:center; color:#999;">
//                 No folders
//             </li>
//         `);
//     }
//     let rect = $btn[0].getBoundingClientRect();
//     let dropdownHeight = 260;
//     let spaceBelow = window.innerHeight - rect.bottom;

//     let top;
//     if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
//         top = rect.top - dropdownHeight - 6;
//     } else {
//         top = rect.bottom + 6;
//     }

//     let left = rect.right - 240;

//     $dropdown.css({
//         top: top + 'px',
//         left: left + 'px'
//     }).show();
// }

function toggleMoveDropdown() {
    if ($('.move_mail').hasClass('disabled')) return;

    let $dropdown = $('#globalMoveDropdown');
    let $btn = $('#btnMoveDropdown');

    if ($dropdown.is(':visible')) {
        $dropdown.hide();
        return;
    }

    let rect = $btn[0].getBoundingClientRect();
    let dropdownHeight = 260;
    let spaceBelow = window.innerHeight - rect.bottom;

    let top;
    if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
        top = rect.top - dropdownHeight - 6;
    } else {
        top = rect.bottom + 6;
    }

    let left = rect.right - 240;

    $dropdown.css({
        top: top + 'px',
        left: left + 'px'
    }).show();
}

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

$('#globalMoveDropdown').on('click', function (e) {
    e.stopPropagation();
});

$(window).on('scroll', function () {
    $('#globalMoveDropdown').hide();
});

$('.mail_preview').on('scroll', function () {
    $('#globalMoveDropdown').hide();
});

$('.inbox_content').on('scroll', function () {
    $('#globalMoveDropdown').hide();
});

$("#moveSearch").on("keyup", function () {
    let search = $(this).val().toLowerCase();
    $("#moveFolderList li").each(function () {
        $(this).toggle($(this).text().toLowerCase().includes(search));
    });
});

function moveEmail(folderId) {
    let emailIds = getSelectedEmails();
    if (!emailIds.length) return;

    $('#globalMoveDropdown').hide();
    $('.tabloadershow').show();

    $.ajax({
        url: "{{ url('/moveMail') }}",
        type: "POST",
        data: {
            email_ids: emailIds,
            group_id: folderId,
            _token: "{{ csrf_token() }}"
        },
        success: function (res) {
            $('.tabloadershow').hide();

            if (res.status === 'success') {
                refreshList();
                swal("Email moved successfully");
            } else {
                swal("Failed to move email");
            }
        },
        error: function () {
            $('.tabloadershow').hide();
            swal("Something went wrong. Try again");
        }
    });
}
function sendReplay() {
    let email_parent_id = $("#replay_id").val();
    let to_email        = $("#replay_to").val();
    let subject         = $("#replay_subject").val() || "";

    subject = subject.trim();
    if (!subject.toLowerCase().startsWith("re:")) {
        subject = "Re: " + subject;
    }

    let replay_subject  = subject;
    let message         = '';
    let parentGridId    = $("#send_grid_id").val();
    let reply_email_id  = $("#reply_email_id").val();
    let replayPatientId = $("#replay_patient_id").val();
    let fromUserEmail   = $("#from_user_email").val();
    let replayFiles     = dtReplay.files;

    if (replyEditor) {
        let replay_text = replyEditor.getData().trim();
        let plainText   = replay_text.replace(/<[^>]*>/g, '').trim();

        if (plainText === "") {
            swal('Please enter a Message');
            return false;
        }
        message = replay_text;
        $('#replay_text').val(replay_text);
    }

    let formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('to_email', to_email);
    formData.append('email_subject', replay_subject);
    formData.append('email_content', message);
    formData.append('email_group_id', 2);
    formData.append('reply_email_id', reply_email_id);
    formData.append('parent_sendgrid_id', parentGridId);
    formData.append('patient_id', replayPatientId);
    formData.append('from_user_email', fromUserEmail);
    formData.append('email_parent_id', email_parent_id);
    if (replayFiles && replayFiles.length > 0) {
        for (let i = 0; i < replayFiles.length; i++) {
            formData.append('fileAttach[]', replayFiles[i]);
        }
    }
    $.ajax({
        url: "{{ url('/composeEmail') }}",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        beforeSend: function () {
            $(".tabloadershow").show();
        },
        success: function (res) {
            $(".tabloadershow").hide();
            if (res.status === 'success') {
                $("#replay_text").val("");
                $('#fileAttachReplay').val('');
                $('#uploaded_file_list_replay').html('');
                dtReplay = new DataTransfer();
                if (replyEditor) replyEditor.setData('');
                swal('Your email has been sent successfully.');
                newMessage();
                loadMailFolder(2);
                highlightFolder(2);
                $('#selectedGroupId').val('2');
            } else {
                swal('Something went wrong. Please try again later.');
            }
        },
        error: function () {
            $(".tabloadershow").hide();
            swal('Something went wrong. Please try again later.');
        }
    });
}
</script>
<script>
$(document).ready(function () {
    $("#fileAttach").on("change", function () {

        let files = this.files;
        let invalidFound = false;

        $.each(files, function (i, file) {
            if (file.size > maxSize) {
                invalidFound = true;
                return false;
            }
            dt.items.add(file);
        });

        if (invalidFound) {
            swal("Please upload files less than 2MB.");
            dt = new DataTransfer();
            $("#fileAttach")[0].files = dt.files;
            $("#uploaded_file_list").html("");
            return;
        }

        renderFileList();
        autoSaveDraft();
        $("#fileAttach")[0].files = dt.files;
    });

    // remove single file
    $(document).on("click", ".remove-file", function () {
        let index = $(this).data("index");

        let newDt = new DataTransfer();
        $.each(dt.files, function (i, file) {
            if (i !== index) {
                newDt.items.add(file);
            }
        });

        dt = newDt;
        $("#fileAttach")[0].files = dt.files;
        renderFileList();
        autoSaveDraft();
    });

    function renderFileList() {
        $("#uploaded_file_list").html("");

        $.each(dt.files, function (i, file) {
            $("#uploaded_file_list").append(`
                <div class="uploaded-file-item">
                    <span class="file-name">${shortenFileName(file.name)}</span>
                    <a href="javascript:void(0)" class="remove-file" data-index="${i}">
                        <img src="{{ url('assets/emails/photos/signs-close.png') }}" alt="Remove" style=" max-width: 60%;">
                    </a>
                </div>
            `);
        });
    }
    $("#fileAttachReplay").on("change", function () {

        let files = this.files;
        let invalidFound = false;

        $.each(files, function (i, file) {
            if (file.size > maxSize) {
                invalidFound = true;
                return false;
            }
            dtReplay.items.add(file);
        });

        if (invalidFound) {
            swal("Please upload files less than 2MB.");
            dtReplay = new DataTransfer();
            $("#fileAttachReplay")[0].files = dtReplay.files;
            $("#uploaded_file_list_replay").html("");
            return;
        }

        renderReplayFileList();
        $("#fileAttachReplay")[0].files = dtReplay.files;
    });

    $(document).on("click", ".remove-replay-file", function () {
        let index = $(this).data("index");

        let newDt = new DataTransfer();
        $.each(dtReplay.files, function (i, file) {
            if (i !== index) {
                newDt.items.add(file);
            }
        });

        dtReplay = newDt;
        $("#fileAttachReplay")[0].files = dtReplay.files;
        renderReplayFileList();
    });

    function renderReplayFileList() {
        $("#uploaded_file_list_replay").html("");

        $.each(dtReplay.files, function (i, file) {
            $("#uploaded_file_list_replay").append(`
                <div class="uploaded-file-item">
                    <span class="file-name">${shortenFileName(file.name)}</span>
                    <a href="javascript:void(0)" class="remove-replay-file" data-index="${i}">
                        <img src="{{ url('assets/emails/photos/signs-close.png') }}" alt="Remove" style=" max-width: 60%;">
                    </a>
                </div>
            `);
        });
    }
    
    function shortenFileName(name, maxLength = 50) {
        if (name.length <= maxLength) return name;

        let extIndex = name.lastIndexOf('.');
        let ext = extIndex !== -1 ? name.substring(extIndex) : '';
        let base = name.substring(0, maxLength - ext.length - 3);

        return base + '...' + ext;
    }
});

function deleteEmailFolder(id) {
    //if (!getSelectedEmails().length) return;
    var post_url = "{{ url('/deleteEmailFolder') }}";

    swal({
        title: "Do you want to delete the Folder?",
        text: "",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#218838',
        cancelButtonColor: '#dc3545',
        cancelButtonText: "No",
        confirmButtonText: 'Yes',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showLoaderOnConfirm: true,
        preConfirm: function() {
            $(".tabloadershow").show();
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "POST",
                    url: post_url,
                    data: {
                        id: id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(result) {
                        $(".tabloadershow").hide();
                        $(`.webix_tree_item[data-id="${id}"]`).remove();
                        $(`.moveFolderListTree[data-id="${id}"]`).remove();
                        loadMailFolder(1);
                        highlightFolder(1);
                        swal("Deleted successfully");
                    },
                    error: function() {
                        $(".tabloadershow").hide();
                        loadMailFolder(1);
                        highlightFolder(1);
                        swal("Delete failed");
                    }
                });
            });
        }
    });
}

$('#searchEmail').on('keyup', function () {
    let keyword = $(this).val().trim();

    if (keyword.length < 1) {
        $('#emailSearchSuggest').hide().html("");
        return;
    }

    $.post("{{ url('/searchEmails') }}", {
        search: keyword,
        suggest: true,
        _token: "{{ csrf_token() }}"
    },
    function(res){
        buildSuggestionList(res.emails);
    });
});

function buildSuggestionList(emails) {
    let html = "";

    if (emails.length > 0) {
        emails.forEach(m => {
            html += `
                <a href="javascript:void(0)" class="list-group-item list-group-item-action suggestion-item"
                   data-id="${m.id}"
                   data-folder="${m.email_group_id}">
                   
                   <div><b>${m.email_subject || '(No Subject)'}</b></div>
                   <div class="text-muted small">${m.from_email}</div>
                   <div class="text-muted small">${m.to_email}</div>

                </a>`;
        });
    }

    $('#emailSearchSuggest').html(html).show();
}

$(document).on('click', '.suggestion-item', function (e) {
    e.preventDefault();

    let emailId  = $(this).data('id');
    let folderId = $(this).data('folder');

    $('#emailSearchSuggest').hide();
    $('#searchEmail').val("");

    loadMailFolder(folderId, emailId);
    highlightFolder(folderId);
    $('#selectedGroupId').val(folderId);
});

$(document).click(function(e){
    if (!$(e.target).closest('#searchEmail, #emailSearchSuggest').length){
        $('#emailSearchSuggest').hide();
    }
});
$(document).on("click", ".address-row", function () {
    showCompose();
    $(".address_book_view").hide();
    
    let email = $(this).data("email");
    let patientId = $(this).data("patient");
    $("#to_email").val(email);
    $("#patient_id").val(patientId);

    if (emailEditor) {
        emailEditor.setData("");
    }
});

function showDraftLayout() {
    $('.mail_list_col').show();
    $('.inbox_content').show();
    $('#right_col').removeClass('col-12').addClass('col-8');
    $('.mail_preview').hide();
    $('.compose_content').show();
    $('#emails-header-row').removeClass('hide-header');
    $('#actions_div').hide();
}

function resetDraftState() {
    openedEmailId = null;
    $('#email_inserted_id').val('');
    $('#messages_form')[0].reset();
    if (emailEditor) emailEditor.setData('');
    $('#uploaded_file_list').html('');
}

function loadDraftById(draftId) {

    resetAttachments();
    $('#divLoading').show();
    lastDraft = "";
    allowAutoSave = true;
    resetDraftState();
    showDraftLayout();

    $.post("{{ url('/loadMailPreview') }}", {
        email_id: draftId,
        _token: '{{ csrf_token() }}'
    }, function (res) {

        let e = res.data || {};

        $('#to_email').val(e.to_email || '');
        $('#email_subject').val(e.email_subject || '');
        $('#email_inserted_id').val(e.id || '');
        $('#patient_id').val(e.patient_id || '');
        $('#email_status').val(e.email_status || '');

        if (emailEditor) {
            emailEditor.setData(e.email_content || '');
        }

        //renderExistingAttachments(e.attachments || []);

    }).always(function () {
        $('#divLoading').hide();
    });
}
// function renderExistingAttachments(attachments) {

//     $("#uploaded_file_list").html("");

//     if (!attachments.length) return;

//     attachments.forEach(function (a, i) {
//         $("#uploaded_file_list").append(`
//             <div class="uploaded-file-item">
//                 <span class="file-name">${a.attachment_name}</span>
//                 <button type="button" class="remove-existing-file"
//                         data-id="${a.id}">
//                     <i class="fa fa-trash"></i>
//                 </button>
//             </div>
//         `);
//     });
// }
function resetAttachments() {
    dt = new DataTransfer();
    const fileInput = document.getElementById('fileAttach');
    if (fileInput) {
        fileInput.value = '';
        fileInput.files = dt.files;
    }
    $('#uploaded_file_list').html('');
}
</script>
@endsection